@dso-toolkit/core 95.2.0 → 97.0.0

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

@@ -14,17 +14,26 @@
 :host([is-compact]) .dso-header {
   flex-wrap: nowrap;
 }
-:host([is-compact]) dso-dropdown-menu .dso-dropdown-options {
+:host([is-compact]) .dropdown-menu .dropdown-menu-options {
   inline-size: 100%;
 }
 
 :host(:not([is-compact])) .dso-header {
   align-items: center;
 }
-:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options {
+: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;
@@ -88,46 +97,43 @@
   position: relative;
 }
 
-dso-dropdown-menu > button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),
-dso-dropdown-menu > .dso-primary,
-dso-dropdown-menu > .dso-secondary,
-dso-dropdown-menu > .dso-tertiary {
+.dropdown-menu button {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  color: #39870c;
+  display: flex;
+  font-family: Asap, sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: normal;
   position: relative;
 }
-dso-dropdown-menu > button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary)::after,
-dso-dropdown-menu > .dso-primary::after,
-dso-dropdown-menu > .dso-secondary::after,
-dso-dropdown-menu > .dso-tertiary::after {
-  content: "";
-  display: inline-block;
-}
-dso-dropdown-menu > .dso-primary::after,
-dso-dropdown-menu > .dso-secondary::after {
+.dropdown-menu button::after {
   margin-inline-start: 8px;
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
 }
-dso-dropdown-menu .dso-group-label {
-  color: #999;
-  font-size: 0.875em;
-  font-weight: 400;
-  margin: 0;
-  padding-block: 4px 2px;
-  padding-inline: 20px;
-  text-transform: uppercase;
+.dropdown-menu button:hover, .dropdown-menu button:active {
+  cursor: pointer;
+  text-decoration: underline;
 }
-dso-dropdown-menu ul {
-  margin: 0;
-  padding: 0;
+.dropdown-menu button dso-icon {
+  inline-size: 24px;
+  block-size: 24px;
+  margin-inline-start: 8px;
+  padding-block-start: 2px;
 }
-dso-dropdown-menu ul:not(:last-child) {
-  border-block-end: 1px solid #e5e5e5;
-  margin-block-end: 11px;
-  padding-block-end: 11px;
+.dropdown-menu button[aria-expanded=true] dso-icon {
+  transform: rotate(180deg);
 }
-dso-dropdown-menu .dso-dropdown-options {
+.dropdown-menu .dropdown-menu-options {
   background-clip: padding-box;
   background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 0;
+  border-radius: 0;
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
   font-size: 1rem;
   min-inline-size: 160px;
@@ -135,111 +141,72 @@ dso-dropdown-menu .dso-dropdown-options {
   padding-inline: 0;
   z-index: 220;
 }
-dso-dropdown-menu .dso-dropdown-options li {
+.dropdown-menu .dropdown-menu-options ul {
+  margin: 0;
+  padding: 0;
   list-style: none;
 }
-dso-dropdown-menu .dso-dropdown-options li a:visited {
-  color: #191919;
+.dropdown-menu .dropdown-menu-options ul:not(:last-child) {
+  border-block-end: 1px solid #e5e5e5;
+  margin-block-end: 11px;
+  padding-block-end: 11px;
 }
-dso-dropdown-menu .dso-dropdown-options li a,
-dso-dropdown-menu .dso-dropdown-options li button {
+.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;
 }
-dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus-visible, dso-dropdown-menu .dso-dropdown-options li a:active,
-dso-dropdown-menu .dso-dropdown-options li button:hover,
-dso-dropdown-menu .dso-dropdown-options li button:focus-visible,
-dso-dropdown-menu .dso-dropdown-options li button:active {
+.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;
 }
-dso-dropdown-menu .dso-dropdown-options li a,
-dso-dropdown-menu .dso-dropdown-options li button {
+.dropdown-menu .dropdown-menu-options ul li a,
+.dropdown-menu .dropdown-menu-options ul li button {
   clear: both;
-  color: #191919;
+  color: #275937;
   display: block;
+  font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.5;
-  padding-block: 3px;
-  padding-inline: 20px;
+  padding: 16px;
   text-decoration: none;
   white-space: nowrap;
 }
-dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus,
-dso-dropdown-menu .dso-dropdown-options li button:hover,
-dso-dropdown-menu .dso-dropdown-options li button:focus {
+.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;
 }
-dso-dropdown-menu .dso-dropdown-options li button {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  text-align: inherit;
-  inline-size: 100%;
-}
-dso-dropdown-menu button {
-  background-color: transparent;
-  border: 0;
-  display: flex;
-  font-family: Asap, sans-serif;
-  align-items: center;
-  position: relative;
-}
-dso-dropdown-menu button dso-icon {
-  inline-size: 24px;
-  block-size: 24px;
-  margin-inline-start: 8px;
-  padding-block-start: 2px;
-}
-dso-dropdown-menu button[aria-expanded=true] dso-icon {
-  transform: rotate(180deg);
-}
-dso-dropdown-menu .dso-dropdown-options {
-  border: 0;
-  border-radius: 0;
-  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
-}
-dso-dropdown-menu .dso-dropdown-options ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-dso-dropdown-menu .dso-dropdown-options ul li a,
-dso-dropdown-menu .dso-dropdown-options ul li button {
-  display: block;
-  padding: 16px;
-  color: #275937;
-  font-size: 1.25rem;
-  white-space: pre-wrap;
-  text-decoration: none;
-}
-dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,
-dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible {
+.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;
 }
-dso-dropdown-menu .dso-dropdown-options ul li a:hover,
-dso-dropdown-menu .dso-dropdown-options ul li button:hover {
+.dropdown-menu .dropdown-menu-options ul li a:hover,
+.dropdown-menu .dropdown-menu-options ul li button:hover {
   background-color: #fff;
   color: #275937;
   text-decoration: underline;
 }
-dso-dropdown-menu .dso-dropdown-options ul li a:visited:not(:hover):not(:focus-visible),
-dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible) {
-  color: #275937;
-}
-dso-dropdown-menu .dso-dropdown-options ul li button {
-  inline-size: 100%;
-  text-align: start;
+.dropdown-menu .dropdown-menu-options ul li a:visited,
+.dropdown-menu .dropdown-menu-options ul li button:visited {
+  color: #191919;
 }
-dso-dropdown-menu .dso-dropdown-options ul li button dso-icon {
-  margin-inline-start: 0;
+.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus-visible),
+.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus-visible) {
+  color: #275937;
 }
-dso-dropdown-menu .dso-dropdown-options ul li.dso-active a {
+.dropdown-menu .dropdown-menu-options ul li.dso-active a {
   font-weight: 600;
 }
-dso-dropdown-menu .dso-dropdown-options ul li + li {
+.dropdown-menu .dropdown-menu-options ul li + li {
   border-block-start: 1px solid #ccc;
 }
 
@@ -248,32 +215,14 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   display: flex;
   align-items: center;
 }
-.dropdown dso-dropdown-menu {
+.dropdown .dropdown-menu {
   position: static;
 }
-.dropdown dso-dropdown-menu .dso-dropdown-options {
+.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);
 }
-.dropdown dso-dropdown-menu > button {
-  color: #39870c;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: normal;
-  position: relative;
-}
-.dropdown dso-dropdown-menu > button::after {
-  margin-inline-start: 8px;
-  position: absolute;
-  inset-inline-end: 0px;
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-}
-.dropdown dso-dropdown-menu > button:hover, .dropdown dso-dropdown-menu > button:active {
-  cursor: pointer;
-  text-decoration: underline;
-}
 
 .dso-nav.ready .menu-user-home {
   margin-inline-start: auto;
@@ -319,11 +268,11 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   padding-inline: 0;
   white-space: nowrap;
 }
-.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
+.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 dso-dropdown-menu button {
+.dso-nav.dso-nav-main .dropdown-menu button {
   font-size: 1.25em;
   line-height: 1;
   padding-block: 16px;
@@ -331,11 +280,11 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   align-items: flex-end;
   color: #275937;
 }
-.dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {
+.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 dso-dropdown-menu button::after {
+.dso-nav.dso-nav-main .dropdown-menu button::after {
   margin-inline-start: 8px;
   position: absolute;
   inset-inline-end: 0px;

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

@@ -1,5 +1,9 @@
+import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
 import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
+import { tabbable } from "tabbable";
+import { v4 as uuidv4 } from "uuid";
+import { getActiveElement } from "../../utils/get-active-element";
 import { i18n } from "../../utils/i18n";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 import { translations } from "./header.i18n";
@@ -30,10 +34,48 @@ export class Header {
         this.userHomeActive = false;
         this.visibleMenuItemsCount = undefined;
         this.dropdownOptionsOffset = 0;
+        this.open = false;
+        this.escape = () => {
+            this.dropdownButtonElement?.focus();
+            this.toggleOptions();
+        };
+        this.keyDownHandler = (event) => {
+            if (event.defaultPrevented || !this.open) {
+                return;
+            }
+            switch (event.key) {
+                case "Tab":
+                    if (event.shiftKey) {
+                        this.tabInPopup(this.tabbables(true), -1);
+                    }
+                    else {
+                        this.tabInPopup(this.tabbables(true), 1);
+                    }
+                    break;
+                case "ArrowDown":
+                    this.tabInPopup(this.tabbables(false), 1);
+                    break;
+                case "ArrowUp":
+                    this.tabInPopup(this.tabbables(false), -1);
+                    break;
+                case "Escape":
+                    this.escape();
+                    break;
+                case " ":
+                    if (event.target instanceof HTMLElement) {
+                        event.target.click();
+                    }
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+        };
         this.resetVisibleMenuItems = () => {
             this.visibleMenuItemsCount = undefined;
         };
         this.clickHandler = (e, type, options) => {
+            this.toggleOptions(false);
             this.dsoHeaderClick.emit({
                 originalEvent: e,
                 isModifiedEvent: isModifiedEvent(e),
@@ -46,12 +88,31 @@ export class Header {
         this.text = i18n(() => this.host, translations);
         this.resizeObserver = new ResizeObserver(() => {
             this.resetVisibleMenuItems();
+            this.toggleOptions(false);
+            this.dropdownOptionsOffset = 0;
             forceUpdate(this.host);
         });
+        this.focusOutListener = (event) => {
+            if (this.open &&
+                (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+                this.toggleOptions(false);
+            }
+        };
     }
     mainMenuChanged() {
         this.resetVisibleMenuItems();
     }
+    tabInPopup(tabbables, direction) {
+        const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
+        let nextIndex = currentIndex + direction;
+        if (nextIndex >= tabbables.length) {
+            nextIndex = 0;
+        }
+        else if (nextIndex < 0) {
+            nextIndex = tabbables.length - 1;
+        }
+        tabbables[nextIndex]?.focus();
+    }
     get isCompact() {
         return this.compact === "always" || window.innerWidth < minDesktopViewportWidth;
     }
@@ -109,27 +170,64 @@ export class Header {
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
+        this.toggleOptions(false);
     }
     componentDidRender() {
         if (!this.host.isConnected) {
             return;
         }
         if (this.isCompact && this.dropdownElement) {
-            this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
+            this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
         }
         if (typeof this.visibleMenuItemsCount === "undefined" && this.navElement) {
             this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);
         }
+        if (this.popoverElement && !this.cleanUp && this.dropdownButtonElement) {
+            const element = this.popoverElement;
+            this.cleanUp = autoUpdate(this.dropdownButtonElement, element, () => {
+                if (this.dropdownButtonElement) {
+                    computePosition(this.dropdownButtonElement, element, {
+                        strategy: "fixed",
+                        middleware: [
+                            offset(this.dropdownOptionsOffset),
+                            flip({
+                                padding: this.dropdownOptionsOffset,
+                            }),
+                        ],
+                        placement: this.isCompact ? "bottom-end" : "bottom-start",
+                    }).then(({ x, y }) => {
+                        Object.assign(element.style, {
+                            left: `${x}px`,
+                            top: `${y}px`,
+                        });
+                    });
+                }
+            });
+        }
     }
     render() {
-        return (h(Host, { key: '8850386c7bf2d6e8351feddbce7c96066b25e4a8', "is-compact": this.isCompact }, h("div", { key: 'e5dc88c23f33ff0436e7a32018ad6805bc63dab8', class: "dso-header" }, h("div", { key: '3dddcad9303c819dcb4a27f4f0b5b66c39536dd0', class: "logo-container" }, h("slot", { key: '9afb7a64d9d97010a2a98b9416f81a4de80933a7', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '049a7cd2e6c5beccbe9a1b23bcd505ce2cfbc1e4', "is-compact": this.isCompact }, h("div", { key: '69626521734262e4cb40369667b084bee23cec42', class: "dso-header" }, h("div", { key: '7e0106defaff8c5f6c0c8942c987d3416acb39bc', class: "logo-container" }, h("slot", { key: '7355a1f157c81f785bb101f7c5490aa6ae0330c4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+    }
+    tabbables(withButton) {
+        const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];
+        return withButton ? tabbables : tabbables.filter((element) => element !== this.dropdownButtonElement);
+    }
+    toggleOptions(force) {
+        this.open = force ?? !this.open;
+        if (this.popoverElement?.isConnected) {
+            this.popoverElement?.togglePopover(this.open);
+        }
+        if (!this.open && this.cleanUp) {
+            this.cleanUp();
+            this.cleanUp = undefined;
+        }
     }
     renderCompact() {
-        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", null, 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", null, 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", null, 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", null, 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", null, 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("div", { 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" }))))))))))));
     }
     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("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { class: "dso-dropdown-options" }, 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, 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")))))))));
     }
     static get is() { return "dso-header"; }
     static get encapsulation() { return "shadow"; }
@@ -383,7 +481,8 @@ export class Header {
     static get states() {
         return {
             "visibleMenuItemsCount": {},
-            "dropdownOptionsOffset": {}
+            "dropdownOptionsOffset": {},
+            "open": {}
         };
     }
     static get events() {

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '35803c970b866b42d0512c7d6a7db877b431053f', "has-counter": hasCounter }, hasCounter && h("div", { key: '228e50bc3a6a61065feb605a466e7a3b943d2b56', class: "dso-step-counter" }, this.step ?? h("slot", { key: '77cee35b45294b747acf6602bc4ffb5399e3f94a', name: "icon" })), h("slot", { key: '7f6d38f4c8514605b9721466409882313236b887' })));
+        return (h(Host, { key: '11fabaa968d990291c856c89f08c7d9cf73c47e8', "has-counter": hasCounter }, hasCounter && h("div", { key: 'f5bdf7d62ebf65996f6cf8c151ef4a4bab65654d', class: "dso-step-counter" }, this.step ?? h("slot", { key: '7a5a4f56968c88710cdb095bb9f2768efb9972f3', name: "icon" })), h("slot", { key: 'a2f640620379148fb881f993e17cf42d9e02bb4c' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/history-item/history-item.js

@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '1f64d214c8a55e32d46924c44e2a67e6fe762ba6', class: "history-item" }, h("div", { key: '1faf71543e8465d42636730a7a2d1f3f6b731b97', class: "history-item-date" }, h("slot", { key: 'fd30727dea17f047cc1191b17585b34e1aa28527', name: "date" })), h("div", { key: 'af748c630159e9fd76d7489ae9b463c60e7a2047', class: "history-item-content" }, h("div", { key: '718da0969265515c84b27397dda672aa5519a61f', class: "history-item-status-message" }, h("dso-icon", { key: '52e2f8abb5a0db890604556cf2eb6d03c1d977fd', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a605bad20f157372dea498db2586cc99ca1aa4e7', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '147a283e5614d681a5828e2eed49892f4bc2b308', class: "history-item-title" }, h("a", { key: '94dc57f6a9de0eda156871da5eb08bc63967347c', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'a9e3fbb2a158c5301cd2e3b77417aa45d3f18d50', class: "history-item-title-content" }, h("slot", { key: 'f96e09b0853ded2962d51604c6924d18e8ec7352', name: "title" })), "\u2060", h("dso-icon", { key: '4f2c3df04231db6a328adb4ddc2787604447d119', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '4eb066cbfc8f5aeae2d4a81e78647bae853b5439', class: "history-item-explanation" }, h("slot", { key: '3c24ab2930fe3b24f222705f3581de5aee3949d4', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '46ebd43221d15f1f5de0a4cf2458018278c85236', class: "history-item-warning" }, h("dso-icon", { key: '75863ed1f713b3873a2ea50c3b5a14f127c50e6e', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '11f28b0b0e75cdaf14b7abdf5006f08faf81ec08', name: "warning" }))))));
+        return (h("div", { key: '46b086a93f12ddfa53c1fbabd36a96c7b2905bf9', class: "history-item" }, h("div", { key: 'e6e36dbbeea19b949f39e08d1447e159f3e9dec3', class: "history-item-date" }, h("slot", { key: '2abff00e5b46822d29f0ba132ec7bc611a743a77', name: "date" })), h("div", { key: '29015f198acaefe304926b6190cef2360468b171', class: "history-item-content" }, h("div", { key: '979f988d463139993a2ce50fe6c7aa5f67376055', class: "history-item-status-message" }, h("dso-icon", { key: '54fed97c8f7cda66a062a45135b4de5f8ae2e99d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a4e0f448ef5e2b8814894ec7ec363a9d1ca49054', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'c7552d220c1c6975eddee04a05ef47fc901ed101', class: "history-item-title" }, h("a", { key: 'afb73216739f1e773e8af90ebd0fb3f9883389a1', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'b7ef7db153f9ab537f57c42ebe0b8cfeb05290c8', class: "history-item-title-content" }, h("slot", { key: '8102f8a64cea0c4a91403db71fe4238b8ab45657', name: "title" })), "\u2060", h("dso-icon", { key: '0db7fec66135bb97e504d69ec496dbe07f649080', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '04668c9a02458071fa95ef7ab07ab684c59209e2', class: "history-item-explanation" }, h("slot", { key: 'c8dce4885752b53bd86569793b0d479e136e020c', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '4e70edd351fa28d880395da0d39635b80b89e5c6', class: "history-item-warning" }, h("dso-icon", { key: 'd57c337527ab3e37388f1ddcb27f127267dcd59c', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '306f3b2e834b1f707f0422f7a928758787955189', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -258,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '23ae18f6dfa49ec6901d7486d782e19948109378', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'a3de4e16f316b2ccb22a32de5552f8458e41f8c9', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }