weg-shared-layout 0.0.23 → 0.0.24

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

@@ -1,201 +1,218 @@
-.footer {
-  background: #030712; /* close to tailwind gray-950 */
-  color: #ffffff;
-  font-family: var(--weg-font-family);
-  font-weight: 300;
-}
-
-.footer__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-  padding-block: 32px;
-}
-
-.social {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-}
-
-.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;
-  font-family: 'Open Sans', var(--weg-font-family);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 24px;
-  display: block;
-  width: 100%;
-  text-align: center;
-  text-decoration-line: underline;
-  text-decoration-style: solid;
-  text-decoration-skip-ink: none;
-  text-decoration-thickness: auto;
-  text-underline-offset: auto;
-  text-underline-position: from-font;
-  outline: none;
-}
-
-.footer-link:hover {
-  opacity: 0.9;
-}
-
-.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;
-}
-
-.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;
-}
-
-.columns {
-  width: 100%;
-  display: grid;
-  gap: 0;
-  grid-template-columns: 1fr;
-}
-
-.columns__col {
-  display: flex;
-  flex: 1 1 0;
-  min-width: 0;
-  width: 100%;
-  align-items: stretch;
-  flex-direction: column;
-}
-
-.columns__col:not(:first-child) {
-  gap: 32px;
-}
-
-.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;
-}
-
-.columns__links {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 12px;
-  flex: 1;
-  width: 100%;
-  min-width: 0;
-  padding: 0 4px;
-  text-align: center;
-}
-
-/* md: matches --weg-breakpoint-md */
-@media (width >= 768px) {
-  .footer__inner {
-    gap: 36px;
-    padding-block: 56px;
-  }
-
-  .social {
-    gap: 28px;
-  }
-
-  .footer-link {
-    display: inline;
-    width: auto;
-    text-align: left;
-  }
-
-  .legal {
-    font-size: 18px;
-    line-height: 28px;
-  }
-
-  .standard {
-    font-size: 18px;
-    line-height: 28px;
-  }
-
-  .columns {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    justify-content: center;
-    gap: 0;
-  }
-
-  .columns__col {
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  .columns__col:not(:first-child) {
-    gap: 0;
-  }
-
-  .columns__divider {
-    width: 1px;
-    height: auto;
-    margin: 0 12px;
-  }
-
-  .columns__links {
-    align-items: flex-start;
-    padding: 0 12px;
-    text-align: left;
-  }
-}
+/**
+ * Breakpoint tokens (mobile-first min-width).
+ *
+ * - `@custom-media` names: e.g. `@media (--weg-md)` applies from 960px up.
+ *   Compiled by PostCSS in stencil.config.ts.
+ * - `--weg-breakpoint-*` variables: use in property values, e.g. `max-width: var(--weg-breakpoint-md)`.
+ *
+ * Import this file in component stylesheets, or rely on shared.css which already imports it.
+ */
+
+:host {
+  --weg-breakpoint-sm: 640px;
+  --weg-breakpoint-md: 960px;
+  --weg-breakpoint-lg: 1280px;
+  --weg-breakpoint-xl: 1440px;
+}
+
+
+.footer {
+  background: #030712; /* close to tailwind gray-950 */
+  color: #ffffff;
+  font-family: var(--weg-font-family);
+  font-weight: 300;
+}
+
+.footer__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding-block: 32px;
+}
+
+.social {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.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;
+  font-family: 'Open Sans', var(--weg-font-family);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 24px;
+  display: block;
+  width: 100%;
+  text-align: center;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+  outline: none;
+}
+
+.footer-link:hover {
+  opacity: 0.9;
+}
+
+.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;
+}
+
+.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;
+}
+
+.columns {
+  width: 100%;
+  display: grid;
+  gap: 0;
+  grid-template-columns: 1fr;
+}
+
+.columns__col {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.columns__col:not(:first-child) {
+  gap: 32px;
+}
+
+.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;
+}
+
+.columns__links {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  padding: 0 4px;
+  text-align: center;
+}
+
+@media (width >= 960px) {
+  .footer__inner {
+    gap: 36px;
+    padding-block: 56px;
+  }
+
+  .social {
+    gap: 28px;
+  }
+
+  .footer-link {
+    display: inline;
+    width: auto;
+    text-align: left;
+  }
+
+  .legal {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  .standard {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  .columns {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .columns__col {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .columns__col:not(:first-child) {
+    gap: 0;
+  }
+
+  .columns__divider {
+    width: 1px;
+    height: auto;
+    margin: 0 12px;
+  }
+
+  .columns__links {
+    align-items: flex-start;
+    padding: 0 12px;
+    text-align: left;
+  }
+}

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

@@ -133,7 +133,7 @@ export class WegFooter {
         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)))))))));
     }
     render() {
-        return (h("footer", { key: 'f592a5632d0b39833ac01384f8541082afc36c6b', class: "footer" }, h("div", { key: 'b988ca82747dea2a60e40d8140cd8adf0232bc54', class: "container footer__inner" }, this.renderSocialLinks(), h("div", { key: '0a66f43415f96f0ffbebd3f8e324f413ea29ec9d', class: "standard" }, this.renderColumns(), this.renderLegalText()))));
+        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()))));
     }
     static get is() { return "weg-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -168,7 +168,7 @@ export class WegFooter {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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    \"columns\": [{ \"links\": [{ \"label\": \"About Us\", \"href\": \"/about\" }] }],\n    \"credits\": \"...\",\n    \"copyright\": \"...\"\n  }\n}\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    \"columns\": [{ \"links\": [{ \"label\": \"About Us\", \"href\": \"/about\" }] }],\r\n    \"credits\": \"...\",\r\n    \"copyright\": \"...\"\r\n  }\r\n}\r\n```"
                 },
                 "getter": false,
                 "setter": false,