@dso-toolkit/core 95.2.0 → 96.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: '9cc9d82dd16150e19a5a8daccb0a4f2c650d9e15', "is-compact": this.isCompact }, h("div", { key: '9c9024838dd7d9535fa71d97132912d13e9a1fcf', class: "dso-header" }, h("div", { key: 'f3c9bfc1592c97fad7db25cde5f0e1241d2264d4', class: "logo-container" }, h("slot", { key: 'e1176a01b0dceef3e4c54123df4c0339b2bd0a56', 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/icon-button/icon-button.css

@@ -20,8 +20,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-tooltip {
-  --_dso-icon-button-tertiary-color: #fff;
-  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_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-primary-background-color: #fff;
   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
@@ -86,8 +94,16 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-tooltip .tooltip-inner {
-  --_dso-icon-button-tertiary-color: #fff;
-  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_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-primary-background-color: #fff;
   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
@@ -308,6 +324,25 @@
   border-block-end-width: var(--_dt-icon-button-border-block-end-width, 1px);
   border-inline-end-width: var(--_dt-icon-button-border-inline-end-width, 1px);
 }
+.dso-secondary:not([disabled]):active {
+  background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  color: var(--_dso-icon-button-secondary-active-color, #fff);
+}
+.dso-secondary:not([disabled]).toggled {
+  background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);
+  border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);
+  color: var(--_dso-icon-button-secondary-toggled-color, #fff);
+}
+.dso-secondary:not([disabled]).toggled:hover {
+  background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
+  border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
+}
+.dso-secondary:not([disabled]).toggled:active {
+  background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  color: var(--_dso-icon-button-secondary-active-color, #fff);
+}
 
 .dso-tertiary {
   display: inline-block;
@@ -342,7 +377,16 @@
   color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937));
 }
 .dso-tertiary:not([disabled]):active {
-  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #275937));
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c));
+}
+.dso-tertiary:not([disabled]).toggled {
+  color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937));
+}
+.dso-tertiary:not([disabled]).toggled:hover {
+  color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27));
+}
+.dso-tertiary:not([disabled]).toggled:active {
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c));
 }
 .dso-tertiary[disabled] {
   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d));
@@ -523,6 +567,24 @@
   border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);
   border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px);
 }
+.dso-map:not([disabled]):active {
+  background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  color: var(--_dso-icon-button-secondary-active-color, #fff);
+}
+.dso-map:not([disabled]).toggled {
+  background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);
+  border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);
+  color: var(--_dso-icon-button-secondary-toggled-color, #fff);
+}
+.dso-map:not([disabled]).toggled:hover {
+  background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
+  border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
+}
+.dso-map:not([disabled]).toggled:active {
+  background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+  border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);
+}
 
 .icon-button {
   min-inline-size: auto;