@vectoriox/iox-ui 5.34.0 → 5.36.0

package/src/composite-core/structure.ts

@@ -1,3 +1,4 @@
+import { AccordionRole } from './accordion';
 import { CardPart, CardRole } from './card';
 
 /**
@@ -22,6 +23,12 @@ export const COMPOSITE_ROLE_SPECS: Readonly<Record<string, CompositeRoleSpec>> =
     [CardRole.Title]: { parent: CardRole.Content, locked: true },
     [CardRole.Text]: { parent: CardRole.Content, part: CardPart.Text },
     [CardRole.Actions]: { parent: CardRole.Content, part: CardPart.Actions },
+    // CC2 — an item always keeps its header and its panel; the icon is Behaviour ▸ Icon's.
+    [AccordionRole.Accordion]: { parent: null },
+    [AccordionRole.Item]: { parent: AccordionRole.Accordion },
+    [AccordionRole.Trigger]: { parent: AccordionRole.Item, locked: true },
+    [AccordionRole.Panel]: { parent: AccordionRole.Item, locked: true },
+    [AccordionRole.Icon]: { parent: AccordionRole.Trigger },
 };
 
 export enum StructureEdit {

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);