@jxsuite/starters 0.34.0

package/sites/event/components/ev-agenda-tabs.json

@@ -0,0 +1,542 @@
+{
+  "tagName": "ev-agenda-tabs",
+  "state": {
+    "track": "all"
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width-narrow)",
+    "margin": "0 auto",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "overflow": "hidden",
+    "boxShadow": "0 10px 40px rgba(23, 18, 43, 0.06)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "flexWrap": "wrap",
+        "gap": "0.6rem",
+        "padding": "1.1rem 1.4rem",
+        "borderBottom": "1px solid var(--color-border)",
+        "backgroundColor": "var(--color-bg-cream)"
+      },
+      "children": [
+        {
+          "tagName": "button",
+          "textContent": "All tracks",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/track" },
+              "value": "all"
+            }
+          },
+          "style": {
+            "padding": "0.5rem 1.15rem",
+            "borderRadius": "999px",
+            "cursor": "pointer",
+            "fontSize": "0.9rem",
+            "fontWeight": "600",
+            "fontFamily": "inherit",
+            "transition": "all 0.15s",
+            "border": "1px solid ${state.track === 'all' ? 'transparent' : 'var(--color-border)'}",
+            "color": "${state.track === 'all' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}",
+            "background": "${state.track === 'all' ? 'linear-gradient(135deg, var(--color-primary), var(--color-accent))' : 'var(--color-bg-white)'}"
+          }
+        },
+        {
+          "tagName": "button",
+          "textContent": "Main Stage",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/track" },
+              "value": "main"
+            }
+          },
+          "style": {
+            "padding": "0.5rem 1.15rem",
+            "borderRadius": "999px",
+            "cursor": "pointer",
+            "fontSize": "0.9rem",
+            "fontWeight": "600",
+            "fontFamily": "inherit",
+            "transition": "all 0.15s",
+            "border": "1px solid ${state.track === 'main' ? 'transparent' : 'var(--color-border)'}",
+            "color": "${state.track === 'main' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}",
+            "background": "${state.track === 'main' ? 'linear-gradient(135deg, var(--color-primary), var(--color-accent))' : 'var(--color-bg-white)'}"
+          }
+        },
+        {
+          "tagName": "button",
+          "textContent": "Workshops",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/track" },
+              "value": "workshops"
+            }
+          },
+          "style": {
+            "padding": "0.5rem 1.15rem",
+            "borderRadius": "999px",
+            "cursor": "pointer",
+            "fontSize": "0.9rem",
+            "fontWeight": "600",
+            "fontFamily": "inherit",
+            "transition": "all 0.15s",
+            "border": "1px solid ${state.track === 'workshops' ? 'transparent' : 'var(--color-border)'}",
+            "color": "${state.track === 'workshops' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}",
+            "background": "${state.track === 'workshops' ? 'linear-gradient(135deg, var(--color-primary), var(--color-accent))' : 'var(--color-bg-white)'}"
+          }
+        },
+        {
+          "tagName": "button",
+          "textContent": "Design",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/track" },
+              "value": "design"
+            }
+          },
+          "style": {
+            "padding": "0.5rem 1.15rem",
+            "borderRadius": "999px",
+            "cursor": "pointer",
+            "fontSize": "0.9rem",
+            "fontWeight": "600",
+            "fontFamily": "inherit",
+            "transition": "all 0.15s",
+            "border": "1px solid ${state.track === 'design' ? 'transparent' : 'var(--color-border)'}",
+            "color": "${state.track === 'design' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}",
+            "background": "${state.track === 'design' ? 'linear-gradient(135deg, var(--color-primary), var(--color-accent))' : 'var(--color-bg-white)'}"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "padding": "0.5rem 1.4rem 1.4rem" },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.track === 'all' || state.track === 'main' ? 'flex' : 'none'}",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "0.75rem",
+            "padding": "1.15rem 0",
+            "borderBottom": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "1.1rem",
+                "flex": "1",
+                "minWidth": "16rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "fontVariantNumeric": "tabular-nums",
+                    "minWidth": "4rem"
+                  },
+                  "textContent": "09:00"
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "600",
+                        "fontSize": "1.08rem"
+                      },
+                      "textContent": "Opening Keynote: The Next Decade of the Web"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+                      "textContent": "with Ada Okafor"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "padding": "0.3rem 0.75rem",
+                "borderRadius": "999px",
+                "color": "#6d28d9",
+                "backgroundColor": "rgba(124, 58, 237, 0.12)"
+              },
+              "textContent": "Main Stage"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.track === 'all' || state.track === 'design' ? 'flex' : 'none'}",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "0.75rem",
+            "padding": "1.15rem 0",
+            "borderBottom": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "1.1rem",
+                "flex": "1",
+                "minWidth": "16rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "fontVariantNumeric": "tabular-nums",
+                    "minWidth": "4rem"
+                  },
+                  "textContent": "10:30"
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "600",
+                        "fontSize": "1.08rem"
+                      },
+                      "textContent": "Designing for Trust at Scale"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+                      "textContent": "with Mateo Rivas"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "padding": "0.3rem 0.75rem",
+                "borderRadius": "999px",
+                "color": "#be185d",
+                "backgroundColor": "rgba(236, 72, 153, 0.12)"
+              },
+              "textContent": "Design"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.track === 'all' || state.track === 'workshops' ? 'flex' : 'none'}",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "0.75rem",
+            "padding": "1.15rem 0",
+            "borderBottom": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "1.1rem",
+                "flex": "1",
+                "minWidth": "16rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "fontVariantNumeric": "tabular-nums",
+                    "minWidth": "4rem"
+                  },
+                  "textContent": "11:45"
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "600",
+                        "fontSize": "1.08rem"
+                      },
+                      "textContent": "Hands-on: Building Reactive Islands"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+                      "textContent": "with Priya Nair"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "padding": "0.3rem 0.75rem",
+                "borderRadius": "999px",
+                "color": "#0e7490",
+                "backgroundColor": "rgba(6, 182, 212, 0.12)"
+              },
+              "textContent": "Workshops"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.track === 'all' || state.track === 'main' ? 'flex' : 'none'}",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "0.75rem",
+            "padding": "1.15rem 0",
+            "borderBottom": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "1.1rem",
+                "flex": "1",
+                "minWidth": "16rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "fontVariantNumeric": "tabular-nums",
+                    "minWidth": "4rem"
+                  },
+                  "textContent": "13:30"
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "600",
+                        "fontSize": "1.08rem"
+                      },
+                      "textContent": "Scaling Systems Without Scaling Teams"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+                      "textContent": "with Jonas Berg"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "padding": "0.3rem 0.75rem",
+                "borderRadius": "999px",
+                "color": "#6d28d9",
+                "backgroundColor": "rgba(124, 58, 237, 0.12)"
+              },
+              "textContent": "Main Stage"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.track === 'all' || state.track === 'design' ? 'flex' : 'none'}",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "0.75rem",
+            "padding": "1.15rem 0",
+            "borderBottom": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "1.1rem",
+                "flex": "1",
+                "minWidth": "16rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "fontVariantNumeric": "tabular-nums",
+                    "minWidth": "4rem"
+                  },
+                  "textContent": "15:00"
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "600",
+                        "fontSize": "1.08rem"
+                      },
+                      "textContent": "Motion, Meaning & Microinteractions"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+                      "textContent": "with Lena Cho"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "padding": "0.3rem 0.75rem",
+                "borderRadius": "999px",
+                "color": "#be185d",
+                "backgroundColor": "rgba(236, 72, 153, 0.12)"
+              },
+              "textContent": "Design"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.track === 'all' || state.track === 'workshops' ? 'flex' : 'none'}",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "0.75rem",
+            "padding": "1.15rem 0"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "1.1rem",
+                "flex": "1",
+                "minWidth": "16rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "fontVariantNumeric": "tabular-nums",
+                    "minWidth": "4rem"
+                  },
+                  "textContent": "16:15"
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "600",
+                        "fontSize": "1.08rem"
+                      },
+                      "textContent": "Ship It: From Prototype to Production"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+                      "textContent": "with Sam Whitfield"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "padding": "0.3rem 0.75rem",
+                "borderRadius": "999px",
+                "color": "#0e7490",
+                "backgroundColor": "rgba(6, 182, 212, 0.12)"
+              },
+              "textContent": "Workshops"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/event/components/ev-cta.json

@@ -0,0 +1,97 @@
+{
+  "tagName": "ev-cta",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "text": "",
+    "cta": "Get Tickets",
+    "ctaHref": "/tickets/",
+    "note": ""
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundImage": "linear-gradient(120deg, rgba(124, 58, 237, 0.55), rgba(236, 72, 153, 0.35))",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
+    "textAlign": "center",
+    "overflow": "hidden"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto",
+        "position": "relative",
+        "zIndex": "1"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.eyebrow ? 'block' : 'none'}",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "fontSize": "0.8rem",
+            "fontWeight": "600",
+            "opacity": "0.85",
+            "margin": "0 0 0.9rem"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.9rem, 4vw, 2.9rem)",
+            "fontWeight": "700",
+            "lineHeight": "1.12",
+            "letterSpacing": "-0.02em",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.1rem",
+            "lineHeight": "1.7",
+            "opacity": "0.9",
+            "margin": "0 0 2rem"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.ctaHref}" },
+          "style": {
+            "display": "inline-block",
+            "backgroundColor": "var(--color-text-white)",
+            "color": "var(--color-primary)",
+            "padding": "0.95rem 2.5rem",
+            "borderRadius": "999px",
+            "fontSize": "1.05rem",
+            "fontWeight": "700",
+            "textDecoration": "none",
+            "transition": "transform 0.15s, box-shadow 0.15s",
+            "boxShadow": "0 10px 30px rgba(0, 0, 0, 0.25)",
+            ":hover": { "transform": "translateY(-2px)" }
+          },
+          "textContent": "${state.cta}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.note ? 'block' : 'none'}",
+            "margin": "1.1rem 0 0",
+            "fontSize": "0.9rem",
+            "opacity": "0.8"
+          },
+          "textContent": "${state.note}"
+        }
+      ]
+    }
+  ]
+}