@vectoriox/iox-ui 5.35.0 → 5.37.0

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

@@ -974,6 +974,51 @@ export const SPEC_TIERS = {
       "type": "size",
       "default": "var(--iox-size-label)"
     },
+    {
+      "name": "accordion-gap",
+      "type": "spacing",
+      "default": "0px"
+    },
+    {
+      "name": "accordion-item-bg",
+      "type": "color",
+      "default": "var(--iox-section-bg)"
+    },
+    {
+      "name": "accordion-item-border",
+      "type": "color",
+      "default": "var(--iox-line)"
+    },
+    {
+      "name": "accordion-item-border-width",
+      "type": "size",
+      "default": "0px 0px var(--iox-border-width) 0px"
+    },
+    {
+      "name": "accordion-item-radius",
+      "type": "radius",
+      "default": "0px"
+    },
+    {
+      "name": "accordion-item-pad",
+      "type": "spacing",
+      "default": "0px"
+    },
+    {
+      "name": "accordion-trigger-pad",
+      "type": "spacing",
+      "default": "20px 0px"
+    },
+    {
+      "name": "accordion-trigger-hover-ink",
+      "type": "color",
+      "default": "var(--iox-accent-text)"
+    },
+    {
+      "name": "accordion-panel-pad",
+      "type": "spacing",
+      "default": "0px 0px 20px 0px"
+    },
     {
       "name": "heading-color",
       "type": "color",
@@ -1839,6 +1884,55 @@ export const SPEC_ELEMENT_STYLES = [
       "boxShadow": "var(--iox-focus-ring)"
     }
   },
+  {
+    "id": "accordion-item",
+    "label": "Accordion item",
+    "group": "Layout",
+    "appliesTo": [
+      "Container"
+    ],
+    "base": {
+      "color": "inherit",
+      "backgroundColor": "var(--iox-accordion-item-bg)",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-accordion-item-border-width)",
+      "borderColor": "var(--iox-accordion-item-border)",
+      "borderRadius": "var(--iox-accordion-item-radius)",
+      "padding": "var(--iox-accordion-item-pad)"
+    }
+  },
+  {
+    "id": "accordion-trigger",
+    "label": "Accordion header",
+    "group": "Layout",
+    "appliesTo": [
+      "LinkedContainer"
+    ],
+    "base": {
+      "color": "var(--iox-heading-color)",
+      "padding": "var(--iox-accordion-trigger-pad)",
+      "transitionDuration": "var(--iox-dur-fast)",
+      "transitionTimingFunction": "var(--iox-ease-standard)"
+    },
+    "hover": {
+      "color": "var(--iox-accordion-trigger-hover-ink)"
+    },
+    "focus": {
+      "boxShadow": "var(--iox-focus-ring)"
+    }
+  },
+  {
+    "id": "accordion-panel",
+    "label": "Accordion panel",
+    "group": "Layout",
+    "appliesTo": [
+      "Container"
+    ],
+    "base": {
+      "padding": "var(--iox-accordion-panel-pad)",
+      "color": "var(--iox-text-muted)"
+    }
+  },
   {
     "id": "media",
     "label": "Image",
@@ -4006,6 +4100,69 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "var(--iox-size-label)"
       },
+      {
+        "name": "accordion-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-item-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-section-bg)"
+      },
+      {
+        "name": "accordion-item-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "accordion-item-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "accordion-item-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-item-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-trigger-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "20px 0px"
+      },
+      {
+        "name": "accordion-trigger-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "accordion-panel-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px 0px 20px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -5564,6 +5721,69 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "var(--iox-size-label)"
       },
+      {
+        "name": "accordion-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-item-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-section-bg)"
+      },
+      {
+        "name": "accordion-item-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "accordion-item-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "accordion-item-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-item-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-trigger-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "20px 0px"
+      },
+      {
+        "name": "accordion-trigger-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "accordion-panel-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px 0px 20px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -7116,6 +7336,69 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "var(--iox-size-label)"
       },
+      {
+        "name": "accordion-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-item-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-section-bg)"
+      },
+      {
+        "name": "accordion-item-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "accordion-item-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "accordion-item-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-item-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px"
+      },
+      {
+        "name": "accordion-trigger-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "20px 0px"
+      },
+      {
+        "name": "accordion-trigger-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "accordion-panel-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px 0px 20px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -8703,6 +8986,75 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "var(--iox-size-label)"
       },
+      {
+        "name": "accordion-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "12px",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface-glass)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-glass-border)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-radius-md)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px var(--iox-space-pad)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-trigger-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "20px 0px"
+      },
+      {
+        "name": "accordion-trigger-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "accordion-panel-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px 0px 20px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -10253,6 +10605,74 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "var(--iox-size-label)"
       },
+      {
+        "name": "accordion-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "12px",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface-2)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "accordion-item-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-radius-md)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px var(--iox-space-pad)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-trigger-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "20px 0px"
+      },
+      {
+        "name": "accordion-trigger-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "accordion-panel-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px 0px 20px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -11808,6 +12228,75 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "var(--iox-size-label)"
       },
+      {
+        "name": "accordion-gap",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "12px",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-surface)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line-strong)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "var(--iox-border-width)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-radius",
+        "tier": "component",
+        "type": "radius",
+        "group": "components",
+        "value": "var(--iox-radius-sm)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-item-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px var(--iox-space-pad)",
+        "overridden": true
+      },
+      {
+        "name": "accordion-trigger-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "20px 0px"
+      },
+      {
+        "name": "accordion-trigger-hover-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "accordion-panel-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "0px 0px 20px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",

package/src/forms-core/nesting.ts

@@ -17,7 +17,8 @@ export enum InteractiveTag {
  * rule. Pinned to the engine components' selectors by `interactive-hosts.spec.ts`.
  */
 export const INTERACTIVE_HOST_TAGS: Readonly<Record<string, readonly InteractiveTag[]>> = Object.freeze({
-    LinkedContainer: [InteractiveTag.Anchor],
+    // A LinkedContainer is an <a>, or — as an Accordion's header (CC2) — a <button>.
+    LinkedContainer: [InteractiveTag.Anchor, InteractiveTag.Button],
     Link: [InteractiveTag.Anchor],
     Button: [InteractiveTag.Anchor],
     ButtonBlock: [InteractiveTag.Anchor, InteractiveTag.Button],

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

@@ -1,6 +1,10 @@
 import { DesignChoices, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
 import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
-import { buildCardRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode, CompositeNodeSpec, findByRole } from '@vectoriox/iox-ui/composite-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,
+} from '@vectoriox/iox-ui/composite-core';
 
 import { NODE_BASELINES } from './node-baselines.generated';
 import { BindScope, CardBindTarget, PatternDirective, PatternNode, PatternPlaceholder, PatternRecipe, SitePattern, patternById } from './patterns';
@@ -557,6 +561,7 @@ const CARD_BINDS: Readonly<Record<CardBindTarget, { role: CardRole; prop: string
  * through its title (`href` + `param`, the stretched link). Ids derive from the recipe's keys.
  */
 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.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}"`);
@@ -593,6 +598,49 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
     return card;
 }
 
+const REPEATER = 'Repeater';
+
+/**
+ * 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
+ * invented answers. From content (the section names a list `binding` — R3's AI path): the root is a Repeater
+ * over that list holding ONE template item, its question and answer bound to the content type's first
+ * short-text and first long-text fields (`pickAccordionAutoBinds`, the builder switch's rule), limit 20.
+ */
+function composeAccordion(pn: PatternNode, id: string, ctx: Ctx): SerializedNode {
+    const binding = pn.src === PatternDirective.OptionalBinding || pn.src === PatternDirective.Binding ? ctx.section?.binding ?? null : null;
+    if (pn.src === PatternDirective.Binding && !binding) throw new ComposeError(`${id}: "$binding" with no section binding`);
+    const factory = (spec: CompositeNodeSpec): CompositeNode => {
+        const isRoot = spec.key === AccordionRole.Accordion;
+        const type = isRoot && binding ? REPEATER : spec.type;
+        return create(isRoot ? id : `${id}-${spec.key}`, type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
+    };
+    const root = buildAccordionRecipe(factory, binding ? { items: ACCORDION_WORDS.slice(0, 1) } : {}) as SerializedNode;
+    if (!binding) {
+        if (pn.ph === PatternPlaceholder.Copy) {
+            for (const item of accordionItems(root as CompositeNode)) {
+                for (const part of [accordionQuestionOf(item), accordionAnswerOf(item)]) {
+                    if (part) ctx.placeholders.push({ nodeId: part.id!, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(part.props?.[ACCORDION_BIND_PROP] ?? '') });
+                }
+            }
+        }
+        return root;
+    }
+    const source = ctx.plan.dataSources.find(d => d.alias === binding);
+    const type = source && 'contentType' in source ? ctx.plan.contentTypes.find(t => t.name === source.contentType) : undefined;
+    const picks = pickAccordionAutoBinds((type?.fields ?? []).map(f => ({ name: f.name, type: f.type, controller: f.controller })));
+    if (!picks.question || !picks.answer) {
+        throw new ComposeError(`${id}: "${binding}" has no short-text field for the question and long-text field for the answer`);
+    }
+    addBinding(root, { prop: 'source', source: binding, path: '' });
+    setProp(root, 'limit', ACCORDION_CONTENT_LIMIT);
+    const [template] = accordionItems(root as CompositeNode);
+    delete template.itemKey;
+    addBinding(accordionQuestionOf(template) as SerializedNode, { prop: ACCORDION_BIND_PROP, source: binding, path: picks.question });
+    addBinding(accordionAnswerOf(template) as SerializedNode, { prop: ACCORDION_BIND_PROP, source: binding, path: picks.answer });
+    return 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);

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

@@ -665,7 +665,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     },
     "traits": [
       "htmlTag",
-      "colorScheme"
+      "colorScheme",
+      "multiple",
+      "defaultOn"
     ],
     "styleTraits": [
       "position",
@@ -2896,7 +2898,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     },
     "traits": [
       "source",
-      "limit"
+      "limit",
+      "multiple",
+      "defaultOn"
     ],
     "styleTraits": [
       "position",

package/src/generation-core/patterns.ts

@@ -58,6 +58,9 @@ export interface PatternNode {
 /** The composite-core recipes a pattern may stamp (`recipe`). */
 export enum PatternRecipe {
     Card = 'card',
+    /** 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',
 }
 
 /** A recipe node's `binds` keys → the part each binds (Card v2). */
@@ -100,6 +103,8 @@ export enum PatternPlaceholder {
 export enum PatternDirective {
     /** A Repeater's source: the section's `binding`. */
     Binding = '$binding',
+    /** The section MAY name a list `binding` (faq.accordion): with one, the recipe's items come from it. */
+    OptionalBinding = '$binding?',
     /** `each`: one plain node per page of the plan that is in the navigation (`inNav`), in plan order —
      *  words and routes written in, editable on the canvas (W1.1). */
     NavPages = '$navPages',
@@ -150,6 +155,11 @@ export function patternNeedsBinding(pattern: SitePattern): boolean {
     return patternNodes(pattern).some(n => n.src === PatternDirective.Binding);
 }
 
+/** True when the pattern may take a section `binding` — it needs one, or names `$binding?` (CC2). */
+export function patternTakesBinding(pattern: SitePattern): boolean {
+    return patternNeedsBinding(pattern) || patternNodes(pattern).some(n => n.src === PatternDirective.OptionalBinding);
+}
+
 const IMAGE_TYPE = 'Image';
 
 /** The scopes whose ITEM a pattern's bound Images take their alt text from (an Image that names no `alt`

package/src/generation-core/serialized-node.ts

@@ -30,6 +30,10 @@ export interface SerializedNode {
     /** The part this node plays in a composite (composite-core: `card.title`; a navigation's `nav.drawer`,
      *  written by `planNavShape`). Additive; a node without one is a plain node. */
     role?: string;
+    /** An item's identity inside its composite (CC2: an Accordion item's `k1`…). Additive. */
+    itemKey?: string;
+    /** A targeted state's driving node (CC2: an icon's `trigger-on` → its item). */
+    stateTriggers?: Partial<Record<string, string>>;
     bindings: SerializedBinding[];
     interactions: unknown[];
     isGlobal?: boolean;