weg-shared-layout 0.0.38 → 0.0.40

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

@@ -1,263 +1,263 @@
-/**
- * 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: 1.25rem;
-  padding-block: 2rem;
-  padding-inline: 0;
-}
-
-@media (width >= 960px) {
-  .footer__inner {
-    gap: 2.25rem;
-    padding-block: 3.5rem;
-  }
-}
-
-.social {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-@media (width >= 960px) {
-  .social {
-    gap: 1.75rem;
-  }
-}
-
-.social__link {
-  width: 3rem;
-  height: 3rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999rem;
-  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: 3rem;
-  height: 3rem;
-}
-
-.footer-link {
-  color: #ffffff;
-  font-family: 'Open Sans', var(--weg-font-family);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 1.5rem;
-  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;
-}
-
-@media (width >= 960px) {
-  .footer-link {
-    display: inline;
-    width: auto;
-    text-align: left;
-  }
-}
-
-.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: 1rem;
-  line-height: 1.5rem;
-}
-
-@media (width >= 960px) {
-  .legal {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-}
-
-.legal__p {
-  margin: 0;
-}
-
-.standard {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2.25rem;
-  text-align: center;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-@media (width >= 960px) {
-  .standard {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-}
-
-.columns {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0;
-}
-
-.columns__col {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  min-width: 0;
-}
-
-.columns__col:not(:first-child) {
-  gap: 2rem;
-}
-
-.columns__divider {
-  display: block;
-  flex-shrink: 0;
-  width: 100%;
-  height: 1px;
-  margin-top: 2rem;
-  background: rgba(255, 255, 255, 0.35);
-}
-
-.columns__links {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.75rem;
-  width: 100%;
-  min-width: 0;
-  text-align: center;
-}
-
-/* sm: 6 footer columns → 3 × 2 grid */
-@media (width >= 640px) {
-  .columns {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 1.5rem 3rem;
-  }
-
-  .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 {
-    display: inline;
-    width: auto;
-    text-align: left;
-  }
-
-  .columns__links {
-    align-items: flex-start;
-    text-align: left;
-  }
-}
-
-/* md: 6 footer columns → single row */
-@media (width >= 960px) {
-  .columns {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    justify-content: center;
-    gap: 0;
-  }
-
-  .columns__col {
-    flex: 1 1 0;
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  .columns__col:not(:first-child) {
-    gap: 0;
-  }
-
-  .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 1.5rem;
-  }
-
-  .columns__links {
-    flex: 1;
-    align-items: flex-start;
-    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: 1.25rem;
+  padding-block: 2rem;
+  padding-inline: 0;
+}
+
+@media (width >= 960px) {
+  .footer__inner {
+    gap: 2.25rem;
+    padding-block: 3.5rem;
+  }
+}
+
+.social {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+@media (width >= 960px) {
+  .social {
+    gap: 1.75rem;
+  }
+}
+
+.social__link {
+  width: 3rem;
+  height: 3rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999rem;
+  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: 3rem;
+  height: 3rem;
+}
+
+.footer-link {
+  color: #ffffff;
+  font-family: 'Open Sans', var(--weg-font-family);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 1.5rem;
+  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;
+}
+
+@media (width >= 960px) {
+  .footer-link {
+    display: inline;
+    width: auto;
+    text-align: left;
+  }
+}
+
+.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: 1rem;
+  line-height: 1.5rem;
+}
+
+@media (width >= 960px) {
+  .legal {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+.legal__p {
+  margin: 0;
+}
+
+.standard {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.25rem;
+  text-align: center;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@media (width >= 960px) {
+  .standard {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+.columns {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+
+.columns__col {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+}
+
+.columns__col:not(:first-child) {
+  gap: 2rem;
+}
+
+.columns__divider {
+  display: block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 1px;
+  margin-top: 2rem;
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.columns__links {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+  text-align: center;
+}
+
+/* sm: 6 footer columns → 3 × 2 grid */
+@media (width >= 640px) {
+  .columns {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.5rem 3rem;
+  }
+
+  .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 {
+    display: inline;
+    width: auto;
+    text-align: left;
+  }
+
+  .columns__links {
+    align-items: flex-start;
+    text-align: left;
+  }
+}
+
+/* md: 6 footer columns → single row */
+@media (width >= 960px) {
+  .columns {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .columns__col {
+    flex: 1 1 0;
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .columns__col:not(:first-child) {
+    gap: 0;
+  }
+
+  .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 1.5rem;
+  }
+
+  .columns__links {
+    flex: 1;
+    align-items: flex-start;
+    text-align: left;
+  }
+}

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

@@ -129,7 +129,7 @@ export class WegFooter {
         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: '44ce6d694eb145005f006b5a02ec68fe2da8ca44', class: "footer" }, h("div", { key: '43dbb00e195a561a44cd9ae0e843c448dce546bb', class: "container footer__inner" }, this.renderSocialLinks(), h("div", { key: '1ede37520397d4fa63671dccc7e3f83f26ac0955', class: "standard" }, this.renderMenu(), this.renderLegalText()))));
+        return (h("footer", { key: '9cee16848dc91bb3a035c51168d02786626cb717', class: "footer" }, h("div", { key: '7e5b929cb2ffb5f04b96f34154a0b8320fa6c0c2', class: "container footer__inner" }, this.renderSocialLinks(), h("div", { key: '110bebc44f94fd4241675e00a9fb444e933d3311', class: "standard" }, this.renderMenu(), this.renderLegalText()))));
     }
     static get is() { return "weg-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -164,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    \"menu\": [[{ \"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.\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    \"menu\": [[{ \"label\": \"About Us\", \"href\": \"/about\" }]],\n    \"credits\": \"...\",\n    \"copyright\": \"...\"\n  }\n}\n```"
                 },
                 "getter": false,
                 "setter": false,