@vectoriox/iox-ui 5.84.0 → 5.86.0

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

@@ -2,7 +2,7 @@ import { NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, elementStyleById, owne
 import { formPresetById, FORM_ACTIONS_ROLE, channelOpensNewTab, FORM_CHANNEL_ROLE, planFormPresetIds, ControlType, FORM_NODE_TYPE, collectFormSpec, FIELD_NODE_TYPE, isChannelFilled } from '@vectoriox/iox-ui/forms-core';
 import { normalizeFrameSequence, filmScreensFor, FILM_PREPARED_PICTURES, FrameExtension } from '@vectoriox/iox-ui/media-core';
 import { SEO_DESCRIPTION_MAX, SEO_TITLE_MAX } from '@vectoriox/iox-ui/seo-core';
-import { pickTabsAutoBinds, pickAccordionAutoBinds, segmentedOptions, ITEM_OPEN_STATE, CardPart, CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, BADGE_TONES, buildCardRecipe, findByRole, buildSegmentedRecipe, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, buildTabsRecipe, TABS_WORDS, tabsTriggers, tabLabelNodeOf, TABS_LABEL_BIND_PROP, tabsPanels, tabPanelTextOf, TABS_TEXT_BIND_PROP, tabPanelImageOf, 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 { pickTabsAutoBinds, pickAccordionAutoBinds, segmentedOptions, ITEM_OPEN_STATE, CardPart, CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, BADGE_TONES, buildCardRecipe, findByRole, buildSegmentedRecipe, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, buildTabsRecipe, TABS_WORDS, tabsTriggers, tabLabelNodeOf, TABS_LABEL_BIND_PROP, tabsPanels, tabPanelTextOf, TABS_TEXT_BIND_PROP, tabPanelImageOf, tabsListOf, tabsPanelsOf, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW, setHeaderBehaviour } from '@vectoriox/iox-ui/composite-core';
 import { ELEMENT_ACTION_DESCRIPTORS, resolveActionAvailability } from '@vectoriox/iox-ui/actions-core';
 
 // GENERATED from iox-ai-guidance flavor-spec.v1.json — do not edit; re-run scripts/gen-flavor-spec.mjs
@@ -1146,6 +1146,10 @@ const SPEC_SITE_PATTERNS = {
         "label": "Navigation bar",
         "global": "before",
         "phoneMenu": "drawer",
+        "header": {
+            "behaviour": "hides",
+            "edge": "fade"
+        },
         "intent": "The brand on one side, the pages and one call to action on the other — the default header.",
         "node": {
             "t": "Container",
@@ -1215,6 +1219,10 @@ const SPEC_SITE_PATTERNS = {
         "label": "Navigation — the name centred",
         "global": "before",
         "phoneMenu": "drawer",
+        "header": {
+            "behaviour": "hides",
+            "edge": "fade"
+        },
         "intent": "The name centred above a centred row of pages — when the name is the brand.",
         "node": {
             "t": "Container",
@@ -6096,7 +6104,9 @@ const NODE_BASELINES = {
             "pageRoute": "",
             "target": "_self",
             "type": "button",
-            "ariaLabel": ""
+            "ariaLabel": "",
+            "tooltip": "",
+            "tooltipPlacement": "above"
         },
         "styleProps": {
             "position": "static",
@@ -6192,7 +6202,9 @@ const NODE_BASELINES = {
             "target",
             "type",
             "__accessibilityLabel",
-            "ariaLabel"
+            "ariaLabel",
+            "tooltip",
+            "tooltipPlacement"
         ],
         "styleTraits": [
             "position",
@@ -6581,7 +6593,9 @@ const NODE_BASELINES = {
             "defaultOn",
             "activateOn",
             "orientation",
-            "ariaLabel"
+            "ariaLabel",
+            "headerBehaviour",
+            "headerEdge"
         ],
         "styleTraits": [
             "position",
@@ -7271,7 +7285,9 @@ const NODE_BASELINES = {
             "url": "https://",
             "pageRoute": "",
             "target": "_self",
-            "ariaLabel": ""
+            "ariaLabel": "",
+            "tooltip": "",
+            "tooltipPlacement": "above"
         },
         "styleProps": {
             "position": "static",
@@ -7366,7 +7382,9 @@ const NODE_BASELINES = {
             "pageRoute",
             "target",
             "__accessibilityLabel",
-            "ariaLabel"
+            "ariaLabel",
+            "tooltip",
+            "tooltipPlacement"
         ],
         "styleTraits": [
             "position",
@@ -7471,7 +7489,9 @@ const NODE_BASELINES = {
             "pageRoute": "",
             "target": "_self",
             "colorScheme": "default",
-            "ariaLabel": ""
+            "ariaLabel": "",
+            "tooltip": "",
+            "tooltipPlacement": "above"
         },
         "styleProps": {
             "position": "static",
@@ -7566,7 +7586,9 @@ const NODE_BASELINES = {
             "target",
             "colorScheme",
             "__accessibilityLabel",
-            "ariaLabel"
+            "ariaLabel",
+            "tooltip",
+            "tooltipPlacement"
         ],
         "styleTraits": [
             "position",
@@ -9004,6 +9026,10 @@ const NODE_BASELINES = {
             "slideToClickedSlide": false,
             "effect": "slide",
             "speed": 300,
+            "scrollPlays": false,
+            "controlsPlacement": "under",
+            "enableCaption": false,
+            "enableCount": false,
             "enableNavigation": false,
             "navigationColor": "#ffffff",
             "navigationSize": 44,
@@ -9111,7 +9137,11 @@ const NODE_BASELINES = {
             "__effectsLabel",
             "effect",
             "speed",
+            "scrollPlays",
             "__navLabel",
+            "controlsPlacement",
+            "enableCaption",
+            "enableCount",
             "enableNavigation",
             "navigationColor",
             "navigationSize",
@@ -9216,7 +9246,9 @@ const NODE_BASELINES = {
         "container": true
     },
     "SliderSlide": {
-        "props": {},
+        "props": {
+            "caption": ""
+        },
         "styleProps": {
             "position": "static",
             "top": "auto",
@@ -9295,7 +9327,9 @@ const NODE_BASELINES = {
             "transitionDelay": "0ms",
             "transitionTimingFunction": "ease"
         },
-        "traits": [],
+        "traits": [
+            "caption"
+        ],
         "styleTraits": [
             "position",
             "top",
@@ -9525,7 +9559,7 @@ const NODE_BASELINES = {
             "name": "Contact form",
             "formId": "",
             "feedback": "smart",
-            "resetAfterSubmit": false,
+            "afterSend": "message",
             "focusFirstProblem": true,
             "announceFailure": true,
             "honeypot": true,
@@ -9621,7 +9655,7 @@ const NODE_BASELINES = {
             "name",
             "formId",
             "feedback",
-            "resetAfterSubmit",
+            "afterSend",
             "focusFirstProblem",
             "announceFailure",
             "__spamLabel",
@@ -10911,6 +10945,200 @@ const NODE_BASELINES = {
         ],
         "container": true
     },
+    "Popover": {
+        "props": {
+            "placement": "below",
+            "ariaLabel": "",
+            "colorScheme": "default"
+        },
+        "styleProps": {
+            "position": "static",
+            "top": "auto",
+            "right": "auto",
+            "bottom": "auto",
+            "left": "auto",
+            "zIndex": "0",
+            "display": "block",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+            "alignItems": "stretch",
+            "gap": "0px",
+            "gridTemplateColumns": "1fr",
+            "gridTemplateRows": "auto",
+            "justifyItems": "stretch",
+            "alignContent": "stretch",
+            "alignSelf": "auto",
+            "order": "0",
+            "flexGrow": "0",
+            "flexShrink": "1",
+            "flexBasis": "auto",
+            "justifySelf": "auto",
+            "gridColumn": "auto",
+            "gridRow": "auto",
+            "width": "320px",
+            "height": "auto",
+            "minWidth": "auto",
+            "minHeight": "auto",
+            "maxWidth": "auto",
+            "maxHeight": "auto",
+            "aspectRatio": "auto",
+            "objectFit": "cover",
+            "overflow": "visible",
+            "fontFamily": "Poppins, sans-serif",
+            "fontSize": "16px",
+            "fontWeight": "400",
+            "color": "#000000",
+            "lineHeight": "1.5",
+            "letterSpacing": "0px",
+            "textTransform": "none",
+            "textAlign": "start",
+            "fontStyle": "normal",
+            "textDecoration": "none",
+            "fontVariantNumeric": "normal",
+            "WebkitTextStrokeWidth": "0px",
+            "WebkitTextStrokeColor": "transparent",
+            "margin": "0px 0px 0px 0px",
+            "padding": "16px",
+            "borderWidth": "0px",
+            "borderStyle": "solid",
+            "borderColor": "#CCCCCC",
+            "borderRadius": "12px",
+            "backgroundColor": "#ffffff",
+            "opacity": "1",
+            "mixBlendMode": "normal",
+            "cursor": "auto",
+            "boxShadow": "0 12px 32px rgba(0, 0, 0, 0.18)",
+            "textShadow": "",
+            "translateX": "0px",
+            "translateY": "0px",
+            "scaleX": "1",
+            "scaleY": "1",
+            "rotate": "0deg",
+            "skewX": "0deg",
+            "skewY": "0deg",
+            "transformOrigin": "center",
+            "filterBlur": "0px",
+            "filterHueRotate": "0deg",
+            "filterBrightness": "1",
+            "filterContrast": "1",
+            "filterSaturate": "1",
+            "filterGrayscale": "0",
+            "filterSepia": "0",
+            "filterInvert": "0",
+            "backdropFilter": "none",
+            "backdropBlur": "0px",
+            "backdropBrightness": "1",
+            "backdropContrast": "1",
+            "backdropSaturate": "1",
+            "clipPath": "none",
+            "transitionProperty": "",
+            "transitionDuration": "0ms",
+            "transitionDelay": "0ms",
+            "transitionTimingFunction": "ease"
+        },
+        "traits": [
+            "placement",
+            "__accessibilityLabel",
+            "ariaLabel",
+            "colorScheme"
+        ],
+        "styleTraits": [
+            "position",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "zIndex",
+            "display",
+            "flexDirection",
+            "flexWrap",
+            "justifyContent",
+            "alignItems",
+            "gap",
+            "gridTemplateColumns",
+            "gridTemplateRows",
+            "justifyItems",
+            "alignContent",
+            "textDirection",
+            "alignSelf",
+            "order",
+            "flexGrow",
+            "flexShrink",
+            "flexBasis",
+            "justifySelf",
+            "gridColumn",
+            "gridRow",
+            "width",
+            "height",
+            "minWidth",
+            "minHeight",
+            "maxWidth",
+            "maxHeight",
+            "aspectRatio",
+            "objectFit",
+            "overflow",
+            "fontFamily",
+            "fontSize",
+            "fontWeight",
+            "color",
+            "lineHeight",
+            "letterSpacing",
+            "textTransform",
+            "textAlign",
+            "fontStyle",
+            "textDecoration",
+            "fontVariantNumeric",
+            "_sep_stroke",
+            "WebkitTextStrokeWidth",
+            "WebkitTextStrokeColor",
+            "margin",
+            "padding",
+            "borderWidth",
+            "borderStyle",
+            "borderColor",
+            "borderRadius",
+            "backgroundColor",
+            "opacity",
+            "mixBlendMode",
+            "cursor",
+            "_sep_shadow",
+            "boxShadow",
+            "textShadow",
+            "_sep_transform",
+            "translateX",
+            "translateY",
+            "scaleX",
+            "scaleY",
+            "rotate",
+            "skewX",
+            "skewY",
+            "transformOrigin",
+            "_sep_filter",
+            "filterBlur",
+            "filterHueRotate",
+            "filterBrightness",
+            "filterContrast",
+            "filterSaturate",
+            "filterGrayscale",
+            "filterSepia",
+            "filterInvert",
+            "_sep_backdrop",
+            "backdropFilter",
+            "backdropBlur",
+            "backdropBrightness",
+            "backdropContrast",
+            "backdropSaturate",
+            "_sep_clip",
+            "clipPath",
+            "_sep_transition",
+            "transitionProperty",
+            "transitionDuration",
+            "transitionDelay",
+            "transitionTimingFunction"
+        ],
+        "container": true
+    },
     "Video": {
         "props": {
             "videoSource": "youtube",
@@ -11205,6 +11433,7 @@ const BASELINE_ROLES = {
     FormSuccess: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     FormError: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     Dialog: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
+    Popover: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
     // CC3: a Video fills its column at 16 / 9 — the shape the poster and the player take.
     Video: { width: Behaviour, aspectRatio: Behaviour },
 };
@@ -14411,6 +14640,13 @@ function composeSite(plan, context) {
         if (shape)
             globals = planNavShape(globals, shape, {}, slot).globals;
     }
+    // Premium M4 (T2): a header pattern's behaviour as the page scrolls — the same edit the Header section makes.
+    for (const slot of Object.values(GlobalSlot)) {
+        const header = patternById(plan.globals[slot])?.header;
+        const root = header ? globals.find(g => g.id === slot) : null;
+        if (header && root)
+            setHeaderBehaviour(root, header.behaviour, header.edge ?? null);
+    }
     return {
         source: clone$1(plan.source),
         business: clone$1(plan.business),
@@ -14471,6 +14707,8 @@ function composeNavHeader(input, options) {
     root.globalPosition = pattern.global;
     const shape = pattern.phoneMenu;
     const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    if (pattern.header)
+        setHeaderBehaviour(header, pattern.header.behaviour, pattern.header.edge ?? null);
     return { header, issues };
 }
 // ── One pattern on its own (CC4b) ───────────────────────────────────────────────────────────────