weg-shared-layout 0.0.24 → 0.0.25

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

@@ -27,24 +27,46 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
-  padding-block: 32px;
+  gap: 1.25rem;
+  padding-block: 2rem;
+  padding-inline: 0.5rem;
+}
+
+@media (width >= 960px) {
+  .footer__inner {
+    gap: 2.25rem;
+    padding-block: 3.5rem;
+    padding-inline: 1rem;
+  }
+}
+
+@media (width >= 1280px) {
+  .footer__inner {
+    padding-inline: 2rem;
+  }
 }
 
 .social {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+@media (width >= 960px) {
+  .social {
+    gap: 1.75rem;
+  }
 }
 
 .social__link {
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 999px;
+  border-radius: 999rem;
   background: transparent;
   color: inherit;
   text-decoration: none;
@@ -63,17 +85,17 @@
 
 .social__icon {
   display: inline-flex;
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
 }
 
 .footer-link {
   color: #ffffff;
   font-family: 'Open Sans', var(--weg-font-family);
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 300;
-  line-height: 24px;
+  line-height: 1.5rem;
   display: block;
   width: 100%;
   text-align: center;
@@ -86,6 +108,14 @@
   outline: none;
 }
 
+@media (width >= 960px) {
+  .footer-link {
+    display: inline;
+    width: auto;
+    text-align: left;
+  }
+}
+
 .footer-link:hover {
   opacity: 0.9;
 }
@@ -99,8 +129,15 @@
   width: 100%;
   max-width: 860px;
   text-align: center;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@media (width >= 960px) {
+  .legal {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
 }
 
 .legal__p {
@@ -112,63 +149,77 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 36px;
+  gap: 2.25rem;
   text-align: center;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@media (width >= 960px) {
+  .standard {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
 }
 
 .columns {
   width: 100%;
   display: grid;
-  gap: 0;
   grid-template-columns: 1fr;
+  gap: 0;
 }
 
 .columns__col {
   display: flex;
-  flex: 1 1 0;
-  min-width: 0;
-  width: 100%;
-  align-items: stretch;
   flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
 }
 
 .columns__col:not(:first-child) {
-  gap: 32px;
+  gap: 2rem;
 }
 
 .columns__divider {
   display: block;
-  background: rgba(255, 255, 255, 0.35);
   flex-shrink: 0;
   width: 100%;
   height: 1px;
-  align-self: stretch;
-  margin-top: 32px;
-  margin-bottom: 0;
+  margin-top: 2rem;
+  background: rgba(255, 255, 255, 0.35);
 }
 
 .columns__links {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 12px;
-  flex: 1;
+  gap: 0.75rem;
   width: 100%;
   min-width: 0;
-  padding: 0 4px;
   text-align: center;
 }
 
-@media (width >= 960px) {
-  .footer__inner {
-    gap: 36px;
-    padding-block: 56px;
+/* sm: 6 footer columns → 3 × 2 grid */
+@media (width >= 640px) {
+  .columns {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.5rem 3rem;
   }
 
-  .social {
-    gap: 28px;
+  .columns__col:not(:first-child) {
+    gap: 0;
+  }
+
+  .columns__col:nth-child(-n + 3):not(:first-child) .columns__divider {
+    display: none;
+  }
+
+  .columns__col:nth-child(n + 4) .columns__divider {
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin: 0 0 1.5rem;
   }
 
   .footer-link {
@@ -177,16 +228,14 @@
     text-align: left;
   }
 
-  .legal {
-    font-size: 18px;
-    line-height: 28px;
-  }
-
-  .standard {
-    font-size: 18px;
-    line-height: 28px;
+  .columns__links {
+    align-items: flex-start;
+    text-align: left;
   }
+}
 
+/* md: 6 footer columns → single row */
+@media (width >= 960px) {
   .columns {
     display: flex;
     flex-direction: row;
@@ -196,6 +245,7 @@
   }
 
   .columns__col {
+    flex: 1 1 0;
     flex-direction: row;
     align-items: stretch;
   }
@@ -204,15 +254,17 @@
     gap: 0;
   }
 
-  .columns__divider {
+  .columns__col:nth-child(-n + 3):not(:first-child) .columns__divider,
+  .columns__col:nth-child(n + 4) .columns__divider {
+    display: block;
     width: 1px;
     height: auto;
-    margin: 0 12px;
+    margin: 0 1.5rem;
   }
 
   .columns__links {
+    flex: 1;
     align-items: flex-start;
-    padding: 0 12px;
     text-align: left;
   }
 }

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { isNonEmptyString, normalizeLinks, parseJsonProp } from "../../utils/layout";
+import { isNonEmptyString, normalizeMenu, parseJsonProp } from "../../utils/layout";
 const EMPTY_FOOTER = {
     social: [],
-    columns: [],
+    menu: [],
     credits: '',
     copyright: '',
 };
@@ -29,32 +29,28 @@ function normalizeSocialLinks(input) {
     }
     return result;
 }
-function normalizeColumns(input) {
-    if (!Array.isArray(input))
-        return [];
-    const result = [];
-    for (const item of input) {
-        if (!item || typeof item !== 'object')
-            continue;
-        const links = normalizeLinks(item.links);
-        if (links.length === 0)
-            continue;
-        result.push({ links });
-    }
-    return result;
-}
 function normalizeFooterData(input) {
     const root = (input && typeof input === 'object' ? input : {});
     const footer = (root.footer && typeof root.footer === 'object' ? root.footer : {});
     return {
         social: normalizeSocialLinks(footer?.social),
-        columns: normalizeColumns(footer?.columns),
+        menu: normalizeMenu(footer?.menu),
         credits: isNonEmptyString(footer?.credits) ? footer.credits.trim() : '',
         copyright: isNonEmptyString(footer?.copyright) ? footer.copyright.trim() : '',
     };
 }
 function linkOpensNewTab(link) {
-    return isExternalHref(link.href);
+    if (link.target === '_blank')
+        return true;
+    return link.href ? isExternalHref(link.href) : false;
+}
+function linkTarget(link) {
+    if (link.target)
+        return link.target;
+    return linkOpensNewTab(link) ? '_blank' : undefined;
+}
+function linkRel(link) {
+    return linkOpensNewTab(link) ? 'noreferrer noopener' : undefined;
 }
 function SocialIcon({ platform }) {
     const common = {
@@ -92,7 +88,7 @@ export class WegFooter {
      * {
      *   "footer": {
      *     "social": [{ "platform": "LinkedIn", "href": "https://..." }],
-     *     "columns": [{ "links": [{ "label": "About Us", "href": "/about" }] }],
+     *     "menu": [[{ "label": "About Us", "href": "/about" }]],
      *     "credits": "...",
      *     "copyright": "..."
      *   }
@@ -126,14 +122,14 @@ export class WegFooter {
             return null;
         return (h("div", { class: "social" }, links.map((l) => (h("a", { class: "social__link", href: l.href, "aria-label": l.platform, target: isExternalHref(l.href) ? '_blank' : undefined, rel: isExternalHref(l.href) ? 'noreferrer noopener' : undefined }, h("span", { class: "social__icon", "aria-hidden": "true" }, h(SocialIcon, { platform: l.platform })))))));
     }
-    renderColumns() {
-        const columns = this.resolved.columns;
-        if (columns.length === 0)
+    renderMenu() {
+        const menu = this.resolved.menu;
+        if (menu.length === 0)
             return null;
-        return (h("div", { class: "columns" }, columns.map((column, columnIndex) => (h("div", { class: "columns__col", key: columnIndex }, columnIndex > 0 ? h("div", { class: "columns__divider", "aria-hidden": "true" }) : null, h("nav", { class: "columns__links", "aria-label": `Footer links column ${columnIndex + 1}` }, column.links.map((l, linkIndex) => (h("a", { class: "footer-link", href: l.href, key: linkIndex, target: linkOpensNewTab(l) ? '_blank' : undefined, rel: linkOpensNewTab(l) ? 'noreferrer noopener' : undefined }, l.label)))))))));
+        return (h("div", { class: "columns" }, menu.map((links, columnIndex) => (h("div", { class: "columns__col", key: columnIndex }, columnIndex > 0 ? h("div", { class: "columns__divider", "aria-hidden": "true" }) : null, h("nav", { class: "columns__links", "aria-label": `Footer links column ${columnIndex + 1}` }, links.map((l, linkIndex) => (h("a", { class: "footer-link", href: l.href, key: linkIndex, target: linkTarget(l), rel: linkRel(l) }, l.label)))))))));
     }
     render() {
-        return (h("footer", { key: 'ba0581c526990148d89fca1c9d6bd69a7d94ab4a', class: "footer" }, h("div", { key: '929f83df41eddc9128036c76108c36182aebe6d7', class: "container footer__inner" }, this.renderSocialLinks(), h("div", { key: '3635cfe0c5e6f4efb79e28a776b6974840875f88', class: "standard" }, this.renderColumns(), this.renderLegalText()))));
+        return (h("footer", { key: '44ce6d694eb145005f006b5a02ec68fe2da8ca44', class: "footer" }, h("div", { key: '43dbb00e195a561a44cd9ae0e843c448dce546bb', class: "container footer__inner" }, this.renderSocialLinks(), h("div", { key: '1ede37520397d4fa63671dccc7e3f83f26ac0955', class: "standard" }, this.renderMenu(), this.renderLegalText()))));
     }
     static get is() { return "weg-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -154,7 +150,7 @@ export class WegFooter {
                 "mutable": false,
                 "complexType": {
                     "original": "LayoutData | string",
-                    "resolved": "string | { header?: Partial<LayoutHeaderData>; footer?: Partial<{ social: unknown; columns: unknown; credits: unknown; copyright: unknown; }>; }",
+                    "resolved": "string | { header?: Partial<LayoutHeaderData>; footer?: Partial<LayoutFooterData>; }",
                     "references": {
                         "LayoutData": {
                             "location": "import",
@@ -168,7 +164,7 @@ export class WegFooter {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Layout payload, supplied by the host application.\r\n\r\nIn JS / framework templates, pass the object directly (e.g. Angular\r\n`[layout]=\"layoutData\"`, React `layout={layoutData}`, vanilla\r\n`el.layout = layoutData`).\r\n\r\nIn plain HTML, pass the same JSON as a string on the `layout` attribute.\r\n\r\nExpected shape:\r\n```json\r\n{\r\n  \"footer\": {\r\n    \"social\": [{ \"platform\": \"LinkedIn\", \"href\": \"https://...\" }],\r\n    \"columns\": [{ \"links\": [{ \"label\": \"About Us\", \"href\": \"/about\" }] }],\r\n    \"credits\": \"...\",\r\n    \"copyright\": \"...\"\r\n  }\r\n}\r\n```"
+                    "text": "Layout payload, supplied by the host application.\r\n\r\nIn JS / framework templates, pass the object directly (e.g. Angular\r\n`[layout]=\"layoutData\"`, React `layout={layoutData}`, vanilla\r\n`el.layout = layoutData`).\r\n\r\nIn plain HTML, pass the same JSON as a string on the `layout` attribute.\r\n\r\nExpected shape:\r\n```json\r\n{\r\n  \"footer\": {\r\n    \"social\": [{ \"platform\": \"LinkedIn\", \"href\": \"https://...\" }],\r\n    \"menu\": [[{ \"label\": \"About Us\", \"href\": \"/about\" }]],\r\n    \"credits\": \"...\",\r\n    \"copyright\": \"...\"\r\n  }\r\n}\r\n```"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -26,7 +26,7 @@
 
 @media (width >= 960px) {
   .header {
-    border-bottom-width: 4px;
+    border-bottom-width: 0.25rem;
   }
 }
 
@@ -38,7 +38,7 @@
 .header--menu-open {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -91,7 +91,7 @@
 }
 
 .logo {
-  height: 40px;
+  height: 2.5rem;
   width: auto;
 }
 
@@ -154,6 +154,7 @@
 
 .main-nav-panel {
   display: none;
+  margin-inline: -0.5rem;
 }
 
 @media (width >= 960px) {
@@ -169,7 +170,7 @@
 }
 
 .main-nav {
-  padding: 0 16px 24px;
+  padding: 0 1rem 1.5rem;
 }
 
 @media (width >= 960px) {
@@ -178,7 +179,7 @@
     align-items: center;
     justify-content: flex-end;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 1rem;
     padding: 0;
   }
 }
@@ -225,7 +226,7 @@
 .nav-link {
   display: block;
   width: 100%;
-  padding: 16px 0;
+  padding: 1rem 0;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
@@ -246,9 +247,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 0.75rem;
   width: 100%;
-  padding: 16px 0;
+  padding: 1rem 0;
   border: none;
   background: transparent;
   font: inherit;
@@ -277,56 +278,56 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 999rem;
   background: #312e81;
   color: #ffffff;
   flex-shrink: 0;
 }
 
 .nav-dropdown__panel {
-  padding: 0 0 12px;
+  padding: 0 0 0.75rem;
 }
 
 @media (width >= 960px) {
   .nav-dropdown__panel {
     position: absolute;
-    top: calc(100% + 8px);
+    top: calc(100% + 0.5rem);
     left: 0;
-    z-index: 50;
-    min-width: 280px;
-    padding: 12px 0 12px 12px;
+    z-index: 500;
+    min-width: 17.5rem;
+    padding: 0.75rem 0 0.75rem 0.75rem;
     border: 1px solid #e2e8f0;
-    border-radius: 8px;
+    border-radius: 0.5rem;
     background: #f8fafc;
-    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
+    box-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.08);
   }
 
   .nav-dropdown__panel::before {
     content: '';
     position: absolute;
-    top: -8px;
+    top: -0.5rem;
     left: 0;
     right: 0;
-    height: 8px;
+    height: 0.5rem;
   }
 }
 
 .nav-dropdown__accent {
-  border-left: 4px solid var(--weg-color-accent);
-  padding-left: 12px;
+  border-left: 0.25rem solid var(--weg-color-accent);
+  padding-left: 0.75rem;
 }
 
 .nav-dropdown__links {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .nav-dropdown__link {
   display: block;
-  padding: 10px 0;
+  padding: 0.625rem 0;
   font-weight: 400;
   color: inherit;
   text-decoration: none;
@@ -338,9 +339,9 @@
 }
 
 .nav-dropdown__link:focus-visible {
-  outline: 2px solid var(--weg-color-accent);
-  outline-offset: 2px;
-  border-radius: 4px;
+  outline: 0.125rem solid var(--weg-color-accent);
+  outline-offset: 0.125rem;
+  border-radius: 0.25rem;
 }
 
 @media (width >= 960px) {
@@ -380,7 +381,7 @@
     align-items: center;
     width: auto;
     padding: 0.5rem;
-    border-radius: 8px;
+    border-radius: 0.5rem;
   }
 
   .nav-dropdown__trigger {
@@ -408,7 +409,7 @@
 .auth-button {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
@@ -441,11 +442,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   padding: 0;
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   background: transparent;
   color: inherit;
   cursor: pointer;