weg-shared-layout 0.0.59 → 0.0.61

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

@@ -377,7 +377,7 @@ 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}.weg-header-shell{display:contents}:host{display:block}:host(.weg-header--scroll-mode){min-height:4.25rem}@media (width >= 960px){:host(.weg-header--scroll-mode){min-height:5.75rem}}@media (width >= 1280px){:host(.weg-header--scroll-mode){min-height:7.75rem}}@media (width >= 1440px){:host(.weg-header--scroll-mode){min-height:8.75rem}}.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%;position:relative;z-index:1000;transition:transform 0.25s ease;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}.header--scroll-mode{position:fixed;top:0;left:0;right:0}.header--scroll-hidden{transform:translateY(-100%)}.header:not(.header--scroll-mode).header--scroll-hidden{transform:none}@media (prefers-reduced-motion: reduce){.header{transition:none}}@media (width >= 960px){.header{border-bottom-width:0.25rem}}.header--menu-open{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;transform:none;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 0 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;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;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}@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:contents}:host{display:block}:host(.weg-header--scroll-mode){min-height:4.25rem}@media (width >= 960px){:host(.weg-header--scroll-mode){min-height:5.75rem}}@media (width >= 1280px){:host(.weg-header--scroll-mode){min-height:7.75rem}}@media (width >= 1440px){:host(.weg-header--scroll-mode){min-height:8.75rem}}.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%;position:relative;z-index:1000;transition:transform 0.25s ease;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}.header--scroll-mode{position:fixed;top:0;left:0;right:0}.header--scroll-hidden{transform:translateY(-100%)}.header:not(.header--scroll-mode).header--scroll-hidden{transform:none}@media (prefers-reduced-motion: reduce){.header{transition:none}}@media (width >= 960px){.header{border-bottom-width:0.25rem}}.header-backdrop{position:fixed;inset:0;z-index:0;background:rgba(15, 23, 42, 0.32)}.header--menu-open{--weg-mobile-header-bar:calc(0.75rem + 2.5rem + 0.75rem);position:fixed;top:0;left:0;right:0;bottom:auto;z-index:1000;width:100%;height:auto;max-height:100dvh;transform:none;display:block;overflow:visible;background:transparent;border-bottom-color:transparent}.header--menu-open .header-inner{position:relative;z-index:1;flex:none;flex-wrap:wrap;align-content:flex-start;height:auto;max-height:100dvh;min-height:0;background:#ffffff;border-bottom:2px solid var(--weg-color-accent)}@media (width < 960px){.header--menu-open .header-inner{padding-bottom:0}}.header--menu-open .main-nav-panel{display:block;flex:none;width:100%;max-height:calc(100dvh - var(--weg-mobile-header-bar) - 2px);margin-inline:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:none;animation:weg-mobile-nav-enter 0.32s cubic-bezier(0.32, 0.72, 0, 1)}@keyframes weg-mobile-nav-enter{from{max-height:0;overflow:hidden}to{max-height:calc(100dvh - var(--weg-mobile-header-bar) - 2px);overflow:hidden}}@media (prefers-reduced-motion: reduce){.header--menu-open .main-nav-panel{animation:none}}@media (width >= 960px){.header--menu-open{position:static;inset:auto;z-index:auto;display:block;width:auto;height:auto;max-height:none;overflow:visible;background:#ffffff;border-bottom-color:var(--weg-color-accent)}.header--menu-open .header-inner{position:static;z-index:auto;flex:unset;flex-wrap:nowrap;align-content:unset;height:auto;max-height:none;min-height:unset;background:transparent;border-bottom:none}.header--menu-open .main-nav-panel{display:flex;flex:1 1 auto;width:auto;min-height:unset;max-height:none;margin-inline:-0.5rem;overflow:visible;animation:none}.header--menu-open .main-nav{max-height:none;overflow:visible}}.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.25rem 0 0.75rem}@media (width < 960px){.header--menu-open .main-nav{padding:1.25rem 0 2rem}}@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.125rem 0 0}@media (width < 960px){.header--menu-open .main-nav__list{padding:0}}@media (width >= 960px){.main-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;padding:0}}@media (width >= 1280px){.main-nav__list{gap:1.5rem}}.main-nav__item{border-bottom:1px solid #d8d4f7}.main-nav__item:has(.nav-link--active),.main-nav__item:has(.nav-dropdown__trigger--active){border-bottom-color:transparent}@media (width < 960px){.header--menu-open .main-nav__item{margin-inline:0.25rem}}@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:0.9375rem 0.25rem;border-radius:0.75rem;font-weight:600;color:inherit;text-decoration:none;outline:none}@media (width < 960px){.header--menu-open .nav-link{width:calc(100% + 0.5rem);max-width:none;margin-inline:-0.25rem;padding:1.125rem 0.75rem;box-sizing:border-box}}.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:0.9375rem 0.25rem;border:none;border-radius:0.75rem;background:transparent;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;outline:none}@media (width < 960px){.header--menu-open .nav-dropdown__trigger{width:calc(100% + 0.5rem);max-width:none;margin-inline:-0.25rem;padding:1.125rem 0.75rem;box-sizing:border-box}}.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.25rem 0 0.5rem}@media (width < 960px){.header--menu-open .nav-dropdown__panel{padding:0.375rem 0 0.75rem}.header--menu-open .nav-dropdown__link{padding:0.625rem 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:none;padding-left:0}@media (width >= 960px){.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.375rem;list-style:none;margin:0;padding:0}.nav-dropdown__link{display:block;padding:0.5rem 0.25rem;border-radius:0.75rem;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__links{gap:0.25rem}.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:0.9375rem 0.25rem;border-radius:0.75rem}@media (width < 960px){.header--menu-open .main-nav__item--auth>a{width:calc(100% + 0.5rem);max-width:none;margin-inline:-0.25rem;padding:1.125rem 0.75rem;box-sizing:border-box}}@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';
@@ -1198,7 +1198,7 @@ const WegHeader = class {
                 'header--menu-open': mobileMenuActive,
                 'header--scroll-mode': this.headerScrollMode,
                 'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
-            } }, index.h("div", { key: '5ef2a85bf2087206a17e3cbf163dde4d549dcd0b', class: "header-inner" }, index.h("div", { key: '3af6990b5c6d93b4332a0d53300daddb11e2ad2b', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), index.h("button", { key: '023322f1e49a676a5b20208b956624ce820e9b57', 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 ? index.h(CloseIcon, null) : index.h(HamburgerIcon, null)), index.h(Logo, { key: 'efa51b76936456c49059c67e9f2c9c2365b97d25', href: logoHref, src: logoSrc }), index.h("div", { key: 'ee0eff5ae3a63cf9550261a4d1727c9a88ab3e4d', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), index.h("div", { key: '7552a6a661e644dcb3d555ab5572f680cd0295de', 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)))))));
+            } }, mobileMenuActive ? (index.h("div", { class: "header-backdrop", "aria-hidden": "true", onClick: () => this.closeMenu({ focusToggle: true }) })) : null, index.h("div", { key: 'fed1ca383b347331a7def698403c5de1f4a4172d', class: "header-inner" }, index.h("div", { key: '8dbedcddafd3f19bf4923350e33acaec602dba9d', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), index.h("button", { key: '07d4ea0e714ea4626e1a7c5e56699da3f5728d38', 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 ? index.h(CloseIcon, null) : index.h(HamburgerIcon, null)), index.h(Logo, { key: 'ac4f61485283a079e880f41cde4f497e5010930b', href: logoHref, src: logoSrc }), index.h("div", { key: 'f06cabcadbb61f7a474bfef80c813f533921ccbc', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), index.h("div", { key: 'e485198c0ed2157a183191e6b5a79652779efade', 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/collection/components/weg-header/weg-header.css

@@ -108,33 +108,80 @@
   }
 }
 
+.header-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  background: rgba(15, 23, 42, 0.32);
+}
+
 .header--menu-open {
+  --weg-mobile-header-bar: calc(0.75rem + 2.5rem + 0.75rem);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: auto;
   z-index: 1000;
+  width: 100%;
+  height: auto;
+  max-height: 100dvh;
   transform: none;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  display: block;
+  overflow: visible;
+  background: transparent;
+  border-bottom-color: transparent;
 }
 
 .header--menu-open .header-inner {
-  flex: 1 1 auto;
+  position: relative;
+  z-index: 1;
+  flex: none;
   flex-wrap: wrap;
   align-content: flex-start;
+  height: auto;
+  max-height: 100dvh;
   min-height: 0;
+  background: #ffffff;
+  border-bottom: 2px solid var(--weg-color-accent);
+}
+
+@media (width < 960px) {
+  .header--menu-open .header-inner {
+    padding-bottom: 0;
+  }
 }
 
 .header--menu-open .main-nav-panel {
   display: block;
-  flex: 1 1 100%;
+  flex: none;
   width: 100%;
-  min-height: 0;
+  max-height: calc(100dvh - var(--weg-mobile-header-bar) - 2px);
+  margin-inline: 0;
+  overflow-x: hidden;
   overflow-y: auto;
-  border-top: 1px solid #d8d4f7;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  border-top: none;
+  animation: weg-mobile-nav-enter 0.32s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@keyframes weg-mobile-nav-enter {
+  from {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  to {
+    max-height: calc(100dvh - var(--weg-mobile-header-bar) - 2px);
+    overflow: hidden;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .header--menu-open .main-nav-panel {
+    animation: none;
+  }
 }
 
 @media (width >= 960px) {
@@ -143,14 +190,41 @@
     inset: auto;
     z-index: auto;
     display: block;
+    width: auto;
+    height: auto;
+    max-height: none;
     overflow: visible;
+    background: #ffffff;
+    border-bottom-color: var(--weg-color-accent);
   }
 
   .header--menu-open .header-inner {
+    position: static;
+    z-index: auto;
     flex: unset;
     flex-wrap: nowrap;
     align-content: unset;
+    height: auto;
+    max-height: none;
     min-height: unset;
+    background: transparent;
+    border-bottom: none;
+  }
+
+  .header--menu-open .main-nav-panel {
+    display: flex;
+    flex: 1 1 auto;
+    width: auto;
+    min-height: unset;
+    max-height: none;
+    margin-inline: -0.5rem;
+    overflow: visible;
+    animation: none;
+  }
+
+  .header--menu-open .main-nav {
+    max-height: none;
+    overflow: visible;
   }
 }
 
@@ -256,7 +330,14 @@
 }
 
 .main-nav {
-  padding: 0 0 1.5rem;
+  padding: 0.25rem 0 0.75rem;
+}
+
+@media (width < 960px) {
+  .header--menu-open .main-nav {
+    /* Space under the header chrome, then room below the last link. */
+    padding: 1.25rem 0 2rem;
+  }
 }
 
 @media (width >= 960px) {
@@ -273,7 +354,13 @@
 .main-nav__list {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 0.125rem 0 0;
+}
+
+@media (width < 960px) {
+  .header--menu-open .main-nav__list {
+    padding: 0;
+  }
 }
 
 @media (width >= 960px) {
@@ -282,6 +369,7 @@
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
+    padding: 0;
   }
 }
 
@@ -295,6 +383,18 @@
   border-bottom: 1px solid #d8d4f7;
 }
 
+.main-nav__item:has(.nav-link--active),
+.main-nav__item:has(.nav-dropdown__trigger--active) {
+  border-bottom-color: transparent;
+}
+
+@media (width < 960px) {
+  .header--menu-open .main-nav__item {
+    /* Inset the hairline dividers; active pills can extend slightly wider. */
+    margin-inline: 0.25rem;
+  }
+}
+
 @media (width >= 960px) {
   .main-nav__item {
     border-bottom: none;
@@ -312,13 +412,24 @@
 .nav-link {
   display: block;
   width: 100%;
-  padding: 1rem;
+  padding: 0.9375rem 0.25rem;
+  border-radius: 0.75rem;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
   outline: none;
 }
 
+@media (width < 960px) {
+  .header--menu-open .nav-link {
+    width: calc(100% + 0.5rem);
+    max-width: none;
+    margin-inline: -0.25rem;
+    padding: 1.125rem 0.75rem;
+    box-sizing: border-box;
+  }
+}
+
 .nav-link:hover {
   opacity: 0.85;
 }
@@ -339,8 +450,9 @@
   justify-content: space-between;
   gap: 0.75rem;
   width: 100%;
-  padding: 1rem;
+  padding: 0.9375rem 0.25rem;
   border: none;
+  border-radius: 0.75rem;
   background: transparent;
   font: inherit;
   font-weight: 600;
@@ -350,6 +462,16 @@
   outline: none;
 }
 
+@media (width < 960px) {
+  .header--menu-open .nav-dropdown__trigger {
+    width: calc(100% + 0.5rem);
+    max-width: none;
+    margin-inline: -0.25rem;
+    padding: 1.125rem 0.75rem;
+    box-sizing: border-box;
+  }
+}
+
 .nav-dropdown__trigger:hover {
   opacity: 0.85;
 }
@@ -381,7 +503,17 @@
 }
 
 .nav-dropdown__panel {
-  padding: 0 0 0.75rem;
+  padding: 0.25rem 0 0.5rem;
+}
+
+@media (width < 960px) {
+  .header--menu-open .nav-dropdown__panel {
+    padding: 0.375rem 0 0.75rem;
+  }
+
+  .header--menu-open .nav-dropdown__link {
+    padding: 0.625rem 0.75rem;
+  }
 }
 
 @media (width >= 960px) {
@@ -409,14 +541,21 @@
 }
 
 .nav-dropdown__accent {
-  border-left: 0.25rem solid var(--weg-color-accent);
-  padding-left: 0.75rem;
+  border-left: none;
+  padding-left: 0;
+}
+
+@media (width >= 960px) {
+  .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;
+  gap: 0.375rem;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -424,7 +563,8 @@
 
 .nav-dropdown__link {
   display: block;
-  padding: 0.625rem 0;
+  padding: 0.5rem 0.25rem;
+  border-radius: 0.75rem;
   font-weight: 400;
   color: inherit;
   text-decoration: none;
@@ -446,6 +586,10 @@
 }
 
 @media (width >= 960px) {
+  .nav-dropdown__links {
+    gap: 0.25rem;
+  }
+
   .nav-dropdown__link {
     padding: 0.5rem;
     margin-right: 0.75rem;
@@ -475,7 +619,18 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  padding: 1rem;
+  padding: 0.9375rem 0.25rem;
+  border-radius: 0.75rem;
+}
+
+@media (width < 960px) {
+  .header--menu-open .main-nav__item--auth > a {
+    width: calc(100% + 0.5rem);
+    max-width: none;
+    margin-inline: -0.25rem;
+    padding: 1.125rem 0.75rem;
+    box-sizing: border-box;
+  }
 }
 
 @media (width >= 960px) {

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

@@ -818,7 +818,7 @@ export class WegHeader {
                 'header--menu-open': mobileMenuActive,
                 'header--scroll-mode': this.headerScrollMode,
                 'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
-            } }, h("div", { key: '5ef2a85bf2087206a17e3cbf163dde4d549dcd0b', class: "header-inner" }, h("div", { key: '3af6990b5c6d93b4332a0d53300daddb11e2ad2b', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), h("button", { key: '023322f1e49a676a5b20208b956624ce820e9b57', 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: 'efa51b76936456c49059c67e9f2c9c2365b97d25', href: logoHref, src: logoSrc }), h("div", { key: 'ee0eff5ae3a63cf9550261a4d1727c9a88ab3e4d', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: '7552a6a661e644dcb3d555ab5572f680cd0295de', 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)))))));
+            } }, mobileMenuActive ? (h("div", { class: "header-backdrop", "aria-hidden": "true", onClick: () => this.closeMenu({ focusToggle: true }) })) : null, h("div", { key: 'fed1ca383b347331a7def698403c5de1f4a4172d', class: "header-inner" }, h("div", { key: '8dbedcddafd3f19bf4923350e33acaec602dba9d', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), h("button", { key: '07d4ea0e714ea4626e1a7c5e56699da3f5728d38', 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: 'ac4f61485283a079e880f41cde4f497e5010930b', href: logoHref, src: logoSrc }), h("div", { key: 'f06cabcadbb61f7a474bfef80c813f533921ccbc', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: 'e485198c0ed2157a183191e6b5a79652779efade', 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"; }