@jxsuite/starters 1.2.1 → 1.6.0

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

@@ -0,0 +1,92 @@
+{
+  "tagName": "mu-band",
+  "state": {
+    "index": "",
+    "label": "",
+    "tone": "chalk"
+  },
+  "style": {
+    "display": "block",
+    "borderBlockStart": "2px solid var(--color-ink)",
+    "paddingBlock": "var(--band-space)",
+    "paddingInline": "var(--gutter)",
+    "backgroundColor": "${state.tone === 'card' ? 'var(--color-card)' : state.tone === 'ink' ? 'var(--color-ink)' : 'var(--color-chalk)'}",
+    "color": "${state.tone === 'ink' ? 'var(--color-chalk)' : 'var(--color-ink)'}"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "marginInline": "auto",
+        "display": "grid",
+        "gridTemplateColumns": "var(--label-column) minmax(0, 1fr)",
+        "columnGap": "clamp(1.5rem, 4vw, 3.5rem)",
+        "@--md": {
+          "gridTemplateColumns": "minmax(0, 1fr)",
+          "rowGap": "1.75rem"
+        }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "alignItems": "start",
+            "gap": "0.6rem",
+            "@--md": {
+              "flexDirection": "row",
+              "alignItems": "baseline",
+              "gap": "0.9rem"
+            }
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "display": "${state.index ? 'block' : 'none'}",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.95rem",
+                "fontWeight": "500",
+                "fontVariantNumeric": "tabular-nums",
+                "lineHeight": "1",
+                "color": "${state.tone === 'ink' ? 'var(--color-chalk)' : 'var(--color-pigment)'}"
+              },
+              "textContent": "${state.index}"
+            },
+            {
+              "tagName": "span",
+              "attributes": { "aria-hidden": "true" },
+              "style": {
+                "display": "block",
+                "width": "2.25rem",
+                "height": "2px",
+                "backgroundColor": "${state.tone === 'ink' ? 'rgba(231, 227, 218, 0.5)' : 'var(--color-pigment)'}",
+                "@--md": { "display": "none" }
+              }
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "display": "${state.label ? 'block' : 'none'}",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.66rem",
+                "lineHeight": "1.5",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "${state.tone === 'ink' ? 'rgba(231, 227, 218, 0.7)' : 'var(--color-muted)'}"
+              },
+              "textContent": "${state.label}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": { "minWidth": "0" },
+          "children": [{ "tagName": "slot" }]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,101 @@
+{
+  "tagName": "mu-cta",
+  "state": {
+    "kicker": "",
+    "heading": "",
+    "text": "",
+    "label": "",
+    "href": "/visit/"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-ink)",
+    "color": "var(--color-chalk)",
+    "borderBlockStart": "2px solid var(--color-ink)",
+    "paddingBlock": "clamp(2.6rem, 6vw, 4rem)",
+    "paddingInline": "var(--gutter)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "marginInline": "auto",
+        "display": "flex",
+        "flexWrap": "wrap",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1.75rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "minWidth": "0" },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.kicker ? 'block' : 'none'}",
+                "margin": "0 0 0.9rem",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.66rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "rgba(231, 227, 218, 0.6)"
+              },
+              "textContent": "${state.kicker}"
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(1.7rem, 3.4vw, 2.5rem)",
+                "fontWeight": "500",
+                "lineHeight": "calc(1.1 * var(--leading-scale))",
+                "letterSpacing": "var(--display-tracking)",
+                "maxWidth": "20ch"
+              },
+              "textContent": "${state.heading}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.text ? 'block' : 'none'}",
+                "margin": "1rem 0 0",
+                "fontSize": "1.03rem",
+                "lineHeight": "1.65",
+                "color": "rgba(231, 227, 218, 0.75)",
+                "maxWidth": "46ch"
+              },
+              "textContent": "${state.text}"
+            }
+          ]
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.href}" },
+          "textContent": "${state.label}",
+          "style": {
+            "display": "inline-block",
+            "padding": "1rem 1.8rem",
+            "backgroundColor": "var(--color-chalk)",
+            "color": "var(--color-ink)",
+            "border": "2px solid var(--color-chalk)",
+            "fontFamily": "var(--font-label)",
+            "fontSize": "0.72rem",
+            "letterSpacing": "var(--label-tracking)",
+            "textTransform": "var(--label-case)",
+            "textDecoration": "none",
+            "whiteSpace": "nowrap",
+            "transition": "background-color 0.15s, color 0.15s",
+            ":hover": {
+              "backgroundColor": "transparent",
+              "color": "var(--color-chalk)"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

package/sites/museum/components/mu-exhibition-card.json

@@ -0,0 +1,191 @@
+{
+  "tagName": "mu-exhibition-card",
+  "state": {
+    "title": "",
+    "description": "",
+    "gallery": "",
+    "status": "",
+    "href": "#",
+    "hue": 214,
+    "date": "",
+    "until": "",
+    "locale": "en",
+    "opens": {
+      "$expression": {
+        "operator": "call",
+        "target": {
+          "$ref": "window#/Intl/formatDate"
+        },
+        "value": [
+          {
+            "$ref": "#/state/date"
+          },
+          {
+            "$ref": "#/state/locale"
+          },
+          {
+            "day": "numeric",
+            "month": "long"
+          }
+        ]
+      }
+    },
+    "closes": {
+      "$expression": {
+        "operator": "call",
+        "target": {
+          "$ref": "window#/Intl/formatDate"
+        },
+        "value": [
+          {
+            "$ref": "#/state/until"
+          },
+          {
+            "$ref": "#/state/locale"
+          },
+          {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric"
+          }
+        ]
+      }
+    }
+  },
+  "style": {
+    "display": "block",
+    "height": "100%"
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": {
+        "href": "${state.href}"
+      },
+      "style": {
+        "display": "flex",
+        "flexDirection": "column",
+        "height": "100%",
+        "border": "2px solid var(--color-ink)",
+        "backgroundColor": "var(--color-card)",
+        "color": "inherit",
+        "textDecoration": "none",
+        "transition": "border-color 0.15s",
+        ":hover": {
+          "borderColor": "var(--color-pigment)"
+        }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "attributes": {
+            "aria-hidden": "true"
+          },
+          "style": {
+            "aspectRatio": "5 / 4",
+            "borderBlockEnd": "2px solid var(--color-ink)",
+            "background": "radial-gradient(circle at 64% 38%, hsl(${state.hue} 55% 45%) 0 29%, transparent 29.5%), repeating-linear-gradient(${state.hue}deg, var(--color-chalk-deep) 0 9px, var(--color-card) 9px 18px)"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "0.75rem",
+            "flex": "1",
+            "padding": "1.25rem"
+          },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.status ? 'inline-block' : 'none'}",
+                "alignSelf": "start",
+                "margin": "0",
+                "paddingInline": "0.55rem",
+                "paddingBlock": "0.3rem",
+                "backgroundColor": "var(--color-pigment-tint)",
+                "color": "var(--color-pigment-deep)",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.62rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)"
+              },
+              "textContent": "${state.status}"
+            },
+            {
+              "tagName": "h3",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-display)",
+                "fontSize": "1.3rem",
+                "fontWeight": "500",
+                "lineHeight": "calc(1.15 * var(--leading-scale))",
+                "letterSpacing": "-0.015em"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "flex",
+                "flexWrap": "wrap",
+                "gap": "0.4rem",
+                "margin": "0",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.72rem",
+                "fontVariantNumeric": "tabular-nums",
+                "color": "var(--color-pigment)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "${state.opens}"
+                },
+                {
+                  "tagName": "span",
+                  "attributes": {
+                    "aria-hidden": "true"
+                  },
+                  "style": {
+                    "opacity": "0.55"
+                  },
+                  "textContent": "—"
+                },
+                {
+                  "tagName": "span",
+                  "textContent": "${state.closes}"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0",
+                "fontSize": "0.97rem",
+                "lineHeight": "1.6",
+                "color": "var(--color-muted)"
+              },
+              "textContent": "${state.description}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "auto 0 0",
+                "paddingBlockStart": "0.9rem",
+                "borderBlockStart": "1px solid var(--color-hairline)",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.64rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "var(--color-muted)"
+              },
+              "textContent": "${state.gallery}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/museum/components/mu-exhibition-row.json

@@ -0,0 +1,237 @@
+{
+  "tagName": "mu-exhibition-row",
+  "state": {
+    "index": "",
+    "title": "",
+    "description": "",
+    "gallery": "",
+    "curator": "",
+    "curatorLabel": "Curated by",
+    "href": "#",
+    "hue": 214,
+    "date": "",
+    "until": "",
+    "locale": "en",
+    "order": 0,
+    "orderLabel": {
+      "$expression": {
+        "operator": "call",
+        "target": {
+          "$ref": "window#/Intl/formatNumber"
+        },
+        "value": [
+          {
+            "$ref": "#/state/order"
+          },
+          {
+            "$ref": "#/state/locale"
+          },
+          {
+            "minimumIntegerDigits": 2,
+            "useGrouping": false
+          }
+        ]
+      }
+    },
+    "opens": {
+      "$expression": {
+        "operator": "call",
+        "target": {
+          "$ref": "window#/Intl/formatDate"
+        },
+        "value": [
+          {
+            "$ref": "#/state/date"
+          },
+          {
+            "$ref": "#/state/locale"
+          },
+          {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric"
+          }
+        ]
+      }
+    },
+    "closes": {
+      "$expression": {
+        "operator": "call",
+        "target": {
+          "$ref": "window#/Intl/formatDate"
+        },
+        "value": [
+          {
+            "$ref": "#/state/until"
+          },
+          {
+            "$ref": "#/state/locale"
+          },
+          {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric"
+          }
+        ]
+      }
+    }
+  },
+  "style": {
+    "display": "block",
+    "borderBlockStart": "1px solid var(--color-hairline)"
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": {
+        "href": "${state.href}"
+      },
+      "style": {
+        "display": "grid",
+        "gridTemplateColumns": "var(--label-column) 7.5rem minmax(0, 1fr)",
+        "columnGap": "clamp(1.25rem, 3.5vw, 3rem)",
+        "alignItems": "start",
+        "paddingBlock": "clamp(1.75rem, 4vw, 2.75rem)",
+        "color": "inherit",
+        "textDecoration": "none",
+        "@--md": {
+          "gridTemplateColumns": "4.5rem minmax(0, 1fr)",
+          "rowGap": "1rem"
+        },
+        ":hover": {
+          "color": "var(--color-pigment)"
+        },
+        "transition": "color 0.15s"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-label)",
+            "fontSize": "0.95rem",
+            "fontVariantNumeric": "tabular-nums",
+            "lineHeight": "1.1",
+            "color": "var(--color-pigment)"
+          },
+          "textContent": "${state.index ? state.index : state.orderLabel}"
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "aria-hidden": "true"
+          },
+          "style": {
+            "display": "block",
+            "aspectRatio": "1",
+            "border": "2px solid var(--color-ink)",
+            "background": "radial-gradient(circle at 60% 40%, hsl(${state.hue} 55% 45%) 0 34%, transparent 34.5%), repeating-linear-gradient(${state.hue}deg, var(--color-chalk-deep) 0 7px, var(--color-card) 7px 14px)",
+            "@--md": {
+              "display": "none"
+            }
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "minWidth": "0"
+          },
+          "children": [
+            {
+              "tagName": "h2",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(1.6rem, 3.4vw, 2.4rem)",
+                "fontWeight": "500",
+                "lineHeight": "calc(1.06 * var(--leading-scale))",
+                "letterSpacing": "var(--display-tracking)"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "flex",
+                "flexWrap": "wrap",
+                "gap": "0.45rem",
+                "margin": "0.85rem 0 0",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.7rem",
+                "fontVariantNumeric": "tabular-nums",
+                "color": "var(--color-pigment)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "${state.opens}"
+                },
+                {
+                  "tagName": "span",
+                  "attributes": {
+                    "aria-hidden": "true"
+                  },
+                  "style": {
+                    "opacity": "0.55"
+                  },
+                  "textContent": "—"
+                },
+                {
+                  "tagName": "span",
+                  "textContent": "${state.closes}"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0.9rem 0 0",
+                "fontSize": "1.05rem",
+                "lineHeight": "1.7",
+                "color": "var(--color-muted)",
+                "maxWidth": "var(--measure)"
+              },
+              "textContent": "${state.description}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "flex",
+                "flexWrap": "wrap",
+                "gap": "0.4rem 1.5rem",
+                "margin": "1.1rem 0 0",
+                "fontFamily": "var(--font-label)",
+                "fontSize": "0.64rem",
+                "letterSpacing": "var(--label-tracking)",
+                "textTransform": "var(--label-case)",
+                "color": "var(--color-muted)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "${state.gallery}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "${state.curator ? 'inline-flex' : 'none'}",
+                    "gap": "0.35rem"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "textContent": "${state.curatorLabel}"
+                    },
+                    {
+                      "tagName": "span",
+                      "textContent": "${state.curator}"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,64 @@
+{
+  "tagName": "mu-fact",
+  "state": {
+    "term": "",
+    "value": "",
+    "note": "",
+    "layout": "row"
+  },
+  "style": {
+    "display": "grid",
+    "gridTemplateColumns": "${state.layout === 'stack' ? 'minmax(0, 1fr)' : 'var(--label-column) minmax(0, 1fr)'}",
+    "columnGap": "clamp(1rem, 3vw, 2rem)",
+    "paddingBlock": "0.95rem",
+    "borderBlockStart": "1px solid var(--color-hairline)",
+    "@--sm": {
+      "gridTemplateColumns": "minmax(0, 1fr)",
+      "rowGap": "0.3rem"
+    },
+    "rowGap": "0.3rem"
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "style": {
+        "paddingBlockStart": "0.28rem",
+        "fontFamily": "var(--font-label)",
+        "fontSize": "0.66rem",
+        "lineHeight": "1.5",
+        "letterSpacing": "var(--label-tracking)",
+        "textTransform": "var(--label-case)",
+        "color": "var(--color-muted)"
+      },
+      "textContent": "${state.term}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "minWidth": "0"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "fontSize": "1.03rem",
+            "lineHeight": "1.55"
+          },
+          "textContent": "${state.value}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.note ? 'block' : 'none'}",
+            "margin": "0.25rem 0 0",
+            "fontSize": "0.9rem",
+            "lineHeight": "1.55",
+            "color": "var(--color-muted)"
+          },
+          "textContent": "${state.note}"
+        }
+      ]
+    }
+  ]
+}