@vectoriox/iox-ui 5.29.1 → 5.31.0

package/forms-core/index.d.ts

@@ -419,5 +419,48 @@ declare const FORM_PRESETS: readonly FormPresetDef[];
 /** The preset with this id, or undefined. */
 declare function formPresetById(id: string | null | undefined): FormPresetDef | undefined;
 
-export { ControlType, DEFAULT_EN_MESSAGES, FIELD_NODE_TYPE, FORM_ERROR_KEYS, FORM_NODE_TYPE, FORM_PRESETS, FeedbackTiming, FormPresetId, HONEYPOT_FIELD, IMPLIED_PATTERN, INITIAL_FORM_STATE, MESSAGE_NAMESPACE, MULTI_VALUE_CONTROLS, PATTERN_MESSAGE_KEYS, PATTERN_PRESETS, PATTERN_PRESET_OPTIONS, PatternPreset, RENDERED_AT_FIELD, RULE_DESCRIPTORS, RULE_MESSAGE_KEYS, RuleName, RuleParamKind, STORE_ACTION, addableRules, applyServerErrors, collectFieldNodes, collectFormSpec, deriveFieldName, fieldOptionsOf, firstInvalidField, formPresetById, interpretSubmitResponse, onFieldBlur, onFieldChange, onSubmitAttempt, parseFieldOptions, resetFormState, rulesFor, shouldShowError, submitEndpointPath, uniqueFieldName, validateField, validateForm, withAntiSpamFields };
-export type { FieldError, FieldOption, FieldOptionSource, FieldResult, FieldSpec, FormNodeLike, FormPresetDef, FormPresetField, FormResult, FormRuntimeState, FormSpec, FormTransport, RuleDescriptor, SubmitAction, SubmitRequest, SubmitResponse, ValidationRule };
+declare enum InteractiveTag {
+    Anchor = "a",
+    Button = "button"
+}
+/**
+ * Every node type that renders as an interactive element, and the element(s) it can render. A ButtonBlock
+ * renders `<a>` or `<button>` by its `tag` trait — both interactive, so switching the tag never lifts the
+ * rule. Pinned to the engine components' selectors by `interactive-hosts.spec.ts`.
+ */
+declare const INTERACTIVE_HOST_TAGS: Readonly<Record<string, readonly InteractiveTag[]>>;
+declare const FIELD_GROUP_NODE_TYPE = "FieldGroup";
+declare const SUBMIT_BUTTON_NODE_TYPE = "SubmitButton";
+/**
+ * Form content — what a link or a button must never hold: a Form (its controls), a Field (an input, select
+ * or textarea), a SubmitButton (a `<button>`) and a FieldGroup (it exists only to hold fields, so it moves as
+ * one). A Success / Error block is text and lives only inside its form, so it is not on the list.
+ */
+declare const FORM_CONTENT_TYPES: ReadonlySet<string>;
+/** The minimum a node must look like — a builder ComponentNode and a saved layout node both do. */
+interface NestingNode {
+    id?: string;
+    type?: string;
+    label?: string;
+    children?: NestingNode[] | null;
+}
+declare function isInteractiveHost(node: NestingNode | null | undefined): boolean;
+declare function isFormContent(node: NestingNode | null | undefined): boolean;
+/**
+ * The first form-content node in `node`'s subtree that sits inside an interactive host, or null. `insideHost`
+ * is true when `node` is placed under a host already — so a Form dropped into a link and a link that holds a
+ * Form are the same finding.
+ */
+declare function formContentInHost(node: NestingNode | null | undefined, insideHost?: boolean): NestingNode | null;
+/** One place a tree holds form content inside a link or a button. */
+interface MisplacedFormContent<N extends NestingNode = NestingNode> {
+    /** The OUTERMOST interactive host holding it. */
+    host: N;
+    /** A MAXIMAL form-content subtree inside it — the Form, never each of its fields. */
+    content: N;
+}
+/** Every form-content subtree a tree holds inside an interactive host, in document order. */
+declare function findFormContentInHosts<N extends NestingNode>(roots: readonly N[] | null | undefined): MisplacedFormContent<N>[];
+
+export { ControlType, DEFAULT_EN_MESSAGES, FIELD_GROUP_NODE_TYPE, FIELD_NODE_TYPE, FORM_CONTENT_TYPES, FORM_ERROR_KEYS, FORM_NODE_TYPE, FORM_PRESETS, FeedbackTiming, FormPresetId, HONEYPOT_FIELD, IMPLIED_PATTERN, INITIAL_FORM_STATE, INTERACTIVE_HOST_TAGS, InteractiveTag, MESSAGE_NAMESPACE, MULTI_VALUE_CONTROLS, PATTERN_MESSAGE_KEYS, PATTERN_PRESETS, PATTERN_PRESET_OPTIONS, PatternPreset, RENDERED_AT_FIELD, RULE_DESCRIPTORS, RULE_MESSAGE_KEYS, RuleName, RuleParamKind, STORE_ACTION, SUBMIT_BUTTON_NODE_TYPE, addableRules, applyServerErrors, collectFieldNodes, collectFormSpec, deriveFieldName, fieldOptionsOf, findFormContentInHosts, firstInvalidField, formContentInHost, formPresetById, interpretSubmitResponse, isFormContent, isInteractiveHost, onFieldBlur, onFieldChange, onSubmitAttempt, parseFieldOptions, resetFormState, rulesFor, shouldShowError, submitEndpointPath, uniqueFieldName, validateField, validateForm, withAntiSpamFields };
+export type { FieldError, FieldOption, FieldOptionSource, FieldResult, FieldSpec, FormNodeLike, FormPresetDef, FormPresetField, FormResult, FormRuntimeState, FormSpec, FormTransport, MisplacedFormContent, NestingNode, RuleDescriptor, SubmitAction, SubmitRequest, SubmitResponse, ValidationRule };

package/generation-core/index.d.ts

@@ -378,30 +378,21 @@ declare const SPEC_SITE_PATTERNS: {
                     };
                 };
                 readonly c: readonly [{
-                    readonly t: "LinkedContainer";
-                    readonly es: "card";
+                    readonly t: "Container";
+                    readonly recipe: "card";
+                    readonly layout: "top";
+                    readonly parts: {
+                        readonly badge: false;
+                        readonly actions: false;
+                    };
                     readonly href: "/work/:slug";
                     readonly param: "item.slug";
-                    readonly lay: {
-                        readonly display: "flex";
-                        readonly flexDirection: "column";
-                        readonly gap: "12px";
+                    readonly binds: {
+                        readonly image: "item.cover";
+                        readonly eyebrow: "item.year";
+                        readonly title: "item.title";
+                        readonly text: "item.summary";
                     };
-                    readonly c: readonly [{
-                        readonly t: "Image";
-                        readonly es: "media";
-                        readonly bind: "item.cover";
-                        readonly aspect: "4 / 3";
-                    }, {
-                        readonly t: "Heading";
-                        readonly es: "h3";
-                        readonly level: "h3";
-                        readonly bind: "item.title";
-                    }, {
-                        readonly t: "Text";
-                        readonly es: "small";
-                        readonly bind: "item.summary";
-                    }];
                 }];
             }];
             readonly lay: {
@@ -1169,7 +1160,9 @@ interface SitePlan {
  * per page in the navigation (`$navPages`) · `href` a page route (`$page.route` = the stamped page's) ·
  * `param` the value of the route's `:param` · `optional` a part a page may leave out (`without`) ·
  * `preset` a forms-core form preset (its fields, submit and Success/Error words) · `control` / `label` /
- * `required` a Field's · `c` children.
+ * `required` a Field's · `c` children · `recipe` a composite-core recipe stamped whole (`card`: Card v2 —
+ * its `layout`, the optional `parts` it leaves out, and `binds`, a binding path per part: `image`,
+ * `eyebrow`, `title`, `text`; `href` + `param` link the whole card through its title).
  */
 interface PatternNode {
     readonly t: string;
@@ -1196,7 +1189,24 @@ interface PatternNode {
     readonly label?: string;
     readonly required?: boolean;
     readonly c?: ReadonlyArray<PatternNode>;
+    readonly recipe?: string;
+    readonly layout?: string;
+    readonly parts?: Readonly<Record<string, boolean>>;
+    readonly binds?: Readonly<Record<string, string>>;
+}
+/** The composite-core recipes a pattern may stamp (`recipe`). */
+declare enum PatternRecipe {
+    Card = "card"
+}
+/** A recipe node's `binds` keys → the part each binds (Card v2). */
+declare enum CardBindTarget {
+    Image = "image",
+    Eyebrow = "eyebrow",
+    Title = "title",
+    Text = "text"
 }
+/** Every binding path a node reads: its own `bind`, and a recipe's `binds`. */
+declare function nodeBindPaths(node: PatternNode): string[];
 declare enum PatternGlobalPosition {
     Before = "before",
     After = "after"
@@ -1306,6 +1316,8 @@ interface SerializedNode {
     stateStyles?: Partial<Record<string, Record<string, unknown>>>;
     responsive?: SerializedResponsive;
     elementStyle?: string;
+    /** The part this node plays in a composite (composite-core: `card.title`). */
+    role?: string;
     bindings: SerializedBinding[];
     interactions: unknown[];
     isGlobal?: boolean;
@@ -1525,5 +1537,5 @@ declare function parseSampleImageRef(value: unknown): number | null;
  */
 declare function composeSite(plan: SitePlan, context: ComposeContext): ComposedSite;
 
-export { BASELINE_ROLES, BaselineRole, BindScope, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, FACT_KEYS, GlobalSlot, NEUTRAL_STYLE_PROPS, NODE_BASELINES, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, altSourceScopes, assertStyleSlots, assertValidSitePlan, composeSite, createSerializedNode, nextSourceOf, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
+export { BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, FACT_KEYS, GlobalSlot, NEUTRAL_STYLE_PROPS, NODE_BASELINES, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, altSourceScopes, assertStyleSlots, assertValidSitePlan, composeSite, createSerializedNode, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
 export type { CmsDataSourcePlan, ComposeContext, ComposeIssue, ComposedDataSource, ComposedItem, ComposedPage, ComposedPlaceholder, ComposedRoute, ComposedSite, ContentFieldPlan, ContentSeedPlan, ContentTypePlan, CreateNodeOptions, DataSourcePlan, FactKey, NodeBaseline, PagePlan, PageSectionPlan, PatternNode, RelativeDataSourcePlan, SerializedBinding, SerializedNode, SerializedResponsive, SiteBusiness, SitePattern, SitePlan, SitePlanIssue, SitePlanSource, SitePlanValidation, SiteTemplate, TemplatePlanInput };

package/index.d.ts

@@ -313,6 +313,19 @@ declare class BuilderButtonComponent implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<BuilderButtonComponent, "a[iox-button]", never, { "label": { "alias": "label"; "required": false; }; "link": { "alias": "link"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "node": { "alias": "node"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/**
+ * Where a node links (W1.1). Link and LinkedContainer always had two link types — an external URL or a
+ * website PAGE by its route — and ButtonBlock now has the same pair, so a composed "Get in touch" button
+ * is a page link the builder shows as `/contact`, not a hand-built URL. Framework-free: the composer
+ * (generation-core) writes it, the builder canvas and both engine render paths read it.
+ */
+declare enum LinkType {
+    /** Links nowhere — a Heading's default; "Link the whole card" (Card v2) turns its title's link on. */
+    None = "none",
+    External = "external",
+    Page = "page"
+}
+
 interface EditableNode$1 {
     bindings?: Array<{
         prop: string;
@@ -328,16 +341,35 @@ interface EditableNode$1 {
  * (engine: `createComponent({ hostElement: document.createElement(level) })`; builder:
  * RenderDirective does the same), NOT by an internal ngSwitch. `level` is kept as an input
  * for that creation logic + serialization. Editing (contenteditable) runs in the builder only.
+ *
+ * A Heading may LINK (Card v2, "Link the whole card"): its words then render inside ONE `<a>` — the
+ * card's title is its link, so the link's name is the title. The shared CSS stretches it over the card
+ * (iox-design.css). On the editing canvas the anchor never navigates and carries `data-iox-canvas`, so
+ * the stretch is off and every part of the card stays clickable; a click still selects the heading.
  */
 declare class BuilderHeadingComponent implements OnInit {
     private events;
     private cdr;
+    isPreview: boolean | null;
     content: string;
     level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     nodeId: string;
     node: EditableNode$1 | null;
+    linkType: LinkType;
+    url: string;
+    pageRoute: string;
+    target: '_self' | '_blank' | '_parent' | '_top';
     editing: boolean;
-    constructor(events: IBuilderEventEmitter | null, cdr: ChangeDetectorRef);
+    readonly linkClass = "iox-card-link";
+    constructor(events: IBuilderEventEmitter | null, cdr: ChangeDetectorRef, isPreview: boolean | null);
+    /** Where the heading links, or null (plain words). The engine hands `pageRoute` in already resolved;
+     *  the canvas shows the route as authored, as its Link does. */
+    get href(): string | null;
+    get linkTarget(): string | null;
+    get linkRel(): string | null;
+    /** On the editing canvas a link never navigates (plain, modified and middle clicks); the click still
+     *  bubbles to the heading, which is what selects it. */
+    onLinkClick(event: MouseEvent): void;
     ngOnInit(): void;
     onMouseDown(event: Event): void;
     startEdit(event: Event): void;
@@ -345,8 +377,8 @@ declare class BuilderHeadingComponent implements OnInit {
     onKeyDown(event: Event): void;
     private isBound;
     private syncTraitToPanel;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BuilderHeadingComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderHeadingComponent, "h1[iox-heading],h2[iox-heading],h3[iox-heading],h4[iox-heading],h5[iox-heading],h6[iox-heading]", never, { "content": { "alias": "content"; "required": false; }; "level": { "alias": "level"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "node": { "alias": "node"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BuilderHeadingComponent, [{ optional: true; }, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderHeadingComponent, "h1[iox-heading],h2[iox-heading],h3[iox-heading],h4[iox-heading],h5[iox-heading],h6[iox-heading]", never, { "content": { "alias": "content"; "required": false; }; "level": { "alias": "level"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "node": { "alias": "node"; "required": false; }; "linkType": { "alias": "linkType"; "required": false; }; "url": { "alias": "url"; "required": false; }; "pageRoute": { "alias": "pageRoute"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 interface EditableNode {
@@ -446,17 +478,6 @@ declare class ClientRepeaterComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ClientRepeaterComponent, "iox-repeater", never, { "nodeId": { "alias": "nodeId"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-/**
- * Where a node links (W1.1). Link and LinkedContainer always had two link types — an external URL or a
- * website PAGE by its route — and ButtonBlock now has the same pair, so a composed "Get in touch" button
- * is a page link the builder shows as `/contact`, not a hand-built URL. Framework-free: the composer
- * (generation-core) writes it, the builder canvas and both engine render paths read it.
- */
-declare enum LinkType {
-    External = "external",
-    Page = "page"
-}
-
 /**
  * Directive-host ButtonBlock: the real `<a>`/`<button>` IS the host — no `app-button-block`
  * wrapper, no inner/outer split. The tag is chosen by whoever CREATES the component (engine
@@ -1371,6 +1392,7 @@ declare class IoxComponentRegistryService {
     private readonly map;
     getComponent(type: string): Type<any> | undefined;
     hasComponent(type: string): boolean;
+    registeredTypes(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxComponentRegistryService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<IoxComponentRegistryService>;
 }
@@ -1505,6 +1527,11 @@ interface VirtualTraitGroup {
      *  (`::marker` styles are a nested map, not a single cancellable property). */
     readonly reset: string | null;
 }
+/** "Max lines" (Card v2, board 8 — opt-in on a Title / Text): a whole number clamps the text to that many
+ *  lines with an ellipsis. It composes into the four declarations a line clamp takes; anything else
+ *  (`none`, empty, 0) clamps nothing. */
+declare const MAX_LINES_KEY = "maxLines";
+declare function isGradientPaint(value: unknown): boolean;
 /** The whole-value backdrop trait (DS2). A plain key — it is copied, not stripped — but it feeds
  *  the backdrop group's output, so a breakpoint layer that sets it must count as touching it. */
 declare const BACKDROP_WHOLE_KEY = "backdropFilter";
@@ -2867,5 +2894,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, MAX_LINES_KEY, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 export type { BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, OverrideBreakpoint, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.29.1",
+  "version": "5.31.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
@@ -23,6 +23,10 @@
       "types": "./actions-core/index.d.ts",
       "default": "./fesm2022/vectoriox-iox-ui-actions-core.mjs"
     },
+    "./composite-core": {
+      "types": "./composite-core/index.d.ts",
+      "default": "./fesm2022/vectoriox-iox-ui-composite-core.mjs"
+    },
     "./consent-core": {
       "types": "./consent-core/index.d.ts",
       "default": "./fesm2022/vectoriox-iox-ui-consent-core.mjs"

package/src/composite-core/badge.ts

@@ -0,0 +1,103 @@
+import { elementStyleById, switchElementStyle } from '@vectoriox/iox-ui/design-core';
+
+import { CompositeNode, CompositeNodeFactory, writeStyles } from './composite-node';
+
+/**
+ * BADGE + CHIP (composite T25; complex-components board 8). A Badge is a Container wearing
+ * `badge-<tone>` › Icon + Text; its TONE is its element style, so Badge ▸ Tone writes the style and
+ * nothing else, and a re-theme restyles every badge. A Chip is the outlined static style only (no
+ * behaviour until the K5 Data view). Inside a card the badge plays `card.badge`; anywhere else it is
+ * recognised by its style.
+ */
+
+export enum BadgeTone {
+    Neutral = 'neutral',
+    Success = 'success',
+    Warning = 'warning',
+    Accent = 'accent',
+}
+
+export const BADGE_TONES: ReadonlyArray<BadgeTone> = [BadgeTone.Neutral, BadgeTone.Success, BadgeTone.Warning, BadgeTone.Accent];
+
+/** The tone's element style (`badge-<tone>`, the contract's). */
+export function badgeStyleId(tone: BadgeTone): string {
+    return `badge-${tone}`;
+}
+
+export const CHIP_STYLE = 'chip';
+
+/** The glyph a fresh badge of each tone shows (the board's tone grid). */
+export const BADGE_TONE_ICONS: Readonly<Record<BadgeTone, string>> = {
+    [BadgeTone.Neutral]: 'ph ph-tag',
+    [BadgeTone.Success]: 'ph ph-check',
+    [BadgeTone.Warning]: 'ph ph-warning',
+    [BadgeTone.Accent]: 'ph ph-sparkle',
+};
+export const CHIP_ICON = 'ph ph-tag';
+
+const TONE_BY_STYLE = new Map(BADGE_TONES.map(tone => [badgeStyleId(tone), tone]));
+
+/** The badge tone a node wears, or null when it is no badge. */
+export function badgeToneOf(node: { elementStyle?: string | null } | null | undefined): BadgeTone | null {
+    return TONE_BY_STYLE.get(node?.elementStyle ?? '') ?? null;
+}
+
+/** True for a node wearing a badge tone or the chip style — the pills (their Icon reads their ink). */
+export function isPillNode(node: { elementStyle?: string | null } | null | undefined): boolean {
+    return badgeToneOf(node) !== null || node?.elementStyle === CHIP_STYLE;
+}
+
+/**
+ * Badge ▸ Tone: move the badge to another tone's element style (an edit the author made to the old
+ * tone's look is kept, design-core's switch rule). Nothing else changes — not the icon, not the words.
+ */
+export function setBadgeTone(node: CompositeNode, tone: BadgeTone, baseline: Readonly<Record<string, unknown>> = {}): boolean {
+    const current = node.elementStyle ?? null;
+    const next = badgeStyleId(tone);
+    if (!badgeToneOf(node) || current === next || !elementStyleById(next)) return false;
+    const result = switchElementStyle(node, current, next, baseline);
+    if (result.applied) node.elementStyle = next;
+    return result.applied;
+}
+
+/** A pill's box: hugs its words, never stretches in a column. */
+const PILL_BASE: Readonly<Record<string, string>> = {
+    display: 'inline-flex', alignItems: 'center', gap: '5px', width: 'auto', minHeight: 'auto', alignSelf: 'flex-start', lineHeight: '1.4',
+};
+const PILL_ICON: Readonly<Record<string, string>> = { fontSize: '1em' };
+const PILL_WORDS: Readonly<Record<string, string>> = { width: 'auto', minHeight: 'auto', padding: '0px 0px 0px 0px', margin: '0px 0px 0px 0px' };
+/** The pill's words inherit the pill's type and ink (the contract's inherit-everything text style). */
+const PILL_WORDS_STYLE = 'button-label';
+
+export interface PillOptions {
+    text?: string;
+    icon?: string;
+    /** Key prefix for the consumer's ids (`badge` → `badge`, `badge-icon`, `badge-text`). */
+    key?: string;
+}
+
+function buildPill(create: CompositeNodeFactory, elementStyle: string, text: string, icon: string, key: string): CompositeNode {
+    const pill = create({ key, type: 'Container', elementStyle });
+    writeStyles(pill, PILL_BASE);
+    const glyph = create({ key: `${key}-icon`, type: 'Icon', props: { iconClass: icon }, elementStyle: 'icon' });
+    writeStyles(glyph, PILL_ICON);
+    const words = create({ key: `${key}-text`, type: 'Text', props: { content: text, tag: 'span' }, elementStyle: PILL_WORDS_STYLE });
+    writeStyles(words, PILL_WORDS);
+    pill.children = [glyph, words];
+    return pill;
+}
+
+/** A fresh Badge: Container `badge-<tone>` › Icon + Text. */
+export function buildBadge(create: CompositeNodeFactory, options: PillOptions & { tone?: BadgeTone } = {}): CompositeNode {
+    const tone = options.tone ?? BadgeTone.Accent;
+    const badge = buildPill(create, badgeStyleId(tone), options.text ?? 'New', options.icon ?? BADGE_TONE_ICONS[tone], options.key ?? 'badge');
+    badge.label = 'Badge';
+    return badge;
+}
+
+/** A fresh Chip: Container `chip` › Icon + Text (outlined, static). */
+export function buildChip(create: CompositeNodeFactory, options: PillOptions = {}): CompositeNode {
+    const chip = buildPill(create, CHIP_STYLE, options.text ?? 'Chip', options.icon ?? CHIP_ICON, options.key ?? 'chip');
+    chip.label = 'Chip';
+    return chip;
+}