@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -1,256 +0,0 @@
-{
-  "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

@@ -1,236 +0,0 @@
-{
-  "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

@@ -1,63 +0,0 @@
-{
-  "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

@@ -1,44 +0,0 @@
-{
-  "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)"
-          }
-        }
-      ]
-    }
-  ]
-}