@jxsuite/starters 0.34.0 → 0.35.0

package/sites/restaurant/components/bit-nav.json

@@ -1,93 +1,210 @@
 {
   "tagName": "bit-nav",
   "state": {
-    "brand": "Bistro & Café"
+    "brand": "Bistro & Café",
+    "status": "Open today · 8am – 3pm",
+    "place": "128 Market St · Riverbend"
   },
   "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)"
+    "zIndex": "50"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "1rem 1.5rem",
-        "display": "flex",
-        "alignItems": "center",
-        "justifyContent": "space-between",
-        "gap": "1.5rem"
+        "backgroundColor": "var(--color-espresso)",
+        "color": "var(--color-text-white)"
       },
       "children": [
         {
-          "tagName": "a",
-          "attributes": { "href": "/" },
+          "tagName": "div",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.4rem",
-            "fontWeight": "700",
-            "color": "var(--color-text-primary)",
-            "textDecoration": "none",
-            "letterSpacing": "-0.01em"
+            "maxWidth": "var(--max-width-wide)",
+            "margin": "0 auto",
+            "padding": "0.42rem 1.5rem",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "gap": "0.9rem",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.72rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.18em"
           },
-          "textContent": "${state.brand}"
-        },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.5rem",
+                "color": "var(--color-amber)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.42rem",
+                    "height": "0.42rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-amber)",
+                    "boxShadow": "0 0 0 3px rgba(201,138,60,0.25)"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.status}" }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "opacity": "0.35",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": "—"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "opacity": "0.72",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": "${state.place}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "backgroundColor": "rgba(246,236,219,0.9)",
+        "backdropFilter": "blur(8px)",
+        "borderBottom": "1px solid var(--color-border)"
+      },
+      "children": [
         {
-          "tagName": "nav",
+          "tagName": "div",
           "style": {
-            "display": "flex",
+            "maxWidth": "var(--max-width-wide)",
+            "margin": "0 auto",
+            "padding": "0.85rem 1.5rem",
+            "display": "grid",
+            "gridTemplateColumns": "1fr auto 1fr",
             "alignItems": "center",
-            "gap": "1.75rem",
-            "@--sm": { "gap": "1rem" }
+            "gap": "1rem"
           },
           "children": [
             {
-              "tagName": "a",
-              "attributes": { "href": "/menu/" },
+              "tagName": "nav",
               "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                ":hover": { "color": "var(--color-primary)" }
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.75rem",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.76rem",
+                "fontWeight": "700",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.16em",
+                "@--sm": { "gap": "1.1rem" }
               },
-              "textContent": "Menu"
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/menu/" },
+                  "style": {
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "transition": "color 0.15s",
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Menu"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/about/" },
+                  "style": {
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "transition": "color 0.15s",
+                    "@--sm": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Story"
+                }
+              ]
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/about/" },
+              "attributes": { "href": "/" },
               "style": {
+                "justifySelf": "center",
+                "textAlign": "center",
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(1.35rem, 3.5vw, 1.85rem)",
+                "fontWeight": "700",
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "letterSpacing": "-0.01em",
+                "lineHeight": "1",
+                "whiteSpace": "nowrap"
               },
-              "textContent": "About"
+              "textContent": "${state.brand}"
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/contact/" },
+              "tagName": "nav",
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.25rem",
-                "borderRadius": "var(--radius)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "justifySelf": "end",
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.5rem"
               },
-              "textContent": "Reserve"
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/contact/" },
+                  "style": {
+                    "fontFamily": "var(--font-body)",
+                    "fontSize": "0.76rem",
+                    "fontWeight": "700",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.16em",
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "transition": "color 0.15s",
+                    "@--md": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Visit"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/contact/" },
+                  "style": {
+                    "display": "inline-block",
+                    "border": "1px solid var(--color-primary)",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.5rem 1.25rem",
+                    "borderRadius": "999px",
+                    "textDecoration": "none",
+                    "fontFamily": "var(--font-body)",
+                    "fontWeight": "700",
+                    "fontSize": "0.76rem",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.14em",
+                    "transition": "background-color 0.15s, color 0.15s",
+                    ":hover": {
+                      "backgroundColor": "transparent",
+                      "color": "var(--color-primary)"
+                    }
+                  },
+                  "textContent": "Reserve"
+                }
+              ]
             }
           ]
         }

package/sites/restaurant/components/bit-reservation.json

@@ -1,21 +1,59 @@
 {
   "tagName": "bit-reservation",
   "state": {
-    "heading": "Request a table"
+    "heading": "Request a table",
+    "intro": "Tell us when you'd like to come in and we'll confirm by email within a day."
   },
   "style": {
-    "display": "block"
+    "display": "block",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "padding": "clamp(1.75rem, 3.5vw, 2.75rem)",
+    "boxShadow": "0 24px 60px -40px rgba(30,21,15,0.5)",
+    "& input": {
+      "width": "100%",
+      "padding": "0.8rem 0.95rem",
+      "border": "1px solid var(--color-border-strong)",
+      "borderRadius": "var(--radius)",
+      "fontSize": "1rem",
+      "fontFamily": "var(--font-body)",
+      "backgroundColor": "var(--color-bg-paper)",
+      "color": "var(--color-text-primary)"
+    },
+    "& input:focus": {
+      "outline": "none",
+      "borderColor": "var(--color-primary)"
+    },
+    "& textarea:focus": {
+      "outline": "none",
+      "borderColor": "var(--color-primary)"
+    }
   },
   "children": [
     {
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.6rem",
-        "margin": "0 0 1.25rem"
+        "fontSize": "clamp(1.65rem, 3vw, 2rem)",
+        "fontWeight": "700",
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 0.5rem",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.heading}"
     },
+    {
+      "tagName": "p",
+      "style": {
+        "margin": "0 0 1.5rem",
+        "fontFamily": "var(--font-heading)",
+        "fontStyle": "italic",
+        "fontSize": "1.05rem",
+        "color": "var(--color-text-muted)"
+      },
+      "textContent": "${state.intro}"
+    },
     {
       "tagName": "form",
       "attributes": { "action": "#", "method": "post" },
@@ -29,13 +67,6 @@
             "placeholder": "Your name",
             "required": "true",
             "aria-label": "Your name"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
           }
         },
         {
@@ -46,13 +77,6 @@
             "placeholder": "Email address",
             "required": "true",
             "aria-label": "Email address"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
           }
         },
         {
@@ -61,14 +85,7 @@
           "children": [
             {
               "tagName": "input",
-              "attributes": { "type": "date", "name": "date", "aria-label": "Preferred date" },
-              "style": {
-                "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
-              }
+              "attributes": { "type": "date", "name": "date", "aria-label": "Preferred date" }
             },
             {
               "tagName": "input",
@@ -79,13 +96,6 @@
                 "max": "20",
                 "placeholder": "Party size",
                 "aria-label": "Party size"
-              },
-              "style": {
-                "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
               }
             }
           ]
@@ -100,11 +110,13 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border-strong)",
             "borderRadius": "var(--radius)",
             "fontSize": "1rem",
-            "fontFamily": "inherit"
+            "fontFamily": "var(--font-body)",
+            "backgroundColor": "var(--color-bg-paper)",
+            "color": "var(--color-text-primary)"
           }
         },
         {
@@ -114,18 +126,27 @@
           "style": {
             "backgroundColor": "var(--color-primary)",
             "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.5rem",
+            "padding": "0.9rem 1.75rem",
             "border": "none",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontWeight": "600",
+            "borderRadius": "999px",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.85rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
             "cursor": "pointer",
-            "justifySelf": "start"
+            "justifySelf": "start",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
           }
         },
         {
           "tagName": "p",
-          "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
+          "style": {
+            "fontSize": "0.85rem",
+            "color": "var(--color-text-muted)",
+            "margin": "0"
+          },
           "textContent": "This is a demo form. Wire it to your booking provider or email in pages/contact.md."
         }
       ]

package/sites/restaurant/components/bit-review.json

@@ -6,47 +6,77 @@
     "role": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-white)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)",
-    "boxShadow": "0 4px 20px rgba(28,25,23,0.05)"
+    "display": "block"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "4.5rem",
+        "lineHeight": "0.6",
+        "fontWeight": "700",
         "color": "var(--color-primary)",
-        "fontSize": "1.1rem",
-        "marginBottom": "0.75rem",
-        "letterSpacing": "0.1em"
+        "marginBottom": "1rem",
+        "height": "2rem"
       },
-      "textContent": "★★★★★"
+      "textContent": "“"
     },
     {
       "tagName": "p",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.15rem",
-        "lineHeight": "1.6",
+        "fontSize": "clamp(1.5rem, 3vw, 2.15rem)",
         "fontStyle": "italic",
-        "margin": "0 0 1.25rem"
+        "fontWeight": "400",
+        "lineHeight": "1.35",
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 1.75rem",
+        "color": "var(--color-text-primary)"
       },
-      "textContent": "“${state.quote}”"
+      "textContent": "${state.quote}"
     },
     {
       "tagName": "div",
+      "style": {
+        "display": "flex",
+        "alignItems": "center",
+        "gap": "0.85rem"
+      },
       "children": [
         {
-          "tagName": "div",
-          "style": { "fontWeight": "600" },
-          "textContent": "${state.author}"
+          "tagName": "span",
+          "style": {
+            "width": "2rem",
+            "height": "1px",
+            "backgroundColor": "var(--color-primary)"
+          }
         },
         {
           "tagName": "div",
-          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
-          "textContent": "${state.role}"
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-body)",
+                "fontWeight": "700",
+                "fontSize": "0.85rem",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.1em",
+                "color": "var(--color-text-primary)"
+              },
+              "textContent": "${state.author}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.85rem",
+                "color": "var(--color-text-muted)"
+              },
+              "textContent": "${state.role}"
+            }
+          ]
         }
       ]
     }

package/sites/restaurant/components/bit-section-header.json

@@ -3,49 +3,94 @@
   "state": {
     "eyebrow": "",
     "heading": "",
+    "headingAccent": "",
     "subheading": "",
     "align": "center"
   },
   "style": {
     "display": "block",
     "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
+    "margin": "0 auto 2.75rem",
     "textAlign": "${state.align}"
   },
   "children": [
     {
-      "tagName": "p",
+      "tagName": "div",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
-        "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
-        "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "margin": "0 0 0.75rem"
+        "display": "${state.eyebrow ? 'flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.85rem",
+        "justifyContent": "${state.align === 'center' ? 'center' : 'flex-start'}",
+        "marginBottom": "1.1rem"
       },
-      "textContent": "${state.eyebrow}"
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "width": "2.25rem",
+            "height": "1px",
+            "backgroundColor": "var(--color-primary)"
+          }
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "fontFamily": "var(--font-body)",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.22em",
+            "fontSize": "0.74rem",
+            "fontWeight": "700",
+            "color": "var(--color-primary)"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.align === 'center' ? 'block' : 'none'}",
+            "width": "2.25rem",
+            "height": "1px",
+            "backgroundColor": "var(--color-primary)"
+          }
+        }
+      ]
     },
     {
       "tagName": "h2",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
+        "fontSize": "clamp(2rem, 4.4vw, 3rem)",
         "fontWeight": "700",
-        "lineHeight": "1.15",
+        "lineHeight": "1.1",
         "letterSpacing": "-0.02em",
-        "margin": "0"
+        "margin": "0",
+        "color": "var(--color-text-primary)"
       },
-      "textContent": "${state.heading}"
+      "children": [
+        { "tagName": "span", "textContent": "${state.heading}" },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.headingAccent ? 'inline' : 'none'}",
+            "fontStyle": "italic",
+            "fontWeight": "500",
+            "color": "var(--color-primary)"
+          },
+          "textContent": " ${state.headingAccent}"
+        }
+      ]
     },
     {
       "tagName": "p",
       "style": {
         "display": "${state.subheading ? 'block' : 'none'}",
+        "fontFamily": "var(--font-body)",
         "fontSize": "1.1rem",
         "lineHeight": "1.7",
         "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0"
+        "margin": "1.1rem auto 0",
+        "maxWidth": "56ch"
       },
       "textContent": "${state.subheading}"
     }

package/sites/restaurant/layouts/base.json

@@ -8,7 +8,7 @@
     "minHeight": "100vh",
     "display": "flex",
     "flexDirection": "column",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg-paper)"
   },
   "children": [
     { "tagName": "bit-nav" },