@vectoriox/iox-ui 5.40.0 → 5.41.0

package/src/generation-core/patterns.ts

@@ -21,6 +21,12 @@ import { SPEC_SITE_PATTERNS } from './site-spec.generated';
  * `binds`, a binding path per part: `image`, `eyebrow`, `title`, `text`; `href` + `param` link the whole card
  * through its title). A header pattern's `phoneMenu` names its phone shape (drawer · bar · both), stamped by
  * `planNavShape` (CC1).
+ *
+ * CC4b (`pricing.tiers`): `recipe: 'segmented'` stamps a Segmented control (Monthly · Yearly, named by `name`, its own
+ * `lay` / `resp`) · `shownWhen` hides a node at base and shows it while the pattern's segmented option of that key is
+ * on (the targeted `trigger-on`) · `ph: 'price'` a price the studio types (a publish-blocking placeholder showing its
+ * label) · on a card recipe: `words` (title / text / badge), `badge` (the badge's tone), `scheme` (the Brand card), and
+ * `c` — nodes joining its Content column · `icon` an Icon's glyph · `layer` the node's name in the layer tree.
  */
 export interface PatternNode {
     readonly t: string;
@@ -59,6 +65,16 @@ export interface PatternNode {
     readonly opens?: string;
     /** CC3: a control's accessible name (`ariaLabel`). */
     readonly name?: string;
+    /** CC4b: hidden at base, shown while the pattern's Segmented option with this key is on. */
+    readonly shownWhen?: string;
+    /** CC4b: a card recipe's words (its title, text, badge). */
+    readonly words?: Readonly<Record<string, string>>;
+    /** CC4b: a card recipe's badge tone (`neutral` · `success` · `warning` · `accent`). */
+    readonly badge?: string;
+    /** CC4b: an Icon's glyph (`ph ph-check`). */
+    readonly icon?: string;
+    /** CC4b: the node's name in the layer tree (`Price · Monthly`). */
+    readonly layer?: string;
 }
 
 /** The composite-core recipes a pattern may stamp (`recipe`). */
@@ -70,6 +86,8 @@ export enum 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. */
     Tabs = 'tabs',
+    /** CC4b: the Segmented control — Monthly · Yearly, named by the pattern (`name`). */
+    Segmented = 'segmented',
     /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
     Carousel = 'carousel',
     /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */
@@ -112,6 +130,8 @@ export enum PatternPlaceholder {
     Image = 'image',
     /** CC3: a clip the studio uploads (a Video's file): the poster blank until then, publish-blocking. */
     Video = 'video',
+    /** CC4b (Q37): a price the studio types — free text, publish-blocking, its label shown meanwhile, never a number. */
+    Price = 'price',
 }
 
 /** CC3: what an `opens` node opens. */

package/src/generation-core/site-spec.generated.ts

@@ -1025,6 +1025,601 @@ export 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",

package/styles/iox-design.css

@@ -254,6 +254,25 @@ dialog[data-iox-dialog]:not([open]) {
 /* A panel is a Tab stop of its own (APG): its focus ring is the look's. */
 .iox-role-tabs-panel:focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }
 
+/* ── CC4b: the Segmented control (complex-components board 10; composite T32) ──────────────────────────
+   The renderers write ONE markup (composite-core segmented.ts): the root is role=radiogroup, each option a <button
+   role=radio aria-checked>. Structural only — the look is the parts' element styles (segmented, segmented-option). */
+
+/* An option is a real button: its UA look is reset at zero specificity, so the node's own rule (the style) wins. Its
+   words keep to one line (board 10: a 5th option does not fit a phone row — the Options list refuses it). */
+:where(.iox-role-segmented-option) {
+  appearance: none; -webkit-appearance: none; background: none; border: 0 solid transparent; margin: 0;
+  font: inherit; color: inherit; cursor: pointer; box-sizing: border-box; white-space: nowrap;
+}
+:where(.iox-role-segmented-option):focus-visible { outline: none; }
+/* Q39 (WCAG 2.4.11): on a phone the pricing pattern keeps the control sticky at the top of its section; a focused card
+   must never scroll in under it. */
+@media (max-width: 767px) {
+  html:has(.iox-role-segmented) {
+    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 28px + var(--iox-segmented-option-min-height, 44px) + 2 * var(--iox-segmented-pad, 4px));
+  }
+}
+
 /* ── CC3: Video (complex-components plan §7b, board 5) ────────────────────────────────────────────────
    One markup from media-core `videoInnerHtml` (both engine paths, the canvas). The frame is the node (it wears
    `media`: radius, fit); the poster, the play button, the provider badge and the consent prompt are drawn by the