weg-shared-layout 0.0.40 → 0.0.42

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
 import { findAuthMenuLink, isMenuGroup, isNonEmptyString, normalizeHeaderMenu, parseJsonProp, } from "../../utils/layout";
 import { WEG_HOVER_CAPABLE_MEDIA_QUERY, WEG_MD_MEDIA_QUERY } from "../../constants/breakpoints";
+import { isAriaCurrentNavHref, isNavLinkActive, resolveAriaCurrentNavKey, } from "../../utils/nav-active";
 import { LOGO_SRC } from "./logo-data";
 const WEG_HOME = 'https://www.warwickemploymentgroup.com';
 const DEFAULT_ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
+/** Stay visible while scrolling down through the first half of the viewport. */
+const HEADER_SCROLL_HIDE_THRESHOLD_VH = 0.5;
+const HEADER_SCROLL_DIRECTION_DELTA = 5;
 const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
 /** Placeholder href — sign-out is handled via `wegAuthClick`, not navigation. */
 const SIGN_OUT_HREF = '#';
+const MAIN_NAV_LABEL = 'Main navigation';
+const OPEN_MAIN_NAV_LABEL = 'Open main navigation';
+const CLOSE_MAIN_NAV_LABEL = 'Close main navigation';
 function normalizeAccountBase(input) {
     const base = input?.trim() || DEFAULT_ACCOUNT_HOME;
     return base.replace(/\/$/, '');
@@ -91,7 +98,7 @@ function ToggleIcon({ expanded }) {
     return (h("span", { class: "toggle-icon", "aria-hidden": "true" }, expanded ? (h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none" }, h("path", { d: "M6 12h12", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none" }, h("path", { d: "M12 6v12M6 12h12", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })))));
 }
 function Logo({ href, src }) {
-    return (h("a", { class: "logo-link", href: href, "aria-label": "Home" }, h("img", { class: "logo", src: src, alt: "WEG", width: "225", height: "83" })));
+    return (h("a", { class: "logo-link", href: href, "aria-label": "Home" }, h("img", { class: "logo", src: src, alt: "Warwick Employment Group logo", width: "225", height: "83" })));
 }
 export class WegHeader {
     /**
@@ -124,6 +131,11 @@ export class WegHeader {
      * Defaults to production when omitted.
      */
     accountBaseUrl;
+    /**
+     * Current page path from the host application (e.g. `/career-advice/my-article`).
+     * Include a query string when matching dropdown links that use search params.
+     */
+    currentPath;
     /**
      * Fired when the user clicks Sign in or Sign out.
      * Call `event.preventDefault()` in the host to handle navigation/logout yourself.
@@ -133,9 +145,16 @@ export class WegHeader {
     resolved = EMPTY_HEADER;
     menuOpen = false;
     openDropdown = null;
+    headerHidden = false;
     boundHandleDocumentClick = this.handleDocumentClick.bind(this);
     boundHandleViewportChange = this.handleViewportChange.bind(this);
     boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
+    boundHandleScroll = this.handleScroll.bind(this);
+    headerResizeObserver;
+    lastScrollY = 0;
+    scrollTicking = false;
+    bodyScrollLocked = false;
+    bodyScrollLockY = 0;
     hoverCloseTimer = null;
     hoverOpenEnabled = false;
     desktopMediaQuery;
@@ -156,15 +175,69 @@ export class WegHeader {
         this.updateHoverDropdownEnabled();
         this.handleViewportChange();
     }
+    componentDidLoad() {
+        const header = this.el.shadowRoot?.querySelector('.header');
+        if (!header)
+            return;
+        this.headerResizeObserver = new ResizeObserver(() => this.syncHeaderHeight());
+        this.headerResizeObserver.observe(header);
+        this.syncHeaderHeight();
+        this.lastScrollY = window.scrollY;
+        this.updateHeaderVisibility();
+    }
     connectedCallback() {
         document.addEventListener('click', this.boundHandleDocumentClick);
+        window.addEventListener('scroll', this.boundHandleScroll, { passive: true });
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.boundHandleDocumentClick);
+        window.removeEventListener('scroll', this.boundHandleScroll);
+        this.unlockBodyScroll();
+        this.headerResizeObserver?.disconnect();
         this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
         this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
         this.cancelScheduledDropdownClose();
     }
+    syncHeaderHeight() {
+        if (this.isMobileMenuActive())
+            return;
+        const header = this.el.shadowRoot?.querySelector('.header');
+        if (!header)
+            return;
+        this.el.style.setProperty('--weg-header-height', `${header.offsetHeight}px`);
+    }
+    handleScroll() {
+        if (this.scrollTicking)
+            return;
+        this.scrollTicking = true;
+        requestAnimationFrame(() => {
+            this.scrollTicking = false;
+            this.updateHeaderVisibility();
+        });
+    }
+    updateHeaderVisibility() {
+        if (this.isMobileMenuActive()) {
+            if (this.headerHidden)
+                this.headerHidden = false;
+            return;
+        }
+        const scrollY = window.scrollY;
+        const delta = scrollY - this.lastScrollY;
+        const threshold = window.innerHeight * HEADER_SCROLL_HIDE_THRESHOLD_VH;
+        let nextHidden = this.headerHidden;
+        if (scrollY <= threshold) {
+            nextHidden = false;
+        }
+        else if (Math.abs(delta) >= HEADER_SCROLL_DIRECTION_DELTA) {
+            nextHidden = delta > 0;
+        }
+        this.lastScrollY = scrollY;
+        if (nextHidden === this.headerHidden)
+            return;
+        if (nextHidden)
+            this.closeDropdown();
+        this.headerHidden = nextHidden;
+    }
     /**
      * Desktop dropdowns open on hover when viewport is md+ and the device reports hover support.
      * Uses (hover: hover) only — not (pointer: fine), which breaks in DevTools and hybrid devices.
@@ -182,10 +255,74 @@ export class WegHeader {
     }
     handleViewportChange() {
         if (this.desktopMediaQuery?.matches) {
-            this.closeMenu();
+            this.closeMenu({ announce: false, focusToggle: false });
         }
         this.updateHoverDropdownEnabled();
     }
+    announceToScreenReader(message) {
+        const region = this.el.shadowRoot?.querySelector('[data-weg-sr-live]');
+        if (!region)
+            return;
+        region.textContent = '';
+        requestAnimationFrame(() => {
+            region.textContent = message;
+        });
+    }
+    getMenuToggleButton() {
+        return this.el.shadowRoot?.querySelector('.menu-toggle');
+    }
+    getFirstNavFocusable() {
+        const panel = this.el.shadowRoot?.querySelector('#weg-header-main-nav');
+        if (!panel)
+            return null;
+        const focusables = panel.querySelectorAll('a[href], button:not([disabled])');
+        return focusables[0] ?? null;
+    }
+    focusFirstNavItem() {
+        setTimeout(() => {
+            const attemptFocus = (retries = 8) => {
+                const target = this.getFirstNavFocusable();
+                if (target) {
+                    target.focus();
+                    return;
+                }
+                if (retries > 0) {
+                    requestAnimationFrame(() => attemptFocus(retries - 1));
+                }
+            };
+            attemptFocus();
+        }, 0);
+    }
+    focusMenuToggle() {
+        const attemptFocus = (retries = 8) => {
+            const toggle = this.getMenuToggleButton();
+            if (toggle) {
+                toggle.focus();
+                return;
+            }
+            if (retries > 0) {
+                requestAnimationFrame(() => attemptFocus(retries - 1));
+            }
+        };
+        attemptFocus();
+    }
+    getMenuGroupLinkCount(label) {
+        const group = this.getActiveMenu().find((item) => isMenuGroup(item) && item.label === label);
+        return group?.items?.length ?? 0;
+    }
+    formatLinkCount(count) {
+        return count === 1 ? '1 link' : `${count} links`;
+    }
+    formatItemCount(count) {
+        return count === 1 ? '1 item' : `${count} items`;
+    }
+    announceSubmenuExpanded(label) {
+        const linkCount = this.getMenuGroupLinkCount(label);
+        this.announceToScreenReader(`${label} submenu expanded. ${this.formatLinkCount(linkCount)}.`);
+    }
+    announceSubmenuCollapsed(label) {
+        this.announceToScreenReader(`${label} submenu collapsed.`);
+    }
     isMobileMenuActive() {
         return this.menuOpen && !this.desktopMediaQuery?.matches;
     }
@@ -195,8 +332,39 @@ export class WegHeader {
     handleKeyDown(event) {
         if (event.key !== 'Escape')
             return;
-        this.menuOpen = false;
-        this.closeDropdown();
+        if (this.openDropdown) {
+            event.preventDefault();
+            this.closeDropdownAndFocusTrigger(this.openDropdown);
+            return;
+        }
+        if (this.menuOpen) {
+            event.preventDefault();
+            this.closeMenu({ focusToggle: true });
+        }
+    }
+    lockBodyScroll() {
+        if (this.bodyScrollLocked)
+            return;
+        this.bodyScrollLockY = window.scrollY;
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${this.bodyScrollLockY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+        this.bodyScrollLocked = true;
+    }
+    unlockBodyScroll() {
+        if (!this.bodyScrollLocked)
+            return;
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.width = '';
+        window.scrollTo(0, this.bodyScrollLockY);
+        this.bodyScrollLocked = false;
     }
     handleDocumentClick(event) {
         const target = event.target;
@@ -227,10 +395,12 @@ export class WegHeader {
     }
     toggleDropdown(label) {
         if (this.openDropdown === label) {
+            this.announceSubmenuCollapsed(label);
             this.closeDropdown();
             return;
         }
         this.openDropdownMenu(label);
+        this.announceSubmenuExpanded(label);
     }
     getDropdownPanelId(label) {
         return `weg-header-dropdown-${label.trim().toLowerCase().replace(/\s+/g, '-')}`;
@@ -283,29 +453,111 @@ export class WegHeader {
         if (event.key !== 'ArrowDown')
             return;
         event.preventDefault();
-        this.openDropdownMenu(label);
+        if (this.openDropdown !== label) {
+            this.openDropdownMenu(label);
+            this.announceSubmenuExpanded(label);
+        }
         this.focusFirstDropdownLink(itemEl);
     }
+    getDropdownLinks(container) {
+        return Array.from(container.querySelectorAll('.nav-dropdown__link'));
+    }
+    focusDropdownLink(container, index) {
+        const attemptFocus = (retries = 8) => {
+            const links = this.getDropdownLinks(container);
+            if (links[index]) {
+                links[index].focus();
+                return;
+            }
+            if (retries > 0) {
+                requestAnimationFrame(() => attemptFocus(retries - 1));
+            }
+        };
+        attemptFocus();
+    }
     focusFirstDropdownLink(itemEl) {
-        setTimeout(() => {
-            const firstLink = itemEl.querySelector('.nav-dropdown__link');
-            firstLink?.focus();
-        }, 0);
+        this.focusDropdownLink(itemEl, 0);
+    }
+    getDropdownContainer(label) {
+        const panelId = this.getDropdownPanelId(label);
+        return this.el.shadowRoot?.querySelector(`#${panelId}-trigger`)?.closest('.nav-dropdown') ?? null;
+    }
+    closeDropdownAndFocusTrigger(labelOrContainer) {
+        const container = typeof labelOrContainer === 'string'
+            ? this.getDropdownContainer(labelOrContainer)
+            : labelOrContainer;
+        const trigger = container?.querySelector('.nav-dropdown__trigger');
+        const label = typeof labelOrContainer === 'string'
+            ? labelOrContainer
+            : (trigger?.querySelector('.nav-dropdown__label')?.textContent?.trim() ?? '');
+        if (label && this.openDropdown === label) {
+            this.announceSubmenuCollapsed(label);
+        }
+        this.closeDropdown();
+        const attemptFocus = (retries = 8) => {
+            if (trigger && this.el.shadowRoot?.contains(trigger)) {
+                trigger.focus();
+                return;
+            }
+            if (retries > 0) {
+                requestAnimationFrame(() => attemptFocus(retries - 1));
+            }
+        };
+        attemptFocus();
+    }
+    handleDropdownLinkKeyDown(event, container) {
+        const links = this.getDropdownLinks(container);
+        const currentIndex = links.indexOf(event.currentTarget);
+        if (currentIndex === -1)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            links[(currentIndex + 1) % links.length]?.focus();
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            links[(currentIndex - 1 + links.length) % links.length]?.focus();
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeDropdownAndFocusTrigger(container);
+        }
     }
     toggleMenu() {
         if (this.menuOpen) {
-            this.closeMenu();
+            this.closeMenu({ focusToggle: false });
             return;
         }
         this.openMenu();
     }
     openMenu() {
         this.menuOpen = true;
+        this.headerHidden = false;
         this.closeDropdown();
+        if (!this.desktopMediaQuery?.matches) {
+            this.lockBodyScroll();
+            const itemCount = this.getActiveMenu().length;
+            this.announceToScreenReader(`${MAIN_NAV_LABEL} opened. ${this.formatItemCount(itemCount)}.`);
+            this.focusFirstNavItem();
+        }
     }
-    closeMenu() {
+    closeMenu(options = {}) {
+        const { announce = true, focusToggle = false } = options;
+        const wasMobileActive = this.isMobileMenuActive();
         this.menuOpen = false;
         this.closeDropdown();
+        this.unlockBodyScroll();
+        this.syncHeaderHeight();
+        this.updateHeaderVisibility();
+        if (announce && wasMobileActive) {
+            this.announceToScreenReader(`${MAIN_NAV_LABEL} closed.`);
+        }
+        if (focusToggle) {
+            this.focusMenuToggle();
+        }
     }
     getAccountHome() {
         return normalizeAccountBase(this.accountBaseUrl);
@@ -334,23 +586,60 @@ export class WegHeader {
         const name = this.userName?.trim();
         return name || 'Manage Account';
     }
-    renderIconNavLink(link, Icon, className, onNavigate) {
-        return (h("li", { class: "main-nav__item main-nav__item--auth", key: link.label }, h("a", { class: { 'sign-in-link': true, [className]: true }, href: link.href, onClick: () => onNavigate?.() }, h(Icon, null), link.label)));
+    shouldExcludeFromNavActive(item, accountHome) {
+        return isSignOutLink(item) || isSignInLink(item, accountHome);
     }
-    renderFlatNavLink(link, onNavigate) {
-        return (h("li", { class: "main-nav__item", key: link.label }, h("a", { class: "nav-link", href: link.href, onClick: () => onNavigate?.() }, link.label)));
+    isNavItemActive(href, mode) {
+        return isNavLinkActive(this.currentPath ?? '', href, mode);
     }
-    renderMenuGroup(item, onNavigate) {
+    resolveAriaCurrentHref() {
+        const accountHome = this.getAccountHome();
+        return resolveAriaCurrentNavKey(this.getActiveMenu(), this.currentPath ?? '', (item) => this.shouldExcludeFromNavActive(item, accountHome));
+    }
+    isAriaCurrentHref(href, ariaCurrentKey) {
+        return isAriaCurrentNavHref(href, ariaCurrentKey);
+    }
+    renderIconNavLink(link, Icon, className, onNavigate, ariaCurrentHref = null) {
+        const active = this.isNavItemActive(link.href, 'prefix');
+        const ariaCurrent = this.isAriaCurrentHref(link.href, ariaCurrentHref);
+        return (h("li", { class: "main-nav__item main-nav__item--auth", key: link.label }, h("a", { class: {
+                'sign-in-link': true,
+                [className]: true,
+                'nav-link--active': active,
+            }, href: link.href, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.() }, h(Icon, null), link.label)));
+    }
+    renderFlatNavLink(link, onNavigate, ariaCurrentHref = null) {
+        const active = this.isNavItemActive(link.href, 'prefix');
+        const ariaCurrent = this.isAriaCurrentHref(link.href, ariaCurrentHref);
+        return (h("li", { class: "main-nav__item", key: link.label }, h("a", { class: {
+                'nav-link': true,
+                'nav-link--active': active,
+            }, href: link.href, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.() }, link.label)));
+    }
+    renderMenuGroup(item, onNavigate, ariaCurrentHref = null) {
         const items = item.items ?? [];
         const isOpen = this.openDropdown === item.label;
         const panelId = this.getDropdownPanelId(item.label);
+        const groupActive = items.some((child) => this.isNavItemActive(child.href, 'exact'));
         return (h("li", { class: "main-nav__item main-nav__item--dropdown", key: item.label }, h("div", { class: "nav-dropdown", onMouseEnter: () => this.handleDropdownPointerEnter(item.label), onMouseLeave: (event) => this.handleDropdownPointerLeave(event), onFocusout: (event) => this.handleDropdownFocusOut(event, item.label) }, h("button", { type: "button", class: {
                 'nav-dropdown__trigger': true,
                 'nav-dropdown__trigger--open': isOpen,
+                'nav-dropdown__trigger--active': groupActive,
             }, "aria-expanded": isOpen ? 'true' : 'false', "aria-haspopup": "true", "aria-controls": panelId, id: `${panelId}-trigger`, onClick: (event) => this.handleDropdownTriggerClick(event, item.label), onKeyDown: (event) => {
                 const container = event.currentTarget.closest('.nav-dropdown');
                 this.handleDropdownTriggerKeyDown(event, item.label, container);
-            } }, h("span", { class: "nav-dropdown__label" }, item.label), h(ToggleIcon, { expanded: isOpen })), isOpen ? (h("div", { class: "nav-dropdown__panel", id: panelId, role: "region", "aria-labelledby": `${panelId}-trigger`, onMouseEnter: () => this.handleDropdownPanelPointerEnter(item.label), onMouseLeave: (event) => this.handleDropdownPanelPointerLeave(event) }, h("div", { class: "nav-dropdown__accent" }, h("div", { class: "nav-dropdown__links" }, items.map((child) => (h("a", { class: "nav-dropdown__link", href: child.href, key: `${item.label}:${child.label}`, onClick: () => onNavigate?.() }, child.label))))))) : null)));
+            } }, h("span", { class: "nav-dropdown__label" }, item.label), h(ToggleIcon, { expanded: isOpen })), isOpen ? (h("div", { class: "nav-dropdown__panel", id: panelId, role: "region", "aria-labelledby": `${panelId}-trigger`, onMouseEnter: () => this.handleDropdownPanelPointerEnter(item.label), onMouseLeave: (event) => this.handleDropdownPanelPointerLeave(event) }, h("div", { class: "nav-dropdown__accent" }, h("ul", { class: "nav-dropdown__links" }, items.map((child, index) => {
+            const childActive = this.isNavItemActive(child.href, 'exact');
+            const ariaCurrent = this.isAriaCurrentHref(child.href, ariaCurrentHref);
+            const positionLabel = `${child.label}, link ${index + 1} of ${items.length}`;
+            return (h("li", { key: `${item.label}:${child.label}` }, h("a", { class: {
+                    'nav-dropdown__link': true,
+                    'nav-dropdown__link--active': childActive,
+                }, href: child.href, "aria-label": positionLabel, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.(), onKeyDown: (event) => {
+                    const dropdownContainer = event.currentTarget.closest('.nav-dropdown');
+                    this.handleDropdownLinkKeyDown(event, dropdownContainer);
+                } }, child.label)));
+        }))))) : null)));
     }
     handleAuthClick(event, action, _href, onNavigate) {
         const emitted = this.wegAuthClick.emit({ action });
@@ -376,18 +665,22 @@ export class WegHeader {
                 [options.className || '']: !!options.className,
             }, href: link.href, "aria-label": link.label, onClick: (event) => this.handleAuthClick(event, action, link.href, onNavigate) }, h(Icon, null), !iconOnly ? link.label : null, iconOnly ? h("span", { class: "sr-only" }, link.label) : null));
     }
-    renderManageAccountAnchor(onNavigate, iconOnly = false) {
+    renderManageAccountAnchor(onNavigate, iconOnly = false, ariaCurrentHref = null) {
         const label = this.getManageAccountLabel();
+        const href = accountPath(this.getAccountHome(), '/account/manage');
+        const active = this.isNavItemActive(href, 'prefix');
+        const ariaCurrent = this.isAriaCurrentHref(href, ariaCurrentHref);
         return (h("a", { class: {
                 'sign-in-link': !iconOnly,
                 'manage-account-link': true,
                 'icon-button': iconOnly,
-            }, href: accountPath(this.getAccountHome(), '/account/manage'), "aria-label": label, onClick: () => onNavigate?.() }, h(SignInIcon, null), !iconOnly ? label : null, iconOnly ? h("span", { class: "sr-only" }, label) : null));
+                'nav-link--active': active,
+            }, href: href, "aria-label": label, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.() }, h(SignInIcon, null), !iconOnly ? label : null, iconOnly ? h("span", { class: "sr-only" }, label) : null));
     }
-    renderNavItem(item, onNavigate) {
+    renderNavItem(item, onNavigate, ariaCurrentHref = null) {
         const accountHome = this.getAccountHome();
         if (isMenuGroup(item)) {
-            return this.renderMenuGroup(item, onNavigate);
+            return this.renderMenuGroup(item, onNavigate, ariaCurrentHref);
         }
         if (isSignOutLink(item)) {
             return (h("li", { class: "main-nav__item main-nav__item--auth", key: "sign-out" }, this.renderAuthControl({ link: item, action: 'sign-out', onNavigate })));
@@ -396,18 +689,19 @@ export class WegHeader {
             return (h("li", { class: "main-nav__item main-nav__item--auth", key: "sign-in" }, this.renderAuthControl({ link: item, action: 'sign-in', onNavigate })));
         }
         if (isManageAccountLink(item, accountHome)) {
-            return (h("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate)));
+            return (h("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate, false, ariaCurrentHref)));
         }
         if (this.signedIn && isFindJobLink(item)) {
-            return this.renderIconNavLink(item, FindJobIcon, 'find-a-job-link', onNavigate);
+            return this.renderIconNavLink(item, FindJobIcon, 'find-a-job-link', onNavigate, ariaCurrentHref);
         }
         if (this.signedIn && isDashboardLink(item, accountHome)) {
-            return this.renderIconNavLink(item, DashboardIcon, 'dashboard-link', onNavigate);
+            return this.renderIconNavLink(item, DashboardIcon, 'dashboard-link', onNavigate, ariaCurrentHref);
         }
-        return this.renderFlatNavLink(item, onNavigate);
+        return this.renderFlatNavLink(item, onNavigate, ariaCurrentHref);
     }
     renderNav(onNavigate) {
-        return (h("nav", { class: "main-nav", "aria-label": "Main" }, h("ul", { class: "main-nav__list" }, this.getActiveMenu().map((item) => this.renderNavItem(item, onNavigate)))));
+        const ariaCurrentHref = this.resolveAriaCurrentHref();
+        return (h("nav", { class: "main-nav", "aria-label": MAIN_NAV_LABEL }, h("ul", { class: "main-nav__list" }, this.getActiveMenu().map((item) => this.renderNavItem(item, onNavigate, ariaCurrentHref)))));
     }
     renderCompactAuth(onNavigate) {
         if (this.signedIn) {
@@ -428,10 +722,12 @@ export class WegHeader {
         const logoSrc = this.getLogoSrc();
         const closeMenu = () => this.closeMenu();
         const mobileMenuActive = this.isMobileMenuActive();
-        return (h("header", { key: '64736cfe4328d1ab78ae99cca6721c492f1531e9', class: {
+        return (h("header", { key: '429d9af0996fa37484ebeea36f1e071fe0ba0789', class: {
                 header: true,
+                'header--fixed': !mobileMenuActive,
+                'header--hidden': this.headerHidden && !mobileMenuActive,
                 'header--menu-open': mobileMenuActive,
-            } }, h("div", { key: '0db29810a8772023f5b50b7f7074ce1a41e65e83', class: "header-inner" }, h("button", { key: '75c2f7ecd64bfcc7279798efad80af9502807f6e', type: "button", class: "menu-toggle icon-button", "aria-label": mobileMenuActive ? 'Close menu' : 'Open menu', "aria-expanded": mobileMenuActive ? 'true' : 'false', "aria-controls": "weg-header-main-nav", onClick: () => this.toggleMenu() }, mobileMenuActive ? h(CloseIcon, null) : h(HamburgerIcon, null)), h(Logo, { key: 'd05be8ac2d8be06bc5a005a70c1fe25bd6259243', href: logoHref, src: logoSrc }), h("div", { key: '3a125651b08eeb7906444a056fe871873807ef73', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: '4e36a06336d834c418511a89eb1d3fe6278957ad', class: "main-nav-panel", id: "weg-header-main-nav", role: mobileMenuActive ? 'dialog' : undefined, "aria-modal": mobileMenuActive ? 'true' : undefined, "aria-label": mobileMenuActive ? 'Menu' : undefined }, this.renderNav(mobileMenuActive ? closeMenu : undefined)))));
+            } }, h("div", { key: '2c088a3e602ac2c8751d21376872536e35a0ab7d', class: "header-inner" }, h("div", { key: '91089bfc45b2b3274df00b032cad0adaba79b937', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), h("button", { key: 'a66e0f0564014f5041a9fa80b39f74ce177f7125', type: "button", class: "menu-toggle icon-button", "aria-label": mobileMenuActive ? CLOSE_MAIN_NAV_LABEL : OPEN_MAIN_NAV_LABEL, "aria-expanded": mobileMenuActive ? 'true' : 'false', "aria-controls": "weg-header-main-nav", onClick: () => this.toggleMenu() }, mobileMenuActive ? h(CloseIcon, null) : h(HamburgerIcon, null)), h(Logo, { key: '917d134565c899e9a25557bafd62bf8b0de75e32', href: logoHref, src: logoSrc }), h("div", { key: '7b6bcd11271e00ddf0ca7d34bc1c8d2ad8342ed4', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: '1a6779e99be4704b6f9093501dd230a891b81c17', class: "main-nav-panel", id: "weg-header-main-nav", role: mobileMenuActive ? 'dialog' : undefined, "aria-modal": mobileMenuActive ? 'true' : undefined, "aria-label": mobileMenuActive ? MAIN_NAV_LABEL : undefined }, this.renderNav(mobileMenuActive ? closeMenu : undefined)))));
     }
     static get is() { return "weg-header"; }
     static get encapsulation() { return "shadow"; }
@@ -466,7 +762,7 @@ export class WegHeader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Layout payload, supplied by the host application.\n\nExpected shape:\n```json\n{\n  \"header\": {\n    \"menu\": [\n      { \"label\": \"Find a job\", \"items\": [{ \"label\": \"Graduates\", \"href\": \"...\" }] },\n      { \"label\": \"Career advice\", \"href\": \"/career-advice\" },\n      { \"label\": \"Sign in\", \"href\": \"/account/login\" }\n    ]\n  }\n}\n```"
+                    "text": "Layout payload, supplied by the host application.\r\n\r\nExpected shape:\r\n```json\r\n{\r\n  \"header\": {\r\n    \"menu\": [\r\n      { \"label\": \"Find a job\", \"items\": [{ \"label\": \"Graduates\", \"href\": \"...\" }] },\r\n      { \"label\": \"Career advice\", \"href\": \"/career-advice\" },\r\n      { \"label\": \"Sign in\", \"href\": \"/account/login\" }\r\n    ]\r\n  }\r\n}\r\n```"
                 },
                 "getter": false,
                 "setter": false,
@@ -524,12 +820,31 @@ export class WegHeader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Account portal origin for sign-in, register, dashboard, and manage-account links.\nDefaults to production when omitted."
+                    "text": "Account portal origin for sign-in, register, dashboard, and manage-account links.\r\nDefaults to production when omitted."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "account-base-url"
+            },
+            "currentPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page path from the host application (e.g. `/career-advice/my-article`).\r\nInclude a query string when matching dropdown links that use search params."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-path"
             }
         };
     }
@@ -537,7 +852,8 @@ export class WegHeader {
         return {
             "resolved": {},
             "menuOpen": {},
-            "openDropdown": {}
+            "openDropdown": {},
+            "headerHidden": {}
         };
     }
     static get events() {
@@ -549,7 +865,7 @@ export class WegHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fired when the user clicks Sign in or Sign out.\nCall `event.preventDefault()` in the host to handle navigation/logout yourself."
+                    "text": "Fired when the user clicks Sign in or Sign out.\r\nCall `event.preventDefault()` in the host to handle navigation/logout yourself."
                 },
                 "complexType": {
                     "original": "{ action: LayoutHeaderAuthAction }",