weg-shared-layout 0.0.54 → 0.0.58

package/docs/react.md

@@ -1,6 +1,6 @@
 # React (SPA)
 
-Guide for **client-rendered** React apps (Vite, Create React App, etc.). If you use **Next.js App Router**, see **[Next.js](./nextjs.md)** — SSR and Server Components require a different integration.
+Guide for **client-rendered** React apps (Vite, Create React App, and similar). If you use **Next.js App Router**, see **[Next.js](./nextjs.md)** because SSR and Server Components need a different integration.
 
 ## Components
 
@@ -9,7 +9,7 @@ Guide for **client-rendered** React apps (Vite, Create React App, etc.). If you
 | `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
 | `<weg-footer>` | Site footer — social links, menu, credits, copyright |
 
-Both are **presentational** [Stencil](https://stenciljs.com/) Web Components. They **do not fetch data** — your app passes a **`layout`** payload from the WEG CMS WEG21 API (via [`fetchWeg21Layout`](../src/utils/menus.ts)) or [`weg21-bootstrap.json`](../src/assets/weg21-bootstrap.json) and [`weg21-menus.json`](../src/assets/weg21-menus.json) as offline fallback.
+Both are **presentational** [Stencil](https://stenciljs.com/) Web Components. They **do not fetch data**. Your app passes a **`layout`** payload from the WEG CMS WEG21 API (for example via [`fetchWeg21Layout`](../src/utils/menus.ts)) or from the bundled offline fixtures [`weg21-bootstrap.json`](../src/assets/weg21-bootstrap.json) and [`weg21-menus.json`](../src/assets/weg21-menus.json).
 
 `<weg-header>` additionally accepts **`signed-in`**, **`user-name`**, **`account-base-url`**, **`current-path`**, and emits **`wegAuthClick`**.
 
@@ -80,7 +80,7 @@ Sign-in is a normal `header.menu` link — add it in your CMS like Register. The
 
 ### Signed in
 
-Set **`signed-in`** and optionally **`user-name`**. The component **ignores CMS nav** and shows built-in links: Find a job, Dashboard, Manage Account, Sign out. Pass **`account-base-url`** when account links should use a non-production portal.
+Set **`signed-in`** and optionally **`user-name`**. If `layout.header.menu` is present, the component keeps using that menu while switching to signed-in UI. If `layout.header.menu` is empty, it falls back to the built-in signed-in menu: Find a job, Dashboard, Manage Account, and Sign out. Pass **`account-base-url`** when those fallback account links should use a non-production portal.
 
 Handle **`wegAuthClick`** for sign-out (call your logout API, then redirect):
 
@@ -122,7 +122,7 @@ Without React Router, pass `window.location.pathname` (+ `search` when needed) o
 
 | Prop / event | Purpose |
 | --- | --- |
-| `signedIn={boolean}` | Switches to signed-in nav when `true` |
+| `signedIn={boolean}` | Enables signed-in UI; the built-in signed-in fallback menu is used when `layout.header.menu` is empty |
 | `userName={string}` | First name beside profile icon on Manage Account |
 | `accountBaseUrl={string}` | Account portal origin for signed-in links (optional) |
 | `currentPath={string}` | Current path — highlights active nav (e.g. `/career-advice/foo`) |
@@ -180,23 +180,17 @@ const currentPath = search ? `${pathname}${search}` : pathname;
 import { useEffect, useState } from 'react';
 import 'weg-shared-layout/weg-header';
 import 'weg-shared-layout/weg-footer';
-import { dummyWeg21LayoutData } from 'weg-shared-layout/menus';
+import { dummyWeg21LayoutData, fetchWeg21Layout } from 'weg-shared-layout/menus';
 const layoutFixture = dummyWeg21LayoutData();
 
 type LayoutData = typeof layoutFixture;
 
-const WEG21_API = 'https://warwickemploymentgroup.com/api/v1/weg21';
-
 export function SiteLayout({ children }: { children: React.ReactNode }) {
   const [layout, setLayout] = useState<LayoutData | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    fetch(LAYOUT_URL)
-      .then((res) => {
-        if (!res.ok) throw new Error(`layout fetch failed: ${res.status}`);
-        return res.json() as Promise<LayoutData>;
-      })
+    fetchWeg21Layout({ apiKey: import.meta.env.VITE_WCMS_API_KEY })
       .then((data) => {
         if (!cancelled) setLayout(data);
       })
@@ -277,6 +271,7 @@ declare module 'react' {
 | Empty despite correct data | React set `layout` as attribute | React 19+, or `JSON.stringify`, or ref assignment. |
 | Logo missing on header | Old build without inlined logo | Upgrade package; logo is bundled in `logo-data.ts`. |
 | Auth always Sign in | `signed-in` not set | Bind `signedIn={!!session}`. |
+| Signed-in links are not what you expected | `layout.header.menu` is still being used | Leave `layout.header.menu` empty if you want the built-in signed-in fallback nav. |
 | Manage Account shows label not name | `user-name` not set | Pass `userName` when signed in. |
 | Nav never highlights active page | `current-path` not set | Pass `currentPath` from your router (pathname + query when needed). |
 | `onWegAuthClick` not firing | React CE event binding | Use `addEventListener` on a ref. |

package/docs/vanilla.md

@@ -7,7 +7,7 @@
 | `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
 | `<weg-footer>` | Site footer — social links, menu, credits, copyright |
 
-Both components are **presentational**: they do **not** fetch data. Pass the same `layout` payload to each.
+Both components are **presentational**: they do **not** fetch data. Pass the same `layout` payload to both.
 
 WEG21 API schema: [`weg21-bootstrap.json`](../src/assets/weg21-bootstrap.json), [`weg21-menus.json`](../src/assets/weg21-menus.json)
 
@@ -82,7 +82,7 @@ Renders `header.menu` from `layout`. Add sign-in as a normal link — `{ "label"
 
 ### Signed in
 
-Set **`signedIn`** and optionally **`userName`**. CMS nav is ignored; built-in links are shown (Find a job, Dashboard, Manage Account, Sign out). Set **`accountBaseUrl`** when account links should use a non-production portal.
+Set **`signedIn`** and optionally **`userName`**. If `layout.header.menu` is present, the component keeps using that menu while switching to signed-in UI. If the menu is empty, the built-in signed-in fallback menu is shown instead: Find a job, Dashboard, Manage Account, and Sign out. Set **`accountBaseUrl`** when those fallback account links should use a non-production portal.
 
 ```js
 header.signedIn = true;
@@ -138,14 +138,21 @@ Logo **image** uses `header.logoSrc` (bundled if omitted). Logo **link** uses `h
 
 ## Without a bundler
 
-Fetch `weg21-bootstrap.json` and `weg21-menus.json`, map with the same logic as [`menusToLayoutData`](../src/utils/menus.ts), then assign properties:
+If you are not using a bundler, you cannot import `weg-shared-layout/menus` directly from the package. In that case, fetch or embed a pre-mapped `layout` object yourself, or copy the same mapping logic as [`menusToLayoutData`](../src/utils/menus.ts) into your app.
+
+At minimum, the object you assign still needs the same final shape:
 
 ```js
-const [bootstrapRes, menusRes] = await Promise.all([
-  fetch('/assets/weg21-bootstrap.json'),
-  fetch('/assets/weg21-menus.json'),
-]);
-const layout = await res.json();
+const layout = {
+  header: { menu: [...] },
+  footer: {
+    menu: [...],
+    social: [...],
+    credits: '...',
+    copyright: '...',
+  },
+};
+
 document.getElementById('header').layout = layout;
 document.getElementById('footer').layout = layout;
 ```

package/hydrate/index.js

@@ -5920,8 +5920,8 @@ class WegHeader {
      */
     userName;
     /**
-     * Account portal origin for sign-in, register, dashboard, and manage-account links.
-     * Defaults to production when omitted.
+     * Account portal origin for the built-in signed-in fallback menu (when `header.menu` is empty).
+     * Menu links from the CMS use their `href` as-is. Defaults to production when omitted.
      */
     accountBaseUrl;
     /**
@@ -6019,13 +6019,43 @@ class WegHeader {
     getMenuToggleButton() {
         return this.el.shadowRoot?.querySelector('.menu-toggle');
     }
+    static FOCUSABLE_SELECTOR = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"])';
     getFirstNavFocusable() {
         const panel = this.el.shadowRoot?.querySelector('#weg-header-main-nav');
         if (!panel)
             return null;
-        const focusables = panel.querySelectorAll('a[href], button:not([disabled])');
+        const focusables = panel.querySelectorAll(WegHeader.FOCUSABLE_SELECTOR);
         return focusables[0] ?? null;
     }
+    /** Focusable controls inside the open mobile menu chrome (toggle → logo → auth → nav). */
+    getMobileMenuFocusables() {
+        const header = this.el.shadowRoot?.querySelector('.header');
+        if (!header)
+            return [];
+        return Array.from(header.querySelectorAll(WegHeader.FOCUSABLE_SELECTOR));
+    }
+    trapMobileMenuFocus(event) {
+        if (!this.isMobileMenuActive() || event.key !== 'Tab')
+            return;
+        const focusables = this.getMobileMenuFocusables();
+        if (focusables.length === 0)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = this.el.shadowRoot?.activeElement;
+        const activeInTrap = active != null && focusables.includes(active);
+        if (event.shiftKey) {
+            if (!activeInTrap || active === first) {
+                event.preventDefault();
+                last.focus();
+            }
+            return;
+        }
+        if (!activeInTrap || active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
     focusFirstNavItem() {
         setTimeout(() => {
             const attemptFocus = (retries = 8) => {
@@ -6137,6 +6167,10 @@ class WegHeader {
         this.resolve();
     }
     handleKeyDown(event) {
+        if (event.key === 'Tab') {
+            this.trapMobileMenuFocus(event);
+            return;
+        }
         if (event.key !== 'Escape')
             return;
         if (this.openDropdown) {
@@ -6396,6 +6430,20 @@ class WegHeader {
         const name = this.userName?.trim();
         return name || 'Manage Account';
     }
+    resolveManageAccountHref(link) {
+        const fromMenu = link?.href?.trim();
+        if (fromMenu)
+            return fromMenu;
+        return accountPath(this.getAccountHome(), '/account/manage');
+    }
+    findManageAccountLink(menu) {
+        const accountHome = this.getAccountHome();
+        for (const item of menu) {
+            if (!isMenuGroup(item) && isManageAccountLink(item, accountHome))
+                return item;
+        }
+        return null;
+    }
     shouldExcludeFromNavActive(item, accountHome) {
         return isSignOutLink(item) || isSignInLink(item, accountHome);
     }
@@ -6475,9 +6523,9 @@ class WegHeader {
                 [options.className || '']: !!options.className,
             }, href: link.href, "aria-label": link.label, onClick: (event) => this.handleAuthClick(event, action, link.href, onNavigate) }, hAsync(Icon, null), !iconOnly ? link.label : null, iconOnly ? hAsync("span", { class: "sr-only" }, link.label) : null));
     }
-    renderManageAccountAnchor(onNavigate, iconOnly = false, ariaCurrentHref = null) {
+    renderManageAccountAnchor(onNavigate, iconOnly = false, ariaCurrentHref = null, link) {
         const label = this.getManageAccountLabel();
-        const href = accountPath(this.getAccountHome(), '/account/manage');
+        const href = this.resolveManageAccountHref(link);
         const active = this.isNavItemActive(href, 'prefix');
         const ariaCurrent = this.isAriaCurrentHref(href, ariaCurrentHref);
         return (hAsync("a", { class: {
@@ -6499,7 +6547,7 @@ class WegHeader {
             return (hAsync("li", { class: "main-nav__item main-nav__item--auth", key: "sign-in" }, this.renderAuthControl({ link: item, action: 'sign-in', onNavigate })));
         }
         if (isManageAccountLink(item, accountHome)) {
-            return (hAsync("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate, false, ariaCurrentHref)));
+            return (hAsync("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate, false, ariaCurrentHref, item)));
         }
         if (this.signedIn && isFindJobLink(item)) {
             return this.renderIconNavLink(item, FindJobIcon, 'find-a-job-link', onNavigate, ariaCurrentHref);
@@ -6515,7 +6563,8 @@ class WegHeader {
     }
     renderCompactAuth(onNavigate) {
         if (this.signedIn) {
-            return this.renderManageAccountAnchor(onNavigate, true);
+            const manageLink = this.findManageAccountLink(this.getActiveMenu());
+            return this.renderManageAccountAnchor(onNavigate, true, null, manageLink ?? undefined);
         }
         const signIn = this.findSignInLink(this.resolved.menu);
         if (!signIn?.href)
@@ -6544,12 +6593,12 @@ class WegHeader {
         const logoSrc = this.getLogoSrc();
         const closeMenu = () => this.closeMenu();
         const mobileMenuActive = this.isMobileMenuActive();
-        return (hAsync(Host, { key: 'e0ed16abe9a49db723b627ea8bccfde470406f57', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, hAsync("div", { key: '574712a024543f0653f9956949b2796377451847', class: "weg-header-shell" }, hAsync("a", { key: '279c196e293d93db62fc29915f63b7b24b38e6c1', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), hAsync("header", { key: '29bbed6bde5ccf8cd2b4e4df4a7ba58b122c2d6a', class: {
+        return (hAsync(Host, { key: '916472d15df8abf5270650126356ef2d7a475765', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, hAsync("div", { key: '8c8d63f67cf7b27364cc828aa42c5b011cbb971e', class: "weg-header-shell" }, hAsync("a", { key: '96f6141f0bff7a51bbc8f46ea9b92d0c33142e1a', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), hAsync("header", { key: '4a727a72e031159ca991505a1a8a59a32271aedf', class: {
                 header: true,
                 'header--menu-open': mobileMenuActive,
                 'header--scroll-mode': this.headerScrollMode,
                 'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
-            } }, hAsync("div", { key: '85650e9d0d244fefbd9f216130703de9288baa93', class: "header-inner" }, hAsync("div", { key: '34e7bf3d15733e9acefb12b2c77fee9a4cf7479c', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), hAsync("button", { key: '9e35626afcecc92d93deb2fb25f8f93727f85d4d', 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 ? hAsync(CloseIcon, null) : hAsync(HamburgerIcon, null)), hAsync(Logo, { key: '99ffa62e443e939316b58d36cab8e9e0a10cfa36', href: logoHref, src: logoSrc }), hAsync("div", { key: 'c9b453f5187d5b6ad782ae03400c13f16a31c383', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), hAsync("div", { key: '0f15f985cf4931a9867c341d053f5ebd2b398d42', 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)))))));
+            } }, hAsync("div", { key: '5ef2a85bf2087206a17e3cbf163dde4d549dcd0b', class: "header-inner" }, hAsync("div", { key: '3af6990b5c6d93b4332a0d53300daddb11e2ad2b', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), hAsync("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 ? hAsync(CloseIcon, null) : hAsync(HamburgerIcon, null)), hAsync(Logo, { key: 'efa51b76936456c49059c67e9f2c9c2365b97d25', href: logoHref, src: logoSrc }), hAsync("div", { key: 'ee0eff5ae3a63cf9550261a4d1727c9a88ab3e4d', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), hAsync("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)))))));
     }
     static get watchers() { return {
         "layout": [{

package/hydrate/index.mjs

@@ -5918,8 +5918,8 @@ class WegHeader {
      */
     userName;
     /**
-     * Account portal origin for sign-in, register, dashboard, and manage-account links.
-     * Defaults to production when omitted.
+     * Account portal origin for the built-in signed-in fallback menu (when `header.menu` is empty).
+     * Menu links from the CMS use their `href` as-is. Defaults to production when omitted.
      */
     accountBaseUrl;
     /**
@@ -6017,13 +6017,43 @@ class WegHeader {
     getMenuToggleButton() {
         return this.el.shadowRoot?.querySelector('.menu-toggle');
     }
+    static FOCUSABLE_SELECTOR = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"])';
     getFirstNavFocusable() {
         const panel = this.el.shadowRoot?.querySelector('#weg-header-main-nav');
         if (!panel)
             return null;
-        const focusables = panel.querySelectorAll('a[href], button:not([disabled])');
+        const focusables = panel.querySelectorAll(WegHeader.FOCUSABLE_SELECTOR);
         return focusables[0] ?? null;
     }
+    /** Focusable controls inside the open mobile menu chrome (toggle → logo → auth → nav). */
+    getMobileMenuFocusables() {
+        const header = this.el.shadowRoot?.querySelector('.header');
+        if (!header)
+            return [];
+        return Array.from(header.querySelectorAll(WegHeader.FOCUSABLE_SELECTOR));
+    }
+    trapMobileMenuFocus(event) {
+        if (!this.isMobileMenuActive() || event.key !== 'Tab')
+            return;
+        const focusables = this.getMobileMenuFocusables();
+        if (focusables.length === 0)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = this.el.shadowRoot?.activeElement;
+        const activeInTrap = active != null && focusables.includes(active);
+        if (event.shiftKey) {
+            if (!activeInTrap || active === first) {
+                event.preventDefault();
+                last.focus();
+            }
+            return;
+        }
+        if (!activeInTrap || active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
     focusFirstNavItem() {
         setTimeout(() => {
             const attemptFocus = (retries = 8) => {
@@ -6135,6 +6165,10 @@ class WegHeader {
         this.resolve();
     }
     handleKeyDown(event) {
+        if (event.key === 'Tab') {
+            this.trapMobileMenuFocus(event);
+            return;
+        }
         if (event.key !== 'Escape')
             return;
         if (this.openDropdown) {
@@ -6394,6 +6428,20 @@ class WegHeader {
         const name = this.userName?.trim();
         return name || 'Manage Account';
     }
+    resolveManageAccountHref(link) {
+        const fromMenu = link?.href?.trim();
+        if (fromMenu)
+            return fromMenu;
+        return accountPath(this.getAccountHome(), '/account/manage');
+    }
+    findManageAccountLink(menu) {
+        const accountHome = this.getAccountHome();
+        for (const item of menu) {
+            if (!isMenuGroup(item) && isManageAccountLink(item, accountHome))
+                return item;
+        }
+        return null;
+    }
     shouldExcludeFromNavActive(item, accountHome) {
         return isSignOutLink(item) || isSignInLink(item, accountHome);
     }
@@ -6473,9 +6521,9 @@ class WegHeader {
                 [options.className || '']: !!options.className,
             }, href: link.href, "aria-label": link.label, onClick: (event) => this.handleAuthClick(event, action, link.href, onNavigate) }, hAsync(Icon, null), !iconOnly ? link.label : null, iconOnly ? hAsync("span", { class: "sr-only" }, link.label) : null));
     }
-    renderManageAccountAnchor(onNavigate, iconOnly = false, ariaCurrentHref = null) {
+    renderManageAccountAnchor(onNavigate, iconOnly = false, ariaCurrentHref = null, link) {
         const label = this.getManageAccountLabel();
-        const href = accountPath(this.getAccountHome(), '/account/manage');
+        const href = this.resolveManageAccountHref(link);
         const active = this.isNavItemActive(href, 'prefix');
         const ariaCurrent = this.isAriaCurrentHref(href, ariaCurrentHref);
         return (hAsync("a", { class: {
@@ -6497,7 +6545,7 @@ class WegHeader {
             return (hAsync("li", { class: "main-nav__item main-nav__item--auth", key: "sign-in" }, this.renderAuthControl({ link: item, action: 'sign-in', onNavigate })));
         }
         if (isManageAccountLink(item, accountHome)) {
-            return (hAsync("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate, false, ariaCurrentHref)));
+            return (hAsync("li", { class: "main-nav__item main-nav__item--auth", key: "manage-account" }, this.renderManageAccountAnchor(onNavigate, false, ariaCurrentHref, item)));
         }
         if (this.signedIn && isFindJobLink(item)) {
             return this.renderIconNavLink(item, FindJobIcon, 'find-a-job-link', onNavigate, ariaCurrentHref);
@@ -6513,7 +6561,8 @@ class WegHeader {
     }
     renderCompactAuth(onNavigate) {
         if (this.signedIn) {
-            return this.renderManageAccountAnchor(onNavigate, true);
+            const manageLink = this.findManageAccountLink(this.getActiveMenu());
+            return this.renderManageAccountAnchor(onNavigate, true, null, manageLink ?? undefined);
         }
         const signIn = this.findSignInLink(this.resolved.menu);
         if (!signIn?.href)
@@ -6542,12 +6591,12 @@ class WegHeader {
         const logoSrc = this.getLogoSrc();
         const closeMenu = () => this.closeMenu();
         const mobileMenuActive = this.isMobileMenuActive();
-        return (hAsync(Host, { key: 'e0ed16abe9a49db723b627ea8bccfde470406f57', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, hAsync("div", { key: '574712a024543f0653f9956949b2796377451847', class: "weg-header-shell" }, hAsync("a", { key: '279c196e293d93db62fc29915f63b7b24b38e6c1', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), hAsync("header", { key: '29bbed6bde5ccf8cd2b4e4df4a7ba58b122c2d6a', class: {
+        return (hAsync(Host, { key: '916472d15df8abf5270650126356ef2d7a475765', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, hAsync("div", { key: '8c8d63f67cf7b27364cc828aa42c5b011cbb971e', class: "weg-header-shell" }, hAsync("a", { key: '96f6141f0bff7a51bbc8f46ea9b92d0c33142e1a', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), hAsync("header", { key: '4a727a72e031159ca991505a1a8a59a32271aedf', class: {
                 header: true,
                 'header--menu-open': mobileMenuActive,
                 'header--scroll-mode': this.headerScrollMode,
                 'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
-            } }, hAsync("div", { key: '85650e9d0d244fefbd9f216130703de9288baa93', class: "header-inner" }, hAsync("div", { key: '34e7bf3d15733e9acefb12b2c77fee9a4cf7479c', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), hAsync("button", { key: '9e35626afcecc92d93deb2fb25f8f93727f85d4d', 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 ? hAsync(CloseIcon, null) : hAsync(HamburgerIcon, null)), hAsync(Logo, { key: '99ffa62e443e939316b58d36cab8e9e0a10cfa36', href: logoHref, src: logoSrc }), hAsync("div", { key: 'c9b453f5187d5b6ad782ae03400c13f16a31c383', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), hAsync("div", { key: '0f15f985cf4931a9867c341d053f5ebd2b398d42', 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)))))));
+            } }, hAsync("div", { key: '5ef2a85bf2087206a17e3cbf163dde4d549dcd0b', class: "header-inner" }, hAsync("div", { key: '3af6990b5c6d93b4332a0d53300daddb11e2ad2b', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), hAsync("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 ? hAsync(CloseIcon, null) : hAsync(HamburgerIcon, null)), hAsync(Logo, { key: 'efa51b76936456c49059c67e9f2c9c2365b97d25', href: logoHref, src: logoSrc }), hAsync("div", { key: 'ee0eff5ae3a63cf9550261a4d1727c9a88ab3e4d', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), hAsync("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)))))));
     }
     static get watchers() { return {
         "layout": [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weg-shared-layout",
-  "version": "0.0.54",
+  "version": "0.0.58",
   "description": "Shared layout Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -1,25 +1,34 @@
 # weg-shared-layout
 
-> Shared layout Web Components.
+Shared layout Web Components built with Stencil.
 
 ## Install
 
 ```bash
 npm i weg-shared-layout
+# or
+pnpm add weg-shared-layout
 ```
 
-## How it works
+## What this package contains
 
-`<weg-header>` and `<weg-footer>` are **presentational** Web Components: they do **not** fetch data.
+`weg-shared-layout` publishes two presentational Web Components:
 
-Load layout from the **WEG CMS WEG21 API**, then pass the mapped object to `layout` on each tag:
+- `<weg-header>`
+- `<weg-footer>`
+
+They do not fetch their own content. Your app loads layout data, maps it into the expected shape, and passes the same `layout` object to both components.
+
+## WEG21 API flow
+
+The package includes helpers for the WEG CMS WEG21 API:
 
 | Endpoint | Purpose |
 | --- | --- |
-| `GET https://warwickemploymentgroup.com/api/v1/weg21` | Logo URLs, footer social + legal copy |
-| `GET …/api/v1/weg21/menus` | Header (`ext` / `int`) and footer link columns |
+| `GET https://warwickemploymentgroup.com/api/v1/weg21` | Footer copy, social links, and additional bootstrap metadata such as logo/favicon URLs |
+| `GET https://warwickemploymentgroup.com/api/v1/weg21/menus` | Header nav (`ext` / `int`) and footer link columns |
 
-Both require the `wcms-api-key` header. Use `fetchWeg21Layout` from `weg-shared-layout/menus`:
+Use `fetchWeg21Layout()` to fetch and map both endpoints:
 
 ```ts
 import { fetchWeg21Layout } from 'weg-shared-layout/menus';
@@ -27,12 +36,16 @@ import { fetchWeg21Layout } from 'weg-shared-layout/menus';
 const layout = await fetchWeg21Layout({
   apiKey: process.env.WCMS_API_KEY,
 });
-// layout.header.menu, layout.footer.menu, layout.footer.social, …
 ```
 
-[`weg21-bootstrap.json`](src/assets/weg21-bootstrap.json) and [`weg21-menus.json`](src/assets/weg21-menus.json) mirror the **WEG21 API response schemas** (`GET /api/v1/weg21` and `/menus`). Map to `layout` with `dummyWeg21LayoutData()` or `menusToLayoutData`.
+You can also work offline with the bundled schema fixtures:
+
+- `weg-shared-layout/weg21-bootstrap.json`
+- `weg-shared-layout/weg21-menus.json`
+
+Map those with `dummyWeg21LayoutData()` or `menusToLayoutData()`.
 
-### Layout shape (abbreviated)
+## Layout shape
 
 ```json
 {
@@ -51,33 +64,29 @@ const layout = await fetchWeg21Layout({
 }
 ```
 
-| Field | Used when | Notes |
-| --- | --- | --- |
-| `header.logoSrc` | Signed out | Optional CMS logo URL; bundled PNG if omitted |
-| `header.logoHref` | Always | Optional logo link URL; WEG homepage if omitted |
-| `header.menu` | Signed out | Groups use `items`; flat links use `href` |
-| `footer.menu` | Always | `LayoutLink[][]` — one column per inner array |
-| `footer.social` | Always | LinkedIn, Instagram, TikTok, or YouTube |
-| `footer.credits` / `footer.copyright` | Always | Legal copy |
-
-### Auth (Sign in / Sign out)
+| Field | Notes |
+| --- | --- |
+| `header.logoSrc` | Optional logo image URL; bundled logo is used when omitted |
+| `header.logoHref` | Optional logo link URL; defaults to the WEG homepage |
+| `header.menu` | Mixed array of groups (`items`) and flat links (`href`) |
+| `footer.menu` | `LayoutLink[][]` where each inner array is a footer column |
+| `footer.social` | LinkedIn, Instagram, TikTok, or YouTube links |
+| `footer.credits` / `footer.copyright` | Footer legal copy |
 
-**Signed out**: renders `header.menu`. Sign-in is a normal link — add `{ "label": "Sign in", "href": "…" }` like Register or Career advice. The header recognizes it by label or login URL and follows `href` on click.
+## Header auth behavior
 
-**Signed in** (`signed-in` true): ignores CMS `header.menu` and shows built-in Find a job, Dashboard, Manage Account, and Sign out.
+When `signed-in` is `false`, the header renders `layout.header.menu` directly. Sign-in should be represented as a normal CMS link such as `{ "label": "Sign in", "href": "…" }`.
 
-Set **`signed-in`** from your app session state. Pass **`user-name`** for Manage Account. Pass **`account-base-url`** when account links should point at a non-production portal. Pass **`current-path`** (e.g. `/career-advice/my-article`) to highlight the active nav item. **Sign out** emits **`wegAuthClick`** — the host must call `event.preventDefault()` and run your logout flow (API call, clear session, redirect).
+When `signed-in` is `true`, the component still uses `layout.header.menu` if you provide one. If `layout.header.menu` is empty, it falls back to the built-in signed-in menu: Find a job, Dashboard, Manage Account, and Sign out.
 
-### Nav active state
+Pass:
 
-| Link type | Match rule |
-| --- | --- |
-| Flat nav link | Prefix — `/career-advice` matches `/career-advice/foo` |
-| Dropdown child | Exact pathname (+ query when href includes `?`) |
-| Dropdown parent | Active background when any child matches |
-| Sign in / Sign out | Never highlighted |
+- `signed-in` from your app session state
+- `user-name` for the signed-in Manage Account label
+- `account-base-url` only when using the built-in signed-in fallback menu against a non-production account portal
+- `current-path` to highlight the active nav item
 
-Active links use **`weg-purple-200`** (`#CDCFF8`). Omit `current-path` to disable active styling.
+Sign-out emits `wegAuthClick`. The host app should call `event.preventDefault()` and run logout + redirect itself.
 
 ```js
 header.addEventListener('wegAuthClick', async (event) => {
@@ -88,34 +97,47 @@ header.addEventListener('wegAuthClick', async (event) => {
 });
 ```
 
-### Package imports (TypeScript / bundlers)
+## Nav active state
+
+| Link type | Match rule |
+| --- | --- |
+| Flat nav link | Prefix match, so `/career-advice` matches `/career-advice/foo` |
+| Dropdown child | Exact pathname, plus query string when the href includes `?` |
+| Dropdown parent | Active background when any child matches |
+| Sign in / Sign out | Never highlighted |
+
+Active links use `weg-purple-200` (`#CDCFF8`). Omit `current-path` to disable active styling.
+
+## Package entry points
 
-| Subpath | Use |
+| Import | Purpose |
 | --- | --- |
-| `weg-shared-layout/loader` | `defineCustomElements()` — **recommended** |
-| `weg-shared-layout/menus` | `fetchWeg21Layout`, `menusToLayoutData` |
-| `weg-shared-layout/menus-data` | WEG21 API types (`MenusData`, …) |
-| `weg-shared-layout/layout-data` | `<weg-header>` / `<weg-footer>` types (`LayoutData`, …) |
-| `weg-shared-layout/weg21-bootstrap.json` | `GET /api/v1/weg21` schema sample |
-| `weg-shared-layout/weg21-menus.json` | `GET /api/v1/weg21/menus` schema sample |
-| `weg-shared-layout/weg-header` / `weg-footer` | Side-effect tag registration |
-| `weg-shared-layout/styles/container.css` | Shared `.container` width and gutter utility |
+| `weg-shared-layout/loader` | `defineCustomElements()` for registering all tags |
+| `weg-shared-layout/menus` | `fetchWeg21Layout`, `menusToLayoutData`, `dummyWeg21LayoutData` |
+| `weg-shared-layout/menus-data` | WEG21 API response types |
+| `weg-shared-layout/layout-data` | `layout` prop types |
+| `weg-shared-layout/weg21-bootstrap.json` | Sample `GET /api/v1/weg21` payload |
+| `weg-shared-layout/weg21-menus.json` | Sample `GET /api/v1/weg21/menus` payload |
+| `weg-shared-layout/weg-header` / `weg-footer` | Side-effect imports for individual tags |
+| `weg-shared-layout/hydrate` | Stencil hydrate build for server-side rendering workflows |
+| `weg-shared-layout/styles/container.css` | Shared `.container` layout utility |
+| `weg-shared-layout` | Root package export with generated JSX/component typings plus `format()` |
 
 ## Documentation
 
-Full index: **[docs/README.md](./docs/README.md)**.
+See **[docs/README.md](./docs/README.md)** for the full index.
 
 | Guide | Doc |
 | --- | --- |
 | Angular 16 | [docs/angular.md](./docs/angular.md) |
-| Angular 16 demo (runnable) | [demo/angular16/README.md](./demo/angular16/README.md) |
-| React (SPA, client-only) | [docs/react.md](./docs/react.md) |
-| Next.js (App Router) | [docs/nextjs.md](./docs/nextjs.md) |
+| Angular 16 demo | [demo/angular16/README.md](./demo/angular16/README.md) |
+| React SPA | [docs/react.md](./docs/react.md) |
+| Next.js App Router | [docs/nextjs.md](./docs/nextjs.md) |
 | Plain HTML / vanilla JS | [docs/vanilla.md](./docs/vanilla.md) |
-| Publishing (maintainers) | [docs/publishing.md](./docs/publishing.md) |
+| Publishing | [docs/publishing.md](./docs/publishing.md) |
 
-## Publishing (maintainers)
+## Publishing
 
-**`npm publish` does not run `npm run build` by itself** — it packs what is on disk. This package uses a **`prepack`** script so a full Stencil build runs before every `npm pack` / `npm publish`, avoiding incomplete tarballs.
+`npm publish` does not run a build on its own; it publishes whatever is already on disk. This repo relies on `prepack` so a Stencil build runs before packing or publishing.
 
-Details, checklist, and CI notes: **[docs/publishing.md](./docs/publishing.md)**.
+For the full release checklist, package contents, and CI notes, see **[docs/publishing.md](./docs/publishing.md)**.