weg-shared-layout 0.0.23 → 0.0.25

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

@@ -1,64 +1,54 @@
 import { h } from "@stencil/core";
-import { normalizeLinks, parseJsonProp, isNonEmptyString } from "../../utils/layout";
+import { isMenuGroup, isNonEmptyString, normalizeHeaderMenu, parseJsonProp, } from "../../utils/layout";
+import { WEG_HOVER_CAPABLE_MEDIA_QUERY, WEG_MD_MEDIA_QUERY } from "../../constants/breakpoints";
 import { LOGO_SRC } from "./logo-data";
-import { DEFAULT_LOGO_HREF, SIGNED_IN_HEADER } from "./signed-in-layout";
+const WEG_HOME = 'https://www.warwickemploymentgroup.com';
+const ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
+const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
+const ACCOUNT_LOGIN_HREF = `${ACCOUNT_HOME}/account/login`;
+const ACCOUNT_MANAGE_HREF = `${ACCOUNT_HOME}/account/manage`;
+const SIGNED_IN_MENU = [
+    { label: 'Find a job', href: `${WEG_HOME}/find-a-job` },
+    { label: 'Dashboard', href: `${ACCOUNT_HOME}/dashboard` },
+    { label: 'Manage Account', href: `${ACCOUNT_HOME}/account/manage` },
+    { label: 'Sign out', href: `${ACCOUNT_HOME}/account/login` },
+];
 const EMPTY_HEADER = {
-    logoHref: DEFAULT_LOGO_HREF,
-    dropdowns: [],
-    links: [],
-    signIn: null,
-    signOut: null,
+    menu: [],
 };
-function normalizeDropdowns(input) {
-    if (!Array.isArray(input))
-        return [];
-    const result = [];
-    for (const item of input) {
-        if (!item || typeof item !== 'object')
-            continue;
-        const label = item.label;
-        const items = normalizeLinks(item.items);
-        if (!isNonEmptyString(label))
-            continue;
-        if (items.length === 0)
-            continue;
-        result.push({ label: label.trim(), items });
-    }
-    return result;
+function isSignInLink(link) {
+    const label = link.label.trim().toLowerCase();
+    if (label === 'sign out')
+        return false;
+    if (label === 'sign in')
+        return true;
+    return link.href === ACCOUNT_LOGIN_HREF;
 }
-function normalizeSignIn(input) {
-    if (!input || typeof input !== 'object')
-        return null;
-    const label = input.label;
-    const href = input.href;
-    if (!isNonEmptyString(label))
-        return null;
-    if (!isNonEmptyString(href))
-        return null;
-    return { label: label.trim(), href: href.trim() };
+function isSignOutLink(link) {
+    return link.label.trim().toLowerCase() === 'sign out';
 }
-function normalizeSignOut(input) {
-    if (!input || typeof input !== 'object')
-        return null;
-    const label = input.label;
-    const href = input.href;
-    if (!isNonEmptyString(label))
-        return null;
-    return {
-        label: label.trim(),
-        href: isNonEmptyString(href) ? href.trim() : undefined,
-    };
+function isManageAccountLink(link) {
+    if (link.label.trim().toLowerCase() === 'manage account')
+        return true;
+    return link.href === ACCOUNT_MANAGE_HREF;
+}
+function isFindJobLink(link) {
+    if (link.label.trim().toLowerCase() === 'find a job')
+        return true;
+    return link.href === `${WEG_HOME}/find-a-job`;
+}
+function isDashboardLink(link) {
+    if (link.label.trim().toLowerCase() === 'dashboard')
+        return true;
+    return link.href === `${ACCOUNT_HOME}/dashboard`;
 }
 function normalizeHeaderData(input) {
     const root = (input && typeof input === 'object' ? input : {});
     const header = root.header && typeof root.header === 'object' ? root.header : {};
-    const logoHref = isNonEmptyString(header.logoHref) ? header.logoHref.trim() : DEFAULT_LOGO_HREF;
+    const logoSrc = isNonEmptyString(header.logoSrc) ? header.logoSrc.trim() : undefined;
     return {
-        logoHref,
-        dropdowns: normalizeDropdowns(header.dropdowns),
-        links: normalizeLinks(header.links),
-        signIn: normalizeSignIn(header.signIn),
-        signOut: normalizeSignOut(header.signOut),
+        logoSrc,
+        menu: normalizeHeaderMenu(header.menu),
     };
 }
 function SignInIcon() {
@@ -67,6 +57,12 @@ function SignInIcon() {
 function SignOutIcon() {
     return (h("svg", { viewBox: "0 0 26 24", width: "26", height: "24", "aria-hidden": "true", focusable: "false", fill: "none" }, h("path", { d: "M19.6667 6.33333L25 11.6667L19.6667 17M25 11.6667H6.33333M14.3333 17V18.3333C14.3333 19.3942 13.9119 20.4116 13.1618 21.1618C12.4116 21.9119 11.3942 22.3333 10.3333 22.3333H5C3.93913 22.3333 2.92172 21.9119 2.17157 21.1618C1.42143 20.4116 1 19.3942 1 18.3333V5C1 3.93913 1.42143 2.92172 2.17157 2.17157C2.92172 1.42143 3.93913 1 5 1H10.3333C11.3942 1 12.4116 1.42143 13.1618 2.17157C13.9119 2.92172 14.3333 3.93913 14.3333 5V6.33333", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 }
+function FindJobIcon() {
+    return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true", focusable: "false", fill: "none" }, h("path", { d: "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("rect", { x: "2", y: "6", width: "20", height: "14", rx: "2", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+}
+function DashboardIcon() {
+    return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true", focusable: "false", fill: "none" }, h("rect", { x: "3", y: "3", width: "7", height: "9", rx: "1", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("rect", { x: "14", y: "3", width: "7", height: "5", rx: "1", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("rect", { x: "14", y: "12", width: "7", height: "9", rx: "1", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("rect", { x: "3", y: "16", width: "7", height: "5", rx: "1", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+}
 function HamburgerIcon() {
     return (h("svg", { viewBox: "0 0 24 24", width: "28", height: "28", "aria-hidden": "true", focusable: "false", fill: "none" }, h("path", { d: "M4 7h16M4 12h16M4 17h16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
 }
@@ -76,8 +72,8 @@ function CloseIcon() {
 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 }) {
-    return (h("a", { class: "logo-link", href: href, "aria-label": "Home" }, h("img", { class: "logo", src: LOGO_SRC, alt: "WEG", width: "225", height: "83" })));
+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" })));
 }
 export class WegHeader {
     /**
@@ -87,19 +83,18 @@ export class WegHeader {
      * ```json
      * {
      *   "header": {
-     *     "logoHref": "https://www.warwickemploymentgroup.com/",
-     *     "dropdowns": [{ "label": "Find a job", "items": [{ "label": "...", "href": "..." }] }],
-     *     "links": [{ "label": "Career advice", "href": "/career-advice" }],
-     *     "signIn": { "label": "Sign in", "href": "/account/login" },
-     *     "signOut": { "label": "Sign out", "href": "/account/login" }
+     *     "menu": [
+     *       { "label": "Find a job", "items": [{ "label": "Graduates", "href": "..." }] },
+     *       { "label": "Career advice", "href": "/career-advice" },
+     *       { "label": "Sign in", "href": "/account/login" }
+     *     ]
      *   }
      * }
      * ```
      */
     layout;
     /**
-     * When true, the header shows the signed-in navigation (Find a job, Dashboard,
-     * Manage Account, Sign out) instead of the CMS layout.
+     * When true, the header uses the built-in signed-in menu instead of the CMS layout.
      */
     signedIn = false;
     /**
@@ -115,10 +110,13 @@ export class WegHeader {
     resolved = EMPTY_HEADER;
     menuOpen = false;
     openDropdown = null;
-    expandedSection = null;
     boundHandleDocumentClick = this.handleDocumentClick.bind(this);
+    boundHandleViewportChange = this.handleViewportChange.bind(this);
+    boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
     hoverCloseTimer = null;
     hoverOpenEnabled = false;
+    desktopMediaQuery;
+    hoverCapableMediaQuery;
     resolve() {
         if (this.layout === undefined || this.layout === null) {
             this.resolved = EMPTY_HEADER;
@@ -128,15 +126,46 @@ export class WegHeader {
     }
     componentWillLoad() {
         this.resolve();
-        this.hoverOpenEnabled = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+        this.hoverCapableMediaQuery = window.matchMedia(WEG_HOVER_CAPABLE_MEDIA_QUERY);
+        this.hoverCapableMediaQuery.addEventListener('change', this.boundHandleHoverCapabilityChange);
+        this.desktopMediaQuery = window.matchMedia(WEG_MD_MEDIA_QUERY);
+        this.desktopMediaQuery.addEventListener('change', this.boundHandleViewportChange);
+        this.updateHoverDropdownEnabled();
+        this.handleViewportChange();
     }
     connectedCallback() {
         document.addEventListener('click', this.boundHandleDocumentClick);
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.boundHandleDocumentClick);
+        this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
+        this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
         this.cancelScheduledDropdownClose();
     }
+    /**
+     * 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.
+     */
+    updateHoverDropdownEnabled() {
+        const enabled = Boolean(this.desktopMediaQuery?.matches && this.hoverCapableMediaQuery?.matches);
+        if (this.hoverOpenEnabled && !enabled) {
+            this.cancelScheduledDropdownClose();
+            this.closeDropdown();
+        }
+        this.hoverOpenEnabled = enabled;
+    }
+    handleHoverCapabilityChange() {
+        this.updateHoverDropdownEnabled();
+    }
+    handleViewportChange() {
+        if (this.desktopMediaQuery?.matches) {
+            this.closeMenu();
+        }
+        this.updateHoverDropdownEnabled();
+    }
+    isMobileMenuActive() {
+        return this.menuOpen && !this.desktopMediaQuery?.matches;
+    }
     watchLayout() {
         this.resolve();
     }
@@ -188,18 +217,40 @@ export class WegHeader {
             return;
         this.openDropdownMenu(label);
     }
-    handleDropdownPointerLeave() {
+    handleDropdownPointerLeave(event) {
         if (!this.hoverOpenEnabled)
             return;
+        const related = event.relatedTarget;
+        const container = event.currentTarget;
+        if (related && container.contains(related))
+            return;
         this.scheduleDropdownClose();
     }
-    handleDropdownFocusIn(label) {
+    handleDropdownPanelPointerEnter(label) {
+        if (!this.hoverOpenEnabled)
+            return;
+        this.cancelScheduledDropdownClose();
         this.openDropdownMenu(label);
     }
+    handleDropdownPanelPointerLeave(event) {
+        if (!this.hoverOpenEnabled)
+            return;
+        const related = event.relatedTarget;
+        const panel = event.currentTarget;
+        const container = panel.closest('.nav-dropdown');
+        if (related && container?.contains(related))
+            return;
+        this.scheduleDropdownClose();
+    }
+    handleDropdownTriggerClick(event, label) {
+        event.stopPropagation();
+        this.cancelScheduledDropdownClose();
+        this.toggleDropdown(label);
+    }
     handleDropdownFocusOut(event, label) {
         const related = event.relatedTarget;
-        const currentTarget = event.currentTarget;
-        if (related && currentTarget.contains(related))
+        const container = event.currentTarget;
+        if (related && container.contains(related))
             return;
         if (this.openDropdown === label) {
             this.closeDropdown();
@@ -214,63 +265,74 @@ export class WegHeader {
     }
     focusFirstDropdownLink(itemEl) {
         setTimeout(() => {
-            const firstLink = itemEl.querySelector('.dropdown-panel__link');
+            const firstLink = itemEl.querySelector('.nav-dropdown__link');
             firstLink?.focus();
         }, 0);
     }
-    toggleAccordion(label) {
-        this.expandedSection = this.expandedSection === label ? null : label;
+    toggleMenu() {
+        if (this.menuOpen) {
+            this.closeMenu();
+            return;
+        }
+        this.openMenu();
     }
     openMenu() {
         this.menuOpen = true;
-        this.expandedSection = null;
+        this.closeDropdown();
     }
     closeMenu() {
         this.menuOpen = false;
-        this.expandedSection = null;
+        this.closeDropdown();
     }
-    getActiveHeaderData() {
-        if (!this.signedIn)
-            return this.resolved;
-        return {
-            logoHref: SIGNED_IN_HEADER.logoHref,
-            dropdowns: [],
-            links: [...SIGNED_IN_HEADER.links],
-            signIn: null,
-            signOut: SIGNED_IN_HEADER.signOut,
-        };
+    getActiveMenu() {
+        return this.signedIn ? SIGNED_IN_MENU : this.resolved.menu;
+    }
+    getLogoSrc() {
+        return this.resolved.logoSrc ?? LOGO_SRC;
     }
     getLogoHref() {
-        return this.getActiveHeaderData().logoHref;
+        return DEFAULT_LOGO_HREF;
+    }
+    findSignInLink(menu) {
+        for (const item of menu) {
+            if (!isMenuGroup(item) && isSignInLink(item))
+                return item;
+        }
+        return null;
     }
     getManageAccountLabel() {
         const name = this.userName?.trim();
         return name || 'Manage Account';
     }
-    getAuthControl() {
-        if (this.signedIn)
-            return null;
-        const signIn = this.resolved.signIn;
-        if (!signIn)
-            return null;
-        return { label: signIn.label, href: signIn.href, action: 'sign-in' };
-    }
-    handleAuthClick(event, onNavigate) {
-        const auth = this.getAuthControl() ?? {
-            label: SIGNED_IN_HEADER.signOut.label,
-            href: SIGNED_IN_HEADER.signOut.href,
-            action: 'sign-out',
-        };
-        const emitted = this.wegAuthClick.emit({ action: auth.action });
+    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)));
+    }
+    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)));
+    }
+    renderMenuGroup(item, onNavigate) {
+        const items = item.items ?? [];
+        const isOpen = this.openDropdown === item.label;
+        const panelId = this.getDropdownPanelId(item.label);
+        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,
+            }, "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)));
+    }
+    handleAuthClick(event, action, href, onNavigate) {
+        const emitted = this.wegAuthClick.emit({ action });
         if (emitted.defaultPrevented) {
             event.preventDefault();
             onNavigate?.();
             return;
         }
-        if (auth.action === 'sign-out') {
+        if (action === 'sign-out') {
             event.preventDefault();
-            if (auth.href) {
-                window.location.assign(auth.href);
+            if (href) {
+                window.location.assign(href);
             }
             onNavigate?.();
             return;
@@ -278,71 +340,70 @@ export class WegHeader {
         onNavigate?.();
     }
     renderAuthControl(options) {
-        const auth = this.getAuthControl();
-        if (!auth)
-            return null;
-        const sharedClass = {
-            'sign-in-link': !options.iconOnly,
-            'icon-button': !!options.iconOnly,
-            [options.className || '']: !!options.className,
-        };
-        const content = [
-            h(SignInIcon, { key: "icon" }),
-            !options.iconOnly ? auth.label : null,
-            options.iconOnly ? h("span", { class: "sr-only" }, auth.label) : null,
-        ];
-        return (h("a", { class: sharedClass, href: auth.href, "aria-label": auth.label, onClick: (event) => this.handleAuthClick(event, options.onNavigate) }, content));
-    }
-    renderSignedInAuthControls(options) {
-        const manageAccountLabel = this.getManageAccountLabel();
-        const signOut = SIGNED_IN_HEADER.signOut;
-        if (options.iconOnly) {
-            return (h("a", { class: "icon-button manage-account-link", href: SIGNED_IN_HEADER.manageAccount.href, "aria-label": manageAccountLabel, onClick: () => options.onNavigate?.() }, h(SignInIcon, null), h("span", { class: "sr-only" }, manageAccountLabel)));
+        const { link, action, iconOnly, onNavigate } = options;
+        const Icon = action === 'sign-out' ? SignOutIcon : SignInIcon;
+        const classSuffix = action === 'sign-out' ? 'sign-out-link' : 'sign-in-link';
+        return (h("a", { class: {
+                [classSuffix]: !iconOnly,
+                'icon-button': !!iconOnly,
+                [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) {
+        const label = this.getManageAccountLabel();
+        return (h("a", { class: {
+                'sign-in-link': !iconOnly,
+                'manage-account-link': true,
+                'icon-button': iconOnly,
+            }, href: ACCOUNT_MANAGE_HREF, "aria-label": label, onClick: () => onNavigate?.() }, h(SignInIcon, null), !iconOnly ? label : null, iconOnly ? h("span", { class: "sr-only" }, label) : null));
+    }
+    renderNavItem(item, onNavigate) {
+        if (isMenuGroup(item)) {
+            return this.renderMenuGroup(item, onNavigate);
+        }
+        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 })));
+        }
+        if (isSignInLink(item)) {
+            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)) {
+            return (h("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate)));
+        }
+        if (this.signedIn && isFindJobLink(item)) {
+            return this.renderIconNavLink(item, FindJobIcon, 'find-a-job-link', onNavigate);
+        }
+        if (this.signedIn && isDashboardLink(item)) {
+            return this.renderIconNavLink(item, DashboardIcon, 'dashboard-link', onNavigate);
+        }
+        return this.renderFlatNavLink(item, onNavigate);
+    }
+    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)))));
+    }
+    renderCompactAuth(onNavigate) {
+        if (this.signedIn) {
+            return this.renderManageAccountAnchor(onNavigate, true);
         }
-        return [
-            h("li", { class: "desktop-nav__item", key: "manage-account" }, h("a", { class: "sign-in-link manage-account-link", href: SIGNED_IN_HEADER.manageAccount.href, "aria-label": manageAccountLabel, onClick: () => options.onNavigate?.() }, h(SignInIcon, null), manageAccountLabel)),
-            h("li", { class: "desktop-nav__item", key: "sign-out" }, h("a", { class: "sign-in-link sign-out-link", href: signOut.href, "aria-label": signOut.label, onClick: (event) => this.handleAuthClick(event, options.onNavigate) }, h(SignOutIcon, null), signOut.label)),
-        ];
-    }
-    renderDesktop() {
-        const { dropdowns, links } = this.getActiveHeaderData();
-        return (h("div", { class: "desktop" }, h(Logo, { href: this.getLogoHref() }), h("nav", { class: "desktop-nav", "aria-label": "Main" }, h("ul", { class: "desktop-nav__list" }, dropdowns.map((dropdown) => {
-            const isOpen = this.openDropdown === dropdown.label;
-            const panelId = this.getDropdownPanelId(dropdown.label);
-            return (h("li", { class: "desktop-nav__item desktop-nav__item--dropdown", key: dropdown.label, onMouseEnter: () => this.handleDropdownPointerEnter(dropdown.label), onMouseLeave: () => this.handleDropdownPointerLeave(), onFocusin: () => this.handleDropdownFocusIn(dropdown.label), onFocusout: (event) => this.handleDropdownFocusOut(event, dropdown.label) }, h("button", { type: "button", class: {
-                    'dropdown-trigger': true,
-                    'dropdown-trigger--open': isOpen,
-                }, "aria-expanded": isOpen ? 'true' : 'false', "aria-haspopup": "true", "aria-controls": panelId, id: `${panelId}-trigger`, onClick: (event) => {
-                    event.stopPropagation();
-                    this.toggleDropdown(dropdown.label);
-                }, onKeyDown: (event) => {
-                    const itemEl = event.currentTarget.closest('.desktop-nav__item--dropdown');
-                    this.handleDropdownTriggerKeyDown(event, dropdown.label, itemEl);
-                } }, dropdown.label, h(ToggleIcon, { expanded: isOpen })), isOpen ? (h("div", { class: "dropdown-panel", id: panelId, role: "region", "aria-labelledby": `${panelId}-trigger` }, h("div", { class: "dropdown-panel__accent" }, h("div", { class: "dropdown-panel__links" }, dropdown.items.map((item) => (h("a", { class: "dropdown-panel__link", href: item.href, key: `${dropdown.label}:${item.label}` }, item.label))))))) : null));
-        }), links.map((link) => (h("li", { class: "desktop-nav__item", key: link.label }, h("a", { class: "nav-link", href: link.href }, link.label)))), this.signedIn
-            ? this.renderSignedInAuthControls({})
-            : this.getAuthControl()
-                ? h("li", { class: "desktop-nav__item" }, this.renderAuthControl({}))
-                : null))));
-    }
-    renderMobileBar() {
-        return (h("div", { class: "mobile" }, h("button", { type: "button", class: "icon-button", "aria-label": "Open menu", onClick: () => this.openMenu() }, h(HamburgerIcon, null)), h(Logo, { href: this.getLogoHref() }), this.signedIn
-            ? this.renderSignedInAuthControls({ iconOnly: true })
-            : this.renderAuthControl({ iconOnly: true })));
-    }
-    renderMobileOverlay() {
-        if (!this.menuOpen)
+        const signIn = this.findSignInLink(this.resolved.menu);
+        if (!signIn?.href)
             return null;
-        const { dropdowns, links } = this.getActiveHeaderData();
-        return (h("div", { class: "mobile-overlay", role: "dialog", "aria-modal": "true", "aria-label": "Menu" }, h("div", { class: "mobile-overlay__header" }, h("button", { type: "button", class: "icon-button", "aria-label": "Close menu", onClick: () => this.closeMenu() }, h(CloseIcon, null)), h("div", { class: "mobile-overlay__logo" }, h(Logo, { href: this.getLogoHref() })), this.signedIn
-            ? this.renderSignedInAuthControls({ iconOnly: true, onNavigate: () => this.closeMenu() })
-            : this.renderAuthControl({ iconOnly: true, onNavigate: () => this.closeMenu() })), h("nav", { class: "mobile-nav", "aria-label": "Main" }, dropdowns.map((dropdown) => {
-            const isExpanded = this.expandedSection === dropdown.label;
-            return (h("div", { class: "mobile-nav__section", key: dropdown.label }, h("button", { type: "button", class: "mobile-nav__row", "aria-expanded": isExpanded ? 'true' : 'false', onClick: () => this.toggleAccordion(dropdown.label) }, h("span", null, dropdown.label), h(ToggleIcon, { expanded: isExpanded })), isExpanded ? (h("div", { class: "mobile-nav__sub" }, dropdown.items.map((item) => (h("a", { class: "mobile-nav__sub-link", href: item.href, key: `${dropdown.label}:${item.label}`, onClick: () => this.closeMenu() }, item.label))))) : null));
-        }), links.map((link) => (h("div", { class: "mobile-nav__section", key: link.label }, h("a", { class: "mobile-nav__row", href: link.href, onClick: () => this.closeMenu() }, link.label)))), this.signedIn ? (h("div", { class: "mobile-nav__section" }, h("a", { class: "mobile-nav__row manage-account-link", href: SIGNED_IN_HEADER.manageAccount.href, onClick: () => this.closeMenu() }, this.getManageAccountLabel()), h("a", { class: "mobile-nav__row sign-out-link", href: SIGNED_IN_HEADER.signOut.href, onClick: (event) => this.handleAuthClick(event, () => this.closeMenu()) }, h(SignOutIcon, null), SIGNED_IN_HEADER.signOut.label))) : null)));
+        return this.renderAuthControl({
+            link: signIn,
+            action: 'sign-in',
+            iconOnly: true,
+            onNavigate,
+        });
     }
     render() {
-        return (h("header", { key: 'fc00e4afd015b291311939ba30f4ae3070957864', class: "header" }, h("div", { key: 'f2c8ed2c4e702e0a85acfbccd91165f5a2e1ff7a', class: "container" }, this.renderDesktop(), this.renderMobileBar()), this.renderMobileOverlay()));
+        const logoHref = this.getLogoHref();
+        const logoSrc = this.getLogoSrc();
+        const closeMenu = () => this.closeMenu();
+        const mobileMenuActive = this.isMobileMenuActive();
+        return (h("header", { key: 'ce1a217dd1eda9bb72b506c187a5c6a0848de3a6', class: {
+                header: true,
+                'header--menu-open': mobileMenuActive,
+            } }, h("div", { key: '535d54f8eb512158c6048d748fccce4feb097cc0', class: "container header-inner" }, h("button", { key: '51a0fead049fadcbee17c8e622a35b1d2d8be99c', 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: '6f5693bfec5d8fe196ca3e4ff565506b6c3d3421', href: logoHref, src: logoSrc }), h("div", { key: '9f846e47cb68b6158e832fdffda5973e5e1554f4', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: 'e18db3c24e934200595a1216dc74f3dcb8ad0e67', 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)))));
     }
     static get is() { return "weg-header"; }
     static get encapsulation() { return "shadow"; }
@@ -363,7 +424,7 @@ export class WegHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "LayoutData | string",
-                    "resolved": "string | { header?: Partial<LayoutHeaderData>; footer?: Partial<{ social: unknown; columns: unknown; credits: unknown; copyright: unknown; }>; }",
+                    "resolved": "string | { header?: Partial<LayoutHeaderData>; footer?: Partial<LayoutFooterData>; }",
                     "references": {
                         "LayoutData": {
                             "location": "import",
@@ -377,7 +438,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    \"logoHref\": \"https://www.warwickemploymentgroup.com/\",\n    \"dropdowns\": [{ \"label\": \"Find a job\", \"items\": [{ \"label\": \"...\", \"href\": \"...\" }] }],\n    \"links\": [{ \"label\": \"Career advice\", \"href\": \"/career-advice\" }],\n    \"signIn\": { \"label\": \"Sign in\", \"href\": \"/account/login\" },\n    \"signOut\": { \"label\": \"Sign out\", \"href\": \"/account/login\" }\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,
@@ -396,7 +457,7 @@ export class WegHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, the header shows the signed-in navigation (Find a job, Dashboard,\nManage Account, Sign out) instead of the CMS layout."
+                    "text": "When true, the header uses the built-in signed-in menu instead of the CMS layout."
                 },
                 "getter": false,
                 "setter": false,
@@ -429,8 +490,7 @@ export class WegHeader {
         return {
             "resolved": {},
             "menuOpen": {},
-            "openDropdown": {},
-            "expandedSection": {}
+            "openDropdown": {}
         };
     }
     static get events() {
@@ -442,7 +502,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 }",

package/dist/collection/constants/breakpoints.js

@@ -0,0 +1,6 @@
+/**
+ * JS media-query strings aligned with `src/styles/breakpoints.css`.
+ */
+export const WEG_MD_MEDIA_QUERY = '(width >= 960px)';
+/** Primary input can hover (excludes most touch-only profiles). */
+export const WEG_HOVER_CAPABLE_MEDIA_QUERY = '(hover: hover)';