@jxsuite/starters 3.4.0 → 3.6.0

package/sites/shop/components/shp-newsletter.jxn

@@ -0,0 +1,119 @@
+/- kdl-version 2
+
+shp-newsletter {
+    state {
+        eyebrow "Join the club"
+        heading "Get $10 off your first order"
+        text "New arrivals, seasonal sales, and shop events — plus a welcome code for your first ride. No spam, unsubscribe anytime."
+    }
+    style display=block padding="clamp(2.5rem, 6vw, 4rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            position relative
+            overflow hidden
+            borderRadius "var(--radius-lg)"
+            backgroundColor "var(--color-primary)"
+            backgroundImage "radial-gradient(circle at 88% 15%, rgba(255,255,255,0.22), transparent 42%), radial-gradient(circle at 6% 92%, rgba(13,17,23,0.25), transparent 46%)"
+            padding "clamp(2rem, 5vw, 3.25rem)"
+            display grid
+            gridTemplateColumns "1.1fr 1fr"
+            gap "clamp(1.75rem, 4vw, 3rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            p {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.45rem"
+                    margin "0 0 0.85rem"
+                    fontSize "0.72rem"
+                    fontWeight "800"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                    color "rgba(255,255,255,0.85)"
+                }
+                span ✦
+                span "${state.eyebrow}"
+            }
+            h2 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(1.7rem, 3.5vw, 2.5rem)"
+                    fontWeight "800"
+                    lineHeight "1.05"
+                    letterSpacing "-0.025em"
+                    margin "0 0 0.75rem"
+                    color "var(--color-text-white)"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    margin "0"
+                    fontSize "1.02rem"
+                    lineHeight "1.6"
+                    color "rgba(255,255,255,0.85)"
+                    maxWidth "44ch"
+                }
+            }
+        }
+        form action="#" method=post {
+            style {
+                backgroundColor "var(--color-bg-white)"
+                borderRadius "var(--radius)"
+                padding "1.35rem"
+                boxShadow "var(--shadow-float)"
+            }
+            label for=nl-email "Email address" {
+                style {
+                    display block
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    color "var(--color-text-muted)"
+                    marginBottom "0.55rem"
+                }
+            }
+            div {
+                style display=flex gap="0.5rem" {
+                    @--sm flexDirection=column
+                }
+                input id=nl-email type=email name=email placeholder=you@email.com required="true" aria-label="Email address" {
+                    style {
+                        flex "1"
+                        minWidth "0"
+                        padding "0.85rem 1rem"
+                        border "1px solid var(--color-line-strong)"
+                        borderRadius "var(--radius-sm)"
+                        fontSize "1rem"
+                        fontFamily inherit
+                        color "var(--color-text-primary)"
+                    }
+                }
+                button type=submit "Get my code" {
+                    style {
+                        flexShrink "0"
+                        backgroundColor "var(--color-ink)"
+                        color "var(--color-text-white)"
+                        padding "0.85rem 1.6rem"
+                        border none
+                        borderRadius "var(--radius-sm)"
+                        fontSize "1rem"
+                        fontFamily inherit
+                        fontWeight "700"
+                        cursor pointer
+                        transition "transform 0.15s, background-color 0.15s"
+                        :hover transform="translateY(-1px)" backgroundColor="#000000"
+                    }
+                }
+            }
+            p "Demo form — wire it to your email provider in components/shp-newsletter.json." {
+                style margin="0.85rem 0 0" fontSize="0.8rem" color="var(--color-text-muted)"
+            }
+        }
+    }
+}

package/sites/shop/components/shp-product-card.jxn

@@ -0,0 +1,187 @@
+/- kdl-version 2
+
+shp-product-card {
+    state {
+        title ""
+        price ""
+        oldPrice ""
+        badge ""
+        category ""
+        href "/products/"
+        image type=string format=image default=""
+    }
+    style display=block height="100%"
+    a href="${state.href}" {
+        style {
+            display flex
+            flexDirection column
+            height "100%"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius)"
+            overflow hidden
+            textDecoration none
+            color inherit
+            boxShadow "var(--shadow-card)"
+            transition "border-color 0.18s, box-shadow 0.18s, transform 0.18s"
+            :hover {
+                borderColor "var(--color-primary)"
+                boxShadow "0 20px 44px -20px rgba(13,17,23,0.32)"
+                transform "translateY(-5px)"
+            }
+            ":hover img" transform="scale(1.06)"
+            ":hover .qadd" transform="translateY(0)" opacity="1"
+        }
+        div {
+            style {
+                position relative
+                aspectRatio "1 / 1"
+                overflow hidden
+                backgroundColor "var(--color-panel)"
+            }
+            img src="${state.image}" alt="${state.title}" loading=lazy {
+                style {
+                    position absolute
+                    inset "0"
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    display block
+                    transition "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
+                }
+            }
+            span "${state.badge}" {
+                style {
+                    display "${state.badge ? 'inline-flex' : 'none'}"
+                    position absolute
+                    top "0.8rem"
+                    left "0.8rem"
+                    alignItems center
+                    padding "0.28rem 0.65rem"
+                    borderRadius "999px"
+                    fontSize "0.68rem"
+                    fontWeight "800"
+                    textTransform uppercase
+                    letterSpacing "0.06em"
+                    color "var(--color-text-white)"
+                    backgroundColor "${state.badge === 'Sale' ? 'var(--color-sale)' : (state.badge === 'New' ? 'var(--color-primary)' : 'var(--color-gold)')}"
+                    boxShadow "0 6px 14px -6px rgba(13,17,23,0.5)"
+                }
+            }
+            span ♡ {
+                style {
+                    position absolute
+                    top "0.8rem"
+                    right "0.8rem"
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    width "2rem"
+                    height "2rem"
+                    borderRadius "999px"
+                    backgroundColor "rgba(255,255,255,0.92)"
+                    color "var(--color-text-secondary)"
+                    fontSize "0.95rem"
+                    boxShadow "0 2px 8px rgba(13,17,23,0.18)"
+                }
+            }
+            div class=qadd {
+                style {
+                    position absolute
+                    left "0.7rem"
+                    right "0.7rem"
+                    bottom "0.7rem"
+                    display flex
+                    alignItems center
+                    justifyContent center
+                    gap "0.4rem"
+                    padding "0.6rem 1rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-ink)"
+                    color "var(--color-text-white)"
+                    fontSize "0.82rem"
+                    fontWeight "700"
+                    opacity "0"
+                    transform "translateY(120%)"
+                    transition "transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s"
+                    @--md opacity="1" transform="translateY(0)"
+                }
+                span ＋ {
+                    style color="var(--color-brand-bright)" fontSize="0.95rem"
+                }
+                span "Quick add"
+            }
+        }
+        div {
+            style padding="1.1rem 1.2rem 1.3rem" display=flex flexDirection=column flex="1"
+            div "${state.category}" {
+                style {
+                    fontSize "0.7rem"
+                    fontWeight "700"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    color "var(--color-text-muted)"
+                    marginBottom "0.4rem"
+                }
+            }
+            h3 "${state.title}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.15rem"
+                    fontWeight "700"
+                    letterSpacing "-0.01em"
+                    lineHeight "1.2"
+                    margin "0"
+                }
+            }
+            div {
+                style {
+                    marginTop auto
+                    paddingTop "0.9rem"
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                }
+                div {
+                    style display=flex alignItems=baseline gap="0.5rem"
+                    span "${state.price}" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontSize "1.35rem"
+                            fontWeight "800"
+                            letterSpacing "-0.02em"
+                            color "var(--color-text-primary)"
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                    span "${state.oldPrice}" {
+                        style {
+                            display "${state.oldPrice ? 'inline' : 'none'}"
+                            fontSize "0.92rem"
+                            fontWeight "600"
+                            color "var(--color-text-muted)"
+                            textDecoration line-through
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                }
+                span → {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2rem"
+                        height "2rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-brand-tint)"
+                        color "var(--color-primary)"
+                        fontSize "0.95rem"
+                        fontWeight "800"
+                        flexShrink "0"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/shop/components/shp-product-filter.jxn

@@ -0,0 +1,263 @@
+/- kdl-version 2
+
+shp-product-filter {
+    state {
+        category all
+        (fn)visibleCount "return ({ all: 8, Road: 2, Mountain: 2, Gravel: 1, Kids: 1, Accessories: 2 })[state.category];"
+        setAll {
+            $expression operator="=" target=(ref)"#/state/category" value=all
+        }
+        setRoad {
+            $expression operator="=" target=(ref)"#/state/category" value=Road
+        }
+        setMountain {
+            $expression operator="=" target=(ref)"#/state/category" value=Mountain
+        }
+        setGravel {
+            $expression operator="=" target=(ref)"#/state/category" value=Gravel
+        }
+        setKids {
+            $expression operator="=" target=(ref)"#/state/category" value=Kids
+        }
+        setAccessories {
+            $expression operator="=" target=(ref)"#/state/category" value=Accessories
+        }
+    }
+    style display=block minWidth="0"
+    $element "style" #"${state.category === 'all' ? '' : '#shop-grid > shp-product-card[data-category]{display:none} #shop-grid > shp-product-card[data-category="' + state.category + '"]{display:block}'}"#
+    aside {
+        style {
+            position sticky
+            top "7rem"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius-lg)"
+            boxShadow "var(--shadow-card)"
+            padding "1.4rem"
+            @--md position=static
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                justifyContent space-between
+                paddingBottom "1rem"
+                marginBottom "1.1rem"
+                borderBottom "1px solid var(--color-border)"
+            }
+            div {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.5rem"
+                    fontFamily "var(--font-heading)"
+                    fontWeight "800"
+                    fontSize "1.05rem"
+                    letterSpacing "-0.01em"
+                }
+                span ⚑ {
+                    style color="var(--color-primary)"
+                }
+                span Filter
+            }
+            span {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.35rem"
+                    padding "0.28rem 0.65rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-brand-tint)"
+                    color "var(--color-primary)"
+                    fontWeight "800"
+                    fontSize "0.8rem"
+                    fontVariantNumeric tabular-nums
+                }
+                span "${state.visibleCount}"
+                span "of 8" {
+                    style fontWeight="600" color="var(--color-text-muted)"
+                }
+            }
+        }
+        div Category {
+            style {
+                textTransform uppercase
+                letterSpacing "0.1em"
+                fontSize "0.7rem"
+                fontWeight "700"
+                color "var(--color-text-muted)"
+                marginBottom "0.75rem"
+            }
+        }
+        div {
+            style display=grid gap="0.4rem"
+            button onclick=(ref)"#/state/setAll" {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.5rem"
+                    width "100%"
+                    padding "0.6rem 0.85rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.category === 'all' ? 'var(--color-primary)' : 'var(--color-border)'}"
+                    cursor pointer
+                    fontFamily inherit
+                    fontWeight "700"
+                    fontSize "0.92rem"
+                    textAlign left
+                    transition "background-color 0.15s, color 0.15s, border-color 0.15s"
+                    backgroundColor "${state.category === 'all' ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.category === 'all' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+                span "All bikes & gear"
+                span "8" {
+                    style fontVariantNumeric=tabular-nums opacity="0.7" fontWeight="600"
+                }
+            }
+            button onclick=(ref)"#/state/setRoad" {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.5rem"
+                    width "100%"
+                    padding "0.6rem 0.85rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.category === 'Road' ? 'var(--color-primary)' : 'var(--color-border)'}"
+                    cursor pointer
+                    fontFamily inherit
+                    fontWeight "700"
+                    fontSize "0.92rem"
+                    textAlign left
+                    transition "background-color 0.15s, color 0.15s, border-color 0.15s"
+                    backgroundColor "${state.category === 'Road' ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.category === 'Road' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+                span Road
+                span "2" {
+                    style fontVariantNumeric=tabular-nums opacity="0.7" fontWeight="600"
+                }
+            }
+            button onclick=(ref)"#/state/setMountain" {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.5rem"
+                    width "100%"
+                    padding "0.6rem 0.85rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.category === 'Mountain' ? 'var(--color-primary)' : 'var(--color-border)'}"
+                    cursor pointer
+                    fontFamily inherit
+                    fontWeight "700"
+                    fontSize "0.92rem"
+                    textAlign left
+                    transition "background-color 0.15s, color 0.15s, border-color 0.15s"
+                    backgroundColor "${state.category === 'Mountain' ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.category === 'Mountain' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+                span Mountain
+                span "2" {
+                    style fontVariantNumeric=tabular-nums opacity="0.7" fontWeight="600"
+                }
+            }
+            button onclick=(ref)"#/state/setGravel" {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.5rem"
+                    width "100%"
+                    padding "0.6rem 0.85rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.category === 'Gravel' ? 'var(--color-primary)' : 'var(--color-border)'}"
+                    cursor pointer
+                    fontFamily inherit
+                    fontWeight "700"
+                    fontSize "0.92rem"
+                    textAlign left
+                    transition "background-color 0.15s, color 0.15s, border-color 0.15s"
+                    backgroundColor "${state.category === 'Gravel' ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.category === 'Gravel' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+                span Gravel
+                span "1" {
+                    style fontVariantNumeric=tabular-nums opacity="0.7" fontWeight="600"
+                }
+            }
+            button onclick=(ref)"#/state/setKids" {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.5rem"
+                    width "100%"
+                    padding "0.6rem 0.85rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.category === 'Kids' ? 'var(--color-primary)' : 'var(--color-border)'}"
+                    cursor pointer
+                    fontFamily inherit
+                    fontWeight "700"
+                    fontSize "0.92rem"
+                    textAlign left
+                    transition "background-color 0.15s, color 0.15s, border-color 0.15s"
+                    backgroundColor "${state.category === 'Kids' ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.category === 'Kids' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+                span Kids
+                span "1" {
+                    style fontVariantNumeric=tabular-nums opacity="0.7" fontWeight="600"
+                }
+            }
+            button onclick=(ref)"#/state/setAccessories" {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.5rem"
+                    width "100%"
+                    padding "0.6rem 0.85rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.category === 'Accessories' ? 'var(--color-primary)' : 'var(--color-border)'}"
+                    cursor pointer
+                    fontFamily inherit
+                    fontWeight "700"
+                    fontSize "0.92rem"
+                    textAlign left
+                    transition "background-color 0.15s, color 0.15s, border-color 0.15s"
+                    backgroundColor "${state.category === 'Accessories' ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.category === 'Accessories' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+                span Accessories
+                span "2" {
+                    style fontVariantNumeric=tabular-nums opacity="0.7" fontWeight="600"
+                }
+            }
+        }
+        div {
+            style {
+                marginTop "1.3rem"
+                padding "0.9rem 1rem"
+                borderRadius "var(--radius-sm)"
+                backgroundColor "var(--color-bg-cream)"
+                display flex
+                alignItems center
+                gap "0.6rem"
+            }
+            span 🔧 {
+                style fontSize="1.1rem"
+            }
+            p "Every bike ships fitted with a free first tune-up." {
+                style {
+                    margin "0"
+                    fontSize "0.8rem"
+                    lineHeight "1.45"
+                    color "var(--color-text-secondary)"
+                    fontWeight "500"
+                }
+            }
+        }
+    }
+}

package/sites/shop/components/shp-review.jxn

@@ -0,0 +1,38 @@
+/- kdl-version 2
+
+shp-review {
+    state quote="" author="" 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(15,23,42,0.05)"
+    }
+    div ★★★★★ {
+        style {
+            color "var(--color-accent)"
+            fontSize "1.1rem"
+            marginBottom "0.75rem"
+            letterSpacing "0.1em"
+        }
+    }
+    p "“${state.quote}”" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.15rem"
+            lineHeight "1.6"
+            fontWeight "500"
+            margin "0 0 1.25rem"
+        }
+    }
+    div {
+        div "${state.author}" {
+            style fontWeight="600"
+        }
+        div "${state.role}" {
+            style fontSize="0.9rem" color="var(--color-text-muted)"
+        }
+    }
+}

package/sites/shop/components/shp-section-header.jxn

@@ -0,0 +1,61 @@
+/- kdl-version 2
+
+shp-section-header {
+    state eyebrow="" heading="" subheading="" align=left
+    style {
+        display flex
+        flexDirection column
+        gap "0.85rem"
+        maxWidth "var(--max-width)"
+        margin "0 auto 2rem"
+        padding "0 1.5rem"
+        alignItems "${state.align === 'center' ? 'center' : 'flex-start'}"
+        textAlign "${state.align === 'center' ? 'center' : 'left'}"
+    }
+    p {
+        style {
+            display "${state.eyebrow ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.45rem"
+            padding "0.34rem 0.8rem 0.34rem 0.65rem"
+            borderRadius "999px"
+            backgroundColor "var(--color-brand-tint)"
+            color "var(--color-primary-hover)"
+            fontSize "0.72rem"
+            fontWeight "800"
+            textTransform uppercase
+            letterSpacing "0.1em"
+            margin "0"
+        }
+        span {
+            style {
+                width "0.42rem"
+                height "0.42rem"
+                borderRadius "999px"
+                backgroundColor "var(--color-primary)"
+            }
+        }
+        span "${state.eyebrow}"
+    }
+    h2 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(1.9rem, 4vw, 2.75rem)"
+            fontWeight "800"
+            lineHeight "1.05"
+            letterSpacing "-0.03em"
+            margin "0"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.08rem"
+            lineHeight "1.65"
+            color "var(--color-text-muted)"
+            margin "0"
+            maxWidth "58ch"
+        }
+    }
+}