@jxsuite/starters 0.34.0 → 0.35.0

package/sites/blog/components/bl-nav.json

@@ -1,16 +1,12 @@
 {
   "tagName": "bl-nav",
-  "state": {
-    "brand": "The Long Field"
-  },
   "style": {
-    "display": "block",
     "position": "sticky",
     "top": "0",
     "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.9)",
-    "backdropFilter": "blur(8px)",
-    "borderBottom": "1px solid var(--color-border)"
+    "display": "block",
+    "backgroundColor": "var(--color-paper)",
+    "borderBottom": "1.5px solid var(--color-rule)"
   },
   "children": [
     {
@@ -18,11 +14,11 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "1rem 1.5rem",
+        "padding": "0.55rem 1.5rem",
         "display": "flex",
         "alignItems": "center",
         "justifyContent": "space-between",
-        "gap": "1.5rem"
+        "gap": "1rem"
       },
       "children": [
         {
@@ -30,13 +26,14 @@
           "attributes": { "href": "/" },
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "1.4rem",
-            "fontWeight": "600",
+            "fontWeight": "700",
+            "fontSize": "1.05rem",
+            "letterSpacing": "0.01em",
             "color": "var(--color-text-primary)",
             "textDecoration": "none",
-            "letterSpacing": "-0.01em"
+            "whiteSpace": "nowrap"
           },
-          "textContent": "${state.brand}"
+          "textContent": "The Long Field"
         },
         {
           "tagName": "nav",
@@ -44,20 +41,24 @@
             "display": "flex",
             "alignItems": "center",
             "gap": "1.75rem",
-            "@--sm": { "gap": "1rem" }
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.72rem",
+            "fontWeight": "500",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "@--sm": { "gap": "1.1rem" }
           },
           "children": [
             {
               "tagName": "a",
-              "attributes": { "href": "/" },
+              "attributes": { "href": "/#latest" },
               "style": {
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "1rem",
+                "transition": "color 0.15s",
                 ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Writing"
+              "textContent": "Essays"
             },
             {
               "tagName": "a",
@@ -65,9 +66,7 @@
               "style": {
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "1rem",
-                "@--sm": { "display": "none" },
+                "transition": "color 0.15s",
                 ":hover": { "color": "var(--color-primary)" }
               },
               "textContent": "About"
@@ -76,16 +75,10 @@
               "tagName": "a",
               "attributes": { "href": "/contact/" },
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.25rem",
-                "borderRadius": "var(--radius)",
+                "color": "var(--color-primary)",
                 "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "0.65" }
               },
               "textContent": "Subscribe"
             }

package/sites/blog/components/bl-newsletter-cta.json

@@ -1,19 +1,18 @@
 {
   "tagName": "bl-newsletter-cta",
   "state": {
-    "eyebrow": "The Long Field Letter",
+    "eyebrow": "The Sunday Dispatch",
     "heading": "One essay, most Sundays.",
     "text": "Field notes on design, technology, and craft — sent when there's something worth saying. No noise, unsubscribe anytime.",
     "placeholder": "you@example.com",
     "cta": "Subscribe",
-    "note": "This is a demo form. Wire it to your email provider in components/bl-newsletter-cta.json."
+    "note": "Demo form — wire it to your email provider in components/bl-newsletter-cta.json."
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-cream)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)",
-    "padding": "clamp(2rem, 5vw, 3rem)"
+    "backgroundColor": "var(--color-ink)",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem)"
   },
   "children": [
     {
@@ -24,12 +23,14 @@
           "tagName": "p",
           "style": {
             "display": "${state.eyebrow ? 'block' : 'none'}",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.74rem",
+            "fontWeight": "500",
             "textTransform": "uppercase",
-            "letterSpacing": "0.16em",
-            "fontSize": "0.78rem",
-            "fontWeight": "600",
-            "color": "var(--color-primary)",
-            "margin": "0 0 0.75rem"
+            "letterSpacing": "0.24em",
+            "color": "var(--color-text-white)",
+            "opacity": "0.6",
+            "margin": "0 0 1.25rem"
           },
           "textContent": "${state.eyebrow}"
         },
@@ -37,21 +38,24 @@
           "tagName": "h2",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(1.7rem, 3.5vw, 2.3rem)",
-            "fontWeight": "600",
-            "lineHeight": "1.15",
-            "margin": "0 0 0.85rem"
+            "fontWeight": "700",
+            "fontSize": "clamp(2rem, 5vw, 3.2rem)",
+            "lineHeight": "1.05",
+            "letterSpacing": "-0.02em",
+            "margin": "0 0 1rem"
           },
           "textContent": "${state.heading}"
         },
         {
           "tagName": "p",
           "style": {
-            "fontSize": "1.08rem",
-            "lineHeight": "1.65",
-            "color": "var(--color-text-muted)",
-            "margin": "0 auto 1.75rem",
-            "maxWidth": "52ch"
+            "fontFamily": "var(--font-heading)",
+            "fontStyle": "italic",
+            "fontSize": "1.2rem",
+            "lineHeight": "1.6",
+            "opacity": "0.8",
+            "margin": "0 auto 2rem",
+            "maxWidth": "48ch"
           },
           "textContent": "${state.text}"
         },
@@ -60,10 +64,11 @@
           "attributes": { "action": "#", "method": "post" },
           "style": {
             "display": "flex",
-            "gap": "0.75rem",
-            "maxWidth": "460px",
+            "gap": "0",
+            "maxWidth": "440px",
             "margin": "0 auto",
-            "@--sm": { "flexDirection": "column" }
+            "borderBottom": "1.5px solid rgba(246, 241, 231, 0.5)",
+            "@--sm": { "flexDirection": "column", "gap": "1rem", "borderBottom": "none" }
           },
           "children": [
             {
@@ -77,30 +82,39 @@
               },
               "style": {
                 "flex": "1",
-                "padding": "0.8rem 1rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem",
-                "fontFamily": "inherit",
-                "backgroundColor": "var(--color-bg-white)"
+                "padding": "0.75rem 0.25rem",
+                "border": "none",
+                "borderBottom": "1.5px solid transparent",
+                "backgroundColor": "transparent",
+                "color": "var(--color-text-white)",
+                "fontSize": "1.05rem",
+                "fontFamily": "var(--font-heading)",
+                "outline": "none",
+                "@--sm": {
+                  "borderBottom": "1.5px solid rgba(246, 241, 231, 0.5)",
+                  "textAlign": "center"
+                }
               }
             },
             {
               "tagName": "button",
               "attributes": { "type": "submit" },
               "style": {
-                "backgroundColor": "var(--color-primary)",
+                "backgroundColor": "transparent",
                 "color": "var(--color-text-white)",
-                "padding": "0.8rem 1.75rem",
+                "padding": "0.75rem 0.5rem",
                 "border": "none",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.8rem",
                 "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.16em",
                 "cursor": "pointer",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "whiteSpace": "nowrap",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "0.6" }
               },
-              "textContent": "${state.cta}"
+              "textContent": "${state.cta} →"
             }
           ]
         },
@@ -108,9 +122,9 @@
           "tagName": "p",
           "style": {
             "display": "${state.note ? 'block' : 'none'}",
-            "fontSize": "0.8rem",
-            "color": "var(--color-text-muted)",
-            "margin": "1rem 0 0"
+            "fontSize": "0.75rem",
+            "opacity": "0.5",
+            "margin": "1.5rem 0 0"
           },
           "textContent": "${state.note}"
         }

package/sites/blog/components/bl-post-card.json

@@ -1,6 +1,7 @@
 {
   "tagName": "bl-post-card",
   "state": {
+    "number": "",
     "title": "",
     "excerpt": "",
     "date": "",
@@ -8,68 +9,55 @@
     "href": "#",
     "cover": { "type": "string", "format": "image", "default": "" }
   },
-  "style": {
-    "display": "block",
-    "height": "100%"
-  },
+  "style": { "display": "block" },
   "children": [
     {
       "tagName": "a",
       "attributes": { "href": "${state.href}" },
       "style": {
-        "display": "flex",
-        "flexDirection": "column",
-        "height": "100%",
+        "display": "grid",
+        "gridTemplateColumns": "clamp(2.4rem, 5vw, 4.5rem) 1fr auto",
+        "gap": "clamp(1rem, 3vw, 2.75rem)",
+        "alignItems": "start",
+        "padding": "1.75rem 0.75rem",
         "textDecoration": "none",
         "color": "var(--color-text-primary)",
-        "backgroundColor": "var(--color-bg-white)",
-        "border": "1px solid var(--color-border)",
-        "borderRadius": "var(--radius)",
-        "overflow": "hidden",
-        "transition": "transform 0.15s, box-shadow 0.15s",
+        "borderBottom": "1px solid var(--color-border)",
+        "transition": "color 0.18s, background-color 0.18s",
+        "@--sm": { "gridTemplateColumns": "auto 1fr", "gap": "1rem 1.25rem" },
         ":hover": {
-          "transform": "translateY(-3px)",
-          "boxShadow": "0 14px 40px rgba(17,17,17,0.12)"
+          "color": "var(--color-primary)",
+          "backgroundColor": "var(--color-bg-cream)"
         }
       },
       "children": [
         {
-          "tagName": "img",
-          "attributes": {
-            "src": "${state.cover}",
-            "alt": "${state.title}",
-            "loading": "lazy"
-          },
+          "tagName": "span",
           "style": {
-            "display": "${state.cover ? 'block' : 'none'}",
-            "width": "100%",
-            "aspectRatio": "16 / 10",
-            "objectFit": "cover"
-          }
+            "fontFamily": "var(--font-heading)",
+            "fontWeight": "400",
+            "fontSize": "clamp(1.6rem, 4vw, 2.6rem)",
+            "lineHeight": "1",
+            "color": "var(--color-text-muted)",
+            "fontVariantNumeric": "tabular-nums"
+          },
+          "textContent": "${state.number}"
         },
         {
           "tagName": "div",
-          "style": {
-            "padding": "1.5rem",
-            "display": "flex",
-            "flexDirection": "column",
-            "flex": "1"
-          },
+          "style": { "minWidth": "0", "@--sm": { "gridColumn": "1 / -1" } },
           "children": [
             {
               "tagName": "span",
               "style": {
-                "display": "${state.tag ? 'inline-block' : 'none'}",
-                "alignSelf": "flex-start",
-                "backgroundColor": "rgba(14, 165, 233, 0.1)",
-                "color": "var(--color-primary)",
-                "padding": "0.25rem 0.65rem",
-                "borderRadius": "999px",
+                "display": "${state.tag ? 'block' : 'none'}",
+                "fontFamily": "var(--font-body)",
                 "fontSize": "0.72rem",
                 "fontWeight": "600",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "marginBottom": "0.85rem"
+                "letterSpacing": "0.16em",
+                "color": "var(--color-primary)",
+                "marginBottom": "0.6rem"
               },
               "textContent": "${state.tag}"
             },
@@ -77,34 +65,64 @@
               "tagName": "h3",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "1.4rem",
                 "fontWeight": "600",
-                "lineHeight": "1.2",
-                "letterSpacing": "-0.01em",
-                "margin": "0 0 0.6rem"
+                "fontSize": "clamp(1.5rem, 3.2vw, 2.15rem)",
+                "lineHeight": "1.1",
+                "letterSpacing": "-0.015em",
+                "margin": "0 0 0.6rem",
+                "color": "inherit"
               },
               "textContent": "${state.title}"
             },
             {
               "tagName": "p",
               "style": {
-                "margin": "0 0 1.25rem",
+                "fontFamily": "var(--font-heading)",
+                "fontStyle": "italic",
+                "fontWeight": "400",
+                "fontSize": "1.15rem",
+                "lineHeight": "1.5",
                 "color": "var(--color-text-muted)",
-                "fontSize": "1rem",
-                "lineHeight": "1.6"
+                "margin": "0",
+                "maxWidth": "62ch"
               },
               "textContent": "${state.excerpt}"
-            },
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "textAlign": "right",
+            "whiteSpace": "nowrap",
+            "@--sm": { "textAlign": "left", "gridColumn": "1 / -1" }
+          },
+          "children": [
             {
-              "tagName": "div",
+              "tagName": "span",
               "style": {
-                "marginTop": "auto",
-                "fontSize": "0.8rem",
-                "letterSpacing": "0.04em",
+                "display": "block",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.72rem",
+                "fontWeight": "500",
                 "textTransform": "uppercase",
-                "color": "var(--color-text-muted)"
+                "letterSpacing": "0.14em",
+                "color": "var(--color-text-muted)",
+                "marginBottom": "0.6rem"
               },
               "textContent": "${state.date}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "color": "var(--color-primary)"
+              },
+              "textContent": "Read →"
             }
           ]
         }

package/sites/blog/components/bl-post-list.json

@@ -1,17 +1,10 @@
 {
   "tagName": "bl-post-list",
-  "state": {
-    "columns": "3"
-  },
   "style": {
-    "display": "grid",
-    "gridTemplateColumns": "repeat(3, 1fr)",
-    "gap": "1.75rem",
+    "display": "block",
     "maxWidth": "var(--max-width)",
     "margin": "0 auto",
-    "padding": "0 1.5rem",
-    "@--md": { "gridTemplateColumns": "repeat(2, 1fr)" },
-    "@--sm": { "gridTemplateColumns": "1fr" }
+    "borderTop": "1.5px solid var(--color-rule)"
   },
   "children": [{ "tagName": "slot" }]
 }

package/sites/blog/components/bl-prose.json

@@ -9,32 +9,45 @@
     "& p": {
       "margin": "0 0 1.5rem"
     },
+    "& > p:first-of-type::first-letter": {
+      "float": "left",
+      "fontFamily": "var(--font-heading)",
+      "fontWeight": "900",
+      "fontSize": "4.6rem",
+      "lineHeight": "0.78",
+      "paddingRight": "0.7rem",
+      "paddingTop": "0.35rem",
+      "color": "var(--color-primary)"
+    },
     "& h2": {
       "fontFamily": "var(--font-heading)",
-      "fontSize": "1.7rem",
-      "fontWeight": "600",
-      "lineHeight": "1.2",
-      "letterSpacing": "-0.01em",
-      "margin": "2.75rem 0 1rem"
+      "fontSize": "1.9rem",
+      "fontWeight": "700",
+      "lineHeight": "1.15",
+      "letterSpacing": "-0.015em",
+      "margin": "3rem 0 1rem"
     },
     "& h3": {
       "fontFamily": "var(--font-heading)",
-      "fontSize": "1.35rem",
+      "fontSize": "1.45rem",
       "fontWeight": "600",
       "margin": "2.25rem 0 0.85rem"
     },
     "& a": {
       "color": "var(--color-primary)",
       "textDecoration": "underline",
-      "textUnderlineOffset": "2px"
+      "textUnderlineOffset": "3px",
+      "textDecorationThickness": "1px"
     },
     "& blockquote": {
-      "margin": "2rem 0",
-      "padding": "0.5rem 0 0.5rem 1.5rem",
-      "borderLeft": "3px solid var(--color-primary)",
+      "margin": "2.5rem 0",
+      "padding": "0.25rem 0 0.25rem 1.75rem",
+      "borderLeft": "2px solid var(--color-primary)",
+      "fontFamily": "var(--font-heading)",
       "fontStyle": "italic",
-      "fontSize": "1.35rem",
-      "lineHeight": "1.5",
+      "fontWeight": "400",
+      "fontSize": "1.55rem",
+      "lineHeight": "1.45",
       "color": "var(--color-text-primary)"
     },
     "& ul": {
@@ -51,23 +64,25 @@
     "& img": {
       "width": "100%",
       "height": "auto",
-      "borderRadius": "var(--radius)",
-      "margin": "2rem 0"
+      "margin": "2.5rem 0"
     },
     "& strong": {
       "fontWeight": "600"
     },
+    "& em": {
+      "fontStyle": "italic"
+    },
     "& code": {
       "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-      "fontSize": "0.9em",
+      "fontSize": "0.85em",
       "backgroundColor": "var(--color-bg-cream)",
-      "padding": "0.15em 0.4em",
-      "borderRadius": "4px"
+      "padding": "0.15em 0.4em"
     },
     "& hr": {
       "border": "none",
       "borderTop": "1px solid var(--color-border)",
-      "margin": "2.75rem 0"
+      "width": "4rem",
+      "margin": "3rem auto"
     }
   },
   "children": [{ "tagName": "slot" }]