weg-shared-layout 0.0.10 → 0.0.12

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer.cjs",[[513,"weg-footer",{"data":[1],"resolved":[32]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer.cjs",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -103,12 +103,13 @@ const WegFooter = class {
         index.registerInstance(this, hostRef);
     }
     /**
-     * Layout data, supplied by the host application.
+     * Layout payload, supplied by the host application.
      *
      * In JS / framework templates, pass the object directly (e.g. Angular
-     * `[data]="layoutData"`, vanilla `el.data = layoutData`).
+     * `[layout]="layoutData"`, React `layout={layoutData}`, vanilla
+     * `el.layout = layoutData`).
      *
-     * In plain HTML, pass the same JSON as a string attribute.
+     * In plain HTML, pass the same JSON as a string on the `layout` attribute.
      *
      * Expected shape:
      * ```json
@@ -122,19 +123,19 @@ const WegFooter = class {
      * }
      * ```
      */
-    data;
+    layout;
     resolved = EMPTY_FOOTER;
     resolve() {
-        if (this.data === undefined || this.data === null) {
+        if (this.layout === undefined || this.layout === null) {
             this.resolved = EMPTY_FOOTER;
             return;
         }
-        this.resolved = normalizeFooterData(parseJsonProp(this.data));
+        this.resolved = normalizeFooterData(parseJsonProp(this.layout));
     }
     componentWillLoad() {
         this.resolve();
     }
-    watchData() {
+    watchLayout() {
         this.resolve();
     }
     renderLegalText() {
@@ -156,11 +157,11 @@ const WegFooter = class {
         return (index.h("div", { class: "standard__links" }, links.map((l) => (index.h("a", { class: "footer-link", href: l.href }, l.label)))));
     }
     render() {
-        return (index.h("footer", { key: 'b5440fe948f8a4207b20d8e380ab50f559890440', class: "footer" }, index.h("div", { key: '2f4757c3a52203a89b53fa358513d832f153bfa2', class: "container" }, this.renderSocialLinks(), index.h("div", { key: '4ee53f39a16dab3739c70dadcaadb15602f08ce9', class: "standard" }, this.renderStandardLinks(), this.renderLegalText()))));
+        return (index.h("footer", { key: 'ba9a2b07235bbad73f4f2aea762af917249f621b', class: "footer" }, index.h("div", { key: '88a8a9de95c09bf4c5524fc942976b7ababe110d', class: "container" }, this.renderSocialLinks(), index.h("div", { key: '2a21b07909bcb975c4bade8a291b050d83d52e8c', class: "standard" }, this.renderStandardLinks(), this.renderLegalText()))));
     }
     static get watchers() { return {
-        "data": [{
-                "watchData": 0
+        "layout": [{
+                "watchLayout": 0
             }]
     }; }
 };

package/dist/cjs/weg-shared-layout.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer.cjs",[[513,"weg-footer",{"data":[1],"resolved":[32]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer.cjs",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -95,12 +95,13 @@ function SocialIcon({ platform }) {
 }
 export class WegFooter {
     /**
-     * Layout data, supplied by the host application.
+     * Layout payload, supplied by the host application.
      *
      * In JS / framework templates, pass the object directly (e.g. Angular
-     * `[data]="layoutData"`, vanilla `el.data = layoutData`).
+     * `[layout]="layoutData"`, React `layout={layoutData}`, vanilla
+     * `el.layout = layoutData`).
      *
-     * In plain HTML, pass the same JSON as a string attribute.
+     * In plain HTML, pass the same JSON as a string on the `layout` attribute.
      *
      * Expected shape:
      * ```json
@@ -114,19 +115,19 @@ export class WegFooter {
      * }
      * ```
      */
-    data;
+    layout;
     resolved = EMPTY_FOOTER;
     resolve() {
-        if (this.data === undefined || this.data === null) {
+        if (this.layout === undefined || this.layout === null) {
             this.resolved = EMPTY_FOOTER;
             return;
         }
-        this.resolved = normalizeFooterData(parseJsonProp(this.data));
+        this.resolved = normalizeFooterData(parseJsonProp(this.layout));
     }
     componentWillLoad() {
         this.resolve();
     }
-    watchData() {
+    watchLayout() {
         this.resolve();
     }
     renderLegalText() {
@@ -148,7 +149,7 @@ export class WegFooter {
         return (h("div", { class: "standard__links" }, links.map((l) => (h("a", { class: "footer-link", href: l.href }, l.label)))));
     }
     render() {
-        return (h("footer", { key: 'b5440fe948f8a4207b20d8e380ab50f559890440', class: "footer" }, h("div", { key: '2f4757c3a52203a89b53fa358513d832f153bfa2', class: "container" }, this.renderSocialLinks(), h("div", { key: '4ee53f39a16dab3739c70dadcaadb15602f08ce9', class: "standard" }, this.renderStandardLinks(), this.renderLegalText()))));
+        return (h("footer", { key: 'ba9a2b07235bbad73f4f2aea762af917249f621b', class: "footer" }, h("div", { key: '88a8a9de95c09bf4c5524fc942976b7ababe110d', class: "container" }, this.renderSocialLinks(), h("div", { key: '2a21b07909bcb975c4bade8a291b050d83d52e8c', class: "standard" }, this.renderStandardLinks(), this.renderLegalText()))));
     }
     static get is() { return "weg-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +165,7 @@ export class WegFooter {
     }
     static get properties() {
         return {
-            "data": {
+            "layout": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -181,12 +182,12 @@ export class WegFooter {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Layout data, supplied by the host application.\n\nIn JS / framework templates, pass the object directly (e.g. Angular\n`[data]=\"layoutData\"`, vanilla `el.data = layoutData`).\n\nIn plain HTML, pass the same JSON as a string attribute.\n\nExpected shape:\n```json\n{\n  \"footer\": {\n    \"social\": [{ \"platform\": \"LinkedIn\", \"href\": \"https://...\" }],\n    \"standardLinks\": [{ \"label\": \"About Us\", \"href\": \"/about\" }],\n    \"credits\": \"...\",\n    \"copyright\": \"...\"\n  }\n}\n```"
+                    "text": "Layout payload, supplied by the host application.\n\nIn JS / framework templates, pass the object directly (e.g. Angular\n`[layout]=\"layoutData\"`, React `layout={layoutData}`, vanilla\n`el.layout = layoutData`).\n\nIn plain HTML, pass the same JSON as a string on the `layout` attribute.\n\nExpected shape:\n```json\n{\n  \"footer\": {\n    \"social\": [{ \"platform\": \"LinkedIn\", \"href\": \"https://...\" }],\n    \"standardLinks\": [{ \"label\": \"About Us\", \"href\": \"/about\" }],\n    \"credits\": \"...\",\n    \"copyright\": \"...\"\n  }\n}\n```"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "data"
+                "attribute": "layout"
             }
         };
     }
@@ -197,8 +198,8 @@ export class WegFooter {
     }
     static get watchers() {
         return [{
-                "propName": "data",
-                "methodName": "watchData"
+                "propName": "layout",
+                "methodName": "watchLayout"
             }];
     }
 }

package/dist/components/weg-footer.js

@@ -1 +1 @@
-import{t,p as e,H as i,h as n}from"./p-BTQYW5OR.js";const o={social:[],standardLinks:[],credits:"",copyright:""};function a(t){return/^https?:\/\//.test(t)}function s(t){return"string"==typeof t&&t.trim().length>0}function r(t){return"LinkedIn"===t||"Instagram"===t||"TikTok"===t||"YouTube"===t}function l(t){if(!Array.isArray(t))return[];const e=[];for(const i of t){if(!i||"object"!=typeof i)continue;const t=i.platform,n=i.href;r(t)&&s(n)&&e.push({platform:t,href:n.trim()})}return e}function c(t){if(!Array.isArray(t))return[];const e=[];for(const i of t){if(!i||"object"!=typeof i)continue;const t=i.label,n=i.href;s(t)&&s(n)&&e.push({label:t.trim(),href:n.trim()})}return e}function f({platform:t}){const e={viewBox:"0 0 48 48",width:48,height:48,fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"};switch(t){case"LinkedIn":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM12.9082 33.4736H17.5889V19.4111H12.9082V33.4736ZM29.0791 19.0811C26.5942 19.0811 25.4815 20.4458 24.8604 21.4033V19.4111H20.1797C20.2412 20.7279 20.1799 33.4203 20.1797 33.4736H24.8604V25.6201C24.8604 25.1998 24.8909 24.7804 25.0146 24.4795C25.3529 23.6399 26.1231 22.7705 27.416 22.7705C29.1103 22.7705 29.7881 24.0605 29.7881 25.9502V33.4736H34.4678V25.4102C34.4677 21.0909 32.1589 19.0811 29.0791 19.0811ZM15.2793 12.6318C13.6783 12.6319 12.6319 13.6818 12.6318 15.0605C12.6318 16.4108 13.6474 17.4912 15.2188 17.4912H15.249C16.8807 17.491 17.8965 16.4107 17.8965 15.0605C17.866 13.6818 16.8804 12.6318 15.2793 12.6318Z",fill:"white"}));case"Instagram":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM23.999 11.2002C20.5245 11.2002 20.0877 11.2152 18.7227 11.2773C17.3602 11.3398 16.43 11.5556 15.6162 11.8721C14.7744 12.199 14.06 12.636 13.3486 13.3477C12.6366 14.0591 12.1991 14.7736 11.8711 15.6152C11.5538 16.4293 11.3377 17.3597 11.2764 18.7217C11.2153 20.087 11.2002 20.5238 11.2002 24C11.2002 27.476 11.2155 27.9113 11.2773 29.2764C11.34 30.639 11.5558 31.5699 11.8721 32.3838C12.1993 33.2255 12.636 33.94 13.3477 34.6514C14.0589 35.3634 14.7739 35.801 15.6152 36.1279C16.4295 36.4444 17.3596 36.6602 18.7217 36.7227C20.087 36.7848 20.5233 36.7998 23.999 36.7998C27.4756 36.7998 27.911 36.7848 29.2764 36.7227C30.639 36.6602 31.5704 36.4445 32.3848 36.1279C33.2261 35.801 33.9394 35.3631 34.6504 34.6514C35.3624 33.9399 35.7999 33.2254 36.1279 32.3838C36.4426 31.5697 36.6586 30.6393 36.7227 29.2773C36.784 27.912 36.7998 27.4763 36.7998 24C36.7998 20.5242 36.784 20.0876 36.7227 18.7227C36.6587 17.36 36.4426 16.4291 36.1279 15.6152C35.7999 14.7734 35.3623 14.0591 34.6504 13.3477C33.9385 12.6358 33.2264 12.1987 32.3838 11.8721C31.5678 11.5555 30.6371 11.3397 29.2744 11.2773C27.9093 11.2152 27.4745 11.2002 23.999 11.2002Z",fill:"white"}),n("path",{d:"M22.8525 13.5068C23.1933 13.5063 23.5739 13.5068 24.001 13.5068C27.4186 13.5068 27.8242 13.5197 29.1738 13.5811C30.4214 13.6381 31.0986 13.8463 31.5498 14.0215C32.1471 14.2535 32.5737 14.5305 33.0215 14.9785C33.4695 15.4265 33.746 15.8538 33.9785 16.4512C34.1537 16.9018 34.3631 17.5792 34.4199 18.8271C34.4812 20.1763 34.4941 20.5822 34.4941 23.998C34.4941 27.4134 34.4812 27.819 34.4199 29.168C34.3629 30.4158 34.1537 31.0933 33.9785 31.5439C33.7466 32.1412 33.4693 32.567 33.0215 33.0146C32.5735 33.4627 32.1474 33.7397 31.5498 33.9717C31.0992 34.1477 30.4216 34.356 29.1738 34.4131C27.8245 34.4744 27.4186 34.4883 24.001 34.4883C20.5835 34.4883 20.1783 34.4744 18.8291 34.4131C17.5811 34.3555 16.9036 34.1469 16.4521 33.9717C15.8549 33.7397 15.4284 33.4625 14.9805 33.0146C14.5325 32.5666 14.255 32.1406 14.0225 31.543C13.8473 31.0923 13.6378 30.4148 13.5811 29.167C13.5197 27.8179 13.5078 27.4121 13.5078 23.9941C13.5078 20.5762 13.5197 20.1726 13.5811 18.8232C13.6381 17.5755 13.8473 16.8984 14.0225 16.4473C14.2545 15.8499 14.5325 15.4236 14.9805 14.9756C15.4285 14.5276 15.8549 14.2501 16.4521 14.0176C16.9034 13.8416 17.5811 13.6335 18.8291 13.5762C20.0097 13.5228 20.4674 13.5066 22.8525 13.5039V13.5068ZM24.001 17.4268C20.371 17.427 17.4277 20.3709 17.4277 24.001C17.4279 27.6309 20.3711 30.5721 24.001 30.5723C27.631 30.5723 30.573 27.631 30.5732 24.001C30.5732 20.3708 27.6311 17.4268 24.001 17.4268ZM30.834 15.6318C29.9861 15.632 29.2979 16.3198 29.2979 17.168C29.2979 18.0159 29.9861 18.704 30.834 18.7041C31.682 18.7041 32.3701 18.016 32.3701 17.168C32.37 16.32 31.6819 15.6318 30.834 15.6318Z",fill:"white"}),n("path",{d:"M24.0011 19.7334C26.3574 19.7334 28.2678 21.6436 28.2678 24.0001C28.2678 26.3564 26.3574 28.2668 24.0011 28.2668C21.6445 28.2668 19.7344 26.3564 19.7344 24.0001C19.7344 21.6436 21.6445 19.7334 24.0011 19.7334Z",fill:"white"}));case"TikTok":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM25.0273 28.3477C25.0273 30.2955 23.4721 31.8955 21.5361 31.8955C19.6003 31.8954 18.0449 30.2955 18.0449 28.3477C18.045 26.4347 19.5659 24.8693 21.4326 24.7998V20.6953C17.3188 20.7648 14.0001 24.1391 14 28.3477C14 32.5912 17.3883 36 21.5713 36C25.754 35.9998 29.1416 32.5562 29.1416 28.3477V19.9648C30.6627 21.0779 32.5295 21.7396 34.5 21.7744V17.6699C31.4579 17.5656 29.0723 15.0609 29.0723 12H25.0273V28.3477Z",fill:"white"}));case"YouTube":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM24 15.2002C24 15.2002 15.9944 15.1997 13.998 15.749C12.8966 16.0513 12.0288 16.9423 11.7344 18.0732C11.1996 20.1231 11.2002 24.4004 11.2002 24.4004C11.2002 24.4472 11.2026 28.6878 11.7344 30.7266C12.0288 31.8575 12.8966 32.7483 13.998 33.0508C15.9944 33.6 24 33.5996 24 33.5996C24 33.5996 32.0057 33.6 34.002 33.0508C35.1033 32.7483 35.9703 31.8575 36.2646 30.7266C36.7966 28.6879 36.7998 24.4472 36.7998 24.4004C36.7998 24.4004 36.7996 20.1231 36.2646 18.0732C35.9703 16.9424 35.1033 16.0513 34.002 15.749C32.0057 15.1997 24 15.2002 24 15.2002Z",fill:"white"}),n("path",{d:"M21.6016 28.7998V20.7998L28.0016 24.8L21.6016 28.7998Z",fill:"white"}))}}const C=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}data;resolved=o;resolve(){this.resolved=null!=this.data?function(t){const e=t&&"object"==typeof t?t:{},i=e.footer&&"object"==typeof e.footer?e.footer:{};return{social:l(i?.social),standardLinks:c(i?.standardLinks),credits:s(i?.credits)?i.credits.trim():"",copyright:s(i?.copyright)?i.copyright.trim():""}}(function(t){if("string"!=typeof t)return t;const e=t.trim();if(e)try{return JSON.parse(e)}catch{return}}(this.data)):o}componentWillLoad(){this.resolve()}watchData(){this.resolve()}renderLegalText(){const{credits:t,copyright:e}=this.resolved;return t||e?n("div",{class:"legal"},t?n("p",{class:"legal__p"},t):null,t&&e?n("p",{class:"legal__p"},"​"):null,e?n("p",{class:"legal__p"},e):null):null}renderSocialLinks(){const t=this.resolved.social;return 0===t.length?null:n("div",{class:"social"},t.map((t=>n("a",{class:"social__link",href:t.href,"aria-label":t.platform,target:a(t.href)?"_blank":void 0,rel:a(t.href)?"noreferrer noopener":void 0},n("span",{class:"social__icon","aria-hidden":"true"},n(f,{platform:t.platform}))))))}renderStandardLinks(){const t=this.resolved.standardLinks;return 0===t.length?null:n("div",{class:"standard__links"},t.map((t=>n("a",{class:"footer-link",href:t.href},t.label))))}render(){return n("footer",{key:"b5440fe948f8a4207b20d8e380ab50f559890440",class:"footer"},n("div",{key:"2f4757c3a52203a89b53fa358513d832f153bfa2",class:"container"},this.renderSocialLinks(),n("div",{key:"4ee53f39a16dab3739c70dadcaadb15602f08ce9",class:"standard"},this.renderStandardLinks(),this.renderLegalText())))}static get watchers(){return{data:[{watchData:0}]}}static get style(){return':host{display:block}.footer{background:#030712;color:#ffffff;padding:28px 32px;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";font-weight:300}.container{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}@media (min-width: 768px){.footer{padding:44px 56px}.container{gap:36px}}.social{display:flex;align-items:center;justify-content:center;gap:16px}@media (min-width: 768px){.social{gap:28px}}.social__link{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:inherit;text-decoration:none;transition:opacity 150ms ease;outline:none}.social__link:hover{opacity:0.9}.social__link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.social__icon{display:inline-flex;width:48px;height:48px}.footer-link{color:#ffffff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;outline:none}.footer-link:hover{text-decoration-thickness:2px}.footer-link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.legal{width:100%;max-width:860px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.legal{font-size:18px;line-height:28px}}.legal__p{margin:0}.standard{width:100%;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.standard{font-size:18px;line-height:28px}}.standard__links{display:flex;flex-direction:column;align-items:center;gap:16px}@media (min-width: 768px){.standard__links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:36px}}'}},[513,"weg-footer",{data:[1],resolved:[32]},void 0,{data:[{watchData:0}]}]);function d(){"undefined"!=typeof customElements&&["weg-footer"].forEach((e=>{"weg-footer"===e&&(customElements.get(t(e))||customElements.define(t(e),C))}))}d();const p=C,h=d;export{p as WegFooter,h as defineCustomElement}
+import{t,p as e,H as i,h as n}from"./p-BTQYW5OR.js";const o={social:[],standardLinks:[],credits:"",copyright:""};function a(t){return/^https?:\/\//.test(t)}function s(t){return"string"==typeof t&&t.trim().length>0}function r(t){return"LinkedIn"===t||"Instagram"===t||"TikTok"===t||"YouTube"===t}function l(t){if(!Array.isArray(t))return[];const e=[];for(const i of t){if(!i||"object"!=typeof i)continue;const t=i.platform,n=i.href;r(t)&&s(n)&&e.push({platform:t,href:n.trim()})}return e}function c(t){if(!Array.isArray(t))return[];const e=[];for(const i of t){if(!i||"object"!=typeof i)continue;const t=i.label,n=i.href;s(t)&&s(n)&&e.push({label:t.trim(),href:n.trim()})}return e}function C({platform:t}){const e={viewBox:"0 0 48 48",width:48,height:48,fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"};switch(t){case"LinkedIn":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM12.9082 33.4736H17.5889V19.4111H12.9082V33.4736ZM29.0791 19.0811C26.5942 19.0811 25.4815 20.4458 24.8604 21.4033V19.4111H20.1797C20.2412 20.7279 20.1799 33.4203 20.1797 33.4736H24.8604V25.6201C24.8604 25.1998 24.8909 24.7804 25.0146 24.4795C25.3529 23.6399 26.1231 22.7705 27.416 22.7705C29.1103 22.7705 29.7881 24.0605 29.7881 25.9502V33.4736H34.4678V25.4102C34.4677 21.0909 32.1589 19.0811 29.0791 19.0811ZM15.2793 12.6318C13.6783 12.6319 12.6319 13.6818 12.6318 15.0605C12.6318 16.4108 13.6474 17.4912 15.2188 17.4912H15.249C16.8807 17.491 17.8965 16.4107 17.8965 15.0605C17.866 13.6818 16.8804 12.6318 15.2793 12.6318Z",fill:"white"}));case"Instagram":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM23.999 11.2002C20.5245 11.2002 20.0877 11.2152 18.7227 11.2773C17.3602 11.3398 16.43 11.5556 15.6162 11.8721C14.7744 12.199 14.06 12.636 13.3486 13.3477C12.6366 14.0591 12.1991 14.7736 11.8711 15.6152C11.5538 16.4293 11.3377 17.3597 11.2764 18.7217C11.2153 20.087 11.2002 20.5238 11.2002 24C11.2002 27.476 11.2155 27.9113 11.2773 29.2764C11.34 30.639 11.5558 31.5699 11.8721 32.3838C12.1993 33.2255 12.636 33.94 13.3477 34.6514C14.0589 35.3634 14.7739 35.801 15.6152 36.1279C16.4295 36.4444 17.3596 36.6602 18.7217 36.7227C20.087 36.7848 20.5233 36.7998 23.999 36.7998C27.4756 36.7998 27.911 36.7848 29.2764 36.7227C30.639 36.6602 31.5704 36.4445 32.3848 36.1279C33.2261 35.801 33.9394 35.3631 34.6504 34.6514C35.3624 33.9399 35.7999 33.2254 36.1279 32.3838C36.4426 31.5697 36.6586 30.6393 36.7227 29.2773C36.784 27.912 36.7998 27.4763 36.7998 24C36.7998 20.5242 36.784 20.0876 36.7227 18.7227C36.6587 17.36 36.4426 16.4291 36.1279 15.6152C35.7999 14.7734 35.3623 14.0591 34.6504 13.3477C33.9385 12.6358 33.2264 12.1987 32.3838 11.8721C31.5678 11.5555 30.6371 11.3397 29.2744 11.2773C27.9093 11.2152 27.4745 11.2002 23.999 11.2002Z",fill:"white"}),n("path",{d:"M22.8525 13.5068C23.1933 13.5063 23.5739 13.5068 24.001 13.5068C27.4186 13.5068 27.8242 13.5197 29.1738 13.5811C30.4214 13.6381 31.0986 13.8463 31.5498 14.0215C32.1471 14.2535 32.5737 14.5305 33.0215 14.9785C33.4695 15.4265 33.746 15.8538 33.9785 16.4512C34.1537 16.9018 34.3631 17.5792 34.4199 18.8271C34.4812 20.1763 34.4941 20.5822 34.4941 23.998C34.4941 27.4134 34.4812 27.819 34.4199 29.168C34.3629 30.4158 34.1537 31.0933 33.9785 31.5439C33.7466 32.1412 33.4693 32.567 33.0215 33.0146C32.5735 33.4627 32.1474 33.7397 31.5498 33.9717C31.0992 34.1477 30.4216 34.356 29.1738 34.4131C27.8245 34.4744 27.4186 34.4883 24.001 34.4883C20.5835 34.4883 20.1783 34.4744 18.8291 34.4131C17.5811 34.3555 16.9036 34.1469 16.4521 33.9717C15.8549 33.7397 15.4284 33.4625 14.9805 33.0146C14.5325 32.5666 14.255 32.1406 14.0225 31.543C13.8473 31.0923 13.6378 30.4148 13.5811 29.167C13.5197 27.8179 13.5078 27.4121 13.5078 23.9941C13.5078 20.5762 13.5197 20.1726 13.5811 18.8232C13.6381 17.5755 13.8473 16.8984 14.0225 16.4473C14.2545 15.8499 14.5325 15.4236 14.9805 14.9756C15.4285 14.5276 15.8549 14.2501 16.4521 14.0176C16.9034 13.8416 17.5811 13.6335 18.8291 13.5762C20.0097 13.5228 20.4674 13.5066 22.8525 13.5039V13.5068ZM24.001 17.4268C20.371 17.427 17.4277 20.3709 17.4277 24.001C17.4279 27.6309 20.3711 30.5721 24.001 30.5723C27.631 30.5723 30.573 27.631 30.5732 24.001C30.5732 20.3708 27.6311 17.4268 24.001 17.4268ZM30.834 15.6318C29.9861 15.632 29.2979 16.3198 29.2979 17.168C29.2979 18.0159 29.9861 18.704 30.834 18.7041C31.682 18.7041 32.3701 18.016 32.3701 17.168C32.37 16.32 31.6819 15.6318 30.834 15.6318Z",fill:"white"}),n("path",{d:"M24.0011 19.7334C26.3574 19.7334 28.2678 21.6436 28.2678 24.0001C28.2678 26.3564 26.3574 28.2668 24.0011 28.2668C21.6445 28.2668 19.7344 26.3564 19.7344 24.0001C19.7344 21.6436 21.6445 19.7334 24.0011 19.7334Z",fill:"white"}));case"TikTok":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM25.0273 28.3477C25.0273 30.2955 23.4721 31.8955 21.5361 31.8955C19.6003 31.8954 18.0449 30.2955 18.0449 28.3477C18.045 26.4347 19.5659 24.8693 21.4326 24.7998V20.6953C17.3188 20.7648 14.0001 24.1391 14 28.3477C14 32.5912 17.3883 36 21.5713 36C25.754 35.9998 29.1416 32.5562 29.1416 28.3477V19.9648C30.6627 21.0779 32.5295 21.7396 34.5 21.7744V17.6699C31.4579 17.5656 29.0723 15.0609 29.0723 12H25.0273V28.3477Z",fill:"white"}));case"YouTube":return n("svg",{...e},n("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM24 15.2002C24 15.2002 15.9944 15.1997 13.998 15.749C12.8966 16.0513 12.0288 16.9423 11.7344 18.0732C11.1996 20.1231 11.2002 24.4004 11.2002 24.4004C11.2002 24.4472 11.2026 28.6878 11.7344 30.7266C12.0288 31.8575 12.8966 32.7483 13.998 33.0508C15.9944 33.6 24 33.5996 24 33.5996C24 33.5996 32.0057 33.6 34.002 33.0508C35.1033 32.7483 35.9703 31.8575 36.2646 30.7266C36.7966 28.6879 36.7998 24.4472 36.7998 24.4004C36.7998 24.4004 36.7996 20.1231 36.2646 18.0732C35.9703 16.9424 35.1033 16.0513 34.002 15.749C32.0057 15.1997 24 15.2002 24 15.2002Z",fill:"white"}),n("path",{d:"M21.6016 28.7998V20.7998L28.0016 24.8L21.6016 28.7998Z",fill:"white"}))}}const f=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}layout;resolved=o;resolve(){this.resolved=null!=this.layout?function(t){const e=t&&"object"==typeof t?t:{},i=e.footer&&"object"==typeof e.footer?e.footer:{};return{social:l(i?.social),standardLinks:c(i?.standardLinks),credits:s(i?.credits)?i.credits.trim():"",copyright:s(i?.copyright)?i.copyright.trim():""}}(function(t){if("string"!=typeof t)return t;const e=t.trim();if(e)try{return JSON.parse(e)}catch{return}}(this.layout)):o}componentWillLoad(){this.resolve()}watchLayout(){this.resolve()}renderLegalText(){const{credits:t,copyright:e}=this.resolved;return t||e?n("div",{class:"legal"},t?n("p",{class:"legal__p"},t):null,t&&e?n("p",{class:"legal__p"},"​"):null,e?n("p",{class:"legal__p"},e):null):null}renderSocialLinks(){const t=this.resolved.social;return 0===t.length?null:n("div",{class:"social"},t.map((t=>n("a",{class:"social__link",href:t.href,"aria-label":t.platform,target:a(t.href)?"_blank":void 0,rel:a(t.href)?"noreferrer noopener":void 0},n("span",{class:"social__icon","aria-hidden":"true"},n(C,{platform:t.platform}))))))}renderStandardLinks(){const t=this.resolved.standardLinks;return 0===t.length?null:n("div",{class:"standard__links"},t.map((t=>n("a",{class:"footer-link",href:t.href},t.label))))}render(){return n("footer",{key:"ba9a2b07235bbad73f4f2aea762af917249f621b",class:"footer"},n("div",{key:"88a8a9de95c09bf4c5524fc942976b7ababe110d",class:"container"},this.renderSocialLinks(),n("div",{key:"2a21b07909bcb975c4bade8a291b050d83d52e8c",class:"standard"},this.renderStandardLinks(),this.renderLegalText())))}static get watchers(){return{layout:[{watchLayout:0}]}}static get style(){return':host{display:block}.footer{background:#030712;color:#ffffff;padding:28px 32px;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";font-weight:300}.container{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}@media (min-width: 768px){.footer{padding:44px 56px}.container{gap:36px}}.social{display:flex;align-items:center;justify-content:center;gap:16px}@media (min-width: 768px){.social{gap:28px}}.social__link{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:inherit;text-decoration:none;transition:opacity 150ms ease;outline:none}.social__link:hover{opacity:0.9}.social__link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.social__icon{display:inline-flex;width:48px;height:48px}.footer-link{color:#ffffff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;outline:none}.footer-link:hover{text-decoration-thickness:2px}.footer-link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.legal{width:100%;max-width:860px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.legal{font-size:18px;line-height:28px}}.legal__p{margin:0}.standard{width:100%;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.standard{font-size:18px;line-height:28px}}.standard__links{display:flex;flex-direction:column;align-items:center;gap:16px}@media (min-width: 768px){.standard__links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:36px}}'}},[513,"weg-footer",{layout:[1],resolved:[32]},void 0,{layout:[{watchLayout:0}]}]);function d(){"undefined"!=typeof customElements&&["weg-footer"].forEach((e=>{"weg-footer"===e&&(customElements.get(t(e))||customElements.define(t(e),f))}))}d();const p=f,u=d;export{p as WegFooter,u as defineCustomElement}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["my-component",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer",[[513,"weg-footer",{"data":[1],"resolved":[32]},null,{"data":[{"watchData":0}]}]]]], options);
+  return bootstrapLazy([["my-component",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/weg-footer.entry.js

@@ -101,12 +101,13 @@ const WegFooter = class {
         registerInstance(this, hostRef);
     }
     /**
-     * Layout data, supplied by the host application.
+     * Layout payload, supplied by the host application.
      *
      * In JS / framework templates, pass the object directly (e.g. Angular
-     * `[data]="layoutData"`, vanilla `el.data = layoutData`).
+     * `[layout]="layoutData"`, React `layout={layoutData}`, vanilla
+     * `el.layout = layoutData`).
      *
-     * In plain HTML, pass the same JSON as a string attribute.
+     * In plain HTML, pass the same JSON as a string on the `layout` attribute.
      *
      * Expected shape:
      * ```json
@@ -120,19 +121,19 @@ const WegFooter = class {
      * }
      * ```
      */
-    data;
+    layout;
     resolved = EMPTY_FOOTER;
     resolve() {
-        if (this.data === undefined || this.data === null) {
+        if (this.layout === undefined || this.layout === null) {
             this.resolved = EMPTY_FOOTER;
             return;
         }
-        this.resolved = normalizeFooterData(parseJsonProp(this.data));
+        this.resolved = normalizeFooterData(parseJsonProp(this.layout));
     }
     componentWillLoad() {
         this.resolve();
     }
-    watchData() {
+    watchLayout() {
         this.resolve();
     }
     renderLegalText() {
@@ -154,11 +155,11 @@ const WegFooter = class {
         return (h("div", { class: "standard__links" }, links.map((l) => (h("a", { class: "footer-link", href: l.href }, l.label)))));
     }
     render() {
-        return (h("footer", { key: 'b5440fe948f8a4207b20d8e380ab50f559890440', class: "footer" }, h("div", { key: '2f4757c3a52203a89b53fa358513d832f153bfa2', class: "container" }, this.renderSocialLinks(), h("div", { key: '4ee53f39a16dab3739c70dadcaadb15602f08ce9', class: "standard" }, this.renderStandardLinks(), this.renderLegalText()))));
+        return (h("footer", { key: 'ba9a2b07235bbad73f4f2aea762af917249f621b', class: "footer" }, h("div", { key: '88a8a9de95c09bf4c5524fc942976b7ababe110d', class: "container" }, this.renderSocialLinks(), h("div", { key: '2a21b07909bcb975c4bade8a291b050d83d52e8c', class: "standard" }, this.renderStandardLinks(), this.renderLegalText()))));
     }
     static get watchers() { return {
-        "data": [{
-                "watchData": 0
+        "layout": [{
+                "watchLayout": 0
             }]
     }; }
 };

package/dist/esm/weg-shared-layout.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["my-component",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer",[[513,"weg-footer",{"data":[1],"resolved":[32]},null,{"data":[{"watchData":0}]}]]]], options);
+  return bootstrapLazy([["my-component",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["weg-footer",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}]]]], options);
 });

package/dist/types/components/weg-footer/weg-footer.d.ts

@@ -9,12 +9,13 @@ type LayoutData = {
 };
 export declare class WegFooter {
     /**
-     * Layout data, supplied by the host application.
+     * Layout payload, supplied by the host application.
      *
      * In JS / framework templates, pass the object directly (e.g. Angular
-     * `[data]="layoutData"`, vanilla `el.data = layoutData`).
+     * `[layout]="layoutData"`, React `layout={layoutData}`, vanilla
+     * `el.layout = layoutData`).
      *
-     * In plain HTML, pass the same JSON as a string attribute.
+     * In plain HTML, pass the same JSON as a string on the `layout` attribute.
      *
      * Expected shape:
      * ```json
@@ -28,11 +29,11 @@ export declare class WegFooter {
      * }
      * ```
      */
-    data?: LayoutData | string;
+    layout?: LayoutData | string;
     private resolved;
     private resolve;
     componentWillLoad(): void;
-    protected watchData(): void;
+    protected watchLayout(): void;
     private renderLegalText;
     private renderSocialLinks;
     private renderStandardLinks;

package/dist/types/components.d.ts

@@ -22,9 +22,9 @@ export namespace Components {
     }
     interface WegFooter {
         /**
-          * Layout data, supplied by the host application.  In JS / framework templates, pass the object directly (e.g. Angular `[data]="layoutData"`, vanilla `el.data = layoutData`).  In plain HTML, pass the same JSON as a string attribute.  Expected shape: ```json {   "footer": {     "social": [{ "platform": "LinkedIn", "href": "https://..." }],     "standardLinks": [{ "label": "About Us", "href": "/about" }],     "credits": "...",     "copyright": "..."   } } ```
+          * Layout payload, supplied by the host application.  In JS / framework templates, pass the object directly (e.g. Angular `[layout]="layoutData"`, React `layout={layoutData}`, vanilla `el.layout = layoutData`).  In plain HTML, pass the same JSON as a string on the `layout` attribute.  Expected shape: ```json {   "footer": {     "social": [{ "platform": "LinkedIn", "href": "https://..." }],     "standardLinks": [{ "label": "About Us", "href": "/about" }],     "credits": "...",     "copyright": "..."   } } ```
          */
-        "data"?: LayoutData | string;
+        "layout"?: LayoutData | string;
     }
 }
 declare global {
@@ -62,9 +62,9 @@ declare namespace LocalJSX {
     }
     interface WegFooter {
         /**
-          * Layout data, supplied by the host application.  In JS / framework templates, pass the object directly (e.g. Angular `[data]="layoutData"`, vanilla `el.data = layoutData`).  In plain HTML, pass the same JSON as a string attribute.  Expected shape: ```json {   "footer": {     "social": [{ "platform": "LinkedIn", "href": "https://..." }],     "standardLinks": [{ "label": "About Us", "href": "/about" }],     "credits": "...",     "copyright": "..."   } } ```
+          * Layout payload, supplied by the host application.  In JS / framework templates, pass the object directly (e.g. Angular `[layout]="layoutData"`, React `layout={layoutData}`, vanilla `el.layout = layoutData`).  In plain HTML, pass the same JSON as a string on the `layout` attribute.  Expected shape: ```json {   "footer": {     "social": [{ "platform": "LinkedIn", "href": "https://..." }],     "standardLinks": [{ "label": "About Us", "href": "/about" }],     "credits": "...",     "copyright": "..."   } } ```
          */
-        "data"?: LayoutData | string;
+        "layout"?: LayoutData | string;
     }
 
     interface MyComponentAttributes {
@@ -73,7 +73,7 @@ declare namespace LocalJSX {
         "last": string;
     }
     interface WegFooterAttributes {
-        "data": LayoutData | string;
+        "layout": LayoutData | string;
     }
 
     interface IntrinsicElements {

package/dist/weg-shared-layout/{p-87522053.entry.js → p-99843bbd.entry.js}

@@ -1 +1 @@
-import{r as t,h as e}from"./p-QiJxC4Ow.js";const i={social:[],standardLinks:[],credits:"",copyright:""};function n(t){return/^https?:\/\//.test(t)}function a(t){return"string"==typeof t&&t.trim().length>0}function o(t){if(!Array.isArray(t))return[];const e=[];for(const n of t){if(!n||"object"!=typeof n)continue;const t=n.platform,o=n.href;("LinkedIn"===(i=t)||"Instagram"===i||"TikTok"===i||"YouTube"===i)&&a(o)&&e.push({platform:t,href:o.trim()})}var i;return e}function r(t){if(!Array.isArray(t))return[];const e=[];for(const i of t){if(!i||"object"!=typeof i)continue;const t=i.label,n=i.href;a(t)&&a(n)&&e.push({label:t.trim(),href:n.trim()})}return e}function l({platform:t}){const i={viewBox:"0 0 48 48",width:48,height:48,fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"};switch(t){case"LinkedIn":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM12.9082 33.4736H17.5889V19.4111H12.9082V33.4736ZM29.0791 19.0811C26.5942 19.0811 25.4815 20.4458 24.8604 21.4033V19.4111H20.1797C20.2412 20.7279 20.1799 33.4203 20.1797 33.4736H24.8604V25.6201C24.8604 25.1998 24.8909 24.7804 25.0146 24.4795C25.3529 23.6399 26.1231 22.7705 27.416 22.7705C29.1103 22.7705 29.7881 24.0605 29.7881 25.9502V33.4736H34.4678V25.4102C34.4677 21.0909 32.1589 19.0811 29.0791 19.0811ZM15.2793 12.6318C13.6783 12.6319 12.6319 13.6818 12.6318 15.0605C12.6318 16.4108 13.6474 17.4912 15.2188 17.4912H15.249C16.8807 17.491 17.8965 16.4107 17.8965 15.0605C17.866 13.6818 16.8804 12.6318 15.2793 12.6318Z",fill:"white"}));case"Instagram":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM23.999 11.2002C20.5245 11.2002 20.0877 11.2152 18.7227 11.2773C17.3602 11.3398 16.43 11.5556 15.6162 11.8721C14.7744 12.199 14.06 12.636 13.3486 13.3477C12.6366 14.0591 12.1991 14.7736 11.8711 15.6152C11.5538 16.4293 11.3377 17.3597 11.2764 18.7217C11.2153 20.087 11.2002 20.5238 11.2002 24C11.2002 27.476 11.2155 27.9113 11.2773 29.2764C11.34 30.639 11.5558 31.5699 11.8721 32.3838C12.1993 33.2255 12.636 33.94 13.3477 34.6514C14.0589 35.3634 14.7739 35.801 15.6152 36.1279C16.4295 36.4444 17.3596 36.6602 18.7217 36.7227C20.087 36.7848 20.5233 36.7998 23.999 36.7998C27.4756 36.7998 27.911 36.7848 29.2764 36.7227C30.639 36.6602 31.5704 36.4445 32.3848 36.1279C33.2261 35.801 33.9394 35.3631 34.6504 34.6514C35.3624 33.9399 35.7999 33.2254 36.1279 32.3838C36.4426 31.5697 36.6586 30.6393 36.7227 29.2773C36.784 27.912 36.7998 27.4763 36.7998 24C36.7998 20.5242 36.784 20.0876 36.7227 18.7227C36.6587 17.36 36.4426 16.4291 36.1279 15.6152C35.7999 14.7734 35.3623 14.0591 34.6504 13.3477C33.9385 12.6358 33.2264 12.1987 32.3838 11.8721C31.5678 11.5555 30.6371 11.3397 29.2744 11.2773C27.9093 11.2152 27.4745 11.2002 23.999 11.2002Z",fill:"white"}),e("path",{d:"M22.8525 13.5068C23.1933 13.5063 23.5739 13.5068 24.001 13.5068C27.4186 13.5068 27.8242 13.5197 29.1738 13.5811C30.4214 13.6381 31.0986 13.8463 31.5498 14.0215C32.1471 14.2535 32.5737 14.5305 33.0215 14.9785C33.4695 15.4265 33.746 15.8538 33.9785 16.4512C34.1537 16.9018 34.3631 17.5792 34.4199 18.8271C34.4812 20.1763 34.4941 20.5822 34.4941 23.998C34.4941 27.4134 34.4812 27.819 34.4199 29.168C34.3629 30.4158 34.1537 31.0933 33.9785 31.5439C33.7466 32.1412 33.4693 32.567 33.0215 33.0146C32.5735 33.4627 32.1474 33.7397 31.5498 33.9717C31.0992 34.1477 30.4216 34.356 29.1738 34.4131C27.8245 34.4744 27.4186 34.4883 24.001 34.4883C20.5835 34.4883 20.1783 34.4744 18.8291 34.4131C17.5811 34.3555 16.9036 34.1469 16.4521 33.9717C15.8549 33.7397 15.4284 33.4625 14.9805 33.0146C14.5325 32.5666 14.255 32.1406 14.0225 31.543C13.8473 31.0923 13.6378 30.4148 13.5811 29.167C13.5197 27.8179 13.5078 27.4121 13.5078 23.9941C13.5078 20.5762 13.5197 20.1726 13.5811 18.8232C13.6381 17.5755 13.8473 16.8984 14.0225 16.4473C14.2545 15.8499 14.5325 15.4236 14.9805 14.9756C15.4285 14.5276 15.8549 14.2501 16.4521 14.0176C16.9034 13.8416 17.5811 13.6335 18.8291 13.5762C20.0097 13.5228 20.4674 13.5066 22.8525 13.5039V13.5068ZM24.001 17.4268C20.371 17.427 17.4277 20.3709 17.4277 24.001C17.4279 27.6309 20.3711 30.5721 24.001 30.5723C27.631 30.5723 30.573 27.631 30.5732 24.001C30.5732 20.3708 27.6311 17.4268 24.001 17.4268ZM30.834 15.6318C29.9861 15.632 29.2979 16.3198 29.2979 17.168C29.2979 18.0159 29.9861 18.704 30.834 18.7041C31.682 18.7041 32.3701 18.016 32.3701 17.168C32.37 16.32 31.6819 15.6318 30.834 15.6318Z",fill:"white"}),e("path",{d:"M24.0011 19.7334C26.3574 19.7334 28.2678 21.6436 28.2678 24.0001C28.2678 26.3564 26.3574 28.2668 24.0011 28.2668C21.6445 28.2668 19.7344 26.3564 19.7344 24.0001C19.7344 21.6436 21.6445 19.7334 24.0011 19.7334Z",fill:"white"}));case"TikTok":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM25.0273 28.3477C25.0273 30.2955 23.4721 31.8955 21.5361 31.8955C19.6003 31.8954 18.0449 30.2955 18.0449 28.3477C18.045 26.4347 19.5659 24.8693 21.4326 24.7998V20.6953C17.3188 20.7648 14.0001 24.1391 14 28.3477C14 32.5912 17.3883 36 21.5713 36C25.754 35.9998 29.1416 32.5562 29.1416 28.3477V19.9648C30.6627 21.0779 32.5295 21.7396 34.5 21.7744V17.6699C31.4579 17.5656 29.0723 15.0609 29.0723 12H25.0273V28.3477Z",fill:"white"}));case"YouTube":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM24 15.2002C24 15.2002 15.9944 15.1997 13.998 15.749C12.8966 16.0513 12.0288 16.9423 11.7344 18.0732C11.1996 20.1231 11.2002 24.4004 11.2002 24.4004C11.2002 24.4472 11.2026 28.6878 11.7344 30.7266C12.0288 31.8575 12.8966 32.7483 13.998 33.0508C15.9944 33.6 24 33.5996 24 33.5996C24 33.5996 32.0057 33.6 34.002 33.0508C35.1033 32.7483 35.9703 31.8575 36.2646 30.7266C36.7966 28.6879 36.7998 24.4472 36.7998 24.4004C36.7998 24.4004 36.7996 20.1231 36.2646 18.0732C35.9703 16.9424 35.1033 16.0513 34.002 15.749C32.0057 15.1997 24 15.2002 24 15.2002Z",fill:"white"}),e("path",{d:"M21.6016 28.7998V20.7998L28.0016 24.8L21.6016 28.7998Z",fill:"white"}))}}const s=class{constructor(e){t(this,e)}data;resolved=i;resolve(){this.resolved=null!=this.data?function(t){const e=t&&"object"==typeof t?t:{},i=e.footer&&"object"==typeof e.footer?e.footer:{};return{social:o(i?.social),standardLinks:r(i?.standardLinks),credits:a(i?.credits)?i.credits.trim():"",copyright:a(i?.copyright)?i.copyright.trim():""}}(function(t){if("string"!=typeof t)return t;const e=t.trim();if(e)try{return JSON.parse(e)}catch{return}}(this.data)):i}componentWillLoad(){this.resolve()}watchData(){this.resolve()}renderLegalText(){const{credits:t,copyright:i}=this.resolved;return t||i?e("div",{class:"legal"},t?e("p",{class:"legal__p"},t):null,t&&i?e("p",{class:"legal__p"},String.fromCharCode(8203)):null,i?e("p",{class:"legal__p"},i):null):null}renderSocialLinks(){const t=this.resolved.social;return 0===t.length?null:e("div",{class:"social"},t.map((t=>e("a",{class:"social__link",href:t.href,"aria-label":t.platform,target:n(t.href)?"_blank":void 0,rel:n(t.href)?"noreferrer noopener":void 0},e("span",{class:"social__icon","aria-hidden":"true"},e(l,{platform:t.platform}))))))}renderStandardLinks(){const t=this.resolved.standardLinks;return 0===t.length?null:e("div",{class:"standard__links"},t.map((t=>e("a",{class:"footer-link",href:t.href},t.label))))}render(){return e("footer",{key:"b5440fe948f8a4207b20d8e380ab50f559890440",class:"footer"},e("div",{key:"2f4757c3a52203a89b53fa358513d832f153bfa2",class:"container"},this.renderSocialLinks(),e("div",{key:"4ee53f39a16dab3739c70dadcaadb15602f08ce9",class:"standard"},this.renderStandardLinks(),this.renderLegalText())))}static get watchers(){return{data:[{watchData:0}]}}};s.style=':host{display:block}.footer{background:#030712;color:#ffffff;padding:28px 32px;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";font-weight:300}.container{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}@media (min-width: 768px){.footer{padding:44px 56px}.container{gap:36px}}.social{display:flex;align-items:center;justify-content:center;gap:16px}@media (min-width: 768px){.social{gap:28px}}.social__link{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:inherit;text-decoration:none;transition:opacity 150ms ease;outline:none}.social__link:hover{opacity:0.9}.social__link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.social__icon{display:inline-flex;width:48px;height:48px}.footer-link{color:#ffffff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;outline:none}.footer-link:hover{text-decoration-thickness:2px}.footer-link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.legal{width:100%;max-width:860px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.legal{font-size:18px;line-height:28px}}.legal__p{margin:0}.standard{width:100%;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.standard{font-size:18px;line-height:28px}}.standard__links{display:flex;flex-direction:column;align-items:center;gap:16px}@media (min-width: 768px){.standard__links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:36px}}';export{s as weg_footer}
+import{r as t,h as e}from"./p-QiJxC4Ow.js";const i={social:[],standardLinks:[],credits:"",copyright:""};function n(t){return/^https?:\/\//.test(t)}function o(t){return"string"==typeof t&&t.trim().length>0}function a(t){if(!Array.isArray(t))return[];const e=[];for(const n of t){if(!n||"object"!=typeof n)continue;const t=n.platform,a=n.href;("LinkedIn"===(i=t)||"Instagram"===i||"TikTok"===i||"YouTube"===i)&&o(a)&&e.push({platform:t,href:a.trim()})}var i;return e}function r(t){if(!Array.isArray(t))return[];const e=[];for(const i of t){if(!i||"object"!=typeof i)continue;const t=i.label,n=i.href;o(t)&&o(n)&&e.push({label:t.trim(),href:n.trim()})}return e}function l({platform:t}){const i={viewBox:"0 0 48 48",width:48,height:48,fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"};switch(t){case"LinkedIn":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM12.9082 33.4736H17.5889V19.4111H12.9082V33.4736ZM29.0791 19.0811C26.5942 19.0811 25.4815 20.4458 24.8604 21.4033V19.4111H20.1797C20.2412 20.7279 20.1799 33.4203 20.1797 33.4736H24.8604V25.6201C24.8604 25.1998 24.8909 24.7804 25.0146 24.4795C25.3529 23.6399 26.1231 22.7705 27.416 22.7705C29.1103 22.7705 29.7881 24.0605 29.7881 25.9502V33.4736H34.4678V25.4102C34.4677 21.0909 32.1589 19.0811 29.0791 19.0811ZM15.2793 12.6318C13.6783 12.6319 12.6319 13.6818 12.6318 15.0605C12.6318 16.4108 13.6474 17.4912 15.2188 17.4912H15.249C16.8807 17.491 17.8965 16.4107 17.8965 15.0605C17.866 13.6818 16.8804 12.6318 15.2793 12.6318Z",fill:"white"}));case"Instagram":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM23.999 11.2002C20.5245 11.2002 20.0877 11.2152 18.7227 11.2773C17.3602 11.3398 16.43 11.5556 15.6162 11.8721C14.7744 12.199 14.06 12.636 13.3486 13.3477C12.6366 14.0591 12.1991 14.7736 11.8711 15.6152C11.5538 16.4293 11.3377 17.3597 11.2764 18.7217C11.2153 20.087 11.2002 20.5238 11.2002 24C11.2002 27.476 11.2155 27.9113 11.2773 29.2764C11.34 30.639 11.5558 31.5699 11.8721 32.3838C12.1993 33.2255 12.636 33.94 13.3477 34.6514C14.0589 35.3634 14.7739 35.801 15.6152 36.1279C16.4295 36.4444 17.3596 36.6602 18.7217 36.7227C20.087 36.7848 20.5233 36.7998 23.999 36.7998C27.4756 36.7998 27.911 36.7848 29.2764 36.7227C30.639 36.6602 31.5704 36.4445 32.3848 36.1279C33.2261 35.801 33.9394 35.3631 34.6504 34.6514C35.3624 33.9399 35.7999 33.2254 36.1279 32.3838C36.4426 31.5697 36.6586 30.6393 36.7227 29.2773C36.784 27.912 36.7998 27.4763 36.7998 24C36.7998 20.5242 36.784 20.0876 36.7227 18.7227C36.6587 17.36 36.4426 16.4291 36.1279 15.6152C35.7999 14.7734 35.3623 14.0591 34.6504 13.3477C33.9385 12.6358 33.2264 12.1987 32.3838 11.8721C31.5678 11.5555 30.6371 11.3397 29.2744 11.2773C27.9093 11.2152 27.4745 11.2002 23.999 11.2002Z",fill:"white"}),e("path",{d:"M22.8525 13.5068C23.1933 13.5063 23.5739 13.5068 24.001 13.5068C27.4186 13.5068 27.8242 13.5197 29.1738 13.5811C30.4214 13.6381 31.0986 13.8463 31.5498 14.0215C32.1471 14.2535 32.5737 14.5305 33.0215 14.9785C33.4695 15.4265 33.746 15.8538 33.9785 16.4512C34.1537 16.9018 34.3631 17.5792 34.4199 18.8271C34.4812 20.1763 34.4941 20.5822 34.4941 23.998C34.4941 27.4134 34.4812 27.819 34.4199 29.168C34.3629 30.4158 34.1537 31.0933 33.9785 31.5439C33.7466 32.1412 33.4693 32.567 33.0215 33.0146C32.5735 33.4627 32.1474 33.7397 31.5498 33.9717C31.0992 34.1477 30.4216 34.356 29.1738 34.4131C27.8245 34.4744 27.4186 34.4883 24.001 34.4883C20.5835 34.4883 20.1783 34.4744 18.8291 34.4131C17.5811 34.3555 16.9036 34.1469 16.4521 33.9717C15.8549 33.7397 15.4284 33.4625 14.9805 33.0146C14.5325 32.5666 14.255 32.1406 14.0225 31.543C13.8473 31.0923 13.6378 30.4148 13.5811 29.167C13.5197 27.8179 13.5078 27.4121 13.5078 23.9941C13.5078 20.5762 13.5197 20.1726 13.5811 18.8232C13.6381 17.5755 13.8473 16.8984 14.0225 16.4473C14.2545 15.8499 14.5325 15.4236 14.9805 14.9756C15.4285 14.5276 15.8549 14.2501 16.4521 14.0176C16.9034 13.8416 17.5811 13.6335 18.8291 13.5762C20.0097 13.5228 20.4674 13.5066 22.8525 13.5039V13.5068ZM24.001 17.4268C20.371 17.427 17.4277 20.3709 17.4277 24.001C17.4279 27.6309 20.3711 30.5721 24.001 30.5723C27.631 30.5723 30.573 27.631 30.5732 24.001C30.5732 20.3708 27.6311 17.4268 24.001 17.4268ZM30.834 15.6318C29.9861 15.632 29.2979 16.3198 29.2979 17.168C29.2979 18.0159 29.9861 18.704 30.834 18.7041C31.682 18.7041 32.3701 18.016 32.3701 17.168C32.37 16.32 31.6819 15.6318 30.834 15.6318Z",fill:"white"}),e("path",{d:"M24.0011 19.7334C26.3574 19.7334 28.2678 21.6436 28.2678 24.0001C28.2678 26.3564 26.3574 28.2668 24.0011 28.2668C21.6445 28.2668 19.7344 26.3564 19.7344 24.0001C19.7344 21.6436 21.6445 19.7334 24.0011 19.7334Z",fill:"white"}));case"TikTok":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM25.0273 28.3477C25.0273 30.2955 23.4721 31.8955 21.5361 31.8955C19.6003 31.8954 18.0449 30.2955 18.0449 28.3477C18.045 26.4347 19.5659 24.8693 21.4326 24.7998V20.6953C17.3188 20.7648 14.0001 24.1391 14 28.3477C14 32.5912 17.3883 36 21.5713 36C25.754 35.9998 29.1416 32.5562 29.1416 28.3477V19.9648C30.6627 21.0779 32.5295 21.7396 34.5 21.7744V17.6699C31.4579 17.5656 29.0723 15.0609 29.0723 12H25.0273V28.3477Z",fill:"white"}));case"YouTube":return e("svg",{...i},e("path",{d:"M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0ZM24 15.2002C24 15.2002 15.9944 15.1997 13.998 15.749C12.8966 16.0513 12.0288 16.9423 11.7344 18.0732C11.1996 20.1231 11.2002 24.4004 11.2002 24.4004C11.2002 24.4472 11.2026 28.6878 11.7344 30.7266C12.0288 31.8575 12.8966 32.7483 13.998 33.0508C15.9944 33.6 24 33.5996 24 33.5996C24 33.5996 32.0057 33.6 34.002 33.0508C35.1033 32.7483 35.9703 31.8575 36.2646 30.7266C36.7966 28.6879 36.7998 24.4472 36.7998 24.4004C36.7998 24.4004 36.7996 20.1231 36.2646 18.0732C35.9703 16.9424 35.1033 16.0513 34.002 15.749C32.0057 15.1997 24 15.2002 24 15.2002Z",fill:"white"}),e("path",{d:"M21.6016 28.7998V20.7998L28.0016 24.8L21.6016 28.7998Z",fill:"white"}))}}const s=class{constructor(e){t(this,e)}layout;resolved=i;resolve(){this.resolved=null!=this.layout?function(t){const e=t&&"object"==typeof t?t:{},i=e.footer&&"object"==typeof e.footer?e.footer:{};return{social:a(i?.social),standardLinks:r(i?.standardLinks),credits:o(i?.credits)?i.credits.trim():"",copyright:o(i?.copyright)?i.copyright.trim():""}}(function(t){if("string"!=typeof t)return t;const e=t.trim();if(e)try{return JSON.parse(e)}catch{return}}(this.layout)):i}componentWillLoad(){this.resolve()}watchLayout(){this.resolve()}renderLegalText(){const{credits:t,copyright:i}=this.resolved;return t||i?e("div",{class:"legal"},t?e("p",{class:"legal__p"},t):null,t&&i?e("p",{class:"legal__p"},String.fromCharCode(8203)):null,i?e("p",{class:"legal__p"},i):null):null}renderSocialLinks(){const t=this.resolved.social;return 0===t.length?null:e("div",{class:"social"},t.map((t=>e("a",{class:"social__link",href:t.href,"aria-label":t.platform,target:n(t.href)?"_blank":void 0,rel:n(t.href)?"noreferrer noopener":void 0},e("span",{class:"social__icon","aria-hidden":"true"},e(l,{platform:t.platform}))))))}renderStandardLinks(){const t=this.resolved.standardLinks;return 0===t.length?null:e("div",{class:"standard__links"},t.map((t=>e("a",{class:"footer-link",href:t.href},t.label))))}render(){return e("footer",{key:"ba9a2b07235bbad73f4f2aea762af917249f621b",class:"footer"},e("div",{key:"88a8a9de95c09bf4c5524fc942976b7ababe110d",class:"container"},this.renderSocialLinks(),e("div",{key:"2a21b07909bcb975c4bade8a291b050d83d52e8c",class:"standard"},this.renderStandardLinks(),this.renderLegalText())))}static get watchers(){return{layout:[{watchLayout:0}]}}};s.style=':host{display:block}.footer{background:#030712;color:#ffffff;padding:28px 32px;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";font-weight:300}.container{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}@media (min-width: 768px){.footer{padding:44px 56px}.container{gap:36px}}.social{display:flex;align-items:center;justify-content:center;gap:16px}@media (min-width: 768px){.social{gap:28px}}.social__link{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent;color:inherit;text-decoration:none;transition:opacity 150ms ease;outline:none}.social__link:hover{opacity:0.9}.social__link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.social__icon{display:inline-flex;width:48px;height:48px}.footer-link{color:#ffffff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;outline:none}.footer-link:hover{text-decoration-thickness:2px}.footer-link:focus-visible{outline:2px solid rgba(255, 255, 255, 0.9);outline-offset:4px}.legal{width:100%;max-width:860px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.legal{font-size:18px;line-height:28px}}.legal__p{margin:0}.standard{width:100%;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center;font-size:16px;line-height:24px}@media (min-width: 768px){.standard{font-size:18px;line-height:28px}}.standard__links{display:flex;flex-direction:column;align-items:center;gap:16px}@media (min-width: 768px){.standard__links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:36px}}';export{s as weg_footer}

package/dist/weg-shared-layout/weg-shared-layout.esm.js

@@ -1 +1 @@
-import{p as a,b as t}from"./p-QiJxC4Ow.js";export{s as setNonce}from"./p-QiJxC4Ow.js";import{g as o}from"./p-DQuL1Twl.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),a(o)})().then((async a=>(await o(),t([["p-d1addb13",[[513,"my-component",{first:[1],middle:[1],last:[1]}]]],["p-87522053",[[513,"weg-footer",{data:[1],resolved:[32]},null,{data:[{watchData:0}]}]]]],a))));
+import{p as o,b as t}from"./p-QiJxC4Ow.js";export{s as setNonce}from"./p-QiJxC4Ow.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),o(a)})().then((async o=>(await a(),t([["p-d1addb13",[[513,"my-component",{first:[1],middle:[1],last:[1]}]]],["p-99843bbd",[[513,"weg-footer",{layout:[1],resolved:[32]},null,{layout:[{watchLayout:0}]}]]]],o))));

package/docs/angular.md

@@ -30,9 +30,9 @@ If `defineCustomElements` is async in your Stencil build, `await` it (or chain `
 
 Add `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to every `@Component` whose template uses `<weg-footer>` (it does not cascade from the root through `router-outlet` children).
 
-## 4. Pass data with property binding
+## 4. Pass layout with property binding
 
-Use **`[data]="..."`** so Angular sets the element’s JavaScript `data` property (Stencil `@Prop()`), not an HTML attribute.
+Use **`[layout]="..."`** so Angular sets the element’s JavaScript `layout` property (Stencil `@Prop()`), not an HTML attribute.
 
 Example with the bundled sample payload:
 
@@ -57,7 +57,7 @@ export class App {
 ```html
 <!-- src/app/app.html -->
 <router-outlet />
-<weg-footer [data]="layoutData()"></weg-footer>
+<weg-footer [layout]="layoutData()"></weg-footer>
 ```
 
 Enable `resolveJsonModule` in the TypeScript config used by the app (e.g. `tsconfig.app.json`) if you import `dummy-data.json`.
@@ -79,7 +79,7 @@ Then bootstrap as usual (no `defineCustomElements()` call required for that tag)
 | Symptom | Cause / fix |
 | --- | --- |
 | `'weg-footer' is not a known element` | Add `schemas: [CUSTOM_ELEMENTS_SCHEMA]` on the component whose template contains `<weg-footer>`. |
-| Footer missing or empty box | `defineCustomElements()` not called before bootstrap (or footer bundle not imported), or `data` not set / wrong shape — compare with `dummy-data.json`. |
+| Footer missing or empty box | `defineCustomElements()` not called before bootstrap (or footer bundle not imported), or `layout` not set / wrong shape — compare with `dummy-data.json`. |
 | SSR: `document is not defined` | Guard `defineCustomElements()` with `typeof window !== 'undefined'` or `isPlatformBrowser`. |
 
 ## TypeScript typings

package/docs/nextjs.md

@@ -0,0 +1,243 @@
+# Next.js (App Router)
+
+Guide for **Next.js 13+ App Router** (`app/` directory). For Vite/CRA-style client-only React, see **[React SPA](./react.md)**.
+
+## Why Next.js is different
+
+| Topic | SPA (React 19) | Next.js App Router |
+| --- | --- | --- |
+| **Where `<weg-footer>` runs** | Client only | Must be in a **Client Component** (`"use client"`) |
+| **Server Components** | N/A | Default in `app/` — cannot call `defineCustomElements()` or touch `window` |
+| **SSR output** | N/A | Server HTML is often an **empty** `<weg-footer></weg-footer>` until the client bundle hydrates |
+| **`layout={object}`** | Works on React 19+ | **Does not work reliably** — RSC/SSR serializes props; object props on custom elements become useless attributes |
+| **Recommended `layout` value** | Object (React 19+) or string | **`JSON.stringify(layout)`** always |
+
+Stencil custom elements need browser APIs. Registration and rendering belong in a small client wrapper; the root **Server** layout only imports that wrapper.
+
+## Requirements
+
+| Requirement | Notes |
+| --- | --- |
+| **Next.js 13+** | App Router (`app/layout.tsx`) |
+| **React 19** | Matches current Next defaults; string `layout` still required for custom elements |
+| **`transpilePackages`** | Next must compile `weg-shared-layout` (see below) |
+
+## Install
+
+```bash
+npm i weg-shared-layout
+# or
+pnpm add weg-shared-layout
+```
+
+## 1. Transpile the package
+
+In `next.config.ts` / `next.config.js`:
+
+```ts
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['weg-shared-layout'],
+};
+
+export default nextConfig;
+```
+
+Without this, you may see build errors or stale/uncompiled Stencil output in the Next bundle.
+
+## 2. Client `Footer` component
+
+Create a dedicated Client Component (pattern verified in [weg-payload](https://github.com/jobsac/weg-payload)):
+
+```tsx
+// src/components/layout/Footer.tsx
+'use client';
+
+import layout from 'weg-shared-layout/dummy-data.json';
+import { defineCustomElements } from 'weg-shared-layout/loader';
+import 'weg-shared-layout/weg-footer';
+
+defineCustomElements();
+
+export function Footer() {
+  return (
+    <weg-footer layout={JSON.stringify(layout)} suppressHydrationWarning />
+  );
+}
+```
+
+### Why each line matters
+
+| Line | Purpose |
+| --- | --- |
+| `'use client'` | Allows `defineCustomElements`, custom element upgrade, and DOM property updates |
+| `defineCustomElements()` | Registers `<weg-footer>` in the browser (module runs once per client bundle) |
+| `import 'weg-shared-layout/weg-footer'` | Ensures the component definition is bundled |
+| `layout={JSON.stringify(layout)}` | Sets a string attribute/property Next/React can pass through SSR → client; component parses JSON |
+| `suppressHydrationWarning` | Server renders empty tag; client fills content — avoids React hydration mismatch noise |
+
+Do **not** pass `layout={layoutObject}` in Next — it will not hydrate correctly.
+
+## 3. Server layout: import the client footer
+
+```tsx
+// app/layout.tsx (Server Component — no "use client")
+import { Footer } from '@/components/layout/Footer';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}
+```
+
+Fetch layout on the server and pass it into `<Footer layout={...} />` when you wire production data (see below).
+
+## 4. Production: fetch on the server, stringify for the client
+
+```tsx
+// app/layout.tsx
+import { Footer } from '@/components/layout/Footer';
+
+const LAYOUT_URL = 'https://weg-payload-test.vercel.app/api/layout';
+
+async function getLayout() {
+  const res = await fetch(LAYOUT_URL, { next: { revalidate: 60 } });
+  if (!res.ok) throw new Error('Failed to load layout');
+  return res.json();
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const layout = await getLayout();
+
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Footer layout={layout} />
+      </body>
+    </html>
+  );
+}
+```
+
+```tsx
+// src/components/layout/Footer.tsx
+'use client';
+
+import { defineCustomElements } from 'weg-shared-layout/loader';
+import 'weg-shared-layout/weg-footer';
+
+defineCustomElements();
+
+type LayoutData = {
+  footer?: {
+    social?: { platform: string; href: string }[];
+    standardLinks?: { label: string; href: string }[];
+    credits?: string;
+    copyright?: string;
+  };
+};
+
+export function Footer({ layout }: { layout: LayoutData }) {
+  return (
+    <weg-footer layout={JSON.stringify(layout)} suppressHydrationWarning />
+  );
+}
+```
+
+**Rule:** whatever crosses the Server → Client boundary must be **serializable**. Pass the plain object into the Client Component, then **`JSON.stringify` inside the client** before setting it on `<weg-footer>`.
+
+## Passing `layout` — quick reference
+
+| Approach | Server Component | Client Component | Works in Next? |
+| --- | --- | --- | --- |
+| `layout={object}` on `<weg-footer>` | No (don’t use CE directly) | Tried often | **No** |
+| `layout={JSON.stringify(obj)}` on `<weg-footer>` | No | Yes | **Yes** (recommended) |
+| Pass `layout` object to `<Footer />`, stringify inside | Fetch/await JSON | `JSON.stringify` in JSX | **Yes** (recommended for CMS) |
+| `ref` + `el.layout = obj` in `useEffect` | No | Yes | Yes (escape hatch) |
+| `prop:layout={obj}` | No | Unreliable | **Avoid** |
+
+## TypeScript
+
+Use **module augmentation** (not triple-slash references in every file). Example `src/types/weg-shared-layout-jsx.d.ts`:
+
+```ts
+import type { JSX as WegSharedLayoutJSX } from 'weg-shared-layout';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends WegSharedLayoutJSX.IntrinsicElements {
+      'weg-footer': WegSharedLayoutJSX.IntrinsicElements['weg-footer'] &
+        DetailedHTMLProps<HTMLAttributes<HTMLWegFooterElement>, HTMLWegFooterElement>;
+    }
+  }
+}
+```
+
+Enable `resolveJsonModule` if you import `weg-shared-layout/dummy-data.json` in the client footer.
+
+## Troubleshooting
+
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| `document is not defined` | `defineCustomElements()` in a Server Component | Move registration to `"use client"` `Footer.tsx` only. |
+| Empty `<weg-footer>` in Elements panel | SSR placeholder before hydration | Expected until client JS runs; confirm client bundle loads and `defineCustomElements()` ran. |
+| Empty footer after hydration | `layout={object}` or missing stringify | Use `layout={JSON.stringify(layout)}` in the client component. |
+| Hydration warning on `<weg-footer>` | Server HTML ≠ client DOM | Add `suppressHydrationWarning`; ensure `layout` JSON is identical server vs client props. |
+| Build error importing package | Package not transpiled | Add `transpilePackages: ['weg-shared-layout']`. |
+| `'weg-footer' is not a known element` (TS) | Missing JSX types | Add module augmentation file above. |
+| Footer never upgrades | Loader/tag not imported on client | `import 'weg-shared-layout/weg-footer'` + `defineCustomElements()` in client file. |
+
+### DevTools tips
+
+1. **Elements:** Before hydration, `<weg-footer>` is often empty. After hydration, expand the shadow root — links should appear inside `#shadow-root`.
+2. **Console:** Log `document.querySelector('weg-footer')?.layout` in the browser — should be a **string** (JSON) or object, not `undefined`.
+3. **Network:** Confirm your layout API returns the same shape as [`dummy-data.json`](../src/assets/dummy-data.json).
+4. **React DevTools:** `Footer` should show under a Client Component boundary; parent `layout.tsx` stays a Server Component.
+
+### Ref fallback (if stringify still fails)
+
+```tsx
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { defineCustomElements } from 'weg-shared-layout/loader';
+import 'weg-shared-layout/weg-footer';
+
+defineCustomElements();
+
+export function Footer({ layout }: { layout: unknown }) {
+  const ref = useRef<HTMLWegFooterElement>(null);
+
+  useEffect(() => {
+    if (ref.current) ref.current.layout = layout as object;
+  }, [layout]);
+
+  return <weg-footer ref={ref} suppressHydrationWarning />;
+}
+```
+
+## Integration checklist
+
+- [ ] `weg-shared-layout` installed
+- [ ] `transpilePackages: ['weg-shared-layout']` in `next.config`
+- [ ] `Footer.tsx` with `'use client'`, loader, tag import, `JSON.stringify`, `suppressHydrationWarning`
+- [ ] Root `app/layout.tsx` imports `<Footer />` (no `defineCustomElements` on server)
+- [ ] Layout data fetched server-side (or static import) and passed as serializable props
+- [ ] TypeScript module augmentation for `'weg-footer'`
+- [ ] Verified in browser after hydration (not only view-source HTML)
+
+## See also
+
+- **[React SPA](./react.md)** — object `layout={...}` on React 19 without SSR
+- **[Angular](./angular.md)**
+- **[Plain HTML / vanilla JS](./vanilla.md)**
+- **[Package readme](../readme.md)**

package/docs/react.md

@@ -1,8 +1,34 @@
-# React
+# React (SPA)
 
-## Register custom elements
+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.
 
-Run once (for example in `main.tsx` / your app entry):
+## What is `<weg-footer>`?
+
+`<weg-footer>` is a **presentational** [Stencil](https://stenciljs.com/) Web Component shipped by `weg-shared-layout`. It renders the site footer (social links, standard links, credits, copyright) from a **layout payload** you provide.
+
+The component **does not fetch data**. Your app loads JSON (from an API, CMS, or a static file) and passes it on the `layout` property.
+
+Payload shape matches [`dummy-data.json`](../src/assets/dummy-data.json) (see also [readme](../readme.md#how-it-works)).
+
+## Requirements
+
+| Requirement | Notes |
+| --- | --- |
+| **React 19+** | React 19 maps custom-element props to DOM **properties** when possible. Older React often sets `layout` as a string **attribute**, which breaks object payloads. |
+| **Bundler** | Must resolve `node_modules` ESM/CJS from `weg-shared-layout`. |
+| **TypeScript (optional)** | Module augmentation below; enable `resolveJsonModule` if you import `dummy-data.json`. |
+
+## Install
+
+```bash
+npm i weg-shared-layout
+# or
+pnpm add weg-shared-layout
+```
+
+## 1. Register custom elements (once)
+
+Call `defineCustomElements()` **once** before the first `<weg-footer>` render — typically in your app entry (`main.tsx`, `index.tsx`):
 
 ```ts
 import { defineCustomElements } from 'weg-shared-layout/loader';
@@ -10,27 +36,166 @@ import { defineCustomElements } from 'weg-shared-layout/loader';
 defineCustomElements();
 ```
 
-## Pass layout data
+Also side-effect import the tag so your bundler includes the component definition:
+
+```ts
+import 'weg-shared-layout/weg-footer';
+```
+
+**Alternative:** import only the footer bundle (no loader call):
+
+```ts
+import 'weg-shared-layout/weg-footer';
+```
+
+Use the loader when you may add more tags from this package later.
 
-Import the fixture (or your own object with the same shape) and pass it on **`data`**:
+## 2. Render the footer
+
+### Recommended: pass `layout` as an object (React 19+)
 
 ```tsx
 import 'weg-shared-layout/weg-footer';
 import layout from 'weg-shared-layout/dummy-data.json';
 
 export function SiteFooter() {
-  return <weg-footer data={layout} />;
+  return <weg-footer layout={layout} />;
 }
 ```
 
-Use **React 19 or newer** so `data={...}` is applied as the custom element’s **`data` property** (object), not a string attribute.
+With React 19+, `layout={layoutObject}` is applied as the custom element’s **`layout` property** (object), which `<weg-footer>` expects.
+
+### Fallback: `JSON.stringify` (all React versions)
+
+If you are on React 18 or see an empty footer despite correct data, pass a JSON **string**. The component parses string values the same as objects:
+
+```tsx
+<weg-footer layout={JSON.stringify(layout)} />
+```
 
-**Next.js App Router:** keep registration and this JSX in a **Client Component** (`"use client"`).
+### Plain HTML attribute
 
-## TypeScript
+Outside React, you can set `layout='{"footer":{...}}'` on the element. Prefer the property in SPA code.
+
+## 3. Production: fetch layout from your API
+
+Example using the public test API (same shape as `dummy-data.json`):
+
+```tsx
+import { useEffect, useState } from 'react';
+import 'weg-shared-layout/weg-footer';
+import layoutFixture from 'weg-shared-layout/dummy-data.json';
+
+type LayoutData = typeof layoutFixture;
+
+const LAYOUT_URL = 'https://weg-payload-test.vercel.app/api/layout';
+
+export function SiteFooter() {
+  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>;
+      })
+      .then((data) => {
+        if (!cancelled) setLayout(data);
+      })
+      .catch(console.error);
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!layout) return null; // or a skeleton
+
+  return <weg-footer layout={layout} />;
+}
+```
+
+Replace the URL with your own CMS/API. Keep the object shape aligned with `dummy-data.json`.
+
+## TypeScript: module augmentation
+
+Do **not** rely on a triple-slash reference in every file. Augment React’s JSX namespace once (e.g. `src/types/weg-shared-layout-jsx.d.ts`):
 
 ```ts
-/// <reference types="weg-shared-layout/dist/types/components" />
+import type { JSX as WegSharedLayoutJSX } from 'weg-shared-layout';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends WegSharedLayoutJSX.IntrinsicElements {
+      'weg-footer': WegSharedLayoutJSX.IntrinsicElements['weg-footer'] &
+        DetailedHTMLProps<HTMLAttributes<HTMLWegFooterElement>, HTMLWegFooterElement>;
+    }
+  }
+}
+```
+
+Ensure that file is included by your `tsconfig.json` `include`/`files`.
+
+Enable in `tsconfig.json` when importing JSON fixtures:
+
+```json
+{
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+}
 ```
 
-Enable `resolveJsonModule` in `tsconfig.json` if you import `dummy-data.json`.
+## `layout` prop vs attribute (why React version matters)
+
+| How data is set | Works with object? |
+| --- | --- |
+| **Property** `el.layout = obj` / React 19 `layout={obj}` | Yes |
+| **Attribute** `layout="[object Object]"` / React 18 `layout={obj}` | No — footer stays empty |
+| **Attribute** `layout='{"footer":...}'` / `layout={JSON.stringify(obj)}` | Yes — component parses JSON |
+
+`<weg-footer>` accepts `layout` as either an object or a JSON string (see `parseJsonProp` in the component source).
+
+## Note: `prop:layout` is unreliable in React
+
+Some examples set Stencil props with a `prop:` prefix (e.g. `prop:layout={data}`). In React this is **not dependable** — behavior varies by version and reconciler. Prefer:
+
+1. **`layout={object}`** on React 19+, or  
+2. **`layout={JSON.stringify(object)}`**, or  
+3. **Ref fallback** after mount:
+
+```tsx
+import { useEffect, useRef } from 'react';
+import type layoutFixture from 'weg-shared-layout/dummy-data.json';
+
+type LayoutData = typeof layoutFixture;
+
+export function SiteFooter({ layout }: { layout: LayoutData }) {
+  const ref = useRef<HTMLWegFooterElement>(null);
+
+  useEffect(() => {
+    if (ref.current) ref.current.layout = layout;
+  }, [layout]);
+
+  return <weg-footer ref={ref} />;
+}
+```
+
+## Troubleshooting
+
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| Empty footer, no errors | `defineCustomElements()` not called, or missing `import 'weg-shared-layout/weg-footer'` | Register loader + import tag in entry before render. |
+| Empty footer, data looks correct | React set `layout` as attribute (`[object Object]`) | Upgrade to React 19+, or use `layout={JSON.stringify(layout)}` or ref assignment. |
+| TypeScript: `'weg-footer' does not exist on JSX.IntrinsicElements` | No module augmentation | Add `weg-shared-layout-jsx.d.ts` as above. |
+| Cannot find module `weg-shared-layout/dummy-data.json` | `resolveJsonModule` off | Enable in `tsconfig.json`. |
+| Footer flashes then disappears | Strict Mode double-mount + async layout | Ensure stable `layout` reference; avoid resetting state on remount. |
+| Styles missing | Shadow DOM is encapsulated | Footer ships its own CSS; do not expect global site styles inside the shadow root. |
+
+## See also
+
+- **[Next.js App Router](./nextjs.md)** — Server Components, `transpilePackages`, hydration
+- **[Angular](./angular.md)**
+- **[Plain HTML / vanilla JS](./vanilla.md)**
+- **[Package readme](../readme.md)**

package/docs/vanilla.md

@@ -9,10 +9,10 @@ With a bundler that resolves `node_modules` imports:
   import layout from 'weg-shared-layout/dummy-data.json';
 
   defineCustomElements();
-  document.getElementById('footer').data = layout;
+  document.getElementById('footer').layout = layout;
 </script>
 ```
 
-Otherwise, copy `dummy-data.json` to your static assets, `fetch` it, parse JSON, then assign **`element.data`**.
+Otherwise, copy `dummy-data.json` to your static assets, `fetch` it, parse JSON, then assign **`element.layout`**.
 
-You can also pass a JSON string on the **`data` attribute**; the component parses it the same way as an object `data` property.
+You can also pass a JSON string on the **`layout` attribute**; the component parses it the same way as an object `layout` property.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weg-shared-layout",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Shared layout Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -43,14 +43,6 @@
     "loader/",
     "src/assets/dummy-data.json"
   ],
-  "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"
-  },
   "devDependencies": {
     "@stencil/core": "^4.27.1 || ^5.0.0-0",
     "@stencil/vitest": "^1.8.3",
@@ -59,5 +51,12 @@
     "playwright": "^1.52.0",
     "vitest": "^4.0.0"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil-test --prod",
+    "test:watch": "stencil-test --prod --watch",
+    "generate": "stencil generate"
+  }
+}

package/readme.md

@@ -14,7 +14,7 @@ npm i weg-shared-layout
 
 `<weg-footer>` is a **presentational** Web Component: it does **not** fetch data.
   
-You **can** load that object however you normally fetch JSON in your app. For example, [https://weg-payload-test.vercel.app/api/layout](https://weg-payload-test.vercel.app/api/layout) returns the same shape as **`dummy-data.json`**; pass the response into `data` on `<weg-footer>` (or your framework wrapper) like any other prop.
+You **can** load that object however you normally fetch JSON in your app. For example, [https://weg-payload-test.vercel.app/api/layout](https://weg-payload-test.vercel.app/api/layout) returns the same shape as **`dummy-data.json`**; pass the response into `layout` on `<weg-footer>` (or your framework wrapper) like any other prop.
 
 The payload shape matches **`dummy-data.json`**:
 
@@ -29,7 +29,8 @@ The payload shape matches **`dummy-data.json`**:
 | Guide | Doc |
 | --- | --- |
 | Angular | [docs/angular.md](./docs/angular.md) |
-| React | [docs/react.md](./docs/react.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)