@itcenteratunihelsinki/huds-lib 0.12.1 → 0.12.3

package/dist/collection/components/hy-navigation/menu-language/menu-language.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { jsonParserWorker } from "../../../global/globalScript";
+// No shadow DOM so user stylesheets and text-spacing tools (WCAG 1.4.12) reach the menu.
 export class MenuLanguage {
     constructor() {
         this.dataMenuLanguage = undefined;
@@ -7,48 +8,68 @@ export class MenuLanguage {
         this.labels = undefined;
         this.isMenuOpen = false;
     }
-    // Close the language menu if user clicks anywhere outside the Menu language component.
-    handleOutsideMenuClick(event) {
-        this.isMenuOpen = false;
-        event.stopPropagation();
-    }
-    // CLose the language menu if user opens the desktop menu panel.
-    desktopMenuToggled() {
-        this.isMenuOpen = false;
+    // Close the language menu on clicks outside it, when another header panel opens, or on scroll.
+    handleOutsideEvent(event) {
+        if (!this.isMenuOpen)
+            return;
+        // Clicks inside the component are handled by the toggle button.
+        if (event.type === "click" && event.composedPath().includes(this.el))
+            return;
+        // Only move focus back if it was inside the menu, not wherever the user clicked.
+        this.close(this.el.contains(document.activeElement));
     }
-    // CLose the language menu if user opens the search panel
-    searchPanelToggled() {
-        this.isMenuOpen = false;
+    handleKeyDown(event) {
+        if (event.key === "Escape" && this.isMenuOpen) {
+            event.stopPropagation();
+            this.close(true);
+        }
     }
-    // Close the language menu if user opens University main menu
-    universityMainMenuPanelToggled() {
-        this.isMenuOpen = false;
+    // Non-modal disclosure: Tab moves on to the next control and the menu closes behind it.
+    // relatedTarget is null for mouse clicks (handled by the window click listener) and for Tab into
+    // the browser UI, so only a real focus move to another element on the page closes it.
+    handleFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && !this.el.contains(next)) {
+            this.close();
+        }
     }
+    // focusin, not focus: without a shadow root the host no longer gets focus events from its button.
     handleComponentFocus(event) {
+        // Only when focus enters the component, not on every Tab inside it.
+        if (this.el.contains(event.relatedTarget))
+            return;
         // Close desktop menu panel if it's open.
         this.menuLanguageToggled.emit();
-        event.stopPropagation();
     }
-    handleComponentClick(event) {
-        this.isMenuOpen = !this.isMenuOpen;
+    toggle() {
         if (this.isMenuOpen) {
-            // Close desktop menu panel if it's open.
-            this.menuLanguageToggled.emit();
-            const languageMenuSelector = event.target;
-            this.adjustPosition(languageMenuSelector, this.el);
+            this.close(true);
+            return;
         }
-        event.stopPropagation();
+        this.isMenuOpen = true;
+        // Close desktop menu panel if it's open.
+        this.menuLanguageToggled.emit();
+        this.adjustPosition();
     }
-    adjustPosition(languageMenuSelector, target) {
-        const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(`.menu-language__dropdown`)[0];
+    close(restoreFocus = false) {
+        if (!this.isMenuOpen)
+            return;
+        this.isMenuOpen = false;
+        // preventScroll: a close caused by scrolling must not jump the page back to the header.
+        if (restoreFocus) {
+            this.toggleEl.focus({ preventScroll: true });
+        }
+    }
+    adjustPosition() {
+        const languagePanel = this.el.querySelector(".menu-language__dropdown");
         let headerHeight = "0";
         let hyHeader = this.isGroup
-            ? target.closest(".hy-site-header__content-top")
-            : target.closest(".hy-site-header");
+            ? this.el.closest(".hy-site-header__content-top")
+            : this.el.closest(".hy-site-header");
         if (hyHeader) {
             let rectHeader = hyHeader.getBoundingClientRect();
-            let rectLangMenu = languageMenuSelector.getBoundingClientRect();
-            headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;
+            let rectLangMenu = this.el.getBoundingClientRect();
+            headerHeight = `${this.el.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;
         }
         languagePanel.style.top = headerHeight;
     }
@@ -61,25 +82,23 @@ export class MenuLanguage {
         const white = "var(--grayscale-white)";
         const svgColor = this.isGroup ? white : black;
         const globeIconSize = this.isGroup ? 16 : 14;
-        return (h("div", { key: '94d20dbd0006ee43a1a9316920c5fe98760a8333', class: {
+        return (h("div", { key: 'fb0e7e0c3af245ee988b8e1a4a95404ea4f53c01', class: {
                 "menu-language": true,
                 "is-open": this.isMenuOpen,
                 "is-group": this.isGroup,
-            } }, h("button", { key: 'b1835bf038cc1eef2c6545847f9795e8d44a89cd', class: {
+            } }, h("button", { key: 'c7e04d71bc600c41879f7e6e3fde314d2cb704f4', class: {
                 "menu-language__toggle": true,
-            }, "aria-label": this.isMenuOpen ? this._labels["close"] : this._labels["open"] }, h("hy-icon", { key: '7cb8b799f3be337aa3f40c5f6d15f733ae1bf314', icon: "hy-icon-globe", size: globeIconSize, fill: svgColor }), h("span", { key: '788fa6d170205c938219e1c3140f4f11da5dd79f' }, this._dataMenuLanguage.map(({ isActive, langCode }) => {
+            }, "aria-label": this.isMenuOpen ? this._labels["close"] : this._labels["open"], "aria-expanded": this.isMenuOpen ? "true" : "false", onClick: () => this.toggle(), ref: (el) => (this.toggleEl = el) }, h("hy-icon", { key: '390c171cb8bde67b2ffff23b806bfebc0c0d1a37', icon: "hy-icon-globe", size: globeIconSize, fill: svgColor }), h("span", { key: 'c9dd333c58ad6a50f284fc4375497fd598bf7e9f' }, this._dataMenuLanguage.map(({ isActive, langCode }) => {
             if (isActive) {
                 return langCode;
             }
-        })), h("hy-icon", { key: '76de3463c20bfd6efaedeb654336e7cb9bd90e2d', icon: "hy-icon-caret-down", size: 8, fill: svgColor })), h("div", { key: 'ce9d990ddd71a5d9c3fc4d3ed619901febc4d251', class: {
+        })), h("hy-icon", { key: '9519f29962f06a29ec2bce7c7f7ed368166bdf81', icon: "hy-icon-caret-down", size: 8, fill: svgColor })), h("div", { key: '8701a88869013d3ebb7e011b21fd997715fe4bfc', class: {
                 "menu-language__dropdown": true,
-            }, "aria-hidden": `${!this.isMenuOpen}` }, this.isMenuOpen &&
-            h("ul", { key: '42e8b5310c9674ae729318c934dfca6dd4a115fa', class: "menu-language__links" }, this._dataMenuLanguage.map((item) => {
-                return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled }));
-            })))));
+            }, "aria-hidden": `${!this.isMenuOpen}` }, this.isMenuOpen && (h("ul", { key: '3b494d0530bbb408cc57975339275a1f30946348', class: "menu-language__links" }, this._dataMenuLanguage.map((item) => {
+            return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled }));
+        }))))));
     }
     static get is() { return "hy-menu-language"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["menu-language.scss"]
@@ -185,37 +204,55 @@ export class MenuLanguage {
     static get listeners() {
         return [{
                 "name": "click",
-                "method": "handleOutsideMenuClick",
+                "method": "handleOutsideEvent",
                 "target": "window",
                 "capture": false,
                 "passive": false
             }, {
                 "name": "menuDesktopToggled",
-                "method": "desktopMenuToggled",
+                "method": "handleOutsideEvent",
                 "target": "document",
                 "capture": false,
                 "passive": false
             }, {
                 "name": "searchPanelToggled",
-                "method": "searchPanelToggled",
+                "method": "handleOutsideEvent",
                 "target": "document",
                 "capture": false,
                 "passive": false
             }, {
                 "name": "universityMainMenuToggled",
-                "method": "universityMainMenuPanelToggled",
+                "method": "handleOutsideEvent",
                 "target": "document",
                 "capture": false,
                 "passive": false
             }, {
-                "name": "focus",
-                "method": "handleComponentFocus",
+                "name": "headerScrollDown",
+                "method": "handleOutsideEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "headerScrollUp",
+                "method": "handleOutsideEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "click",
-                "method": "handleComponentClick",
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "handleComponentFocus",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/hy-navigation/menu-language-item/menu-language-item.js

@@ -9,14 +9,13 @@ export class SiteLanguage {
         this.url = undefined;
     }
     render() {
-        return (h("li", { key: 'bf0fb0d69f607c95cb51454fbc861ada10b89da6', class: `menu-language__links-item` }, h("a", { key: '2c5dcadcc18c81c1129092994e345a72c261fff6', href: this.url, lang: this.langCode, class: {
+        return (h("li", { key: 'b213cebc44ae59c439099b754b388c80d61efe72', class: `menu-language__links-item` }, h("a", { key: '8a3f48894ea138327228f90e0bf0f6915b130a39', href: this.url, lang: this.langCode, class: {
                 "is-active": this.isActive,
                 "is-disabled": this.isDisabled,
                 "menu-language__link": true,
             } }, this.label)));
     }
     static get is() { return "hy-menu-language-item"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["menu-language-item.scss"]

package/dist/collection/components/hy-site-header/site-header.css

@@ -6,7 +6,7 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-:host {
+hy-site-header {
   display: block;
 }
 .hy-site-header {
@@ -211,6 +211,12 @@
   padding: 0;
   margin: 0;
 }
+.hy-site-header__menu-open-button:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
+}
 .hy-site-header__menu-open-button[aria-expanded=true] {
   font-size: 1rem;
   line-height: 18px;
@@ -236,12 +242,6 @@
   z-index: 101;
   width: auto;
 }
-.hy-site-header__menu-open-button[aria-expanded=true]:focus-visible {
-  -webkit-box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
-  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
-  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
-}
 .hy-site-header__menu-open-button[aria-expanded=true]:hover {
   cursor: pointer;
 }
@@ -325,13 +325,6 @@
   visibility: visible;
   z-index: 99;
 }
-.hy-backdrop.is-active-top {
-  background-color: rgba(0, 0, 0, 0.4);
-  -webkit-transition: background-color 300ms;
-  transition: background-color 300ms;
-  visibility: visible;
-  z-index: 98;
-}
 .hy-site-header__panel {
   background: var(--grayscale-white);
   bottom: 0;

package/dist/collection/components/hy-site-header/site-header.js

@@ -1,8 +1,6 @@
-let clickTimer = null;
 import { Fragment, h } from "@stencil/core";
 import { MenuType, ColorVariant, SiteLogoSize } from "../../utils/utils";
 import { jsonParserWorker } from "../../global/globalScript";
-let clickTimeout = null;
 export class SiteHeader {
     constructor() {
         this.isGroup = false;
@@ -32,7 +30,6 @@ export class SiteHeader {
         this.isDesktopMenuOpen = false;
         this.isDesktopMenuDropdown = false;
         this.isTopMenuOpen = false;
-        this.isBottomVisible = false;
         this.isTopVisible = false;
         this.lastScrollTop = 0;
         this.delta = 50;
@@ -51,8 +48,10 @@ export class SiteHeader {
         }
     }
     // Listener for toggling mobile menu top panel on or off.
-    mobileMenuTopToggle() {
-        this.isTopMenuOpen = !this.isTopMenuOpen;
+    // Falls back to toggling for emitters that send no detail (the old contract).
+    mobileMenuTopToggle(event) {
+        var _a, _b;
+        this.isTopMenuOpen = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.open) !== null && _b !== void 0 ? _b : !this.isTopMenuOpen;
         this.menuMobileTopToggled.emit();
     }
     mainMenuToggled() {
@@ -61,6 +60,9 @@ export class SiteHeader {
     handleScroll() {
         this.headerScrollHandler();
     }
+    handleResize() {
+        this.applySizeClasses(window.innerWidth);
+    }
     headerScrollHandler() {
         let topOffset = window.pageYOffset;
         if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {
@@ -90,7 +92,7 @@ export class SiteHeader {
         if (toggleOn) {
             hySiteHeader.classList.add("hy-site-header--sticky-active", "hy-site-header--sticky-visible");
             hySiteHeader.classList.remove("hy-site-header--sticky-hidden");
-            !this.isBottomVisible && !this.isTopVisible && bodyElementClasses.add("sticky-active");
+            !this.isTopVisible && bodyElementClasses.add("sticky-active");
             if (bodyElementClasses.contains("toolbar-horizontal")) {
                 hySiteHeader.classList.add("has-toolbar");
                 if (bodyElementClasses.contains("toolbar-tray-open")) {
@@ -105,41 +107,18 @@ export class SiteHeader {
     }
     componentDidLoad() {
         this.applySizeClasses(window.innerWidth);
-        window.addEventListener('resize', () => {
-            this.applySizeClasses(window.innerWidth);
-        });
         const topOptions = {
             root: null,
             rootMargin: "250px",
             threshold: [0.0, 1.0],
         };
+        // Observe the host (display: block in site-header.scss), not the page's <header>, so this works without one.
         this.topObserver = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
-                if (entry.target.nodeName === "HEADER") {
-                    this.isTopVisible = entry.isIntersecting;
-                }
+                this.isTopVisible = entry.isIntersecting;
             });
         }, topOptions);
-        const header = document.querySelector("header");
-        if (header) {
-            this.topObserver.observe(header);
-        }
-        const bottomOptions = {
-            root: null,
-            rootMargin: "0px",
-            threshold: [0.0, 1.0],
-        };
-        this.bottomObserver = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.target.nodeName === "HEADER") {
-                    this.isTopVisible = entry.isIntersecting;
-                }
-            });
-        }, bottomOptions);
-        const footer = document.querySelector("hy-footer");
-        if (footer) {
-            this.bottomObserver.observe(footer);
-        }
+        this.topObserver.observe(this.el);
         // Pass the dataMenuLanguage prop to menu component.
         this.el.children[0].setAttribute("data-menu-language", this.dataMenuLanguage);
         this.navbarHeight = 120;
@@ -147,6 +126,10 @@ export class SiteHeader {
         body.style.setProperty("--nav-height", `${this.navbarHeight * 2}px`);
     }
     async componentWillLoad() {
+        var _a;
+        // Render <header> only when the page doesn't already wrap us in one, so there is a single
+        // banner landmark either way (Drupal has its own <header>; other consumers keep ours).
+        this.isInsideBanner = !!((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("header, [role='banner']"));
         // Check for site header labels and set them to variables accordingly.
         if (this.dataSiteHeaderLabels) {
             const labels = await jsonParserWorker(this.dataSiteHeaderLabels);
@@ -178,51 +161,40 @@ export class SiteHeader {
         }
     }
     disconnectedCallback() {
-        clearTimeout(clickTimer);
         this.topObserver.disconnect();
-        this.bottomObserver.disconnect();
-        clearTimeout(clickTimeout);
     }
     applySizeClasses(size) {
         // Set the menu-type based on the width of the browser.
+        const previousMenuType = this.menuType;
         size <= 1200 ? (this.menuType = MenuType.mobile) : (this.menuType = MenuType.desktop);
+        // Crossing the breakpoint swaps hy-menu-main-group for a new instance. The old one is
+        // removed while possibly open and can't emit its close, so reset the open state here.
+        if (previousMenuType !== this.menuType) {
+            this.isTopMenuOpen = false;
+        }
         // Pass the menu type to menu component.
-        this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);
+        this.isMobile = [MenuType.mobile, MenuType.tablet].includes(this.menuType);
         const menuAttribute = this.menuType;
         this.el.children[0].setAttribute("menu-type", menuAttribute);
     }
     render() {
-        var _a;
+        var _a, _b, _c;
         if (this.menuType === null)
             return;
         const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;
-        const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
+        const logoSizeGroup = SiteLogoSize.small;
         const logoColor = ColorVariant.black;
         const logoColorGroup = ColorVariant.white;
+        const Wrapper = this.isInsideBanner ? "div" : "header";
         let classAttributes = [
             "hy-site-header",
             `hy-site-header--${this.menuType}`,
             this.isGroup ? "is-group" : "",
             "is-at-top",
         ];
-        const toggleMenuMobileAndRemoveListener = () => {
-            window.removeEventListener("click", handleClickOutside);
-            this.mobileMenuToggle();
-        };
-        const handleClickOutside = (event) => {
-            const [targetElement] = event.composedPath();
-            if (targetElement.classList.contains("hy-backdrop")) {
-                toggleMenuMobileAndRemoveListener();
-            }
-        };
-        if (this.isMenuOpen) {
-            window.addEventListener("click", () => {
-                clearTimeout(clickTimeout);
-                clickTimeout = setTimeout(() => {
-                    handleClickOutside;
-                }, 250);
-            });
-        }
+        const universityMainMenuLabel = (_a = this.groupPages) === null || _a === void 0 ? void 0 : _a["university_main_menu"];
+        // Black bar landmark name. Falls back to the menu label until Drupal sends the new key.
+        const universityMainNavigationLabel = (_c = (_b = this.groupPages) === null || _b === void 0 ? void 0 : _b["university_main_navigation"]) !== null && _c !== void 0 ? _c : universityMainMenuLabel;
         let activeLang = "en";
         let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);
         dataMenuLanguageArray.forEach((lang) => {
@@ -234,19 +206,19 @@ export class SiteHeader {
             case MenuType.desktop:
                 // Larger than 1200px screens
                 return [
-                    h("header", { class: `${classAttributes.join(" ")}` }, h("div", { class: {
+                    h(Wrapper, { class: `${classAttributes.join(" ")}` }, h("div", { class: {
                             "hy-backdrop": true,
                             "is-active": (this.isMenuOpen && !this.isDesktopMenuDropdown) ||
                                 (this.isTopMenuOpen && !this.isDesktopMenuDropdown),
-                        } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "is-mobile": false, "menu-label": (_a = this.groupPages["university_main_menu"]) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks, "menu-label-close": this.menuLabelClose })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
+                        } }), this.isGroup && (h("nav", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}`, "aria-label": universityMainNavigationLabel }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "is-mobile": false, "menu-label": universityMainMenuLabel !== null && universityMainMenuLabel !== void 0 ? universityMainMenuLabel : null, "data-main-menu": this.dataMainMenuLinks, "menu-label-close": this.menuLabelClose })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
                         return (h("a", { class: "hy-site-header__donate-link", href: url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: ColorVariant.black }), h("span", null, label)));
-                    }))))), h("section", { class: `hy-site-header__container ${this.isGroup ? "is-group" : ""} ${this.groupType === "research_group_menu" ? "is-research-group" : ""}` }, h("div", { class: "hy-site-header__branding" }, this.isGroup && this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.groupType != "research_group_menu" && h("slot", { name: "menu" }), !this.isGroup && (h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }), !this.noSearch && (h("hy-site-search", { size: 14, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
+                    }))))), h("div", { class: `hy-site-header__container ${this.isGroup ? "is-group" : ""} ${this.groupType === "research_group_menu" ? "is-research-group" : ""}` }, h("div", { class: "hy-site-header__branding" }, this.isGroup && this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.groupType != "research_group_menu" && h("slot", { name: "menu" }), !this.isGroup && (h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }), !this.noSearch && (h("hy-site-search", { size: 14, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
                         return (h("a", { class: "hy-site-header__donate-link", href: url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: ColorVariant.black }), h("span", null, label)));
                     }))))),
                 ];
             case MenuType.mobile:
                 // Smaller than 960px screens
-                return (h("header", { class: classAttributes.join(" "), "data-menu-active": this.isMenuOpen }, h("div", { class: { "hy-backdrop": true, "is-active": this.isMenuOpen } }), h("div", { class: { "hy-backdrop": true, "is-active-top": this.isTopMenuOpen } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks })))))), h("section", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), h("div", { class: "hy-site-header__actions" }, !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })), !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: `hy-site-header__menu-open-button`, "aria-label": this.isMenuOpen ? this.menuLabels["close"] : this.menuLabels["open"], "aria-expanded": `${this.isMenuOpen}` }, !this.isMenuOpen && h("hy-icon", { icon: "hy-icon-hamburger", size: 24, fill: ColorVariant.black }), this.isMenuOpen && (h(Fragment, null, h("span", null, this.menuLabelClose), h("hy-icon", { icon: "hy-icon-remove", size: 16 }))))), h("div", { class: {
+                return (h(Wrapper, { class: classAttributes.join(" "), "data-menu-active": this.isMenuOpen }, h("div", { class: { "hy-backdrop": true, "is-active": this.isMenuOpen }, onClick: () => this.isMenuOpen && this.mobileMenuToggle() }), this.isGroup && (h("nav", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? "is-open" : ""}`, "aria-label": universityMainNavigationLabel }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: "menu--secondary__item group", size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks, "menu-label": universityMainMenuLabel !== null && universityMainMenuLabel !== void 0 ? universityMainMenuLabel : null, "menu-label-close": this.menuLabelClose })))))), h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, this.groupType == "research_group_menu" && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == "generic_site_group_menu" && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), h("div", { class: "hy-site-header__actions" }, !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })), !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), h("button", { onClick: () => this.mobileMenuToggle(), class: `hy-site-header__menu-open-button`, "aria-label": this.isMenuOpen ? this.menuLabels["close"] : this.menuLabels["open"], "aria-expanded": `${this.isMenuOpen}` }, !this.isMenuOpen && h("hy-icon", { icon: "hy-icon-hamburger", size: 24, fill: ColorVariant.black }), this.isMenuOpen && (h(Fragment, null, h("span", null, this.menuLabelClose), h("hy-icon", { icon: "hy-icon-remove", size: 16 }))))), h("div", { class: {
                         "is-open": this.isMenuOpen,
                         "hy-site-header__panel": true,
                     }, "aria-hidden": `${!this.isMenuOpen}` }, h("slot", { name: "menu_mobile" })))));
@@ -676,7 +648,6 @@ export class SiteHeader {
             "isDesktopMenuOpen": {},
             "isDesktopMenuDropdown": {},
             "isTopMenuOpen": {},
-            "isBottomVisible": {},
             "isTopVisible": {},
             "lastScrollTop": {},
             "delta": {},
@@ -772,6 +743,12 @@ export class SiteHeader {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/esm/{app-globals-1b021639.js → app-globals-a069cf15.js}

@@ -1,4 +1,4 @@
-import { g as globalFn } from './globalScript-3f479486.js';
+import { g as globalFn } from './globalScript-326c6753.js';
 
 const globalScripts = globalFn;
 

package/dist/esm/{globalScript-3f479486.js → globalScript-326c6753.js}

@@ -1,4 +1,4 @@
-import { a as setMode } from './index-2ffe17c9.js';
+import { a as setMode } from './index-61e707b7.js';
 
 /**
  * This is a demo on how to initialize different themes with a class name from body element.