@vectoriox/iox-ui 5.39.0 → 5.41.0

package/fesm2022/vectoriox-iox-ui-generation-core.mjs

@@ -1,6 +1,6 @@
-import { NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, elementStyleById, ownedTraitsOf, applyElementStyle, flavorPackById, parseHexColor, SPEC_AXES, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
+import { NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, elementStyleById, ownedTraitsOf, applyElementStyle, flavorPackById, parseHexColor, SPEC_AXES, LinkType, COLOR_SCHEMES, setColorScheme, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
 import { formPresetById } from '@vectoriox/iox-ui/forms-core';
-import { CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, buildCardRecipe, findByRole, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, pickAccordionAutoBinds, ACCORDION_CONTENT_LIMIT, buildTabsRecipe, TABS_WORDS, tabsTriggers, tabLabelNodeOf, TABS_LABEL_BIND_PROP, tabsPanels, tabPanelTextOf, TABS_TEXT_BIND_PROP, tabPanelImageOf, pickTabsAutoBinds, tabsListOf, tabsPanelsOf, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW } from '@vectoriox/iox-ui/composite-core';
+import { segmentedOptions, ITEM_OPEN_STATE, CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, BADGE_TONES, buildCardRecipe, findByRole, buildSegmentedRecipe, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, pickAccordionAutoBinds, ACCORDION_CONTENT_LIMIT, buildTabsRecipe, TABS_WORDS, tabsTriggers, tabLabelNodeOf, TABS_LABEL_BIND_PROP, tabsPanels, tabPanelTextOf, TABS_TEXT_BIND_PROP, tabPanelImageOf, pickTabsAutoBinds, tabsListOf, tabsPanelsOf, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW } from '@vectoriox/iox-ui/composite-core';
 
 // GENERATED from iox-ai-guidance flavor-spec.v1.json — do not edit; re-run scripts/gen-flavor-spec.mjs
 // (npm run gen:flavor-spec). The JSON is itself generated by iox-ai-guidance
@@ -1027,6 +1027,601 @@ const SPEC_SITE_PATTERNS = {
             ]
         }
     },
+    "pricing.tiers": {
+        "family": "pricing",
+        "label": "Pricing — plans with a monthly / yearly switch",
+        "node": {
+            "t": "Section",
+            "es": "section",
+            "c": [
+                {
+                    "t": "Container",
+                    "es": "box",
+                    "lay": {
+                        "display": "flex",
+                        "flexDirection": "column",
+                        "gap": "8px",
+                        "alignItems": "center",
+                        "textAlign": "center"
+                    },
+                    "c": [
+                        {
+                            "t": "Text",
+                            "es": "eyebrow",
+                            "slot": "eyebrow",
+                            "ph": "copy",
+                            "text": "Pricing"
+                        },
+                        {
+                            "t": "Heading",
+                            "es": "h2",
+                            "level": "h2",
+                            "slot": "title",
+                            "ph": "copy",
+                            "text": "Plans"
+                        }
+                    ]
+                },
+                {
+                    "t": "Container",
+                    "recipe": "segmented",
+                    "name": "Billing period",
+                    "lay": {
+                        "alignSelf": "center"
+                    },
+                    "resp": {
+                        "mobile": {
+                            "position": "sticky",
+                            "top": "calc(12px + env(safe-area-inset-top, 0px))",
+                            "zIndex": "2"
+                        }
+                    }
+                },
+                {
+                    "t": "Container",
+                    "es": "box",
+                    "layer": "Plans",
+                    "lay": {
+                        "display": "grid",
+                        "gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
+                        "gap": "var(--iox-space-gap)",
+                        "alignItems": "stretch"
+                    },
+                    "resp": {
+                        "mobile": {
+                            "gridTemplateColumns": "minmax(0, 1fr)"
+                        }
+                    },
+                    "c": [
+                        {
+                            "t": "Container",
+                            "recipe": "card",
+                            "layout": "top",
+                            "ph": "copy",
+                            "parts": {
+                                "media": false,
+                                "eyebrow": false,
+                                "badge": false,
+                                "actions": false
+                            },
+                            "words": {
+                                "title": "First plan",
+                                "text": "Who this plan is for, in one sentence."
+                            },
+                            "c": [
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Price · Monthly",
+                                    "shownWhen": "monthly",
+                                    "lay": {
+                                        "display": "flex",
+                                        "alignItems": "baseline",
+                                        "flexWrap": "wrap",
+                                        "gap": "6px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Text",
+                                            "es": "price",
+                                            "ph": "price",
+                                            "text": "Monthly price"
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per month"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Price · Yearly",
+                                    "shownWhen": "yearly",
+                                    "lay": {
+                                        "display": "flex",
+                                        "alignItems": "baseline",
+                                        "flexWrap": "wrap",
+                                        "gap": "6px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Text",
+                                            "es": "price",
+                                            "ph": "price",
+                                            "text": "Yearly price"
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per year"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Includes",
+                                    "lay": {
+                                        "display": "flex",
+                                        "flexDirection": "column",
+                                        "gap": "8px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "role": "card.actions",
+                                    "layer": "Buttons",
+                                    "lay": {
+                                        "display": "flex",
+                                        "flexWrap": "wrap",
+                                        "gap": "8px",
+                                        "alignItems": "center",
+                                        "width": "100%",
+                                        "margin": "auto 0px 0px 0px",
+                                        "padding": "6px 0px 0px 0px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "ButtonBlock",
+                                            "es": "button-primary",
+                                            "href": "/contact",
+                                            "text": "Choose this plan"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "t": "Container",
+                            "recipe": "card",
+                            "layout": "top",
+                            "ph": "copy",
+                            "scheme": "accent",
+                            "badge": "neutral",
+                            "parts": {
+                                "media": false,
+                                "eyebrow": false,
+                                "badge": true,
+                                "actions": false
+                            },
+                            "words": {
+                                "title": "Second plan",
+                                "text": "Who this plan is for, in one sentence.",
+                                "badge": "Most popular"
+                            },
+                            "c": [
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Price · Monthly",
+                                    "shownWhen": "monthly",
+                                    "lay": {
+                                        "display": "flex",
+                                        "alignItems": "baseline",
+                                        "flexWrap": "wrap",
+                                        "gap": "6px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Text",
+                                            "es": "price",
+                                            "ph": "price",
+                                            "text": "Monthly price"
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per month"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Price · Yearly",
+                                    "shownWhen": "yearly",
+                                    "lay": {
+                                        "display": "flex",
+                                        "alignItems": "baseline",
+                                        "flexWrap": "wrap",
+                                        "gap": "6px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Text",
+                                            "es": "price",
+                                            "ph": "price",
+                                            "text": "Yearly price"
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per year"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Includes",
+                                    "lay": {
+                                        "display": "flex",
+                                        "flexDirection": "column",
+                                        "gap": "8px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "role": "card.actions",
+                                    "layer": "Buttons",
+                                    "lay": {
+                                        "display": "flex",
+                                        "flexWrap": "wrap",
+                                        "gap": "8px",
+                                        "alignItems": "center",
+                                        "width": "100%",
+                                        "margin": "auto 0px 0px 0px",
+                                        "padding": "6px 0px 0px 0px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "ButtonBlock",
+                                            "es": "button-primary",
+                                            "href": "/contact",
+                                            "text": "Choose this plan"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "t": "Container",
+                            "recipe": "card",
+                            "layout": "top",
+                            "ph": "copy",
+                            "parts": {
+                                "media": false,
+                                "eyebrow": false,
+                                "badge": false,
+                                "actions": false
+                            },
+                            "words": {
+                                "title": "Third plan",
+                                "text": "Who this plan is for, in one sentence."
+                            },
+                            "c": [
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Price · Monthly",
+                                    "shownWhen": "monthly",
+                                    "lay": {
+                                        "display": "flex",
+                                        "alignItems": "baseline",
+                                        "flexWrap": "wrap",
+                                        "gap": "6px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Text",
+                                            "es": "price",
+                                            "ph": "price",
+                                            "text": "Monthly price"
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per month"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Price · Yearly",
+                                    "shownWhen": "yearly",
+                                    "lay": {
+                                        "display": "flex",
+                                        "alignItems": "baseline",
+                                        "flexWrap": "wrap",
+                                        "gap": "6px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Text",
+                                            "es": "price",
+                                            "ph": "price",
+                                            "text": "Yearly price"
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per year"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "layer": "Includes",
+                                    "lay": {
+                                        "display": "flex",
+                                        "flexDirection": "column",
+                                        "gap": "8px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "t": "Container",
+                                            "es": "box",
+                                            "lay": {
+                                                "display": "flex",
+                                                "flexWrap": "nowrap",
+                                                "gap": "8px",
+                                                "alignItems": "flex-start"
+                                            },
+                                            "c": [
+                                                {
+                                                    "t": "Icon",
+                                                    "es": "icon",
+                                                    "icon": "ph ph-check"
+                                                },
+                                                {
+                                                    "t": "Text",
+                                                    "es": "body",
+                                                    "ph": "copy",
+                                                    "text": "What this plan includes"
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                },
+                                {
+                                    "t": "Container",
+                                    "es": "box",
+                                    "role": "card.actions",
+                                    "layer": "Buttons",
+                                    "lay": {
+                                        "display": "flex",
+                                        "flexWrap": "wrap",
+                                        "gap": "8px",
+                                        "alignItems": "center",
+                                        "width": "100%",
+                                        "margin": "auto 0px 0px 0px",
+                                        "padding": "6px 0px 0px 0px"
+                                    },
+                                    "c": [
+                                        {
+                                            "t": "ButtonBlock",
+                                            "es": "button-primary",
+                                            "href": "/contact",
+                                            "text": "Choose this plan"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "32px"
+            }
+        }
+    },
     "hero.full-bleed-media": {
         "family": "hero",
         "label": "Hero — words over a background video",
@@ -1463,6 +2058,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -1552,6 +2148,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -1654,6 +2251,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -1748,6 +2346,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -1846,6 +2445,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -1935,6 +2535,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2032,6 +2633,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -2125,6 +2727,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2226,6 +2829,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "maxLines": "none",
@@ -2319,6 +2923,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2417,6 +3022,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "maxLines": "none",
@@ -2506,6 +3112,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2604,6 +3211,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -2692,6 +3300,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2793,6 +3402,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -2886,6 +3496,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2987,6 +3598,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3080,6 +3692,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3176,6 +3789,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3263,6 +3877,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3359,6 +3974,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3446,6 +4062,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3540,6 +4157,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "8px 0px 8px 0px",
@@ -3625,6 +4243,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3719,6 +4338,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3804,6 +4424,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3907,6 +4528,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "opacity": "1",
@@ -3995,6 +4617,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4084,6 +4707,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -4171,6 +4795,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4268,6 +4893,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -4361,6 +4987,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4678,6 +5305,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "opacity": "1",
@@ -4755,6 +5383,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4988,6 +5617,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "opacity": "1",
@@ -5081,6 +5711,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5183,6 +5814,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5286,6 +5918,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5382,6 +6015,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5469,6 +6103,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5567,6 +6202,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5656,6 +6292,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5752,6 +6389,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5839,6 +6477,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5935,6 +6574,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -6022,6 +6662,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -6124,6 +6765,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -6219,6 +6861,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -6452,6 +7095,7 @@ const NEUTRAL_STYLE_PROPS = {
     "textAlign": "start",
     "fontStyle": "normal",
     "textDecoration": "none",
+    "fontVariantNumeric": "normal",
     "WebkitTextStrokeWidth": "0px",
     "WebkitTextStrokeColor": "transparent",
     "margin": "0px 0px 0px 0px",
@@ -6614,6 +7258,8 @@ var PatternRecipe;
     /** CC4a: Tabs — Manual (three placeholder tabs), or From content when the section names a list `binding`: the tab
      *  list and the panels are both Repeaters over it, one row giving its tab AND its panel. */
     PatternRecipe["Tabs"] = "tabs";
+    /** CC4b: the Segmented control — Monthly · Yearly, named by the pattern (`name`). */
+    PatternRecipe["Segmented"] = "segmented";
     /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
     PatternRecipe["Carousel"] = "carousel";
     /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */
@@ -6644,6 +7290,8 @@ var PatternPlaceholder;
     PatternPlaceholder["Image"] = "image";
     /** CC3: a clip the studio uploads (a Video's file): the poster blank until then, publish-blocking. */
     PatternPlaceholder["Video"] = "video";
+    /** CC4b (Q37): a price the studio types — free text, publish-blocking, its label shown meanwhile, never a number. */
+    PatternPlaceholder["Price"] = "price";
 })(PatternPlaceholder || (PatternPlaceholder = {}));
 /** CC3: what an `opens` node opens. */
 var PatternOpens;
@@ -6911,14 +7559,14 @@ const GLOBAL_POSITION = {
     [GlobalSlot.Footer]: PatternGlobalPosition.After,
 };
 const ROUTE = /^\/(?:(?:[a-z0-9]+(?:-[a-z0-9]+)*|:[a-zA-Z_][a-zA-Z0-9_]*)(?:\/(?:[a-z0-9]+(?:-[a-z0-9]+)*|:[a-zA-Z_][a-zA-Z0-9_]*))*)?$/;
-const ROUTE_PARAM = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
+const ROUTE_PARAM$1 = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
 const isObject = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
 const isNonEmptyString = (v) => typeof v === 'string' && v.trim() !== '';
 const has = (table, key) => Object.prototype.hasOwnProperty.call(table, key);
 const at = (path, key) => (path ? `${path}.${key}` : key);
 /** The `:param` names of a route, in order. */
 function routeParams(route) {
-    return [...route.matchAll(ROUTE_PARAM)].map(m => m[1]);
+    return [...route.matchAll(ROUTE_PARAM$1)].map(m => m[1]);
 }
 class Collector {
     constructor() {
@@ -7384,7 +8032,7 @@ const DIALOG$1 = 'Dialog';
 const LINK = 'Link';
 const LINKED = 'LinkedContainer';
 const BUTTON = 'ButtonBlock';
-const ICON = 'Icon';
+const ICON$1 = 'Icon';
 const TEXT$1 = 'Text';
 const HEADING = 'Heading';
 const NAV_STYLE = 'nav';
@@ -7485,6 +8133,21 @@ function navPages(root) {
     const source = links.length ? links : collectHeaderLinks(root);
     return source.filter(isPageLink).map(n => ({ label: textOf(n), route: String(prop(n, 'pageRoute')) }));
 }
+/** Where a phone menu's pages come from: the header's own page Links, else the studio's pages. */
+var NavPagesSource;
+(function (NavPagesSource) {
+    NavPagesSource["Header"] = "header";
+    NavPagesSource["Site"] = "site";
+    NavPagesSource["None"] = "none";
+})(NavPagesSource || (NavPagesSource = {}));
+/** The pages a phone menu lists: the header's (`navPages`), else `sitePages` — a hand-built header with no
+ *  page links still gets a working menu. */
+function phoneMenuPages(root, sitePages = []) {
+    const own = navPages(root);
+    if (own.length)
+        return { pages: own, source: NavPagesSource.Header };
+    return sitePages.length ? { pages: [...sitePages], source: NavPagesSource.Site } : { pages: [], source: NavPagesSource.None };
+}
 /** A hand-built header: every page Link outside a drawer. */
 function collectHeaderLinks(root) {
     const out = [];
@@ -7560,7 +8223,7 @@ function moveDisplayOverride(node, to) {
     }
 }
 function iconNode(kit, suffix, iconClass) {
-    return part(kit, suffix, ICON, { iconClass }, null);
+    return part(kit, suffix, ICON$1, { iconClass }, null);
 }
 function labelText(kit, suffix, words) {
     return part(kit, suffix, TEXT$1, { content: words, tag: 'span' }, 'button-label');
@@ -7708,7 +8371,7 @@ function planNavShape(globals, shape, options = {}, navId) {
         throw new NavShapeError(`a phone menu cannot switch at "${at}"`);
     const kit = makeKit(out, root.id, options.newId);
     adoptRoles(root);
-    const pages = navPages(root);
+    const { pages } = phoneMenuPages(root, options.pages);
     const wantDrawer = shape !== NavShape.Bar;
     const wantBar = shape !== NavShape.Drawer;
     const wantMenuButton = shape === NavShape.Drawer;
@@ -7828,7 +8491,7 @@ function addBarItem(globals, options = {}) {
     if (kids.length >= BAR_ITEMS_MAX)
         return { globals: out, added: false };
     const linked = new Set(kids.filter(c => c.role === NavRole.BarItem).map(c => prop(c, 'pageRoute')));
-    const page = barPages(root, navPages(root), BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
+    const page = barPages(root, phoneMenuPages(root, options.pages).pages, BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
         ?? { label: NAV_SHAPE_COPY.home, route: HOME_ROUTE };
     const item = barItem(makeKit(out, root.id, options.newId), kids.length, page);
     const more = kids.findIndex(c => c.role === NavRole.More);
@@ -7838,6 +8501,32 @@ function addBarItem(globals, options = {}) {
         kids.push(item);
     return { globals: out, added: true };
 }
+function barOf(globals) {
+    const out = clone$1(globals);
+    const b = find(out, NavRole.Bar);
+    return { out, kids: b ? (b.children ?? (b.children = [])) : null };
+}
+/**
+ * The bar's Items list "Remove" (board 2): the item goes, More included — refused below three items (Q2:
+ * 3–5), so the bar never shrinks into something a thumb cannot use. Input not mutated.
+ */
+function removeBarItem(globals, itemId) {
+    const { out, kids } = barOf(globals);
+    const i = kids ? kids.findIndex(c => c.id === itemId) : -1;
+    if (!kids || i < 0 || kids.length <= BAR_ITEMS_MIN)
+        return { globals: out, changed: false };
+    kids.splice(i, 1);
+    return { globals: out, changed: true };
+}
+/** The bar's Items list drag-to-reorder (board 2): item `from` moves to `to`. Input not mutated. */
+function moveBarItem(globals, from, to) {
+    const { out, kids } = barOf(globals);
+    if (!kids || from === to || from < 0 || to < 0 || from >= kids.length || to >= kids.length)
+        return { globals: out, changed: false };
+    const [item] = kids.splice(from, 1);
+    kids.splice(to, 0, item);
+    return { globals: out, changed: true };
+}
 
 /**
  * THE composer — a Site Plan in, ordinary IOX data out (design-system plan §6b, W1). Deterministic and
@@ -7862,7 +8551,17 @@ var PlaceholderKind;
     PlaceholderKind["Image"] = "image";
     /** CC3: a video slot with no clip — the studio uploads its own (the poster blank meanwhile). */
     PlaceholderKind["Video"] = "video";
+    /** CC4b (Q37): a price — a FACT the customer could be held to. Free text the studio types ("₪ 1,200", "From $40",
+     *  "On request"); its label shows meanwhile ("Monthly price"), never a number. No currency model. */
+    PlaceholderKind["Price"] = "price";
 })(PlaceholderKind || (PlaceholderKind = {}));
+/** The placeholders a page cannot be published with unfilled (W4's gate): a fact, a price, the studio's own video.
+ *  Copy and an empty image are the author's to rewrite, never blocking. */
+const PUBLISH_BLOCKING_PLACEHOLDERS = new Set([PlaceholderKind.Fact, PlaceholderKind.Price, PlaceholderKind.Video]);
+/** True when a placeholder of `kind` blocks publishing until the studio fills it. */
+function blocksPublish(kind) {
+    return PUBLISH_BLOCKING_PLACEHOLDERS.has(kind);
+}
 var ComposeIssueCode;
 (function (ComposeIssueCode) {
     /** A slot the plan and the business left empty and the pattern gives no words for — the node keeps
@@ -7981,6 +8680,8 @@ function chooseText(pn, ctx) {
     const own = pn.text === undefined ? undefined : fillVariables(pn.text, ctx);
     if (pn.ph === PatternPlaceholder.Copy)
         return { value: own, placeholder: { kind: PlaceholderKind.Copy } };
+    if (pn.ph === PatternPlaceholder.Price)
+        return { value: own, placeholder: { kind: PlaceholderKind.Price } };
     return { value: own };
 }
 /** A `bind` / `alt` / `param` / `src` path → the binding source + path, in this node's scope. */
@@ -8075,7 +8776,7 @@ function danglingFate(pn, ctx) {
         return null;
     if (ctx.email)
         return DanglingFate.Email;
-    return UNLINKED_TYPE[pn.t] ? DanglingFate.Unlink : DanglingFate.Remove;
+    return UNLINKED_TYPE[pn.t] || (ctx.keepButtons && pn.t === BUTTON_BLOCK) ? DanglingFate.Unlink : DanglingFate.Remove;
 }
 const DANGLING_ISSUE = {
     [DanglingFate.Email]: ComposeIssueCode.LinkToEmail,
@@ -8087,7 +8788,9 @@ function reportDangling(fate, pn, id, words, ctx) {
     const outcome = {
         [DanglingFate.Email]: `it now opens an email to ${ctx.email}`,
         [DanglingFate.Remove]: 'with no email address to send to instead, it was removed',
-        [DanglingFate.Unlink]: 'with no email address to send to instead, the box keeps its contents without the link',
+        [DanglingFate.Unlink]: pn.t === BUTTON_BLOCK
+            ? 'with no email address to send to instead, the button keeps its words without the link'
+            : 'with no email address to send to instead, the box keeps its contents without the link',
     }[fate];
     ctx.issues.push({
         code: DANGLING_ISSUE[fate], nodeId: id, owner: ctx.owner, route: pn.href,
@@ -8171,7 +8874,7 @@ function composeNode(pn, id, repeater, ctx) {
         reportDangling(fate, pn, id, words.value, ctx);
         return null;
     }
-    const type = fate === DanglingFate.Unlink ? UNLINKED_TYPE[pn.t] : pn.t;
+    const type = fate === DanglingFate.Unlink ? UNLINKED_TYPE[pn.t] ?? pn.t : pn.t;
     const props = {};
     if (pn.level)
         props['level'] = pn.level;
@@ -8222,6 +8925,13 @@ function composeNode(pn, id, repeater, ctx) {
     }
     if (pn.name)
         setProp(node, 'ariaLabel', pn.name);
+    if (pn.icon) {
+        if (type !== ICON)
+            throw new ComposeError(`${id}: "icon" belongs on an Icon`);
+        setProp(node, 'iconClass', pn.icon);
+    }
+    if (pn.layer)
+        node.label = pn.layer;
     if (pn.opens) {
         if (pn.opens !== PatternOpens.Lightbox)
             throw new ComposeError(`${id}: "opens" names the pattern's lightbox`);
@@ -8272,13 +8982,9 @@ function composeNode(pn, id, repeater, ctx) {
         throw new ComposeError(`${id}: "alt" belongs on a bound Image`);
     }
     // Layout.
-    if (pn.lay)
-        setStyleProps(node, pn.lay);
-    if (pn.resp) {
-        for (const layer of Object.values(pn.resp))
-            assertStyleSlots(node.type, Object.keys(layer));
-        node.responsive = Object.fromEntries(Object.entries(pn.resp).map(([bp, styleProps]) => [bp, { styleProps: { ...styleProps } }]));
-    }
+    applyLayout(node, pn);
+    if (pn.shownWhen)
+        hideUntilOn(node, pn, ctx);
     // A Repeater's rows.
     let rowScope = repeater;
     if (pn.src) {
@@ -8306,6 +9012,47 @@ function composeNode(pn, id, repeater, ctx) {
         composeForm(node, pn, id, ctx);
     return node;
 }
+/** A pattern node's layout: its `lay` styleProps and its per-breakpoint `resp` layers. */
+function applyLayout(node, pn) {
+    if (pn.lay)
+        setStyleProps(node, pn.lay);
+    if (pn.resp) {
+        for (const layer of Object.values(pn.resp))
+            assertStyleSlots(node.type, Object.keys(layer));
+        node.responsive = Object.fromEntries(Object.entries(pn.resp).map(([bp, styleProps]) => [bp, { styleProps: { ...styleProps } }]));
+    }
+}
+/** CC4b (`shownWhen`, Q38): hidden at base and shown — with its own layout's display — while the pattern's Segmented
+ *  option of that key is on. Wired once the pattern is stamped (the option's id is known then). */
+function hideUntilOn(node, pn, ctx) {
+    const display = String(node.styleProps['display'] ?? '') || SHOWN_DISPLAY;
+    setStyleProps(node, { display: HIDDEN_DISPLAY });
+    (ctx.shownWhen ??= []).push({ id: node.id, key: pn.shownWhen, display });
+}
+/** CC4b: every `shownWhen` node of a stamped pattern follows its option — the targeted `trigger-on` ("when Yearly is
+ *  on"), compiled by both renderers to ONE `:has()` rule on the nearest common ancestor. */
+function wireShownWhen(root, entries) {
+    if (!entries.length)
+        return;
+    const nodes = new Map();
+    const options = new Map();
+    const visit = (n) => {
+        nodes.set(n.id, n);
+        for (const option of segmentedOptions(n))
+            if (option.itemKey && !options.has(option.itemKey))
+                options.set(option.itemKey, option.id);
+        (n.children ?? []).forEach(visit);
+    };
+    visit(root);
+    for (const entry of entries) {
+        const option = options.get(entry.key);
+        if (!option)
+            throw new ComposeError(`${entry.id}: "shownWhen: ${entry.key}" names no option of a segmented in the pattern`);
+        const node = nodes.get(entry.id);
+        node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { display: entry.display } };
+        node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: option };
+    }
+}
 /** A Card v2 `binds` key → the part it binds and that part's bound prop. */
 const CARD_BINDS = {
     [CardBindTarget.Image]: { role: CardRole.Media, prop: 'src' },
@@ -8327,6 +9074,8 @@ function composeRecipe(pn, id, repeater, ctx) {
         return composeCarousel(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Lightbox)
         return composeLightbox(pn, id, repeater, ctx);
+    if (pn.recipe === PatternRecipe.Segmented)
+        return composeSegmented(pn, id);
     if (pn.recipe !== PatternRecipe.Card)
         throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
     const layout = (pn.layout ?? CardLayout.Top);
@@ -8337,7 +9086,26 @@ function composeRecipe(pn, id, repeater, ctx) {
             throw new ComposeError(`${id}: a card has no part "${part}"`);
     }
     const factory = (spec) => create(spec.key === CardRole.Card ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null);
-    const card = buildCardRecipe(factory, { layout, parts: pn.parts });
+    const tone = pn.badge;
+    if (tone && !BADGE_TONES.includes(tone))
+        throw new ComposeError(`${id}: a badge has no tone "${pn.badge}"`);
+    for (const key of Object.keys(pn.words ?? {}))
+        if (!CARD_WORD_KEYS.includes(key))
+            throw new ComposeError(`${id}: a card has no words "${key}"`);
+    const card = buildCardRecipe(factory, {
+        layout, parts: pn.parts, words: pn.words, badgeTone: tone,
+    });
+    if (pn.scheme) {
+        if (!COLOR_SCHEMES.some(c => c.id === pn.scheme))
+            throw new ComposeError(`${id}: no colour scheme "${pn.scheme}"`);
+        setColorScheme(card, pn.scheme);
+    }
+    if (pn.ph === PatternPlaceholder.Copy)
+        copyPlaceholders(card, ctx);
+    if (pn.c?.length) {
+        const content = findByRole(card, CardRole.Content);
+        content.children = [...(content.children ?? []), ...composeChildren(pn, id, repeater, ctx)];
+    }
     for (const [key, path] of Object.entries(pn.binds ?? {})) {
         const target = CARD_BINDS[key];
         if (!target)
@@ -8370,6 +9138,31 @@ function composeRecipe(pn, id, repeater, ctx) {
     return card;
 }
 const REPEATER = 'Repeater';
+const ICON = 'Icon';
+const SHOWN_DISPLAY = 'flex';
+const HIDDEN_DISPLAY = 'none';
+/** The words a card recipe's `words` may set (composite-core `CardWords`). */
+const CARD_WORD_KEYS = ['eyebrow', 'title', 'text', 'primary', 'secondary', 'badge'];
+/** A card's words the studio rewrites (`ph: 'copy'`): its eyebrow, title, text and badge. */
+const CARD_COPY_ROLES = [CardRole.Eyebrow, CardRole.Title, CardRole.Text];
+/** A card's own words, as COPY placeholders (its badge's words too). */
+function copyPlaceholders(card, ctx) {
+    for (const role of CARD_COPY_ROLES) {
+        const part = findByRole(card, role);
+        if (part)
+            ctx.placeholders.push({ nodeId: part.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(part.props?.['content'] ?? '') });
+    }
+    const badge = findByRole(card, CardRole.Badge);
+    const words = badge?.children?.find(c => c.type === TEXT);
+    if (words)
+        ctx.placeholders.push({ nodeId: words.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(words.props?.['content'] ?? '') });
+}
+/** CC4b: the Segmented control — composite-core's recipe (Monthly · Yearly), named by the pattern, laid out by it. */
+function composeSegmented(pn, id) {
+    const root = buildSegmentedRecipe(recipeFactory(id, 'segmented'), pn.name !== undefined ? { label: pn.name } : {});
+    applyLayout(root, pn);
+    return root;
+}
 /**
  * An Accordion (CC2) — the composite-core recipe stamped with this composer's factory. Manual (no section
  * binding): three items whose questions and answers are placeholders the studio rewrites (`ph: 'copy'`), never
@@ -8529,11 +9322,12 @@ function wireOpeners(root, openers) {
 function composePattern(pattern, id, ctx) {
     if (pattern.node.each)
         throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
-    const own = { ...ctx, openers: [] };
+    const own = { ...ctx, openers: [], shownWhen: [] };
     const node = composeNode(pattern.node, id, null, own);
     if (!node)
         throw new ComposeError(`${id}: a pattern's root cannot be optional or a link`);
     wireOpeners(node, own.openers ?? []);
+    wireShownWhen(node, own.shownWhen ?? []);
     node.label = pattern.label;
     return node;
 }
@@ -8634,6 +9428,85 @@ function composeSite(plan, context) {
         issues,
     };
 }
+// ── The site header on its own (CC1.1) ──────────────────────────────────────────────────────────
+/** The header pattern the Studio template stamps — and the builder palette's "Navigation bar". */
+const SITE_HEADER_PATTERN = 'nav.inline-cta';
+const ROUTE_PARAM = ':';
+const HOME_PATH = '/';
+const KEY_UNSAFE = /[^a-z0-9]+/gi;
+/** The pages a navigation links to: every page but Home (the brand links there) and template pages
+ *  (a `/work/:slug` route has no single address), in the studio's order. */
+function siteNavPages(pages) {
+    return pages.filter(p => !!p.route && !p.isHome && p.route !== HOME_PATH && !p.route.includes(ROUTE_PARAM));
+}
+function navPagePlans(pages) {
+    const used = new Set();
+    return pages.map((p, i) => {
+        let key = p.route.replace(KEY_UNSAFE, '-').replace(/^-+|-+$/g, '').toLowerCase() || `page-${i}`;
+        for (let n = 2; used.has(key); n++)
+            key = `${key}-${n}`;
+        used.add(key);
+        return { key, name: p.name, route: p.route, inNav: true, isHome: p.isHome === true, sections: [] };
+    });
+}
+/**
+ * The Studio template's header, composed for a studio that has no Site Plan — the builder palette's
+ * "Navigation bar". THE SAME pattern and the same composer as `composeSite`: the brand (the business name),
+ * one plain Link per navigation page, the call to action (W1.1's one dangling-link rule when the studio has
+ * no /contact page: an email to the business, else removed), and the pattern's phone shape. Pure.
+ */
+function composeNavHeader(input, options) {
+    if (!nonEmpty(options?.id))
+        throw new ComposeError('composeNavHeader needs the header id');
+    const pattern = patternById(SITE_HEADER_PATTERN);
+    const all = navPagePlans(input.pages);
+    const navRoutes = new Set(siteNavPages(input.pages).map(p => p.route));
+    const pages = all.map(p => ({ ...p, inNav: navRoutes.has(p.route) }));
+    const plan = { business: input.business, pages, dataSources: [], contentTypes: [] };
+    const email = nonEmpty(input.business.facts?.email) ? input.business.facts.email.trim() : null;
+    const issues = [];
+    const ctx = {
+        owner: GlobalSlot.Header, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders: [], issues, routes: new Set(pages.map(p => p.route)),
+    };
+    const root = composePattern(pattern, options.id, ctx);
+    root.isGlobal = true;
+    root.globalPosition = pattern.global;
+    const shape = pattern.phoneMenu;
+    const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    return { header, issues };
+}
+// ── One pattern on its own (CC4b) ───────────────────────────────────────────────────────────────
+/** The pricing section (CC4b, board 10): plans with a Monthly / Yearly switch — the library and the palette, never a
+ *  Studio page (Q35). */
+const PRICING_PATTERN = 'pricing.tiers';
+/**
+ * ONE library pattern composed on its own — the builder palette's ready-made sections (CC4b: "Pricing", the
+ * `pricing.tiers` pattern). THE SAME pattern and composer as `composeSite`: its words, its placeholders (a price shows
+ * its label, never a number) and the one dangling-link rule — except a button to a page the studio lacks keeps its
+ * words, unlinked, for the author to link. Pure.
+ */
+function composeSection(patternId, input, options) {
+    if (!nonEmpty(options?.id))
+        throw new ComposeError('composeSection needs the section id');
+    const pattern = patternById(patternId);
+    if (!pattern)
+        throw new ComposeError(`no pattern "${patternId}" in the library`);
+    if (pattern.global)
+        throw new ComposeError(`"${patternId}" is a header or footer — composeNavHeader / composeSite stamp those`);
+    const business = input.business ?? { name: '' };
+    const pages = navPagePlans(input.pages ?? []);
+    const plan = { business, pages, dataSources: [], contentTypes: [] };
+    const email = nonEmpty(business.facts?.email) ? business.facts.email.trim() : null;
+    const placeholders = [];
+    const issues = [];
+    const ctx = {
+        owner: options.id, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders, issues, routes: new Set(pages.map(p => p.route)), keepButtons: true,
+    };
+    const section = composePattern(pattern, options.id, ctx);
+    return { section, placeholders, issues };
+}
 
 /**
  * @vectoriox/iox-ui/generation-core — the shared, FRAMEWORK-FREE site-plan core (design-system plan
@@ -8651,5 +9524,5 @@ function composeSite(plan, context) {
  * Generated bundle index. Do not edit.
  */
 
-export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternOpens, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, composeSite, createSerializedNode, findNavRoot, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, patternTakesBinding, planFromTemplate, planNavShape, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
+export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavPagesSource, NavRole, NavShape, NavShapeError, PRICING_PATTERN, PUBLISH_BLOCKING_PLACEHOLDERS, PatternDirective, PatternGlobalPosition, PatternOpens, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_HEADER_PATTERN, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, blocksPublish, composeNavHeader, composeSection, composeSite, createSerializedNode, findNavRoot, moveBarItem, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, patternTakesBinding, phoneMenuPages, planFromTemplate, planNavShape, releasedLayoutDefaults, removeBarItem, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, siteNavPages, validateSitePlan, walkSerialized };
 //# sourceMappingURL=vectoriox-iox-ui-generation-core.mjs.map