@vectoriox/iox-ui 5.38.0 → 5.40.0

package/src/design-core/element-styles.ts

@@ -19,10 +19,13 @@ export enum ElementStyleState {
     Focus = 'focus',
     /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
     Current = 'current',
+    /** A composite part that is ON — the active tab (CC4a "Active"): compiles to `[data-iox-on]`, the attribute every
+     *  composite runtime writes. */
+    On = 'on',
 }
 
 export const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState> =
-    [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current];
+    [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On];
 
 export interface ElementStyle {
     readonly id: string;
@@ -34,6 +37,7 @@ export interface ElementStyle {
     readonly active?: Readonly<Record<string, string>>;
     readonly focus?: Readonly<Record<string, string>>;
     readonly current?: Readonly<Record<string, string>>;
+    readonly on?: Readonly<Record<string, string>>;
 }
 
 export const ELEMENT_STYLES: ReadonlyArray<ElementStyle> = SPEC_ELEMENT_STYLES;
@@ -166,7 +170,7 @@ function ownedEntries(style: ElementStyle): Array<OwnedTrait & { value: string }
     return out;
 }
 
-/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
+/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current/on. */
 export function ownedTraitsOf(style: ElementStyle): Array<OwnedTrait & { value: string }> {
     return ownedEntries(style);
 }
@@ -196,7 +200,7 @@ function writeEntries(target: ElementStyleTarget, style: ElementStyle, skip: Own
     return unknown;
 }
 
-/** Write the style's exact base map and its hover/active/focus/current maps into the target. */
+/** Write the style's exact base map and its hover/active/focus/current/on maps into the target. */
 export function applyElementStyle(target: ElementStyleTarget, id: string): ApplyElementStyleResult {
     const style = elementStyleById(id);
     if (!style) return { applied: false, unknownTraits: [] };

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

@@ -1019,6 +1019,41 @@ export const SPEC_TIERS = {
       "type": "spacing",
       "default": "0px 0px 20px 0px"
     },
+    {
+      "name": "tab-list-border",
+      "type": "color",
+      "default": "var(--iox-line)"
+    },
+    {
+      "name": "tab-ink",
+      "type": "color",
+      "default": "var(--iox-text-muted)"
+    },
+    {
+      "name": "tab-on-ink",
+      "type": "color",
+      "default": "var(--iox-text)"
+    },
+    {
+      "name": "tab-on-mark",
+      "type": "color",
+      "default": "var(--iox-accent-text)"
+    },
+    {
+      "name": "tab-pad",
+      "type": "spacing",
+      "default": "10px 16px"
+    },
+    {
+      "name": "tab-list-border-width",
+      "type": "size",
+      "default": "0px 0px var(--iox-border-width) 0px"
+    },
+    {
+      "name": "tab-mark-width",
+      "type": "size",
+      "default": "0px 0px 2px 0px"
+    },
     {
       "name": "heading-color",
       "type": "color",
@@ -1949,6 +1984,48 @@ export const SPEC_ELEMENT_STYLES = [
       "color": "var(--iox-text-muted)"
     }
   },
+  {
+    "id": "tab-list",
+    "label": "Tab list",
+    "group": "Layout",
+    "appliesTo": [
+      "Container",
+      "Repeater"
+    ],
+    "base": {
+      "color": "inherit",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-tab-list-border-width)",
+      "borderColor": "var(--iox-tab-list-border)"
+    }
+  },
+  {
+    "id": "tab",
+    "label": "Tab",
+    "group": "Buttons",
+    "appliesTo": [
+      "ButtonBlock"
+    ],
+    "base": {
+      "color": "var(--iox-tab-ink)",
+      "padding": "var(--iox-tab-pad)",
+      "fontFamily": "var(--iox-button-font)",
+      "fontWeight": "var(--iox-button-weight)",
+      "backgroundColor": "transparent",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-tab-mark-width)",
+      "borderColor": "transparent",
+      "transitionDuration": "var(--iox-dur-fast)",
+      "transitionTimingFunction": "var(--iox-ease-standard)"
+    },
+    "on": {
+      "color": "var(--iox-tab-on-ink)",
+      "borderColor": "var(--iox-tab-on-mark)"
+    },
+    "focus": {
+      "boxShadow": "var(--iox-focus-ring)"
+    }
+  },
   {
     "id": "media",
     "label": "Image",
@@ -4181,6 +4258,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -5823,6 +5949,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -7459,6 +7634,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -9136,6 +9360,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -10775,6 +11048,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -12420,6 +12742,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",

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

@@ -3,7 +3,9 @@ import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-u
 import {
     ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_WORDS, accordionAnswerOf, accordionItems, accordionQuestionOf, AccordionRole,
     buildAccordionRecipe, buildCardRecipe, buildCarouselRecipe, buildLightboxRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode,
-    CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, pickAccordionAutoBinds, SLIDE_TO_ROW, SLIDE_TYPE,
+    CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, pickAccordionAutoBinds, pickTabsAutoBinds, SLIDE_TO_ROW, SLIDE_TYPE, buildTabsRecipe, tabLabelNodeOf,
+    tabPanelImageOf, tabPanelTextOf, tabsListOf, tabsPanels, tabsPanelsOf, tabsTriggers, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP,
+    TABS_TEXT_BIND_PROP, TABS_WORDS,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { NODE_BASELINES } from './node-baselines.generated';
@@ -586,6 +588,7 @@ 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.Tabs) return composeTabs(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`);
@@ -667,6 +670,70 @@ function composeAccordion(pn: PatternNode, id: string, ctx: Ctx): SerializedNode
     return root;
 }
 
+/** The content type a section binding lists, through its data source. */
+function boundContentType(binding: string, ctx: Ctx): ContentTypePlan | undefined {
+    const source = ctx.plan.dataSources.find(d => d.alias === binding);
+    return source && 'contentType' in source ? ctx.plan.contentTypes.find(t => t.name === source.contentType) : undefined;
+}
+
+const TABS_ROOT_KEY = 'tabs';
+const TABS_HOLDER_KEYS: ReadonlySet<string> = new Set(['list', 'panels']);
+
+/**
+ * Tabs (CC4a) — the composite-core recipe stamped with this composer's factory. Manual (no section binding): three
+ * tabs whose words are placeholders the studio rewrites (`ph: 'copy'`) and whose pictures it supplies — never invented.
+ * From content (the section names a list `binding`, R3's AI path): the tab list and the panels holder are BOTH
+ * Repeaters over that list, each holding its one template (one row → its tab AND its panel, paired by the row's id at
+ * render), the tab's words, the panel's words and its picture bound to the type's first short-text, long-text and image
+ * fields (`pickTabsAutoBinds`, the builder switch's rule), limit 6. The tab list is named by the pattern's `name`.
+ */
+function composeTabs(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 type = binding && TABS_HOLDER_KEYS.has(spec.key) ? REPEATER : spec.type;
+        return create(spec.key === TABS_ROOT_KEY ? id : `${id}-${spec.key}`, type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
+    };
+    const root = buildTabsRecipe(factory, { tabs: binding ? TABS_WORDS.slice(0, 1) : undefined, label: pn.name }) as SerializedNode;
+    const tree = root as CompositeNode;
+    if (!binding) {
+        if (pn.ph === PatternPlaceholder.Copy) {
+            for (const tab of tabsTriggers(tree)) {
+                const words = tabLabelNodeOf(tab);
+                if (words) ctx.placeholders.push({ nodeId: words.id!, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(words.props?.[TABS_LABEL_BIND_PROP] ?? '') });
+            }
+            for (const panel of tabsPanels(tree)) {
+                const text = tabPanelTextOf(panel);
+                if (text) ctx.placeholders.push({ nodeId: text.id!, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(text.props?.[TABS_TEXT_BIND_PROP] ?? '') });
+                const image = tabPanelImageOf(panel);
+                if (image) ctx.placeholders.push({ nodeId: image.id!, owner: ctx.owner, kind: PlaceholderKind.Image, text: '' });
+            }
+        }
+        return root;
+    }
+    const type = boundContentType(binding, ctx);
+    const picks = pickTabsAutoBinds((type?.fields ?? []).map(f => ({ name: f.name, type: f.type, controller: f.controller })));
+    if (!picks.label || !picks.text) {
+        throw new ComposeError(`${id}: "${binding}" has no short-text field for the tab and long-text field for its panel`);
+    }
+    for (const holder of [tabsListOf(tree), tabsPanelsOf(tree)] as SerializedNode[]) {
+        addBinding(holder, { prop: 'source', source: binding, path: '' });
+        setProp(holder, 'limit', TABS_CONTENT_LIMIT);
+    }
+    const [tab] = tabsTriggers(tree);
+    const [panel] = tabsPanels(tree);
+    delete tab.itemKey;
+    delete panel.itemKey;
+    addBinding(tabLabelNodeOf(tab) as SerializedNode, { prop: TABS_LABEL_BIND_PROP, source: binding, path: picks.label });
+    addBinding(tabPanelTextOf(panel) as SerializedNode, { prop: TABS_TEXT_BIND_PROP, source: binding, path: picks.text });
+    const image = tabPanelImageOf(panel) as SerializedNode | undefined;
+    if (image && picks.image) {
+        addBinding(image, { prop: TABS_IMAGE_BIND_PROP, source: binding, path: picks.image });
+        addBinding(image, { prop: 'alt', source: binding, path: picks.label });
+    }
+    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;
@@ -819,3 +886,82 @@ export function composeSite(plan: SitePlan, context: ComposeContext): ComposedSi
         issues,
     };
 }
+
+// ── The site header on its own (CC1.1) ──────────────────────────────────────────────────────────
+
+/** The header pattern the Studio template stamps — and the builder palette's "Navigation bar". */
+export const SITE_HEADER_PATTERN = 'nav.inline-cta';
+
+/** A page of the studio as the builder lists it. */
+export interface SitePageRef {
+    readonly name: string;
+    readonly route: string;
+    readonly isHome?: boolean;
+}
+
+/** What the header is composed from when there is no Site Plan: the studio's name and its pages. */
+export interface NavHeaderInput {
+    readonly business: SiteBusiness;
+    /** Every page of the studio, in the order the navigation should list them. */
+    readonly pages: ReadonlyArray<SitePageRef>;
+}
+
+export interface NavHeaderOptions {
+    /** The header's id; its parts' ids derive from it (`<id>-0-1-…`), so a fresh id gives fresh parts. */
+    readonly id: string;
+    /** A phone-shape part's id (the builder passes its id generator). */
+    readonly newId?: (suffix: string) => string;
+}
+
+export interface ComposedNavHeader {
+    /** The header — a global BEFORE element — carrying the pattern's phone shape (the drawer). */
+    header: SerializedNode;
+    issues: ComposeIssue[];
+}
+
+const ROUTE_PARAM = ':';
+const HOME_PATH = '/';
+const KEY_UNSAFE = /[^a-z0-9]+/gi;
+
+/** The pages a navigation links to: every page but Home (the brand links there) and template pages
+ *  (a `/work/:slug` route has no single address), in the studio's order. */
+export function siteNavPages(pages: ReadonlyArray<SitePageRef>): SitePageRef[] {
+    return pages.filter(p => !!p.route && !p.isHome && p.route !== HOME_PATH && !p.route.includes(ROUTE_PARAM));
+}
+
+function navPagePlans(pages: ReadonlyArray<SitePageRef>): PagePlan[] {
+    const used = new Set<string>();
+    return pages.map((p, i) => {
+        let key = p.route.replace(KEY_UNSAFE, '-').replace(/^-+|-+$/g, '').toLowerCase() || `page-${i}`;
+        for (let n = 2; used.has(key); n++) key = `${key}-${n}`;
+        used.add(key);
+        return { key, name: p.name, route: p.route, inNav: true, isHome: p.isHome === true, sections: [] };
+    });
+}
+
+/**
+ * The Studio template's header, composed for a studio that has no Site Plan — the builder palette's
+ * "Navigation bar". THE SAME pattern and the same composer as `composeSite`: the brand (the business name),
+ * one plain Link per navigation page, the call to action (W1.1's one dangling-link rule when the studio has
+ * no /contact page: an email to the business, else removed), and the pattern's phone shape. Pure.
+ */
+export function composeNavHeader(input: NavHeaderInput, options: NavHeaderOptions): ComposedNavHeader {
+    if (!nonEmpty(options?.id)) throw new ComposeError('composeNavHeader needs the header id');
+    const pattern = patternById(SITE_HEADER_PATTERN) as SitePattern;
+    const all = navPagePlans(input.pages);
+    const navRoutes = new Set(siteNavPages(input.pages).map(p => p.route));
+    const pages = all.map(p => ({ ...p, inNav: navRoutes.has(p.route) }));
+    const plan = { business: input.business, pages, dataSources: [], contentTypes: [] } as unknown as SitePlan;
+    const email = nonEmpty(input.business.facts?.email) ? input.business.facts!.email!.trim() : null;
+    const issues: ComposeIssue[] = [];
+    const ctx: Ctx = {
+        owner: GlobalSlot.Header, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders: [], issues, routes: new Set(pages.map(p => p.route)),
+    };
+    const root = composePattern(pattern, options.id, ctx);
+    root.isGlobal = true;
+    root.globalPosition = pattern.global;
+    const shape = pattern.phoneMenu as NavShape | undefined;
+    const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    return { header, issues };
+}