weg-shared-layout 0.0.24 → 0.0.26

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

@@ -1,65 +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() {
@@ -68,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" })));
 }
@@ -77,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 {
     /**
@@ -88,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;
     /**
@@ -290,48 +284,55 @@ export class WegHeader {
         this.menuOpen = false;
         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;
@@ -339,67 +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));
-    }
-    renderSignedInCompactAuth(onNavigate) {
-        const manageAccountLabel = this.getManageAccountLabel();
-        return (h("a", { class: "icon-button manage-account-link", href: SIGNED_IN_HEADER.manageAccount.href, "aria-label": manageAccountLabel, onClick: () => onNavigate?.() }, h(SignInIcon, null), h("span", { class: "sr-only" }, manageAccountLabel)));
-    }
-    renderNavAuthItems(onNavigate) {
-        if (this.signedIn) {
-            const manageAccountLabel = this.getManageAccountLabel();
-            const signOut = SIGNED_IN_HEADER.signOut;
-            return [
-                h("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, h("a", { class: "sign-in-link manage-account-link", href: SIGNED_IN_HEADER.manageAccount.href, "aria-label": manageAccountLabel, onClick: () => onNavigate?.() }, h(SignInIcon, null), manageAccountLabel)),
-                h("li", { class: "main-nav__item main-nav__item--auth", key: "sign-out" }, h("a", { class: "sign-in-link sign-out-link", href: signOut.href, "aria-label": signOut.label, onClick: (event) => this.handleAuthClick(event, onNavigate) }, h(SignOutIcon, null), signOut.label)),
-            ];
+        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);
         }
-        const auth = this.getAuthControl();
-        if (!auth)
-            return null;
-        return (h("li", { class: "main-nav__item main-nav__item--auth", key: "sign-in" }, this.renderAuthControl({ 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) {
-        const { dropdowns, links } = this.getActiveHeaderData();
-        return (h("nav", { class: "main-nav", "aria-label": "Main" }, h("ul", { class: "main-nav__list" }, dropdowns.map((dropdown) => {
-            const isOpen = this.openDropdown === dropdown.label;
-            const panelId = this.getDropdownPanelId(dropdown.label);
-            return (h("li", { class: "main-nav__item main-nav__item--dropdown", key: dropdown.label }, h("div", { class: "nav-dropdown", onMouseEnter: () => this.handleDropdownPointerEnter(dropdown.label), onMouseLeave: (event) => this.handleDropdownPointerLeave(event), onFocusout: (event) => this.handleDropdownFocusOut(event, dropdown.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, dropdown.label), onKeyDown: (event) => {
-                    const container = event.currentTarget.closest('.nav-dropdown');
-                    this.handleDropdownTriggerKeyDown(event, dropdown.label, container);
-                } }, h("span", { class: "nav-dropdown__label" }, dropdown.label), h(ToggleIcon, { expanded: isOpen })), isOpen ? (h("div", { class: "nav-dropdown__panel", id: panelId, role: "region", "aria-labelledby": `${panelId}-trigger`, onMouseEnter: () => this.handleDropdownPanelPointerEnter(dropdown.label), onMouseLeave: (event) => this.handleDropdownPanelPointerLeave(event) }, h("div", { class: "nav-dropdown__accent" }, h("div", { class: "nav-dropdown__links" }, dropdown.items.map((item) => (h("a", { class: "nav-dropdown__link", href: item.href, key: `${dropdown.label}:${item.label}`, onClick: () => onNavigate?.() }, item.label))))))) : null)));
-        }), links.map((link) => (h("li", { class: "main-nav__item", key: link.label }, h("a", { class: "nav-link", href: link.href, onClick: () => onNavigate?.() }, link.label)))), this.renderNavAuthItems(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.renderSignedInCompactAuth(onNavigate);
+            return this.renderManageAccountAnchor(onNavigate, true);
         }
-        return this.renderAuthControl({ iconOnly: true, onNavigate });
+        const signIn = this.findSignInLink(this.resolved.menu);
+        if (!signIn?.href)
+            return null;
+        return this.renderAuthControl({
+            link: signIn,
+            action: 'sign-in',
+            iconOnly: true,
+            onNavigate,
+        });
     }
     render() {
         const logoHref = this.getLogoHref();
+        const logoSrc = this.getLogoSrc();
         const closeMenu = () => this.closeMenu();
         const mobileMenuActive = this.isMobileMenuActive();
-        return (h("header", { key: 'cf1c3532a5fe2b089f7947aacbe521632cfcf835', class: {
+        return (h("header", { key: '6b1f9929c75b61f3afd01651a57b5923ba8b32f6', class: {
                 header: true,
                 'header--menu-open': mobileMenuActive,
-            } }, h("div", { key: '269f6a6ad820e7c3e307655fa95e28872d8259de', class: "container header-inner" }, h("button", { key: 'e46fc072a1023358d78f72ee4d12152b783a8471', 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: 'f228835a0941cdfcf11a4c59e03e80dac74df3b8', href: logoHref }), h("div", { key: '692d57fa6592b9a8995af26d235dcfc58962daf4', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: '6609fea3c7b6293f342d63eb18b8219152ede883', 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: 'a4ebb7b276d22a60fb163dfe27cfb58fef28dc52', class: "container header-inner" }, h("button", { key: '5d52fc517e5d078c209d9fd3a096bdc3a88d3bcd', 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: '2a94c8178c404eeac500d5014747c2df0135db1e', href: logoHref, src: logoSrc }), h("div", { key: '2d042f19d01f3bfa29735bb878189db290530429', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: 'd2f001b813d443560263a09c527bba287157ad85', 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"; }
@@ -420,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",
@@ -434,7 +438,7 @@ export class WegHeader {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Layout payload, supplied by the host application.\r\n\r\nExpected shape:\r\n```json\r\n{\r\n  \"header\": {\r\n    \"logoHref\": \"https://www.warwickemploymentgroup.com/\",\r\n    \"dropdowns\": [{ \"label\": \"Find a job\", \"items\": [{ \"label\": \"...\", \"href\": \"...\" }] }],\r\n    \"links\": [{ \"label\": \"Career advice\", \"href\": \"/career-advice\" }],\r\n    \"signIn\": { \"label\": \"Sign in\", \"href\": \"/account/login\" },\r\n    \"signOut\": { \"label\": \"Sign out\", \"href\": \"/account/login\" }\r\n  }\r\n}\r\n```"
+                    "text": "Layout payload, supplied by the host application.\n\nExpected shape:\n```json\n{\n  \"header\": {\n    \"menu\": [\n      { \"label\": \"Find a job\", \"items\": [{ \"label\": \"Graduates\", \"href\": \"...\" }] },\n      { \"label\": \"Career advice\", \"href\": \"/career-advice\" },\n      { \"label\": \"Sign in\", \"href\": \"/account/login\" }\n    ]\n  }\n}\n```"
                 },
                 "getter": false,
                 "setter": false,
@@ -453,7 +457,7 @@ export class WegHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, the header shows the signed-in navigation (Find a job, Dashboard,\r\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,
@@ -498,7 +502,7 @@ export class WegHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fired when the user clicks Sign in or Sign out.\r\nCall `event.preventDefault()` in the host to handle navigation/logout yourself."
+                    "text": "Fired when the user clicks Sign in or Sign out.\nCall `event.preventDefault()` in the host to handle navigation/logout yourself."
                 },
                 "complexType": {
                     "original": "{ action: LayoutHeaderAuthAction }",

package/dist/collection/styles/shared.css

@@ -1,72 +1,72 @@
-/**
- * Breakpoint tokens (mobile-first min-width).
- *
- * - `@custom-media` names: e.g. `@media (--weg-md)` applies from 960px up.
- *   Compiled by PostCSS in stencil.config.ts.
- * - `--weg-breakpoint-*` variables: use in property values, e.g. `max-width: var(--weg-breakpoint-md)`.
- *
- * Import this file in component stylesheets, or rely on shared.css which already imports it.
- */
-
-:host {
-  --weg-breakpoint-sm: 640px;
-  --weg-breakpoint-md: 960px;
-  --weg-breakpoint-lg: 1280px;
-  --weg-breakpoint-xl: 1440px;
-}
-
-
-*,
-*::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;
-}
-
-/**
- * Container widths and horizontal padding match wegcms-v2 globals.css.
- * @see wegcms-v2/src/app/(frontend)/globals.css
- */
-.container {
-  width: 100%;
-  margin-inline: auto;
-  padding-block: 12px;
-}
-
-@media (width >= 960px) {
-  .container {
-    padding-inline: 1rem;
-    padding-block: 20px;
-  }
-}
-
-@media (width >= 1280px) {
-  .container {
-    padding-inline: 2rem;
-  }
-}
-
-
-@media (width >= 1440px) {
-  .container {
-    padding-block: 28px;
-  }
-}
-
-.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;
-}
+/**
+ * Breakpoint tokens (mobile-first min-width).
+ *
+ * - `@custom-media` names: e.g. `@media (--weg-md)` applies from 960px up.
+ *   Compiled by PostCSS in stencil.config.ts.
+ * - `--weg-breakpoint-*` variables: use in property values, e.g. `max-width: var(--weg-breakpoint-md)`.
+ *
+ * Import this file in component stylesheets, or rely on shared.css which already imports it.
+ */
+
+:host {
+  --weg-breakpoint-sm: 640px;
+  --weg-breakpoint-md: 960px;
+  --weg-breakpoint-lg: 1280px;
+  --weg-breakpoint-xl: 1440px;
+}
+
+
+*,
+*::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;
+}
+
+/**
+ * Container widths and horizontal padding match wegcms-v2 globals.css.
+ * @see wegcms-v2/src/app/(frontend)/globals.css
+ */
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-block: 0.75rem;
+}
+
+@media (width >= 960px) {
+  .container {
+    padding-inline: 1rem;
+    padding-block: 1.25rem;
+  }
+}
+
+@media (width >= 1280px) {
+  .container {
+    padding-inline: 2rem;
+  }
+}
+
+
+@media (width >= 1440px) {
+  .container {
+    padding-block: 1.75rem;
+  }
+}
+
+.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;
+}

package/dist/collection/utils/layout.js

@@ -1,3 +1,4 @@
+const LINK_TARGETS = new Set(['_blank', '_self', '_parent', '_top']);
 export function parseJsonProp(value) {
     if (typeof value !== 'string')
         return value;
@@ -14,20 +15,67 @@ export function parseJsonProp(value) {
 export function isNonEmptyString(value) {
     return typeof value === 'string' && value.trim().length > 0;
 }
-export function normalizeLinks(input) {
+export function isMenuGroup(link) {
+    return Boolean(link.items?.length);
+}
+function readNestedItems(raw) {
+    return raw.items ?? raw.children;
+}
+function readLinkTarget(raw) {
+    const target = raw.target;
+    if (typeof target === 'string' && LINK_TARGETS.has(target)) {
+        return target;
+    }
+    return undefined;
+}
+export function normalizeLayoutLink(input, options) {
+    if (!input || typeof input !== 'object')
+        return null;
+    const raw = input;
+    const label = raw.label;
+    if (!isNonEmptyString(label))
+        return null;
+    const nested = readNestedItems(raw);
+    if (Array.isArray(nested)) {
+        const items = normalizeLinks(nested, { requireHref: true });
+        if (items.length > 0) {
+            return { label: label.trim(), items };
+        }
+    }
+    const href = raw.href;
+    if (isNonEmptyString(href)) {
+        const link = { label: label.trim(), href: href.trim() };
+        const target = readLinkTarget(raw);
+        if (target)
+            link.target = target;
+        return link;
+    }
+    return options?.requireHref === false ? null : null;
+}
+export function normalizeLinks(input, options) {
     if (!Array.isArray(input))
         return [];
+    const requireHref = options?.requireHref ?? true;
     const result = [];
     for (const item of input) {
-        if (!item || typeof item !== 'object')
-            continue;
-        const label = item.label;
-        const href = item.href;
-        if (!isNonEmptyString(label))
-            continue;
-        if (!isNonEmptyString(href))
+        const link = normalizeLayoutLink(item, { requireHref });
+        if (link)
+            result.push(link);
+    }
+    return result;
+}
+export function normalizeHeaderMenu(input) {
+    return normalizeLinks(input, { requireHref: false });
+}
+export function normalizeMenu(input) {
+    if (!Array.isArray(input))
+        return [];
+    const result = [];
+    for (const column of input) {
+        const links = normalizeLinks(column, { requireHref: true });
+        if (links.length === 0)
             continue;
-        result.push({ label: label.trim(), href: href.trim() });
+        result.push(links);
     }
     return result;
 }

package/dist/components/p-BnMIy-A5.js

@@ -0,0 +1 @@
+const n=new Set(["_blank","_self","_parent","_top"]);function t(n){if("string"!=typeof n)return n;const t=n.trim();if(t)try{return JSON.parse(t)}catch{return}}function r(n){return"string"==typeof n&&n.trim().length>0}function o(n){return Boolean(n.items?.length)}function e(t){if(!t||"object"!=typeof t)return null;const o=t,e=o.label;if(!r(e))return null;const u=function(n){return n.items??n.children}(o);if(Array.isArray(u)){const n=f(u);if(n.length>0)return{label:e.trim(),items:n}}const c=o.href;if(r(c)){const t={label:e.trim(),href:c.trim()},r=function(t){const r=t.target;if("string"==typeof r&&n.has(r))return r}(o);return r&&(t.target=r),t}return null}function f(n){if(!Array.isArray(n))return[];const t=[];for(const r of n){const n=e(r);n&&t.push(n)}return t}function u(n){return f(n)}function c(n){if(!Array.isArray(n))return[];const t=[];for(const r of n){const n=f(r);0!==n.length&&t.push(n)}return t}export{o as a,u as b,r as i,c as n,t as p}