@dso-toolkit/core 100.3.1 → 100.4.0

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -2,6 +2,9 @@ import { autoUpdate, computePosition, flip, offset, size } from "@floating-ui/do
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { createStore } from "@stencil/store";
 import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot - Menu items and content displayed inside the dropdown menu options list.
+ */
 export class DropdownMenu {
     constructor() {
         /**
@@ -200,7 +203,7 @@ export class DropdownMenu {
     }
     render() {
         const buttonId = uuidv4();
-        return (h(Host, { key: 'd6eecca58b117e847ed5e2d6c4749ccf1cf45ade', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '7bd4e3718dd56a7ed820fd7a0bff73299387bca0', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: 'f3db2d02fb532d0dce562de99447be5d2ba93111', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: 'b599fc40124282b4afd1f78e346dd736717ece81', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: 'ab2517807d8a940ce8d4fae40f9d657b416724dc' }, h("slot", { key: '746e632a7bf1e9e7d585dcf71660ef2944799db8' })))));
+        return (h(Host, { key: '898e03c9fb8dcd98b45cc42d05fe4f29cb408d07', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '94945d023367cbcd32d3d774fad82ec2f17ab50f', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '1ff9abf3f6f67587277d80514fb02c172dd5e65b', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: 'f1eca3859c3ba0cedd96a1631d155b0db5b401f9', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '7943c1d3063bc8972027f6e3b8dd0dd42561c2c9' }, h("slot", { key: '95f224579f8a636f03d0f6bf185105d005696297' })))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.js

@@ -1,5 +1,8 @@
 import { Host, h, } from "@stencil/core";
 import { clsx } from "clsx";
+/**
+ * @slot - Content to be shown or hidden when the expandable is toggled.
+ */
 export class Expandable {
     constructor() {
         /**
@@ -36,10 +39,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: '27aa43cd7a129ede2ac42e1f36957be51497bb80', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'a0469ae8e68f3d121fcdab6fc08b8a92018d9ab0', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: 'b9e104e23b5eeceebd860c607cb9c68dc1506184', class: "slot-container" }, h("slot", { key: 'd623667f451248271ebf78ee7896a51936e4c0cd' }))));
+            }) }, h("div", { key: '1fbfd59136f816df3d8b44c6c7dd54c8201435aa', class: "slot-container" }, h("slot", { key: '6e7247668ff0ea70589c3b654a2b52b22379a717' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-column/grid-column.js

@@ -28,8 +28,7 @@ export class GridColumn {
             event.preventDefault();
             this.dsoClose.emit({ originalEvent: event });
         };
-        this.handleDialogClose = (event) => {
-            this.dsoClose.emit({ originalEvent: event });
+        this.handleDialogClose = () => {
             if (this.overlayActive && this.dialogElement && !this.dialogElement.open) {
                 this.dialogElement.showModal();
             }
@@ -88,7 +87,7 @@ export class GridColumn {
         this.resizeObserver = undefined;
     }
     render() {
-        return (h(Host, { key: 'e02e6fcc5aa1c2e279c36cfab5bf661df6099c49' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
+        return (h(Host, { key: '603befb14663a71590e342c590f3ebde4d08be42' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
     }
     static get is() { return "dso-grid-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.css

@@ -18,9 +18,6 @@
   inline-size: 100%;
 }
 
-:host(:not([is-compact])) .dso-header {
-  align-items: center;
-}
 :host(:not([is-compact])) .dropdown-menu .dropdown-menu-options {
   inline-size: 375px;
 }
@@ -38,6 +35,7 @@ div[popover] {
   border-block-end: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   position: relative;
 }
 .dso-header .dso-nav {
@@ -53,7 +51,6 @@ div[popover] {
 
 .dso-header-session {
   display: flex;
-  align-items: center;
   margin-inline-start: auto;
 }
 .dso-header-session .profile .dso-tertiary,
@@ -79,16 +76,20 @@ div[popover] {
 .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;
+@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 {
@@ -109,6 +110,7 @@ div[popover] {
   line-height: normal;
   letter-spacing: inherit;
   position: relative;
+  padding-inline-start: 0;
 }
 .dropdown-menu button::after {
   margin-inline-start: 8px;
@@ -212,6 +214,21 @@ div[popover] {
 .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;
 }

package/dist/collection/components/header/header.js

@@ -9,6 +9,10 @@ import { isModifiedEvent } from "../../utils/is-modified-event";
 import { translations } from "./header.i18n";
 import { MenuItem } from "./menu-item.functional-component";
 const minDesktopViewportWidth = 992;
+const minMobileViewportWidth = 480;
+/**
+ * @slot logo - A slot to place the logo element (e.g. `dso-logo`) in.
+ */
 export class Header {
     constructor() {
         /**
@@ -129,6 +133,9 @@ export class Header {
     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.
@@ -271,7 +278,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '70ed6e8dc9a02875dd773c205af3549b324dfb8e', "is-compact": this.isCompact }, h("div", { key: 'ab3f94264421bca5caec2ae59f5b40f6934a440e', class: "dso-header" }, h("div", { key: 'f092ce977dcd3acd0d9620af8506cb138ee1f0a7', class: "logo-container" }, h("slot", { key: '898f5c094fd6dd18ec4e843a240c31081e2a9253', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: 'cb1ed3299e9c55352cab476696bd2d6ad94cbd54', "is-compact": this.isCompact }, h("div", { key: '218cefd65ca18da0237e39fba0aba06259119254', class: "dso-header" }, h("div", { key: 'c7681803acf271892e46819e3d9568ebc3ed849a', class: "logo-container" }, h("slot", { key: 'cba4cf96314214ee2af03501ede754c879d31fec', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];
@@ -287,12 +294,24 @@ export class Header {
             this.cleanUp = undefined;
         }
     }
+    renderHelp() {
+        return this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })));
+    }
+    renderLogin(tertiary = true) {
+        return this.loginUrl ? (h("a", { href: this.loginUrl, class: tertiary ? "dso-tertiary" : undefined, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, h("dso-icon", { icon: "user-outline" }), h("span", null, this.text("login")))) : (h("button", { class: tertiary ? "dso-tertiary" : undefined, type: "button", onClick: (e) => this.clickHandler(e, "login") }, h("dso-icon", { icon: "user-outline" }), h("span", null, this.text("login"))));
+    }
+    renderLogout() {
+        return this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout")));
+    }
+    renderHeaderSession() {
+        return (h("div", { class: "dso-header-session" }, !this.isCompact && (h(Fragment, null, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && h("div", { class: "login" }, this.renderLogin()), this.authStatus === "loggedIn" && h("div", { class: "logout" }, this.renderLogout()))), this.showHelp && !this.isMobileViewport && h("div", { class: "help" }, this.renderHelp())));
+    }
     renderCompact() {
-        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", { role: "menuitem" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", { role: "menuitem" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", { role: "menuitem" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))))))))))));
+        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", { role: "group" }, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", { role: "menuitem" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", { role: "menuitem" }, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedIn" && h("li", { role: "menuitem" }, this.renderLogout()), this.authStatus === "loggedOut" && h("li", { role: "menuitem" }, this.renderLogin()), this.showHelp && this.isMobileViewport && h("li", { role: "menuitem" }, this.renderHelp()))))))));
     }
     renderNormal() {
         this.menuItemElementRefs = [];
-        return (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
+        return (h(Fragment, null, (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("div", { class: "dropdown-menu", onFocusout: this.focusOutListener, ref: (element) => (this.dropdownElement = element) }, h("button", { id: uuidv4(), type: "button", onClick: () => this.toggleOptions(), ref: (element) => (this.dropdownButtonElement = element), "aria-haspopup": "menu", "aria-expanded": this.open ? "true" : "false" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { popover: "manual", ref: (element) => (this.popoverElement = element) }, h("div", { class: "dropdown-menu-options", role: "menu", "aria-labelledby": this.dropdownButtonElement?.id, onKeyDown: this.keyDownHandler }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
     }
     static get is() { return "dso-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,12 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot - A slot to place content inside the highlight box.
+ * @slot icon - A slot to display an icon inside the step counter instead of a step number.
+ */
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'a31042efc0e6676e06f08765d05320c2debe0b87', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ae5f42277bd801d07ac66467c652e211c8e8fe14', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '7d8424c37b64775e83f34eb3f2165e8965c428bd', name: "icon" }))), h("slot", { key: '22edb75de8bb54565157a80a7be1ab82b7b12773' })));
+        return (h(Host, { key: '91d00560a3617308d002684f4c67c940b16dc1c7', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ed7997c8e77b13b44e5a567ee31116ba937fc6c2', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '4993d27042a6a7839da8fd679625dbe17a1cd3b2', name: "icon" }))), h("slot", { key: 'bfab78815718775c72114b51730d229c1d2b3615' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-button/icon-button.js

@@ -1,10 +1,15 @@
 import { h } from "@stencil/core";
-import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { TooltipController } from "../../functional-components/tooltip/tooltip.controller";
 import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 export class IconButton {
     constructor() {
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
+        this.tooltipController = new TooltipController({
+            getReferenceElement: () => this.buttonElRef,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getPlacement: () => this.tooltipPlacement,
+            showDelay: 500,
+        });
         /**
          * The variant of the Icon Button.
          */
@@ -21,43 +26,13 @@ export class IconButton {
             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({
-                        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 });
         };
@@ -68,16 +43,11 @@ export class IconButton {
     async setFocus() {
         this.buttonElRef?.focus();
     }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
     disconnectedCallback() {
-        this.clearToolTipTimeout();
-        this.cleanUpTooltip();
+        this.tooltipController.dispose();
     }
     render() {
-        return (h("button", { key: 'dff33a98f0a06ee8c7875ea2361cf9dbb2033946', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'd4770a99eac2fb86e572b6a67595e948bbb8076e', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '0a8b3a5194d8fd3b1c7110f9a760b13e16b570d7', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (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 }, h("dso-icon", { key: 'a3c3df83e533e83df10f5b8d7926f70a49422e30', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '8e2334a4b4ecaecf91394a4743f5757bf3e3044e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/image-overlay/image-overlay.js

@@ -6,6 +6,11 @@ const wijzigactieLabels = {
 };
 const Dimmer = ({ active, src, alt, ref, close, click }, children) => active &&
     src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
+/**
+ * @slot - A slot to place the target `<img>` element in to make it zoomable.
+ * @slot bijschrift - An optional slot to place a caption in, displayed inside the modal overlay.
+ * @slot titel - An optional slot to place a title in, displayed inside the modal overlay.
+ */
 export class ImageOverlay {
     constructor() {
         this.active = false;

package/dist/collection/components/info/info.js

@@ -1,7 +1,10 @@
 import { Fragment, h } from "@stencil/core";
+/**
+ * @slot - The content to be displayed inside the info box.
+ */
 export class Info {
     render() {
-        return (h(Fragment, { key: 'a9db2b8522cbfa55e8629b58a9757d58931ecbca' }, h("slot", { key: '2059c0fb8926f48a4b1f36a2210d5c8e48861b1a' }), !this.fixed && (h("dso-icon-button", { key: 'b5350abb35893dabf2dfcb0278aee5efd7bb8951', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '501034aaf66e9109b35acead40058a4a42081904' }, h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }), !this.fixed && (h("dso-icon-button", { key: '568cdfc82e1fb885849226689812843a9045184d', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.js

@@ -1,8 +1,18 @@
 import { Host, h, } from "@stencil/core";
-import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { ToggletipController, isEventOutside } from "../../functional-components/tooltip/toggletip.controller";
 import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
+/**
+ * @slot toggletip - A slot for content displayed inside the info button toggletip.
+ */
 export class InfoButton {
     constructor() {
+        this.toggletipController = new ToggletipController({
+            getReferenceElement: () => this.button,
+            getTipElement: () => this.toggletipElRef,
+            getTipArrowElement: () => this.toggletipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => this.toggletipPlacement,
+        });
         /**
          * Whether the InfoButton is active.
          */
@@ -21,7 +31,7 @@ export class InfoButton {
             if (!this.toggletipActive) {
                 return;
             }
-            if (!event.composedPath().includes(this.host)) {
+            if (isEventOutside(this.host, event)) {
                 this.closeToggletip();
             }
         };
@@ -62,42 +72,10 @@ export class InfoButton {
     }
     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({
-                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(() => {
@@ -109,12 +87,12 @@ export class InfoButton {
         });
     }
     disconnectedCallback() {
-        this.closeToggletip();
+        this.toggletipController.dispose();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'f89df0ddad22608cc30c910b1fd4a0352516cee6', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '8f46b9c1930d3e546ab604620b19241e3628a3d1', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: '2f6cbae1716c36b47e9ddb608682abdec648564b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'fc29889f2ea054cc48ee22ecde9ebeb4ba414d32', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '44b45316c3785a231fb8c214710c0689f8db7e08', name: "toggletip" }))))));
+        return (h(Host, { key: 'b38212731ef3325d9d9b87919248494ce7eb27ab', onKeyDown: this.keyDownHandler }, 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 && (h(Tooltip, { key: '01af1c555dadef251f3076c9137fd5d3cff3d34a', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'd5b69968072ca345f825685643a9d371b62a6562', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '01f5101e35bfb869909b1b9788c88dcdc9d91351', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -1,7 +1,7 @@
 import { Fragment, h, } from "@stencil/core";
 import { clsx } from "clsx";
 import debounce from "debounce";
-import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
+import { TooltipController } from "../../functional-components/tooltip/tooltip.controller";
 import { Tooltip } from "../../functional-components/tooltip/tooltip.functional-component";
 const resizeObserver = new ResizeObserver(debounce((entries) => {
     entries.forEach(({ target }) => {
@@ -16,29 +16,25 @@ function isDsoLabelComponent(element) {
 function hasEllipses(el) {
     return el.scrollWidth > el.clientWidth;
 }
+/**
+ * @slot - A slot for the label text or content.
+ * @slot symbol - An optional slot for an icon or symbol displayed before the label text.
+ */
 export class Label {
     constructor() {
+        this.tooltipController = new 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({
-                    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) {
@@ -73,10 +69,6 @@ export class Label {
     syncLabelText() {
         this.labelText = this.host.textContent?.trim() ?? "";
     }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
     componentDidLoad() {
         if (this.truncate) {
             this.startTruncate();
@@ -88,7 +80,7 @@ export class Label {
     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() {
@@ -118,11 +110,11 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '91bdf045c5ed63dc007707e0bc69a68eeb85b081' }, h("span", { key: 'd18b289fdf86d1d7218d040179bf2f406db22e89', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '2f9aae45d0e9200d23a19859f28e9f7f15168c8b' }, h("span", { key: 'aad9e727272e7eea28ea910cbb6ff3378f71c2e4', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'b335ef4c4a3c96be81d8d6153e7b94d5edeea63e', name: "symbol" }), h("span", { key: '1e7b5709be467de0ad1bd3a74a76f0ae7be74401', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, h("slot", { key: '6f27332800f26af5a1595c3ef7a241f640afcd8e' })), this.removable && (h("dso-icon-button", { key: 'c907dd54543ddfd79cfb46e5824fe60de503a831', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h(Tooltip, { key: '1f5a56aa14db9576cb8b9adc723eccc751809df8', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '9820b8c6a6444d97c4cb4b661778e98b53e97a4b', id: "toggle-anchor" }, this.labelText)))));
+            }) }, h("slot", { key: '45d06013df712c4ef56f16f35ad7adaf912257b5', name: "symbol" }), 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 }, h("slot", { key: '382b5b0e82e9cf23d88d537a822c2fe588d0a0e0' })), this.removable && (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 && (h(Tooltip, { key: '102b8127bae8441c01f4d402d7ca2531633dae00', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '9bc36d77f9436d26955d566c6f37274393cf7430', id: "toggle-anchor" }, this.labelText)))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.js

@@ -3,6 +3,9 @@ import { clsx } from "clsx";
 import { i18n } from "../../utils/i18n";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 import { translations } from "./legend.i18n";
+/**
+ * @slot - Content to be displayed inside the active tab panel of the legend.
+ */
 export class Legend {
     constructor() {
         /**
@@ -63,7 +66,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '6a19193a2882506d8ed6c2678fc5fb7d50e306d3' }, h("div", { key: '377d9462efb4a215fb59c3a71ad992ff75053a43', class: "topbar" }, h("div", { key: 'efc1f5cf56372d7a542268cb76bdee32315ba203', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'c6344cb53732dc7c8e2147fa5164b23b9908e2c5', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '10a5928f03f917e015bfed1cdbbdc3cd4b741a75', class: "content" }, h("div", { key: '57341e45e63cf1fa5105fc88dcbcd27c639c0e06', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '0215d38bdde6a07b4142649656658a1bd4710dc6' })))));
+        return (h(Host, { key: '25a92448519ae10b449b58081d662a64954d3c04' }, h("div", { key: 'b560a4aff6a2e8f8328fb596202e0a7c145763ce', class: "topbar" }, h("div", { key: '3b23d0cb0e74a2aade4cbb0146e36d8d7fd299d4', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '319beb77b8931ae142cd2bf2e4a6fdc0d3eaa787', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '8e7d2821f2ffd170effc0a7e46fe202ed4992b8b', class: "content" }, h("div", { key: 'd76f6c4a9689bb851bb8625263474ccef9427bf2', role: "tabpanel", tabIndex: 0 }, h("slot", { key: 'ac0a97d5910e0a4388765aab12af3875dafc5b70' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-button/list-button.js

@@ -1,5 +1,8 @@
 import { Fragment, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
+/**
+ * @slot subcontent - An optional slot for additional content or details displayed below the main label.
+ */
 export class ListButton {
     constructor() {
         this.focusIncrementButtonAfterRender = false;
@@ -73,7 +76,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '427ff9cd8cc7dc0c569a2f394ccf2d45563b21e8', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'd088de067e202fa3e9e07b7efa0f12e3bbcd6623', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'd81f506ad4d2825e11fb02b58d53084db34e805d', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '3d4add309ed7f30664055d68fbd82d0ada7209c3' }, this.label, this.sublabel && h("span", { key: '8ea2cee6ec78f2dac9f82c0ac68d63325e333172', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'c108019419d8392734c72881c9e12f7ab939eeac', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'e92bdb531740986a4740c40273b7e59d87a2f14c', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f6829e8e7cfa5ad117bea1c4d43fd57723f9f126', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '50ac21ae4c209ffebc2dcdd6bdf38fd77540b2f2', class: "subcontent" }, h("slot", { key: '8cf1fda0a7d5c20d719ffcf926e468617c13005e', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'dd5a7569abfeae4fc70882f7bdd1eb26f6c124fe', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '5579dffd39aae5d6a66c8c9f98231d1b80756d20' }, h("dso-icon-button", { key: '4544a7074baabc5b220eca4b25b7f730e6107d3f', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '3676a56084254d00110d4c9983204b5d66752a33', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: 'c2f47bb502b61a6d50de0078a2e13c53f158ba51', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: '2933caf8dfa55d54519aac55574e3ec5422cbf00', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '171dba726ae2681a45f7da87267c64660f645fb5', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '39fbf1a635e320bb5cec27cd33263e36eb809774', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '13fb9f0427198c07d2b00050e763647895dd1ab9', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'a460a8f89ab12d090d94f2b3b73d8c6cac2dd2ac' }, this.label, this.sublabel && h("span", { key: 'b8427ca80a914d2e6b3832019afe8060dd6d284d', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '72506275399775cbc5ceae5e8b16dbcd8a69c140', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '7a097ac4604c40d0fda1d2421feef68642075ab6', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '3ac2a0ecf78fbaffbf25fc00d56269cb00643e7f', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'a5049ef168c07738d5f789b19ff8932265a21299', class: "subcontent" }, h("slot", { key: '0af769250d4ddf272a68e4788494bf121f5bc064', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '7e59c5a27c6fc4a7726c2b17ff70346867b7ffa9', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'a58578a81c70886bdc69a4fa2adb7be721023671' }, h("dso-icon-button", { key: '3a7229664ea99386f70cfb695205e1ca62db0620', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '9cfc61641c5f4abd1b00901640a79e7ba8f12a63', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: '73aaacff6df752f3190d917059dc92c5be0eb15b', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'f7f644cce4ee9de5e99999bf53c12312db30bd9b', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }