weg-shared-layout 0.0.32 → 0.0.33

package/docs/vanilla.md

@@ -1,139 +1,139 @@
-# Plain HTML / vanilla JS
-
-## What you get
-
-| Tag | Purpose |
-| --- | --- |
-| `<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.
-
-Payload shape: [`dummy-data.json`](../src/assets/dummy-data.json) (see [readme](../readme.md#how-it-works)).
-
-## Install & register
-
-With a bundler that resolves `node_modules` and package **`exports`** (TypeScript: `resolveJsonModule` + `moduleResolution` `bundler` or `node16` — see [angular-16-compatibility](./angular-16-compatibility.md)):
-
-```html
-<weg-header id="header"></weg-header>
-<main><!-- your content --></main>
-<weg-footer id="footer"></weg-footer>
-
-<script type="module">
-  import { defineCustomElements } from 'weg-shared-layout/loader';
-  import layout from 'weg-shared-layout/dummy-data.json';
-  import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
-
-  defineCustomElements();
-
-  const header = document.getElementById('header');
-  const footer = document.getElementById('footer');
-
-  header.layout = layout;
-  footer.layout = layout;
-</script>
-```
-
-Side-effect imports (no loader) if you only need specific tags:
-
-```js
-import 'weg-shared-layout/weg-header';
-import 'weg-shared-layout/weg-footer';
-```
-
-## `layout` property vs attribute
-
-Assign the **`layout` JavaScript property** (recommended):
-
-```js
-element.layout = layoutObject;
-```
-
-Or pass a JSON **string** on the `layout` attribute:
-
-```html
-<weg-header layout='{"header":{"menu":[]}}'></weg-header>
-```
-
-## Header layout fields (signed out)
-
-| Field | Purpose |
-| --- | --- |
-| `header.logoSrc` | Logo image URL (bundled if omitted) |
-| `header.menu` | Unified nav — groups with `items[]`, flat links with `href` (incl. Sign in) |
-
-See [`dummy-data.json`](../src/assets/dummy-data.json) for production URL examples.
-
-## Header auth (Sign in / Sign out)
-
-Define auth URLs in `./auth.js`:
-
-```js
-export const HEADER_SIGN_IN = {
-  label: 'Sign in',
-  href: 'https://account.warwickemploymentgroup.com/account/login',
-};
-
-export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
-```
-
-### Signed out
-
-Renders `header.menu` from `layout` — dropdown groups, flat links, and the Sign in entry (label **Sign in** fires `wegAuthClick`).
-
-### Signed in
-
-Set **`signedIn`** and optionally **`userName`**. CMS nav is ignored; built-in links are shown (Find a job, Dashboard, Manage Account, Sign out).
-
-```js
-header.signedIn = true;
-header.userName = 'Alex';
-// or
-header.setAttribute('signed-in', '');
-header.setAttribute('user-name', 'Alex');
-```
-
-Listen for **`wegAuthClick`**:
-
-```js
-import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
-
-header.addEventListener('wegAuthClick', (event) => {
-  event.preventDefault();
-
-  if (event.detail.action === 'sign-out') {
-    header.signedIn = false;
-    window.location.href = ACCOUNT_LOGIN_HREF;
-    return;
-  }
-
-  window.location.href = HEADER_SIGN_IN.href;
-});
-```
-
-| `event.detail.action` | Default behaviour if not prevented |
-| --- | --- |
-| `'sign-in'` | Browser follows the Sign in menu entry's `href` |
-| `'sign-out'` | Redirects to built-in sign-out URL |
-
-Logo **image** uses `header.logoSrc` (bundled if omitted). Logo **link** always goes to WEG home.
-
-## Without a bundler
-
-Copy `dummy-data.json` to your static assets, `fetch` it, parse JSON, then assign properties:
-
-```js
-const res = await fetch('/assets/dummy-data.json');
-const layout = await res.json();
-document.getElementById('header').layout = layout;
-document.getElementById('footer').layout = layout;
-```
-
-## See also
-
-- **[Documentation index](./README.md)**
-- **[React SPA](./react.md)**
-- **[Next.js App Router](./nextjs.md)**
-- **[Angular](./angular.md)** · **[Angular 16 demo](../demo/angular16/README.md)**
-- **[Package readme](../readme.md)**
+# Plain HTML / vanilla JS
+
+## What you get
+
+| Tag | Purpose |
+| --- | --- |
+| `<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.
+
+Payload shape: [`dummy-data.json`](../src/assets/dummy-data.json) (see [readme](../readme.md#how-it-works)).
+
+## Install & register
+
+With a bundler that resolves `node_modules` and package **`exports`** (TypeScript: `resolveJsonModule` + `moduleResolution` `bundler` or `node16` — see [angular.md](./angular.md)):
+
+```html
+<weg-header id="header"></weg-header>
+<main><!-- your content --></main>
+<weg-footer id="footer"></weg-footer>
+
+<script type="module">
+  import { defineCustomElements } from 'weg-shared-layout/loader';
+  import layout from 'weg-shared-layout/dummy-data.json';
+  import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
+
+  defineCustomElements();
+
+  const header = document.getElementById('header');
+  const footer = document.getElementById('footer');
+
+  header.layout = layout;
+  footer.layout = layout;
+</script>
+```
+
+Side-effect imports (no loader) if you only need specific tags:
+
+```js
+import 'weg-shared-layout/weg-header';
+import 'weg-shared-layout/weg-footer';
+```
+
+## `layout` property vs attribute
+
+Assign the **`layout` JavaScript property** (recommended):
+
+```js
+element.layout = layoutObject;
+```
+
+Or pass a JSON **string** on the `layout` attribute:
+
+```html
+<weg-header layout='{"header":{"menu":[]}}'></weg-header>
+```
+
+## Header layout fields (signed out)
+
+| Field | Purpose |
+| --- | --- |
+| `header.logoSrc` | Logo image URL (bundled if omitted) |
+| `header.menu` | Unified nav — groups with `items[]`, flat links with `href` (incl. Sign in) |
+
+See [`dummy-data.json`](../src/assets/dummy-data.json) for production URL examples.
+
+## Header auth (Sign in / Sign out)
+
+Define auth URLs in `./auth.js`:
+
+```js
+export const HEADER_SIGN_IN = {
+  label: 'Sign in',
+  href: 'https://account.warwickemploymentgroup.com/account/login',
+};
+
+export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
+```
+
+### Signed out
+
+Renders `header.menu` from `layout` — dropdown groups, flat links, and the Sign in entry (label **Sign in** fires `wegAuthClick`).
+
+### Signed in
+
+Set **`signedIn`** and optionally **`userName`**. CMS nav is ignored; built-in links are shown (Find a job, Dashboard, Manage Account, Sign out).
+
+```js
+header.signedIn = true;
+header.userName = 'Alex';
+// or
+header.setAttribute('signed-in', '');
+header.setAttribute('user-name', 'Alex');
+```
+
+Listen for **`wegAuthClick`**:
+
+```js
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
+
+header.addEventListener('wegAuthClick', (event) => {
+  event.preventDefault();
+
+  if (event.detail.action === 'sign-out') {
+    header.signedIn = false;
+    window.location.href = ACCOUNT_LOGIN_HREF;
+    return;
+  }
+
+  window.location.href = HEADER_SIGN_IN.href;
+});
+```
+
+| `event.detail.action` | Default behaviour if not prevented |
+| --- | --- |
+| `'sign-in'` | Browser follows the Sign in menu entry's `href` |
+| `'sign-out'` | Redirects to built-in sign-out URL |
+
+Logo **image** uses `header.logoSrc` (bundled if omitted). Logo **link** always goes to WEG home.
+
+## Without a bundler
+
+Copy `dummy-data.json` to your static assets, `fetch` it, parse JSON, then assign properties:
+
+```js
+const res = await fetch('/assets/dummy-data.json');
+const layout = await res.json();
+document.getElementById('header').layout = layout;
+document.getElementById('footer').layout = layout;
+```
+
+## See also
+
+- **[Documentation index](./README.md)**
+- **[React SPA](./react.md)**
+- **[Next.js App Router](./nextjs.md)**
+- **[Angular](./angular.md)** · **[Angular 16 demo](../demo/angular16/README.md)**
+- **[Package readme](../readme.md)**

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "weg-shared-layout",
-  "version": "0.0.32",
-  "description": "Shared layout Web Components built with Stencil",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "dist/types/components.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/weg-shared-layout/weg-shared-layout.esm.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/components.d.ts",
-      "import": "./dist/weg-shared-layout/weg-shared-layout.esm.js",
-      "require": "./dist/weg-shared-layout/weg-shared-layout.cjs.js"
-    },
-    "./weg-footer": {
-      "types": "./dist/components/weg-footer.d.ts",
-      "import": "./dist/components/weg-footer.js"
-    },
-    "./weg-header": {
-      "types": "./dist/components/weg-header.d.ts",
-      "import": "./dist/components/weg-header.js"
-    },
-    "./loader": {
-      "types": "./loader/index.d.ts",
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs.js"
-    },
-    "./dummy-data.json": "./src/assets/dummy-data.json",
-    "./layout-data": {
-      "types": "./dist/types/types/layout-data.d.ts"
-    },
-    "./styles/container.css": "./src/styles/container.css"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jobsac/weg-shared-layout.git"
-  },
-  "bugs": {
-    "url": "https://github.com/jobsac/weg-shared-layout/issues"
-  },
-  "homepage": "https://github.com/jobsac/weg-shared-layout#readme",
-  "files": [
-    "dist/",
-    "docs/",
-    "loader/",
-    "src/assets/dummy-data.json",
-    "src/constants/",
-    "src/styles/container.css"
-  ],
-  "scripts": {
-    "prepack": "npm run build",
-    "build": "stencil build",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil-test --prod",
-    "test:watch": "stencil-test --prod --watch",
-    "generate": "stencil generate",
-    "demo:angular16:install": "npm install --prefix demo/angular16",
-    "demo:angular16:build": "npm run build && npm run build --prefix demo/angular16",
-    "demo:angular16": "npm run build && npm run start --prefix demo/angular16"
-  },
-  "devDependencies": {
-    "@csstools/postcss-global-data": "^4.0.0",
-    "@stencil-community/postcss": "^2.2.0",
-    "@stencil/core": "^4.27.1 || ^5.0.0-0",
-    "@stencil/vitest": "^1.8.3",
-    "@types/node": "^22.13.5",
-    "@vitest/browser-playwright": "^4.0.0",
-    "axe-core": "^4.11.4",
-    "playwright": "^1.52.0",
-    "postcss-custom-media": "^12.0.1",
-    "vitest": "^4.0.0"
-  },
-  "license": "MIT",
-  "author": "WEG",
-  "contributors": [
-    "Tan Ahmed <tan.ahmed@warwick.ac.uk>",
-    "Rakin Ahmed <rakin.ahmed@warwick.ac.uk>"
-  ]
-}
+{
+  "name": "weg-shared-layout",
+  "version": "0.0.33",
+  "description": "Shared layout Web Components built with Stencil",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/weg-shared-layout/weg-shared-layout.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/components.d.ts",
+      "import": "./dist/weg-shared-layout/weg-shared-layout.esm.js",
+      "require": "./dist/weg-shared-layout/weg-shared-layout.cjs.js"
+    },
+    "./weg-footer": {
+      "types": "./dist/components/weg-footer.d.ts",
+      "import": "./dist/components/weg-footer.js"
+    },
+    "./weg-header": {
+      "types": "./dist/components/weg-header.d.ts",
+      "import": "./dist/components/weg-header.js"
+    },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs.js"
+    },
+    "./dummy-data.json": "./src/assets/dummy-data.json",
+    "./layout-data": {
+      "types": "./dist/types/types/layout-data.d.ts"
+    },
+    "./styles/container.css": "./src/styles/container.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jobsac/weg-shared-layout.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jobsac/weg-shared-layout/issues"
+  },
+  "homepage": "https://github.com/jobsac/weg-shared-layout#readme",
+  "files": [
+    "dist/",
+    "docs/",
+    "loader/",
+    "src/assets/dummy-data.json",
+    "src/constants/",
+    "src/styles/container.css"
+  ],
+  "scripts": {
+    "prepack": "npm run build",
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil-test --prod",
+    "test:watch": "stencil-test --prod --watch",
+    "generate": "stencil generate",
+    "demo:angular16:install": "npm install --prefix demo/angular16",
+    "demo:angular16:build": "npm run build && npm run build --prefix demo/angular16",
+    "demo:angular16": "npm run build && npm run start --prefix demo/angular16"
+  },
+  "devDependencies": {
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@stencil-community/postcss": "^2.2.0",
+    "@stencil/core": "^4.27.1 || ^5.0.0-0",
+    "@stencil/vitest": "^1.8.3",
+    "@types/node": "^22.13.5",
+    "@vitest/browser-playwright": "^4.0.0",
+    "axe-core": "^4.11.4",
+    "playwright": "^1.52.0",
+    "postcss-custom-media": "^12.0.1",
+    "vitest": "^4.0.0"
+  },
+  "license": "MIT",
+  "author": "WEG",
+  "contributors": [
+    "Tan Ahmed <tan.ahmed@warwick.ac.uk>",
+    "Rakin Ahmed <rakin.ahmed@warwick.ac.uk>"
+  ]
+}

package/readme.md

@@ -1,97 +1,95 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
-
-# weg-shared-layout
-
-> Shared layout Web Components.
-
-## Install
-
-```bash
-npm i weg-shared-layout
-```
-
-## How it works
-
-`<weg-header>` and `<weg-footer>` are **presentational** Web Components: they do **not** fetch data.
-
-Load layout JSON from your CMS/API (e.g. [`GET /api/layout`](https://weg-payload-test.vercel.app/api/layout) from WEG CMS) or import [`dummy-data.json`](src/assets/dummy-data.json), then pass it to `layout` on each tag.
-
-### Layout shape (abbreviated)
-
-Full reference: [`src/assets/dummy-data.json`](src/assets/dummy-data.json). Sign-in is a normal `header.menu` entry labelled **Sign in**; it fires `wegAuthClick`. Signed-in nav is built into `<weg-header>` when `signed-in` is true.
-
-```json
-{
-  "header": {
-    "menu": [
-      { "label": "Find a job", "items": [{ "label": "Graduates", "href": "…" }] },
-      { "label": "Career advice", "href": "…" },
-      { "label": "Sign in", "href": "…" }
-    ]
-  },
-  "footer": {
-    "menu": [[{ "label": "About WEG", "href": "…" }]],
-    "social": [{ "platform": "LinkedIn", "href": "…" }],
-    "credits": "…",
-    "copyright": "…"
-  }
-}
-```
-
-| Field | Used when | Notes |
-| --- | --- | --- |
-| `header.logoSrc` | Signed out | Optional CMS logo URL; bundled PNG 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)
-
-**Signed out**: renders `header.menu`. The Sign in entry fires `wegAuthClick` with action `sign-in`.
-
-**Signed in** (`signed-in` true): ignores CMS `header.menu` and shows built-in Find a job, Dashboard, Manage Account, and Sign out.
-
-Set **`signed-in`** from your app session state. Pass **`user-name`** for Manage Account.
-
-```js
-header.addEventListener('wegAuthClick', (event) => {
-  event.preventDefault();
-  if (event.detail.action === 'sign-out') logout();
-  else window.location.href = HEADER_SIGN_IN.href;
-});
-```
-
-- **From npm:** `import layout from 'weg-shared-layout/dummy-data.json'` — in TypeScript set `resolveJsonModule` and `moduleResolution` to `bundler` or `node16` (see [docs/angular-16-compatibility.md](./docs/angular-16-compatibility.md)).
-- **In this repo:** [`src/assets/dummy-data.json`](src/assets/dummy-data.json)
-
-### Package imports (TypeScript / bundlers)
-
-| Subpath | Use |
-| --- | --- |
-| `weg-shared-layout/loader` | `defineCustomElements()` — **recommended** |
-| `weg-shared-layout/dummy-data.json` | Sample layout + `typeof` for app types |
-| `weg-shared-layout/layout-data` | Types only (`LayoutData`, …) |
-| `weg-shared-layout/weg-header` / `weg-footer` | Side-effect tag registration |
-| `weg-shared-layout/styles/container.css` | Shared `.container` width and gutter utility |
-
-## Documentation
-
-Full index: **[docs/README.md](./docs/README.md)**.
-
-| Guide | Doc |
-| --- | --- |
-| Angular (quick start) | [docs/angular.md](./docs/angular.md) |
-| Angular (step-by-step integration) | [docs/angular-integration-guide.md](./docs/angular-integration-guide.md) |
-| Angular 16 / TypeScript 4.9 | [docs/angular-16-compatibility.md](./docs/angular-16-compatibility.md) |
-| Angular 16 demo (in-repo, npm-style imports) | [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) |
-| Plain HTML / vanilla JS | [docs/vanilla.md](./docs/vanilla.md) |
-| Publishing (maintainers) | [docs/publishing.md](./docs/publishing.md) |
-
-## Publishing (maintainers)
-
-**`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.
-
-Details, checklist, and CI notes: **[docs/publishing.md](./docs/publishing.md)**.
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+
+# weg-shared-layout
+
+> Shared layout Web Components.
+
+## Install
+
+```bash
+npm i weg-shared-layout
+```
+
+## How it works
+
+`<weg-header>` and `<weg-footer>` are **presentational** Web Components: they do **not** fetch data.
+
+Load layout JSON from your CMS/API (e.g. [`GET /api/layout`](https://weg-payload-test.vercel.app/api/layout) from WEG CMS) or import [`dummy-data.json`](src/assets/dummy-data.json), then pass it to `layout` on each tag.
+
+### Layout shape (abbreviated)
+
+Full reference: [`src/assets/dummy-data.json`](src/assets/dummy-data.json). Sign-in is a normal `header.menu` entry labelled **Sign in**; it fires `wegAuthClick`. Signed-in nav is built into `<weg-header>` when `signed-in` is true.
+
+```json
+{
+  "header": {
+    "menu": [
+      { "label": "Find a job", "items": [{ "label": "Graduates", "href": "…" }] },
+      { "label": "Career advice", "href": "…" },
+      { "label": "Sign in", "href": "…" }
+    ]
+  },
+  "footer": {
+    "menu": [[{ "label": "About WEG", "href": "…" }]],
+    "social": [{ "platform": "LinkedIn", "href": "…" }],
+    "credits": "…",
+    "copyright": "…"
+  }
+}
+```
+
+| Field | Used when | Notes |
+| --- | --- | --- |
+| `header.logoSrc` | Signed out | Optional CMS logo URL; bundled PNG 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)
+
+**Signed out**: renders `header.menu`. The Sign in entry fires `wegAuthClick` with action `sign-in`.
+
+**Signed in** (`signed-in` true): ignores CMS `header.menu` and shows built-in Find a job, Dashboard, Manage Account, and Sign out.
+
+Set **`signed-in`** from your app session state. Pass **`user-name`** for Manage Account.
+
+```js
+header.addEventListener('wegAuthClick', (event) => {
+  event.preventDefault();
+  if (event.detail.action === 'sign-out') logout();
+  else window.location.href = HEADER_SIGN_IN.href;
+});
+```
+
+- **From npm:** `import layout from 'weg-shared-layout/dummy-data.json'` — in TypeScript set `resolveJsonModule` and `moduleResolution` to `bundler` or `node16` (see [docs/angular.md](./docs/angular.md)).
+- **In this repo:** [`src/assets/dummy-data.json`](src/assets/dummy-data.json)
+
+### Package imports (TypeScript / bundlers)
+
+| Subpath | Use |
+| --- | --- |
+| `weg-shared-layout/loader` | `defineCustomElements()` — **recommended** |
+| `weg-shared-layout/dummy-data.json` | Sample layout + `typeof` for app types |
+| `weg-shared-layout/layout-data` | Types only (`LayoutData`, …) |
+| `weg-shared-layout/weg-header` / `weg-footer` | Side-effect tag registration |
+| `weg-shared-layout/styles/container.css` | Shared `.container` width and gutter utility |
+
+## Documentation
+
+Full index: **[docs/README.md](./docs/README.md)**.
+
+| 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) |
+| Plain HTML / vanilla JS | [docs/vanilla.md](./docs/vanilla.md) |
+| Publishing (maintainers) | [docs/publishing.md](./docs/publishing.md) |
+
+## Publishing (maintainers)
+
+**`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.
+
+Details, checklist, and CI notes: **[docs/publishing.md](./docs/publishing.md)**.

package/src/constants/breakpoints.ts

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