@jxsuite/starters 0.34.0 → 0.35.1

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

@@ -2,6 +2,7 @@
   "tagName": "bit-hours",
   "state": {
     "heading": "Hours",
+    "status": "Open today",
     "weekdays": "7:00am – 3:00pm",
     "saturday": "8:00am – 4:00pm",
     "sunday": "8:00am – 2:00pm",
@@ -9,35 +10,94 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-cream)",
-    "border": "1px solid var(--color-border)",
+    "backgroundColor": "var(--color-espresso)",
+    "color": "var(--color-text-white)",
     "borderRadius": "var(--radius)",
-    "padding": "2rem"
+    "padding": "clamp(1.75rem, 3vw, 2.5rem)"
   },
   "children": [
     {
-      "tagName": "h3",
+      "tagName": "div",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.4rem",
-        "fontWeight": "700",
-        "margin": "0 0 1.25rem"
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1rem",
+        "marginBottom": "1.5rem"
       },
-      "textContent": "${state.heading}"
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.65rem",
+            "fontWeight": "700",
+            "margin": "0",
+            "color": "var(--color-text-white)"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.5rem",
+            "padding": "0.35rem 0.85rem",
+            "borderRadius": "999px",
+            "border": "1px solid rgba(201,138,60,0.5)",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.68rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
+            "color": "var(--color-amber)"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "width": "0.45rem",
+                "height": "0.45rem",
+                "borderRadius": "999px",
+                "backgroundColor": "var(--color-amber)",
+                "boxShadow": "0 0 0 3px rgba(201,138,60,0.22)"
+              }
+            },
+            { "tagName": "span", "textContent": "${state.status}" }
+          ]
+        }
+      ]
     },
     {
       "tagName": "div",
       "style": {
         "display": "flex",
         "justifyContent": "space-between",
-        "padding": "0.6rem 0",
-        "borderBottom": "1px solid var(--color-border)"
+        "alignItems": "baseline",
+        "padding": "0.7rem 0",
+        "borderBottom": "1px solid rgba(246,236,219,0.14)"
       },
       "children": [
-        { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Monday – Friday" },
         {
           "tagName": "span",
-          "style": { "color": "var(--color-text-muted)" },
+          "style": {
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.78rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.12em",
+            "opacity": "0.75"
+          },
+          "textContent": "Mon – Fri"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.15rem",
+            "color": "var(--color-text-white)"
+          },
           "textContent": "${state.weekdays}"
         }
       ]
@@ -47,14 +107,30 @@
       "style": {
         "display": "flex",
         "justifyContent": "space-between",
-        "padding": "0.6rem 0",
-        "borderBottom": "1px solid var(--color-border)"
+        "alignItems": "baseline",
+        "padding": "0.7rem 0",
+        "borderBottom": "1px solid rgba(246,236,219,0.14)"
       },
       "children": [
-        { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Saturday" },
         {
           "tagName": "span",
-          "style": { "color": "var(--color-text-muted)" },
+          "style": {
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.78rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.12em",
+            "opacity": "0.75"
+          },
+          "textContent": "Saturday"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.15rem",
+            "color": "var(--color-text-white)"
+          },
           "textContent": "${state.saturday}"
         }
       ]
@@ -64,13 +140,29 @@
       "style": {
         "display": "flex",
         "justifyContent": "space-between",
-        "padding": "0.6rem 0"
+        "alignItems": "baseline",
+        "padding": "0.7rem 0"
       },
       "children": [
-        { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Sunday" },
         {
           "tagName": "span",
-          "style": { "color": "var(--color-text-muted)" },
+          "style": {
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.78rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.12em",
+            "opacity": "0.75"
+          },
+          "textContent": "Sunday"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.15rem",
+            "color": "var(--color-text-white)"
+          },
           "textContent": "${state.sunday}"
         }
       ]
@@ -79,10 +171,11 @@
       "tagName": "p",
       "style": {
         "display": "${state.note ? 'block' : 'none'}",
-        "margin": "1.25rem 0 0",
-        "fontSize": "0.85rem",
-        "color": "var(--color-text-muted)",
-        "fontStyle": "italic"
+        "margin": "1.5rem 0 0",
+        "fontFamily": "var(--font-heading)",
+        "fontStyle": "italic",
+        "fontSize": "0.95rem",
+        "opacity": "0.6"
       },
       "textContent": "${state.note}"
     }

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

@@ -3,11 +3,12 @@
   "state": {
     "image": { "type": "string", "format": "image", "default": "" },
     "imageAlt": "",
+    "kicker": "",
     "reverse": false
   },
   "style": {
     "display": "block",
-    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    "padding": "clamp(3.5rem, 8vw, 6.5rem) 1.5rem"
   },
   "children": [
     {
@@ -16,15 +17,18 @@
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
         "display": "grid",
-        "gridTemplateColumns": "1fr 1fr",
-        "gap": "clamp(2rem, 5vw, 4rem)",
+        "gridTemplateColumns": "5fr 6fr",
+        "gap": "clamp(2rem, 5vw, 4.5rem)",
         "alignItems": "center",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2.25rem" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "style": {
+            "order": "${state.reverse ? '2' : '1'}",
+            "position": "relative"
+          },
           "children": [
             {
               "tagName": "img",
@@ -36,9 +40,22 @@
               "style": {
                 "width": "100%",
                 "height": "auto",
-                "borderRadius": "var(--radius)",
                 "display": "block",
-                "boxShadow": "0 12px 40px rgba(28,25,23,0.14)"
+                "borderRadius": "var(--radius)",
+                "boxShadow": "0 24px 60px -30px rgba(30,21,15,0.55)"
+              }
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "position": "absolute",
+                "top": "0.85rem",
+                "left": "0.85rem",
+                "right": "0.85rem",
+                "bottom": "0.85rem",
+                "border": "1px solid rgba(246,236,219,0.45)",
+                "borderRadius": "var(--radius)",
+                "pointerEvents": "none"
               }
             }
           ]
@@ -47,9 +64,29 @@
           "tagName": "div",
           "style": {
             "order": "${state.reverse ? '1' : '2'}",
-            "fontSize": "1.08rem",
-            "lineHeight": "1.8",
-            "color": "var(--color-text-primary)"
+            "fontFamily": "var(--font-body)",
+            "fontSize": "1.1rem",
+            "lineHeight": "1.85",
+            "color": "var(--color-text-muted)",
+            "& p": { "margin": "0 0 1.15rem" },
+            "& p:first-of-type::first-letter": {
+              "float": "left",
+              "fontFamily": "var(--font-heading)",
+              "fontSize": "3.6rem",
+              "lineHeight": "0.8",
+              "fontWeight": "700",
+              "color": "var(--color-primary)",
+              "margin": "0.35rem 0.6rem 0 0"
+            },
+            "& h3": {
+              "fontFamily": "var(--font-heading)",
+              "fontSize": "clamp(1.6rem, 3vw, 2.25rem)",
+              "fontWeight": "700",
+              "lineHeight": "1.15",
+              "letterSpacing": "-0.01em",
+              "color": "var(--color-text-primary)",
+              "margin": "0 0 1.25rem"
+            }
           },
           "children": [{ "tagName": "slot" }]
         }

package/sites/restaurant/components/bit-menu-group.json

@@ -1,28 +1,73 @@
 {
   "tagName": "bit-menu-group",
   "state": {
-    "heading": ""
+    "heading": "",
+    "note": ""
   },
   "style": {
     "display": "block",
-    "marginBottom": "3rem"
+    "marginBottom": "2.75rem",
+    "breakInside": "avoid"
   },
   "children": [
     {
-      "tagName": "h2",
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "alignItems": "baseline",
+        "gap": "1rem",
+        "marginBottom": "0.4rem"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "width": "0.5rem",
+            "height": "0.5rem",
+            "flex": "0 0 auto",
+            "transform": "rotate(45deg) translateY(-0.15rem)",
+            "backgroundColor": "var(--color-primary)"
+          }
+        },
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.5rem, 2.6vw, 1.9rem)",
+            "fontWeight": "700",
+            "letterSpacing": "-0.01em",
+            "margin": "0",
+            "color": "var(--color-text-primary)",
+            "whiteSpace": "nowrap"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "flex": "1 1 auto",
+            "borderBottom": "1px solid var(--color-border-strong)",
+            "transform": "translateY(-0.4em)"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "p",
       "style": {
+        "display": "${state.note ? 'block' : 'none'}",
+        "margin": "0 0 1rem",
+        "paddingLeft": "1.5rem",
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.7rem",
-        "fontWeight": "700",
-        "color": "var(--color-primary)",
-        "margin": "0 0 1.25rem",
-        "paddingBottom": "0.5rem",
-        "borderBottom": "2px solid var(--color-primary)"
+        "fontStyle": "italic",
+        "fontSize": "1rem",
+        "color": "var(--color-text-muted)"
       },
-      "textContent": "${state.heading}"
+      "textContent": "${state.note}"
     },
     {
       "tagName": "div",
+      "style": { "marginTop": "0.5rem" },
       "children": [{ "tagName": "slot" }]
     }
   ]

package/sites/restaurant/components/bit-menu-item.json

@@ -7,35 +7,47 @@
   },
   "style": {
     "display": "block",
-    "padding": "1rem 0",
-    "borderBottom": "1px solid var(--color-border)"
+    "padding": "1.05rem 0"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
         "display": "flex",
-        "justifyContent": "space-between",
         "alignItems": "baseline",
-        "gap": "1rem"
+        "gap": "0"
       },
       "children": [
         {
           "tagName": "h3",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "1.15rem",
+            "fontSize": "1.3rem",
             "fontWeight": "600",
-            "margin": "0"
+            "letterSpacing": "-0.005em",
+            "margin": "0",
+            "color": "var(--color-text-primary)"
           },
           "textContent": "${state.name}"
         },
         {
           "tagName": "span",
           "style": {
-            "fontWeight": "700",
+            "flex": "1 1 auto",
+            "margin": "0 0.6rem",
+            "borderBottom": "1.5px dotted var(--color-border-strong)",
+            "transform": "translateY(-0.32em)"
+          }
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.2rem",
+            "fontWeight": "600",
             "color": "var(--color-primary)",
-            "whiteSpace": "nowrap"
+            "whiteSpace": "nowrap",
+            "fontVariantNumeric": "tabular-nums"
           },
           "textContent": "${state.price}"
         }
@@ -45,11 +57,14 @@
       "tagName": "p",
       "style": {
         "display": "${state.description ? 'block' : 'none'}",
-        "margin": "0.35rem 0 0",
+        "margin": "0.4rem 0 0",
+        "fontFamily": "var(--font-heading)",
+        "fontStyle": "italic",
+        "fontWeight": "400",
         "color": "var(--color-text-muted)",
-        "fontSize": "0.95rem",
-        "lineHeight": "1.6",
-        "maxWidth": "60ch"
+        "fontSize": "1.02rem",
+        "lineHeight": "1.55",
+        "maxWidth": "58ch"
       },
       "textContent": "${state.description}"
     }