@vectoriox/iox-ui 5.35.0 → 5.36.0

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;

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

@@ -89,7 +89,7 @@ export const SPEC_SITE_PLAN_SHAPE = {
   "section": {
     "pattern": "string — a non-global pattern id",
     "slots?": "{ [slot]: string } — the pattern's declared slots",
-    "binding?": "string — the list source a pattern's $binding repeater iterates (exactly when it has one)",
+    "binding?": "string — the list source a pattern's $binding repeater iterates (exactly when it has one); a $binding? pattern (faq.accordion) MAY take one — then its items come from that content",
     "without?": "string[] — the pattern's optional parts to leave out"
   },
   "globals": {
@@ -933,6 +933,51 @@ export const SPEC_SITE_PATTERNS = {
         }
       ]
     }
+  },
+  "faq.accordion": {
+    "family": "faq",
+    "label": "FAQ — questions that open",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "14px",
+            "maxWidth": "860px",
+            "width": "100%",
+            "margin": "0px auto 0px auto"
+          },
+          "c": [
+            {
+              "t": "Text",
+              "es": "eyebrow",
+              "slot": "eyebrow",
+              "ph": "copy",
+              "text": "FAQ"
+            },
+            {
+              "t": "Heading",
+              "es": "h2",
+              "level": "h2",
+              "slot": "title",
+              "ph": "copy",
+              "text": "Questions people ask"
+            },
+            {
+              "t": "Container",
+              "recipe": "accordion",
+              "src": "$binding?",
+              "ph": "copy"
+            }
+          ]
+        }
+      ]
+    }
   }
 } as const;
 

package/src/generation-core/validate-site-plan.ts

@@ -1,7 +1,7 @@
 import { flavorPackById, parseHexColor, SPEC_AXES } from '@vectoriox/iox-ui/design-core';
 
 import {
-    altSourceScopes, BindScope, patternById, patternNeedsBinding, patternOptionalParts, patternScopes, patternSlots, PatternGlobalPosition,
+    altSourceScopes, BindScope, patternById, patternNeedsBinding, patternOptionalParts, patternTakesBinding, patternScopes, patternSlots, PatternGlobalPosition,
 } from './patterns';
 import {
     FACT_KEYS, GlobalSlot, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SitePlanSourceKind, SITE_PLAN_VERSION,
@@ -367,9 +367,10 @@ function validatePages(c: Collector, list: unknown[], types: Map<string, Content
                 });
             }
             const binding = c.string(s, 'binding', sp, false);
-            if (patternNeedsBinding(pattern)) {
-                if (!binding) c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${patternId}" repeats the section's binding — name a list source`);
-                else {
+            if (patternTakesBinding(pattern)) {
+                if (!binding) {
+                    if (patternNeedsBinding(pattern)) c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${patternId}" repeats the section's binding — name a list source`);
+                } else {
                     const src = sources.get(binding);
                     if (!src) c.add(SitePlanIssueCode.UnknownDataSource, `${sp}.binding`, `no data source "${binding}"`);
                     else if (src.type !== PlanDataSourceType.Cms || src.mode !== PlanDataSourceMode.Query) c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${binding}" is not a list source`);

package/styles/iox-design.css

@@ -207,3 +207,33 @@ dialog[data-iox-dialog]:not([open]) {
     --iox-heading-color: currentColor;
     --iox-text-muted: currentColor;
 }
+
+/* ── CC2: the Accordion (complex-components boards 3–4; composite K1) ──────────────────────────────
+   The renderers write ONE markup (composite-core accordion.ts): the header is a <button> inside a heading of
+   its question's level; the panel sits in a region inside a TRACK. These rules are structural only — the look
+   is the parts' element styles (accordion-item / -trigger / -panel), on their own node rules. */
+
+/* The heading wrapper carries the outline level and nothing of its own. */
+.iox-accordion-heading { margin: 0; padding: 0; font: inherit; color: inherit; }
+/* The header is a real button: its UA look is reset at zero specificity, so the node's own rule (the
+   accordion-trigger style and the recipe's row layout) always wins. */
+:where(.iox-accordion-button) {
+  appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0;
+  font: inherit; color: inherit; text-align: start; cursor: pointer; box-sizing: border-box;
+  /* A <button> sizes to its content even as a block: the header is the whole row (its width, an OUTER
+     prop, lands on the canvas twin's host — the button fills it). */
+  width: 100%;
+}
+/* The ONE hiding rule (board 4, Q11): a closed item's panel track collapses to a 0 row. The region inside it
+   is `hidden="until-found"` while closed — content-visibility, not display:none — so find-in-page still
+   reaches the answer; it carries no padding (a hidden box keeps its own padding), the panel node inside it
+   does. Opening animates the row over dur-base (0ms under reduced motion: the motion tokens collapse). */
+.iox-accordion-track {
+  display: grid; grid-template-rows: 0fr; min-width: 0;
+  transition: grid-template-rows var(--iox-dur-base) var(--iox-ease-standard);
+}
+.iox-accordion-track[data-iox-on] { grid-template-rows: 1fr; }
+.iox-accordion-region { min-height: 0; min-width: 0; overflow: hidden; padding: 0; margin: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .iox-accordion-track { transition: none; }
+}