weg-shared-layout 0.0.41 → 0.0.44

package/dist/esm/weg-footer_2.entry.js

@@ -375,13 +375,28 @@ const LOGO_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFcCAYAAACQ
 
 const sharedCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}:root,:host{--weg-container-breakpoint-sm:40rem;--weg-container-breakpoint-md:48rem;--weg-container-breakpoint-lg:64rem;--weg-container-breakpoint-xl:80rem;--weg-container-breakpoint-2xl:86rem;--weg-container-max-vw:95vw;--weg-container-padding-inline:1rem}@media (width >= 48rem){:root,:host{--weg-container-padding-inline:2rem}}.container{width:100%;max-width:var(--weg-container-max-vw);margin-inline:auto;padding-inline:var(--weg-container-padding-inline)}@media (width >= 40rem){.container{max-width:min(var(--weg-container-breakpoint-sm), var(--weg-container-max-vw))}}@media (width >= 48rem){.container{max-width:min(var(--weg-container-breakpoint-md), var(--weg-container-max-vw))}}@media (width >= 64rem){.container{max-width:min(var(--weg-container-breakpoint-lg), var(--weg-container-max-vw))}}@media (width >= 80rem){.container{max-width:min(var(--weg-container-breakpoint-xl), var(--weg-container-max-vw))}}@media (width >= 86rem){.container{max-width:min(var(--weg-container-breakpoint-xl), var(--weg-container-max-vw))}}*,*::before,*::after{box-sizing:border-box}:host{display:block;--weg-font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji',      'Segoe UI Emoji';--weg-color-accent:#948eeb;--weg-purple-200:#cdcff8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
 
-const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.header{width:100%;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}@media (width >= 960px){.header{border-bottom-width:0.25rem}}:host{position:relative;z-index:20}.header--menu-open{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;overflow:hidden}.header--menu-open .header-inner{flex:1 1 auto;flex-wrap:wrap;align-content:flex-start;min-height:0}.header--menu-open .main-nav-panel{display:block;flex:1 1 100%;width:100%;min-height:0;overflow-y:auto;border-top:1px solid #d8d4f7}@media (width >= 960px){.header--menu-open{position:static;inset:auto;z-index:auto;display:block;overflow:visible}.header--menu-open .header-inner{flex:unset;flex-wrap:nowrap;align-content:unset;min-height:unset}}.logo-link{display:inline-flex;align-items:center;text-decoration:none;outline:none}.logo-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.logo{height:2.5rem;width:auto}@media (width >= 960px){.logo{height:3rem}}@media (width >= 1280px){.logo{height:5rem}}.header-inner{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:0.75rem;padding-block:0.75rem;padding-inline:var(--weg-container-padding-inline)}@media (width >= 960px){.header-inner{flex-wrap:nowrap;gap:1.5rem;padding-block:1.25rem}}@media (width >= 1440px){.header-inner{padding-block:1.75rem}}.header-inner .logo-link{flex:1 1 auto;min-width:0;justify-content:center}@media (width >= 960px){.header-inner .logo-link{flex:0 0 auto;justify-content:flex-start}}.header-inner .logo{max-width:100%}.header-actions{display:flex;align-items:center;flex-shrink:0}@media (width >= 960px){.header-actions{display:none}}.main-nav-panel{display:none;margin-inline:-0.5rem}@media (width >= 960px){.main-nav-panel{display:flex;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end;overflow:visible;border-top:none}}.main-nav{padding:0 1rem 1.5rem}@media (width >= 960px){.main-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:1rem;padding:0}}.main-nav__list{list-style:none;margin:0;padding:0}@media (width >= 960px){.main-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem}}@media (width >= 1280px){.main-nav__list{gap:1.5rem}}.main-nav__item{border-bottom:1px solid #d8d4f7}@media (width >= 960px){.main-nav__item{border-bottom:none}}.main-nav__item--dropdown{position:static}.nav-dropdown{position:relative}.nav-link{display:block;width:100%;padding:1rem 0;font-weight:600;color:inherit;text-decoration:none;outline:none}.nav-link:hover{opacity:0.85}.nav-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;width:100%;padding:1rem 0;border:none;background:transparent;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;outline:none}.nav-dropdown__trigger:hover{opacity:0.85}.nav-dropdown__trigger:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-dropdown__trigger--open{background:transparent}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}.toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999rem;background:#312e81;color:#ffffff;flex-shrink:0}.nav-dropdown__panel{padding:0 0 0.75rem}@media (width >= 960px){.nav-dropdown__panel{position:absolute;top:calc(100% + 0.5rem);left:0;z-index:500;min-width:17.5rem;padding:0.75rem 0 0.75rem 0.75rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#f8fafc;box-shadow:0 0.25rem 1rem rgba(15, 23, 42, 0.08)}.nav-dropdown__panel::before{content:'';position:absolute;top:-0.5rem;left:0;right:0;height:0.5rem}}.nav-dropdown__accent{border-left:0.25rem solid var(--weg-color-accent);padding-left:0.75rem}.nav-dropdown__links{display:flex;flex-direction:column;gap:0.25rem}.nav-dropdown__link{display:block;padding:0.625rem 0;font-weight:400;color:inherit;text-decoration:none;outline:none}.nav-dropdown__link:hover{opacity:0.85}.nav-dropdown__link:focus-visible{outline:0.125rem solid var(--weg-color-accent);outline-offset:0.125rem;border-radius:0.25rem}.nav-dropdown__link--active{background:var(--weg-purple-200)}@media (width >= 960px){.nav-dropdown__link{padding:0.5rem;margin-right:0.75rem;border-radius:0.5rem;font-weight:600}.nav-dropdown__link:hover,.nav-dropdown__link:focus-visible{background:var(--weg-purple-200);opacity:1}.nav-dropdown__link--active{opacity:1}}@media (width >= 1280px){.nav-dropdown__link{padding:0.5rem 0.75rem}}.main-nav__item--auth>a{display:flex;align-items:center;gap:0.5rem;width:100%;padding:1rem 0}@media (width >= 960px){.nav-link,.nav-dropdown__trigger,.main-nav__item--auth>a{display:inline-flex;align-items:center;width:auto;padding:0.5rem;border-radius:0.5rem}.nav-link--active,.main-nav__item--auth>a.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{gap:0.5rem;cursor:pointer}.nav-dropdown__trigger--open{background:#f1f5f9}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}}@media (width >= 1280px){.main-nav{font-size:1.25rem}.main-nav__item--auth>a{padding:0.5rem 0.75rem}}.sign-in-link,.sign-out-link,.auth-button{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:inherit;text-decoration:none;outline:none}.auth-button{padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.sign-in-link:hover,.sign-out-link:hover,.auth-button:hover{opacity:0.85}.sign-in-link:focus-visible,.sign-out-link:focus-visible,.auth-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:0.5rem;background:transparent;color:inherit;cursor:pointer;text-decoration:none;outline:none}.icon-button:hover{background:#f1f5f9}.icon-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px}.menu-toggle{flex-shrink:0}@media (width >= 960px){.menu-toggle{display:none}}`;
+const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.weg-header-shell{display:block}.skip-to-content{position:fixed;top:-100%;left:0;z-index:10001;padding:0.75rem 1rem;background:#ffffff;color:#0f172a;font-family:var(--weg-font-family);font-weight:600;text-decoration:none;border:2px solid #312e81;border-radius:0 0 0.25rem 0;box-shadow:0 0.25rem 0.75rem rgba(17, 24, 39, 0.15)}.skip-to-content:focus,.skip-to-content:focus-visible{top:0;outline:2px solid var(--weg-color-accent);outline-offset:2px}.header{width:100%;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}@media (width >= 960px){.header{border-bottom-width:0.25rem}}:host{position:relative;z-index:20;display:block;height:var(--weg-header-height, auto)}.header--fixed{position:fixed;top:0;left:0;right:0;z-index:20;transform:translateY(0);transition:transform 0.25s ease}.header--fixed.header--hidden{transform:translateY(-100%)}@media (prefers-reduced-motion: reduce){.header--fixed{transition:none}}.header--menu-open{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;overflow:hidden}.header--menu-open .header-inner{flex:1 1 auto;flex-wrap:wrap;align-content:flex-start;min-height:0}.header--menu-open .main-nav-panel{display:block;flex:1 1 100%;width:100%;min-height:0;overflow-y:auto;border-top:1px solid #d8d4f7}@media (width >= 960px){.header--menu-open{position:static;inset:auto;z-index:auto;display:block;overflow:visible}.header--menu-open .header-inner{flex:unset;flex-wrap:nowrap;align-content:unset;min-height:unset}}.logo-link{display:inline-flex;align-items:center;text-decoration:none;outline:none}.logo-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.logo{height:2.5rem;width:auto}@media (width >= 960px){.logo{height:3rem}}@media (width >= 1280px){.logo{height:5rem}}.header-inner{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:0.75rem;padding-block:0.75rem;padding-inline:var(--weg-container-padding-inline)}@media (width >= 960px){.header-inner{flex-wrap:nowrap;gap:1.5rem;padding-block:1.25rem}}@media (width >= 1440px){.header-inner{padding-block:1.75rem}}.header-inner .logo-link{flex:1 1 auto;min-width:0;justify-content:center}@media (width >= 960px){.header-inner .logo-link{flex:0 0 auto;justify-content:flex-start}}.header-inner .logo{max-width:100%}.header-actions{display:flex;align-items:center;flex-shrink:0}@media (width >= 960px){.header-actions{display:none}}.main-nav-panel{display:none;margin-inline:-0.5rem}@media (width >= 960px){.main-nav-panel{display:flex;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end;overflow:visible;border-top:none}}.main-nav{padding:0 1rem 1.5rem}@media (width >= 960px){.main-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:1rem;padding:0}}.main-nav__list{list-style:none;margin:0;padding:0}@media (width >= 960px){.main-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem}}@media (width >= 1280px){.main-nav__list{gap:1.5rem}}.main-nav__item{border-bottom:1px solid #d8d4f7}@media (width >= 960px){.main-nav__item{border-bottom:none}}.main-nav__item--dropdown{position:static}.nav-dropdown{position:relative}.nav-link{display:block;width:100%;padding:1rem 0;font-weight:600;color:inherit;text-decoration:none;outline:none}.nav-link:hover{opacity:0.85}.nav-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;width:100%;padding:1rem 0;border:none;background:transparent;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;outline:none}.nav-dropdown__trigger:hover{opacity:0.85}.nav-dropdown__trigger:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-dropdown__trigger--open{background:transparent}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}.toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999rem;background:#312e81;color:#ffffff;flex-shrink:0}.nav-dropdown__panel{padding:0 0 0.75rem}@media (width >= 960px){.nav-dropdown__panel{position:absolute;top:calc(100% + 0.5rem);left:0;z-index:500;min-width:17.5rem;padding:0.75rem 0 0.75rem 0.75rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#f8fafc;box-shadow:0 0.25rem 1rem rgba(15, 23, 42, 0.08)}.nav-dropdown__panel::before{content:'';position:absolute;top:-0.5rem;left:0;right:0;height:0.5rem}}.nav-dropdown__accent{border-left:0.25rem solid var(--weg-color-accent);padding-left:0.75rem}.nav-dropdown__links{display:flex;flex-direction:column;gap:0.25rem;list-style:none;margin:0;padding:0}.nav-dropdown__link{display:block;padding:0.625rem 0;font-weight:400;color:inherit;text-decoration:none;outline:none}.nav-dropdown__link:hover{opacity:0.85}.nav-dropdown__link:focus-visible{outline:0.125rem solid var(--weg-color-accent);outline-offset:0.125rem;border-radius:0.25rem}.nav-dropdown__link--active{background:var(--weg-purple-200)}@media (width >= 960px){.nav-dropdown__link{padding:0.5rem;margin-right:0.75rem;border-radius:0.5rem;font-weight:600}.nav-dropdown__link:hover,.nav-dropdown__link:focus-visible{background:var(--weg-purple-200);opacity:1}.nav-dropdown__link--active{opacity:1}}@media (width >= 1280px){.nav-dropdown__link{padding:0.5rem 0.75rem}}.main-nav__item--auth>a{display:flex;align-items:center;gap:0.5rem;width:100%;padding:1rem 0}@media (width >= 960px){.nav-link,.nav-dropdown__trigger,.main-nav__item--auth>a{display:inline-flex;align-items:center;width:auto;padding:0.5rem;border-radius:0.5rem}.nav-link--active,.main-nav__item--auth>a.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{gap:0.5rem;cursor:pointer}.nav-dropdown__trigger--open{background:#f1f5f9}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}}@media (width >= 1280px){.main-nav{font-size:1.25rem}.main-nav__item--auth>a{padding:0.5rem 0.75rem}}.sign-in-link,.sign-out-link,.auth-button{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:inherit;text-decoration:none;outline:none}.auth-button{padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.sign-in-link:hover,.sign-out-link:hover,.auth-button:hover{opacity:0.85}.sign-in-link:focus-visible,.sign-out-link:focus-visible,.auth-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:0.5rem;background:transparent;color:inherit;cursor:pointer;text-decoration:none;outline:none}.icon-button:hover{background:#f1f5f9}.icon-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px}.menu-toggle{flex-shrink:0}@media (width >= 960px){.menu-toggle{display:none}}`;
 
 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';
+const SKIP_TO_CONTENT_LABEL = 'Skip to main content';
+const SKIP_TO_CONTENT_TARGET_ID = 'main-content';
+function focusScrollTarget(element) {
+    if (!element.hasAttribute('tabindex')) {
+        element.setAttribute('tabindex', '-1');
+    }
+    element.focus({ preventScroll: true });
+    element.scrollIntoView();
+}
 function normalizeAccountBase(input) {
     const base = input?.trim() || DEFAULT_ACCOUNT_HOME;
     return base.replace(/\/$/, '');
@@ -517,9 +532,16 @@ const WegHeader = class {
     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;
@@ -540,15 +562,69 @@ const WegHeader = class {
         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.
@@ -566,10 +642,74 @@ const WegHeader = class {
     }
     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;
     }
@@ -579,8 +719,39 @@ const WegHeader = class {
     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;
@@ -611,10 +782,12 @@ const WegHeader = class {
     }
     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, '-')}`;
@@ -667,29 +840,111 @@ const WegHeader = class {
         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);
@@ -760,13 +1015,17 @@ const WegHeader = class {
             }, "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("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);
-            return (h("a", { class: {
+            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, key: `${item.label}:${child.label}`, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.() }, child.label));
+                }, 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) {
@@ -829,7 +1088,7 @@ const WegHeader = class {
     }
     renderNav(onNavigate) {
         const ariaCurrentHref = this.resolveAriaCurrentHref();
-        return (h("nav", { class: "main-nav", "aria-label": "Main" }, h("ul", { class: "main-nav__list" }, this.getActiveMenu().map((item) => this.renderNavItem(item, onNavigate, ariaCurrentHref)))));
+        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) {
@@ -845,15 +1104,28 @@ const WegHeader = class {
             onNavigate,
         });
     }
+    handleSkipToContent(event) {
+        event.preventDefault();
+        const mainContent = document.querySelector('main') ?? document.getElementById(SKIP_TO_CONTENT_TARGET_ID);
+        if (mainContent instanceof HTMLElement) {
+            focusScrollTarget(mainContent);
+        }
+        const headings = document.querySelectorAll('h1');
+        if (headings.length > 0 && headings[0] instanceof HTMLElement) {
+            focusScrollTarget(headings[0]);
+        }
+    }
     render() {
         const logoHref = this.getLogoHref();
         const logoSrc = this.getLogoSrc();
         const closeMenu = () => this.closeMenu();
         const mobileMenuActive = this.isMobileMenuActive();
-        return (h("header", { key: '6b932d0c3dc20b53292b61fa3403e26e35182d05', class: {
+        return (h("div", { key: 'a769ab7a466cd90019570b8c3cf8e669b3df62c6', class: "weg-header-shell" }, h("a", { key: '43b11ec58387350df5ccf53c5a97cb94296357e5', class: "skip-to-content", href: `#${SKIP_TO_CONTENT_TARGET_ID}`, title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), h("header", { key: '84d893626e535525b235adc5997bac474d785732', class: {
                 header: true,
+                'header--fixed': !mobileMenuActive,
+                'header--hidden': this.headerHidden && !mobileMenuActive,
                 'header--menu-open': mobileMenuActive,
-            } }, h("div", { key: '426395d6e1245188bc103c8a2f72ccfc3819ba7d', class: "header-inner" }, h("button", { key: 'fe6128407500f5b1a1899aa9e7fdd00222f177b3', 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: 'bb19f9430217686834c4aec615bd7306d276a969', href: logoHref, src: logoSrc }), h("div", { key: 'cebab248840b8412479a90a83c5fc3d0a601476b', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: 'c029db0bcd71a9940d93bef5b32e59625f94b76c', 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: '4cfaaf18575bf56d9c09ab6fe0db4383cc9cee94', class: "header-inner" }, h("div", { key: 'b9e2d18284db956c944a4e0669a6927586b6ee32', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), h("button", { key: 'f019b74b76c22311c97ee3fc539f396e24ec98fd', 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: 'fe6d460021d059287b487fafb96be2a79a3253c8', href: logoHref, src: logoSrc }), h("div", { key: '2e59fe4e86e183aa7ad41402baba2ff6467967c1', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: '90c8861c45b344862c03a3e2d5c2b6b6f37a6174', 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 watchers() { return {
         "layout": [{

package/dist/esm/weg-shared-layout.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["weg-footer_2",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}],[513,"weg-header",{"layout":[1],"signedIn":[516,"signed-in"],"userName":[1,"user-name"],"accountBaseUrl":[1,"account-base-url"],"currentPath":[1,"current-path"],"resolved":[32],"menuOpen":[32],"openDropdown":[32]},[[8,"keydown","handleKeyDown"]],{"layout":[{"watchLayout":0}]}]]]], options);
+  return bootstrapLazy([["weg-footer_2",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}],[513,"weg-header",{"layout":[1],"signedIn":[516,"signed-in"],"userName":[1,"user-name"],"accountBaseUrl":[1,"account-base-url"],"currentPath":[1,"current-path"],"resolved":[32],"menuOpen":[32],"openDropdown":[32],"headerHidden":[32]},[[8,"keydown","handleKeyDown"]],{"layout":[{"watchLayout":0}]}]]]], options);
 });

package/dist/types/components/weg-header/weg-header.d.ts

@@ -47,17 +47,28 @@ export declare class WegHeader {
     private resolved;
     private menuOpen;
     private openDropdown;
+    private headerHidden;
     private boundHandleDocumentClick;
     private boundHandleViewportChange;
     private boundHandleHoverCapabilityChange;
+    private boundHandleScroll;
+    private headerResizeObserver?;
+    private lastScrollY;
+    private scrollTicking;
+    private bodyScrollLocked;
+    private bodyScrollLockY;
     private hoverCloseTimer;
     private hoverOpenEnabled;
     private desktopMediaQuery?;
     private hoverCapableMediaQuery?;
     private resolve;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private syncHeaderHeight;
+    private handleScroll;
+    private updateHeaderVisibility;
     /**
      * 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.
@@ -65,9 +76,21 @@ export declare class WegHeader {
     private updateHoverDropdownEnabled;
     private handleHoverCapabilityChange;
     private handleViewportChange;
+    private announceToScreenReader;
+    private getMenuToggleButton;
+    private getFirstNavFocusable;
+    private focusFirstNavItem;
+    private focusMenuToggle;
+    private getMenuGroupLinkCount;
+    private formatLinkCount;
+    private formatItemCount;
+    private announceSubmenuExpanded;
+    private announceSubmenuCollapsed;
     private isMobileMenuActive;
     protected watchLayout(): void;
     handleKeyDown(event: KeyboardEvent): void;
+    private lockBodyScroll;
+    private unlockBodyScroll;
     private handleDocumentClick;
     private cancelScheduledDropdownClose;
     private openDropdownMenu;
@@ -82,7 +105,12 @@ export declare class WegHeader {
     private handleDropdownTriggerClick;
     private handleDropdownFocusOut;
     private handleDropdownTriggerKeyDown;
+    private getDropdownLinks;
+    private focusDropdownLink;
     private focusFirstDropdownLink;
+    private getDropdownContainer;
+    private closeDropdownAndFocusTrigger;
+    private handleDropdownLinkKeyDown;
     private toggleMenu;
     private openMenu;
     private closeMenu;
@@ -105,5 +133,6 @@ export declare class WegHeader {
     private renderNavItem;
     private renderNav;
     private renderCompactAuth;
+    private handleSkipToContent;
     render(): any;
 }