@vectoriox/iox-ui 5.40.0 → 5.41.1

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,645 @@ 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",
+                            "lay": {
+                                "textAlign": "center"
+                            }
+                        },
+                        {
+                            "t": "Heading",
+                            "es": "h2",
+                            "level": "h2",
+                            "slot": "title",
+                            "ph": "copy",
+                            "text": "Plans",
+                            "lay": {
+                                "textAlign": "center"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "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",
+                            "width": "100%"
+                        }
+                    }
+                },
+                {
+                    "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",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per month",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "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",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per year",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "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": "center"
+                                            },
+                                            "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": "center"
+                                            },
+                                            "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": "center"
+                                            },
+                                            "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",
+                            "icon": "ph ph-sparkle",
+                            "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",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per month",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "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",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per year",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "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": "center"
+                                            },
+                                            "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": "center"
+                                            },
+                                            "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": "center"
+                                            },
+                                            "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",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per month",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "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",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        },
+                                        {
+                                            "t": "Text",
+                                            "es": "small",
+                                            "text": "per year",
+                                            "lay": {
+                                                "width": "auto"
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "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": "center"
+                                            },
+                                            "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": "center"
+                                            },
+                                            "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": "center"
+                                            },
+                                            "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 +2102,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -1552,6 +2192,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -1654,6 +2295,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -1748,6 +2390,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -1846,6 +2489,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -1935,6 +2579,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2032,6 +2677,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -2125,6 +2771,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2226,6 +2873,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "maxLines": "none",
@@ -2319,6 +2967,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2417,6 +3066,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "maxLines": "none",
@@ -2506,6 +3156,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2604,6 +3255,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -2692,6 +3344,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2793,6 +3446,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -2886,6 +3540,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -2987,6 +3642,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3080,6 +3736,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3176,6 +3833,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3263,6 +3921,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3359,6 +4018,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3446,6 +4106,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3540,6 +4201,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "8px 0px 8px 0px",
@@ -3625,6 +4287,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3719,6 +4382,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -3804,6 +4468,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -3907,6 +4572,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "opacity": "1",
@@ -3995,6 +4661,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4084,6 +4751,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -4171,6 +4839,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4268,6 +4937,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -4361,6 +5031,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4678,6 +5349,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "opacity": "1",
@@ -4755,6 +5427,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -4988,6 +5661,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "opacity": "1",
@@ -5081,6 +5755,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5183,6 +5858,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5286,6 +5962,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5382,6 +6059,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5469,6 +6147,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5567,6 +6246,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5656,6 +6336,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5752,6 +6433,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -5839,6 +6521,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -5935,6 +6618,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -6022,6 +6706,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -6124,6 +6809,7 @@ const NODE_BASELINES = {
             "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
+            "fontVariantNumeric": "normal",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
             "margin": "0px 0px 0px 0px",
@@ -6219,6 +6905,7 @@ const NODE_BASELINES = {
             "textAlign",
             "fontStyle",
             "textDecoration",
+            "fontVariantNumeric",
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
@@ -6452,6 +7139,7 @@ const NEUTRAL_STYLE_PROPS = {
     "textAlign": "start",
     "fontStyle": "normal",
     "textDecoration": "none",
+    "fontVariantNumeric": "normal",
     "WebkitTextStrokeWidth": "0px",
     "WebkitTextStrokeColor": "transparent",
     "margin": "0px 0px 0px 0px",
@@ -6614,6 +7302,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 +7334,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;
@@ -7384,7 +8076,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';
@@ -7575,7 +8267,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');
@@ -7903,7 +8595,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
@@ -8022,6 +8724,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. */
@@ -8116,7 +8820,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,
@@ -8128,7 +8832,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,
@@ -8212,7 +8918,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;
@@ -8263,6 +8969,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`);
@@ -8313,13 +9026,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) {
@@ -8347,6 +9056,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' },
@@ -8368,6 +9118,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);
@@ -8378,7 +9130,27 @@ 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,
+        ...(pn.icon ? { badgeIcon: pn.icon } : {}),
+    });
+    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)
@@ -8411,6 +9183,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
@@ -8570,11 +9367,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;
 }
@@ -8723,6 +9521,37 @@ function composeNavHeader(input, options) {
     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
@@ -8740,5 +9569,5 @@ function composeNavHeader(input, options) {
  * 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, NavPagesSource, NavRole, NavShape, NavShapeError, 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, composeNavHeader, 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 };
+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