@vectoriox/iox-ui 5.37.0 → 5.38.0

package/src/design-core/flavor-spec.generated.ts

@@ -1108,6 +1108,21 @@ export const SPEC_TIERS = {
       "name": "media-scrim-ink",
       "type": "color",
       "default": "#FFFFFF"
+    },
+    {
+      "name": "video-play-bg",
+      "type": "color",
+      "default": "var(--iox-button-primary-bg)"
+    },
+    {
+      "name": "video-play-ink",
+      "type": "color",
+      "default": "var(--iox-button-primary-ink)"
+    },
+    {
+      "name": "video-play-size",
+      "type": "size",
+      "default": "64px"
     }
   ]
 } as const;
@@ -1785,7 +1800,8 @@ export const SPEC_ELEMENT_STYLES = [
     "appliesTo": [
       "Container",
       "LinkedContainer",
-      "Card"
+      "Card",
+      "SliderSlide"
     ],
     "base": {
       "color": "inherit",
@@ -1940,7 +1956,8 @@ export const SPEC_ELEMENT_STYLES = [
     "appliesTo": [
       "Image",
       "SliderSlide",
-      "Gallery"
+      "Gallery",
+      "Video"
     ],
     "base": {
       "borderRadius": "var(--iox-image-radius)",
@@ -2186,6 +2203,7 @@ export const SPEC_DEFAULT_ELEMENT_STYLE = {
   "Link": "link",
   "Image": "media",
   "SliderSlide": "media",
+  "Video": "media",
   "Divider": "rule",
   "Icon": "icon",
   "Dialog": "dialog",
@@ -4288,6 +4306,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -5910,6 +5949,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -7524,6 +7584,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -9180,6 +9261,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -10798,6 +10900,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -12423,6 +12546,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   }

package/src/generation-core/baseline-roles.ts

@@ -61,6 +61,8 @@ export const BASELINE_ROLES: Readonly<Record<string, Readonly<Record<string, Bas
     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 },
+    // CC3: a Video fills its column at 16 / 9 — the shape the poster and the player take.
+    Video: { width: Behaviour, aspectRatio: Behaviour },
 };
 
 /** The style values a type's constructor sets for an empty palette drop, each mapped to the value the

package/src/generation-core/compose-site.ts

@@ -2,12 +2,12 @@ import { DesignChoices, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui
 import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
 import {
     ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_WORDS, accordionAnswerOf, accordionItems, accordionQuestionOf, AccordionRole,
-    buildAccordionRecipe, buildCardRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode, CompositeNodeSpec, findByRole,
-    pickAccordionAutoBinds,
+    buildAccordionRecipe, buildCardRecipe, buildCarouselRecipe, buildLightboxRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode,
+    CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, pickAccordionAutoBinds, SLIDE_TO_ROW, SLIDE_TYPE,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { NODE_BASELINES } from './node-baselines.generated';
-import { BindScope, CardBindTarget, PatternDirective, PatternNode, PatternPlaceholder, PatternRecipe, SitePattern, patternById } from './patterns';
+import { BindScope, CardBindTarget, PatternDirective, PatternNode, PatternOpens, PatternPlaceholder, PatternRecipe, SitePattern, patternById } from './patterns';
 import { assertStyleSlots, ComposeError, createSerializedNode, SerializedBinding, SerializedNode, setStyleProps } from './serialized-node';
 import {
     ContentTypePlan, DataSourcePlan, FactKey, FACT_KEYS, GlobalSlot, PagePlan, PageSectionPlan, PlanDataSourceMode, PlanDataSourceType,
@@ -37,6 +37,8 @@ export enum PlaceholderKind {
     Copy = 'copy',
     /** An image slot with no image: the empty-image placeholder (DS3). */
     Image = 'image',
+    /** CC3: a video slot with no clip — the studio uploads its own (the poster blank meanwhile). */
+    Video = 'video',
 }
 
 export interface ComposedPlaceholder {
@@ -174,6 +176,10 @@ const BUTTON_BLOCK = 'ButtonBlock';
 const FORM = 'Form';
 const FIELD = 'Field';
 const IMAGE = 'Image';
+const VIDEO = 'Video';
+/** A Video's source prop (media-core `VideoTrait.Source` — not `source`, which names a data source). */
+const VIDEO_SOURCE_PROP = 'videoSource';
+const DIALOG = 'Dialog';
 const SUBMIT_BUTTON = 'SubmitButton';
 const FORM_SUCCESS = 'FormSuccess';
 const FORM_ERROR = 'FormError';
@@ -231,6 +237,8 @@ interface Ctx {
     placeholders: ComposedPlaceholder[];
     issues: ComposeIssue[];
     routes: ReadonlySet<string>;
+    /** CC3: nodes whose click opens the pattern's lightbox (`opens`), wired once the pattern is stamped. */
+    openers?: string[];
 }
 
 function nonEmpty(v: unknown): v is string {
@@ -480,6 +488,22 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
         }
     }
 
+    // CC3: a Video in background mode is an uploaded file's; its clip is the studio's own (a placeholder until then).
+    if (pn.video) {
+        if (type !== VIDEO) throw new ComposeError(`${id}: "video" belongs on a Video`);
+        setProp(node, VIDEO_SOURCE_PROP, 'file');
+        setProp(node, 'mode', pn.video);
+    }
+    if (pn.ph === PatternPlaceholder.Video) {
+        setProp(node, 'src', '');
+        ctx.placeholders.push({ nodeId: id, owner: ctx.owner, kind: PlaceholderKind.Video, text: '' });
+    }
+    if (pn.name) setProp(node, 'ariaLabel', pn.name);
+    if (pn.opens) {
+        if (pn.opens !== PatternOpens.Lightbox) throw new ComposeError(`${id}: "opens" names the pattern's lightbox`);
+        (ctx.openers ??= []).push(id);
+    }
+
     // Images: an empty slot, or a bound one — both fall back to the DS3 empty image, never a stock URL.
     if (pn.ph === PatternPlaceholder.Image) {
         setProp(node, 'src', '');
@@ -562,6 +586,8 @@ const CARD_BINDS: Readonly<Record<CardBindTarget, { role: CardRole; prop: string
  */
 function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | null, ctx: Ctx): SerializedNode {
     if (pn.recipe === PatternRecipe.Accordion) return composeAccordion(pn, id, ctx);
+    if (pn.recipe === PatternRecipe.Carousel) return composeCarousel(pn, id, ctx);
+    if (pn.recipe === PatternRecipe.Lightbox) return composeLightbox(pn, id, repeater, ctx);
     if (pn.recipe !== PatternRecipe.Card) throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
     const layout = (pn.layout ?? CardLayout.Top) as CardLayout;
     if (!CARD_LAYOUTS.includes(layout)) throw new ComposeError(`${id}: a card has no layout "${pn.layout}"`);
@@ -641,10 +667,60 @@ function composeAccordion(pn: PatternNode, id: string, ctx: Ctx): SerializedNode
     return root;
 }
 
+/** A recipe's node factory for this composer: ids derive from the recipe's keys (`<id>-<key>`, the root `<id>`). */
+function recipeFactory(id: string, rootKey: string): (spec: CompositeNodeSpec) => CompositeNode {
+    return spec => create(spec.key === rootKey ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
+}
+
+/**
+ * CC3: the testimonial carousel — composite-core's recipe (the Slider with its control parts), stamped with this
+ * composer's factory. Every quote and every "client · project" line is a placeholder the studio rewrites (`ph: copy`):
+ * testimonials are facts, never invented.
+ */
+function composeCarousel(pn: PatternNode, id: string, ctx: Ctx): SerializedNode {
+    const slider = buildCarouselRecipe(recipeFactory(id, 'carousel')) as SerializedNode;
+    if (pn.ph === PatternPlaceholder.Copy) {
+        for (const slide of (slider.children ?? []).filter(c => c.type === SLIDE_TYPE)) {
+            for (const text of slide.children ?? []) ctx.placeholders.push({ nodeId: text.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(text.props?.['content'] ?? '') });
+        }
+    }
+    return slider;
+}
+
+/**
+ * CC3: the Lightbox — a Dialog holding a Slider bound to the node's `src` (the gallery's own source): one template
+ * slide whose image reads the row (a bare URL row: decorative alt), its arrows hidden on a phone.
+ */
+function composeLightbox(pn: PatternNode, id: string, repeater: RepeaterScope | null, ctx: Ctx): SerializedNode {
+    if (!pn.src) throw new ComposeError(`${id}: a lightbox needs the gallery's source (src)`);
+    const scoped = resolveScoped(pn.src, repeater, ctx, id);
+    const sourcePath = scoped.path === ITEM_VALUE_PATH ? '' : scoped.path;
+    return buildLightboxRecipe(recipeFactory(id, 'lightbox'), { source: scoped.source, sourcePath, imageField: 'item' }) as SerializedNode;
+}
+
+/** CC3: every `opens: lightbox` node of a stamped pattern opens the pattern's lightbox at its own row. */
+function wireOpeners(root: SerializedNode, openers: ReadonlyArray<string>): void {
+    if (!openers.length) return;
+    let lightbox: SerializedNode | null = null;
+    const find = (n: SerializedNode) => { if (!lightbox && n.type === DIALOG && n.label === LIGHTBOX_LABEL) lightbox = n; (n.children ?? []).forEach(find); };
+    find(root);
+    if (!lightbox) throw new ComposeError(`${root.id}: "opens: lightbox" with no lightbox in the pattern`);
+    const target = (lightbox as SerializedNode).id;
+    const visit = (n: SerializedNode) => {
+        if (openers.includes(n.id)) {
+            n.interactions = [{ id: `${n.id}-opens`, trigger: 'click', actions: [{ type: 'openDialog', target, params: { slideTo: SLIDE_TO_ROW }, duration: 0, delay: 0, easing: 'ease' }] }];
+        }
+        (n.children ?? []).forEach(visit);
+    };
+    visit(root);
+}
+
 function composePattern(pattern: SitePattern, id: string, ctx: Ctx): SerializedNode {
     if (pattern.node.each) throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
-    const node = composeNode(pattern.node, id, null, ctx);
+    const own: Ctx = { ...ctx, openers: [] };
+    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 ?? []);
     node.label = pattern.label;
     return node;
 }

package/src/generation-core/node-baselines.generated.ts

@@ -3032,7 +3032,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "enableParallax": false,
       "enableGrid": false,
       "gridRows": 2,
-      "breakpoints": ""
+      "breakpoints": "",
+      "ariaLabel": ""
     },
     "styleProps": {
       "position": "static",
@@ -3142,7 +3143,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "enableGrid",
       "gridRows",
       "__responsiveLabel",
-      "breakpoints"
+      "breakpoints",
+      "__accessibilityLabel",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -4660,7 +4663,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "showCloseButton": true,
       "consentRole": false,
       "closeAbove": "",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "colorScheme": "default"
     },
     "styleProps": {
       "position": "static",
@@ -4753,7 +4757,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "__responsiveLabel",
       "closeAbove",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "colorScheme"
     ],
     "styleTraits": [
       "position",
@@ -4847,6 +4852,145 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "transitionTimingFunction"
     ],
     "container": true
+  },
+  "Video": {
+    "props": {
+      "videoSource": "youtube",
+      "src": "",
+      "poster": "",
+      "mode": "inline",
+      "autoplay": false,
+      "title": "",
+      "captions": "",
+      "captionsLang": "en",
+      "consentCategory": "marketing"
+    },
+    "styleProps": {
+      "position": "static",
+      "top": "auto",
+      "right": "auto",
+      "bottom": "auto",
+      "left": "auto",
+      "zIndex": "0",
+      "width": "100%",
+      "height": "auto",
+      "minWidth": "auto",
+      "minHeight": "auto",
+      "maxWidth": "auto",
+      "maxHeight": "auto",
+      "aspectRatio": "16 / 9",
+      "objectFit": "cover",
+      "overflow": "visible",
+      "margin": "0px 0px 0px 0px",
+      "padding": "0px 0px 0px 0px",
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "#CCCCCC",
+      "borderRadius": "0px",
+      "opacity": "1",
+      "mixBlendMode": "normal",
+      "cursor": "auto",
+      "boxShadow": "",
+      "textShadow": "",
+      "translateX": "0px",
+      "translateY": "0px",
+      "scaleX": "1",
+      "scaleY": "1",
+      "rotate": "0deg",
+      "skewX": "0deg",
+      "skewY": "0deg",
+      "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",
+      "transitionDuration": "0ms",
+      "transitionDelay": "0ms",
+      "transitionTimingFunction": "ease"
+    },
+    "traits": [
+      "__mediaLabel",
+      "videoSource",
+      "src",
+      "poster",
+      "__behaviourLabel",
+      "mode",
+      "autoplay",
+      "__accessibilityLabel",
+      "title",
+      "captions",
+      "captionsLang",
+      "__privacyLabel",
+      "consentCategory"
+    ],
+    "styleTraits": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "zIndex",
+      "width",
+      "height",
+      "minWidth",
+      "minHeight",
+      "maxWidth",
+      "maxHeight",
+      "aspectRatio",
+      "objectFit",
+      "overflow",
+      "margin",
+      "padding",
+      "borderWidth",
+      "borderStyle",
+      "borderColor",
+      "borderRadius",
+      "opacity",
+      "mixBlendMode",
+      "cursor",
+      "_sep_shadow",
+      "boxShadow",
+      "textShadow",
+      "_sep_transform",
+      "translateX",
+      "translateY",
+      "scaleX",
+      "scaleY",
+      "rotate",
+      "skewX",
+      "skewY",
+      "_sep_filter",
+      "filterBlur",
+      "filterHueRotate",
+      "filterBrightness",
+      "filterContrast",
+      "filterSaturate",
+      "filterGrayscale",
+      "filterSepia",
+      "filterInvert",
+      "_sep_backdrop",
+      "backdropFilter",
+      "backdropBlur",
+      "backdropBrightness",
+      "backdropContrast",
+      "backdropSaturate",
+      "_sep_clip",
+      "clipPath",
+      "_sep_transition",
+      "transitionDuration",
+      "transitionDelay",
+      "transitionTimingFunction"
+    ],
+    "container": false
   }
 };
 

package/src/generation-core/patterns.ts

@@ -53,6 +53,12 @@ export interface PatternNode {
     readonly layout?: string;
     readonly parts?: Readonly<Record<string, boolean>>;
     readonly binds?: Readonly<Record<string, string>>;
+    /** CC3: a Video's mode — `background` (an uploaded file, a muted loop). */
+    readonly video?: string;
+    /** CC3: a click on this node opens the pattern's lightbox at the clicked row (`lightbox`). */
+    readonly opens?: string;
+    /** CC3: a control's accessible name (`ariaLabel`). */
+    readonly name?: string;
 }
 
 /** The composite-core recipes a pattern may stamp (`recipe`). */
@@ -61,6 +67,10 @@ export enum PatternRecipe {
     /** CC2: the Accordion — Manual (three placeholder items), or From content when the section names a list
      *  `binding` (`src: '$binding?'`): one template item bound to the type's question / answer fields. */
     Accordion = 'accordion',
+    /** 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). */
+    Lightbox = 'lightbox',
 }
 
 /** A recipe node's `binds` keys → the part each binds (Card v2). */
@@ -97,6 +107,13 @@ export const SITE_PATTERNS: Readonly<Record<string, SitePattern>> = SPEC_SITE_PA
 export enum PatternPlaceholder {
     Copy = 'copy',
     Image = 'image',
+    /** CC3: a clip the studio uploads (a Video's file): the poster blank until then, publish-blocking. */
+    Video = 'video',
+}
+
+/** CC3: what an `opens` node opens. */
+export enum PatternOpens {
+    Lightbox = 'lightbox',
 }
 
 /** The composer directives a pattern writes where a plan supplies the value. */