@jxsuite/starters 1.2.1 → 1.6.0

package/sites/museum/components/mu-footer.json

@@ -0,0 +1,256 @@
+{
+  "tagName": "mu-footer",
+  "state": {
+    "brand": "Atrium",
+    "tagline": "",
+    "visitLabel": "Find us",
+    "address": "",
+    "hours": "",
+    "readLabel": "Read",
+    "exhibitionsLink": "Exhibitions",
+    "visitLink": "Plan your visit",
+    "aboutLink": "About the museum",
+    "exhibitionsHref": "/exhibitions/",
+    "visitHref": "/visit/",
+    "aboutHref": "/about/",
+    "contactLabel": "Contact",
+    "email": "",
+    "phone": "",
+    "legal": "",
+    "credit": ""
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-ink-deep)",
+    "color": "var(--color-chalk)",
+    "borderBlockStart": "2px solid var(--color-ink)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "marginInline": "auto",
+        "paddingInline": "var(--gutter)",
+        "paddingBlock": "clamp(3rem, 6vw, 4.5rem) 2rem",
+        "display": "grid",
+        "gridTemplateColumns": "minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)",
+        "gap": "2.5rem",
+        "@--lg": { "gridTemplateColumns": "minmax(0, 1fr) minmax(0, 1fr)" },
+        "@--sm": { "gridTemplateColumns": "minmax(0, 1fr)", "gap": "2rem" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.7rem",
+                "marginBlockEnd": "1.1rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "attributes": { "aria-hidden": "true" },
+                  "style": {
+                    "width": "1.05rem",
+                    "height": "1.05rem",
+                    "borderRadius": "50%",
+                    "backgroundColor": "var(--color-chalk)",
+                    "flex": "0 0 auto"
+                  }
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-display)",
+                    "fontSize": "1.55rem",
+                    "fontWeight": "700",
+                    "lineHeight": "1",
+                    "letterSpacing": "var(--display-tracking)"
+                  },
+                  "textContent": "${state.brand}"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0",
+                "maxWidth": "38ch",
+                "fontSize": "0.98rem",
+                "lineHeight": "1.7",
+                "color": "rgba(231, 227, 218, 0.72)"
+              },
+              "textContent": "${state.tagline}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 0.9rem",
+                "paddingBlockEnd": "0.7rem",
+                "borderBlockEnd": "1px solid rgba(231, 227, 218, 0.2)",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.64rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "rgba(231, 227, 218, 0.55)"
+              },
+              "textContent": "${state.visitLabel}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 0.6rem",
+                "fontSize": "0.95rem",
+                "lineHeight": "1.6",
+                "color": "rgba(231, 227, 218, 0.85)"
+              },
+              "textContent": "${state.address}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0",
+                "fontSize": "0.95rem",
+                "lineHeight": "1.6",
+                "color": "rgba(231, 227, 218, 0.6)"
+              },
+              "textContent": "${state.hours}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 0.9rem",
+                "paddingBlockEnd": "0.7rem",
+                "borderBlockEnd": "1px solid rgba(231, 227, 218, 0.2)",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.64rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "rgba(231, 227, 218, 0.55)"
+              },
+              "textContent": "${state.readLabel}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.exhibitionsHref}" },
+              "textContent": "${state.exhibitionsLink}",
+              "style": {
+                "display": "block",
+                "marginBlockEnd": "0.55rem",
+                "fontSize": "0.95rem",
+                "color": "rgba(231, 227, 218, 0.85)",
+                "textDecoration": "none",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-chalk)" }
+              }
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.visitHref}" },
+              "textContent": "${state.visitLink}",
+              "style": {
+                "display": "block",
+                "marginBlockEnd": "0.55rem",
+                "fontSize": "0.95rem",
+                "color": "rgba(231, 227, 218, 0.85)",
+                "textDecoration": "none",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-chalk)" }
+              }
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.aboutHref}" },
+              "textContent": "${state.aboutLink}",
+              "style": {
+                "display": "block",
+                "fontSize": "0.95rem",
+                "color": "rgba(231, 227, 218, 0.85)",
+                "textDecoration": "none",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-chalk)" }
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 0.9rem",
+                "paddingBlockEnd": "0.7rem",
+                "borderBlockEnd": "1px solid rgba(231, 227, 218, 0.2)",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.64rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "rgba(231, 227, 218, 0.55)"
+              },
+              "textContent": "${state.contactLabel}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 0.55rem",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.9rem",
+                "color": "rgba(231, 227, 218, 0.85)"
+              },
+              "children": [{ "tagName": "bdi", "textContent": "${state.email}" }]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.9rem",
+                "color": "rgba(231, 227, 218, 0.85)"
+              },
+              "children": [{ "tagName": "bdi", "textContent": "${state.phone}" }]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "marginInline": "auto",
+        "paddingInline": "var(--gutter)",
+        "paddingBlock": "1.4rem",
+        "borderBlockStart": "1px solid rgba(231, 227, 218, 0.2)",
+        "display": "flex",
+        "flexWrap": "wrap",
+        "justifyContent": "space-between",
+        "gap": "1rem",
+        "fontFamily": "var(--font-label)",
+        "fontSize": "0.64rem",
+        "letterSpacing": "var(--label-tracking)",
+        "textTransform": "var(--label-case)",
+        "color": "rgba(231, 227, 218, 0.5)"
+      },
+      "children": [
+        { "tagName": "p", "style": { "margin": "0" }, "textContent": "${state.legal}" },
+        { "tagName": "p", "style": { "margin": "0" }, "textContent": "${state.credit}" }
+      ]
+    }
+  ]
+}

package/sites/museum/components/mu-hero.json

@@ -0,0 +1,236 @@
+{
+  "tagName": "mu-hero",
+  "state": {
+    "kicker": "",
+    "title": "",
+    "standfirst": "",
+    "primaryLabel": "",
+    "primaryHref": "/visit/",
+    "secondaryLabel": "",
+    "secondaryHref": "/exhibitions/",
+    "noteLabel": "",
+    "note": ""
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-card)",
+    "paddingBlock": "clamp(2.75rem, 7vw, 5.5rem)",
+    "paddingInline": "var(--gutter)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "marginInline": "auto",
+        "display": "grid",
+        "gridTemplateColumns": "minmax(0, 1.4fr) minmax(0, 0.85fr)",
+        "columnGap": "clamp(2rem, 5vw, 4.5rem)",
+        "alignItems": "center",
+        "@--md": {
+          "gridTemplateColumns": "minmax(0, 1fr)",
+          "rowGap": "2.75rem"
+        }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.4rem",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.68rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "var(--color-pigment)"
+              },
+              "textContent": "${state.kicker}"
+            },
+            {
+              "tagName": "h1",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(2.7rem, 7vw, 5.2rem)",
+                "fontWeight": "700",
+                "lineHeight": "calc(0.95 * var(--leading-scale))",
+                "letterSpacing": "var(--display-tracking)",
+                "maxWidth": "14ch"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "1.6rem 0 0",
+                "fontSize": "1.16rem",
+                "lineHeight": "1.65",
+                "color": "var(--color-muted)",
+                "maxWidth": "46ch"
+              },
+              "textContent": "${state.standfirst}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "flexWrap": "wrap",
+                "gap": "0.9rem",
+                "marginBlockStart": "2.25rem",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.72rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)"
+              },
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": {
+                    "href": "${state.primaryHref}"
+                  },
+                  "textContent": "${state.primaryLabel}",
+                  "style": {
+                    "display": "inline-block",
+                    "padding": "0.95rem 1.7rem",
+                    "border": "2px solid var(--color-ink)",
+                    "backgroundColor": "var(--color-ink)",
+                    "color": "var(--color-chalk)",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s, border-color 0.15s",
+                    ":hover": {
+                      "backgroundColor": "var(--color-pigment)",
+                      "borderColor": "var(--color-pigment)"
+                    }
+                  }
+                },
+                {
+                  "tagName": "a",
+                  "attributes": {
+                    "href": "${state.secondaryHref}"
+                  },
+                  "textContent": "${state.secondaryLabel}",
+                  "style": {
+                    "display": "inline-block",
+                    "padding": "0.95rem 1.7rem",
+                    "border": "2px solid var(--color-ink)",
+                    "backgroundColor": "transparent",
+                    "color": "var(--color-ink)",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s, color 0.15s",
+                    ":hover": {
+                      "backgroundColor": "var(--color-ink)",
+                      "color": "var(--color-chalk)"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.note ? 'flex' : 'none'}",
+                "flexWrap": "wrap",
+                "gap": "0.75rem",
+                "margin": "2.25rem 0 0",
+                "paddingBlockStart": "1.1rem",
+                "borderBlockStart": "1px solid var(--color-hairline)",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.68rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "var(--color-muted)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "color": "var(--color-pigment)"
+                  },
+                  "textContent": "${state.noteLabel}"
+                },
+                {
+                  "tagName": "span",
+                  "textContent": "${state.note}"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "aria-hidden": "true"
+          },
+          "style": {
+            "border": "2px solid var(--color-ink)",
+            "backgroundColor": "var(--color-chalk)",
+            "padding": "clamp(0.9rem, 2.5vw, 1.75rem)",
+            "display": "grid",
+            "gap": "clamp(0.7rem, 2vw, 1.1rem)",
+            "maxWidth": "23rem",
+            "marginInline": "auto",
+            "width": "100%",
+            "boxSizing": "border-box"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "aspectRatio": "1",
+                "borderRadius": "50%",
+                "display": "grid",
+                "placeItems": "center",
+                "background": "conic-gradient(from -90deg, var(--color-pigment) 0 25%, var(--color-pigment-deep) 25% 50%, var(--color-chalk-deep) 50% 75%, var(--color-card) 75% 100%)"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "width": "38%",
+                    "aspectRatio": "1",
+                    "borderRadius": "50%",
+                    "backgroundColor": "var(--color-card)",
+                    "border": "2px solid var(--color-ink)"
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "grid",
+                "gap": "0.4rem"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "height": "3px",
+                    "backgroundColor": "var(--color-ink)"
+                  }
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "height": "1px",
+                    "backgroundColor": "var(--color-hairline)"
+                  }
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "height": "1px",
+                    "width": "62%",
+                    "backgroundColor": "var(--color-hairline)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/museum/components/mu-more.json

@@ -0,0 +1,63 @@
+{
+  "tagName": "mu-more",
+  "state": {
+    "label": "",
+    "href": "#",
+    "space": "0"
+  },
+  "style": {
+    "display": "block"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "marginBlockStart": "${state.space}"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": {
+            "href": "${state.href}"
+          },
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "baseline",
+            "gap": "0.6rem",
+            "fontFamily": "var(--font-label)",
+            "fontSize": "0.7rem",
+            "letterSpacing": "var(--label-tracking)",
+            "textTransform": "var(--label-case)",
+            "textDecoration": "none",
+            "paddingBlockEnd": "0.2rem",
+            "color": "var(--color-pigment)",
+            "borderBlockEnd": "2px solid var(--color-pigment)",
+            "transition": "color 0.15s, border-color 0.15s",
+            ":hover": {
+              "color": "var(--color-ink)",
+              "borderColor": "var(--color-ink)"
+            }
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "${state.label}"
+            },
+            {
+              "tagName": "span",
+              "attributes": {
+                "aria-hidden": "true"
+              },
+              "style": {
+                "display": "inline-block",
+                "lineHeight": "1",
+                "transform": "scaleX(var(--flip-inline, 1))"
+              },
+              "textContent": "→"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/museum/components/mu-oculus.json

@@ -0,0 +1,44 @@
+{
+  "tagName": "mu-oculus",
+  "state": {
+    "size": "26rem",
+    "tone": "chalk"
+  },
+  "style": {
+    "display": "block",
+    "width": "100%",
+    "maxWidth": "${state.size}",
+    "marginInline": "auto",
+    "border": "2px solid var(--color-ink)",
+    "padding": "clamp(0.9rem, 2.5vw, 1.75rem)",
+    "boxSizing": "border-box",
+    "backgroundColor": "${state.tone === 'card' ? 'var(--color-card)' : 'var(--color-chalk)'}"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "attributes": {
+        "aria-hidden": "true"
+      },
+      "style": {
+        "aspectRatio": "1",
+        "borderRadius": "50%",
+        "display": "grid",
+        "placeItems": "center",
+        "background": "conic-gradient(from -90deg, var(--color-pigment) 0 25%, var(--color-pigment-deep) 25% 50%, var(--color-chalk-deep) 50% 75%, var(--color-card) 75% 100%)"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "width": "40%",
+            "aspectRatio": "1",
+            "borderRadius": "50%",
+            "backgroundColor": "var(--color-card)",
+            "border": "2px solid var(--color-ink)"
+          }
+        }
+      ]
+    }
+  ]
+}