@vectoriox/iox-ui 5.80.0 → 5.81.0

package/forms-core/index.d.ts

@@ -379,6 +379,87 @@ declare function withAntiSpamFields(values: Record<string, any>, renderedAt: num
  */
 declare function interpretSubmitResponse(body: any): SubmitResponse;
 
+/**
+ * The submit LIFECYCLE's decisions — what a form shows after the server answers, what it says when a
+ * submit fails, what a client needs to validate a form, and how its submit button follows its state.
+ *
+ * Two runtimes act on these and must agree: `IoxFormComponent` (the engine's component path) and the
+ * string-form runtime (every header / footer global and every string-rendered page —
+ * vectoriox/iox-client-engine#13). The builder canvas reads `submitButtonView` too, for its Sending state.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core: no Angular, no DOM.
+ */
+
+/** Which of the form's four states is showing — written on the form as `data-iox-state`. */
+declare enum FormRenderState {
+    Idle = "idle",
+    Submitting = "submitting",
+    Success = "success",
+    Error = "error"
+}
+/** The attribute every renderer writes a form's state on (the canvas switcher, both live paths). */
+declare const FORM_STATE_ATTRIBUTE = "data-iox-state";
+/** What the form does once the server has answered. */
+interface SubmitOutcome {
+    state: FormRenderState;
+    /** Per-field verdicts to put back on the fields (the form stays Idle so the visitor can fix them). */
+    errors?: Record<string, FieldError>;
+    /** A success clears the answers, so they cannot be sent twice. */
+    reset: boolean;
+    redirect?: string;
+}
+/**
+ * The server's answer → what the visitor sees. Only a confirmed success is Success; per-field verdicts
+ * land on the fields; anything else (a dropped network included) is the designed Error block.
+ */
+declare function submitOutcome(response: SubmitResponse | null | undefined): SubmitOutcome;
+/** What the live region says after a refused submit: how many fields need attention, or that it did not send. */
+declare function failureAnnouncement(errors: Readonly<Record<string, unknown>> | null | undefined): string;
+/**
+ * The fields a CLIENT needs to validate a form: never its actions (where submissions go — an email
+ * address, a webhook) and never its anti-spam settings. A string-rendered form carries this on
+ * `FORM_FIELDS_ATTRIBUTE`, the way a string slider carries its inputs.
+ */
+interface ClientFormSpec {
+    feedback: FeedbackTiming | string;
+    fields: FieldSpec[];
+}
+declare const FORM_FIELDS_ATTRIBUTE = "data-iox-form-fields";
+declare function clientFormSpec(spec: Pick<FormSpec, 'feedback' | 'fields'>): ClientFormSpec;
+/** The attribute's value back into a spec, or null when it is missing or not one. */
+declare function parseClientFormSpec(raw: string | null | undefined): ClientFormSpec | null;
+/** How a submit button wears its form's state (vectoriox/iox-ui#42). */
+interface SubmitButtonView {
+    busy: boolean;
+    disabled: boolean;
+}
+/** While its form sends, a submit button is busy, and disabled unless its author turned that off — ONE rule for the
+ *  canvas's Sending state, the component path and the string path. Its "Sending…" label is the shared CSS's, keyed on
+ *  the same `data-iox-state`. */
+declare function submitButtonView(state: FormRenderState | string | null | undefined, disableWhileSubmitting?: boolean): SubmitButtonView;
+/** On a submit button whose author turned "Disable while sending" off. */
+declare const SUBMIT_KEEP_ENABLED_ATTRIBUTE = "data-iox-keep-enabled";
+declare enum SubmitLabelClass {
+    Labels = "iox-submit__labels",
+    Idle = "iox-submit__idle",
+    Busy = "iox-submit__busy"
+}
+/**
+ * A submit button's words, as markup: its label, or — when it has a "While sending" label — both, stacked in one
+ * cell (the button keeps the longer one's width and never jumps). The string renderer's copy of
+ * `IoxSubmitButtonComponent`'s template; `escape` is the renderer's.
+ */
+declare function submitButtonLabelsHtml(label: string, loadingLabel: string | null | undefined, escape: (v: string) => string): string;
+declare const FORM_HONEYPOT_CLASS = "iox-form__hp";
+declare const FORM_ANNOUNCER_ATTRIBUTE = "data-iox-form-announcer";
+/**
+ * The honeypot and the failure announcer every form holds, as markup — what `IoxFormComponent`'s template
+ * renders, for the string renderer. The honeypot is off-screen (some bots skip hidden inputs), out of the
+ * Tab order and the accessibility tree; the announcer is present from the start (a live region added at
+ * the moment it gains text is not reliably announced).
+ */
+declare function formChromeHtml(honeypotField: string): string;
+
 /**
  * FORM PRESETS — a complete, working form as one insert: its fields, its submit label and the words of
  * its Success and Error blocks. ONE definition (W1.1): the builder's Forms tray builds a preset from
@@ -462,5 +543,5 @@ interface MisplacedFormContent<N extends NestingNode = NestingNode> {
 /** 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 };
+export { ControlType, DEFAULT_EN_MESSAGES, FIELD_GROUP_NODE_TYPE, FIELD_NODE_TYPE, FORM_ANNOUNCER_ATTRIBUTE, FORM_CONTENT_TYPES, FORM_ERROR_KEYS, FORM_FIELDS_ATTRIBUTE, FORM_HONEYPOT_CLASS, FORM_NODE_TYPE, FORM_PRESETS, FORM_STATE_ATTRIBUTE, FeedbackTiming, FormPresetId, FormRenderState, 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, SUBMIT_KEEP_ENABLED_ATTRIBUTE, SubmitLabelClass, addableRules, applyServerErrors, clientFormSpec, collectFieldNodes, collectFormSpec, deriveFieldName, failureAnnouncement, fieldOptionsOf, findFormContentInHosts, firstInvalidField, formChromeHtml, formContentInHost, formPresetById, interpretSubmitResponse, isFormContent, isInteractiveHost, onFieldBlur, onFieldChange, onSubmitAttempt, parseClientFormSpec, parseFieldOptions, resetFormState, rulesFor, shouldShowError, submitButtonLabelsHtml, submitButtonView, submitEndpointPath, submitOutcome, uniqueFieldName, validateField, validateForm, withAntiSpamFields };
+export type { ClientFormSpec, FieldError, FieldOption, FieldOptionSource, FieldResult, FieldSpec, FormNodeLike, FormPresetDef, FormPresetField, FormResult, FormRuntimeState, FormSpec, FormTransport, MisplacedFormContent, NestingNode, RuleDescriptor, SubmitAction, SubmitButtonView, SubmitOutcome, SubmitRequest, SubmitResponse, ValidationRule };

package/index.d.ts

@@ -1135,6 +1135,34 @@ interface SubmitResponse {
  */
 type FormTransport = (request: SubmitRequest) => Promise<SubmitResponse>;
 
+/**
+ * The submit LIFECYCLE's decisions — what a form shows after the server answers, what it says when a
+ * submit fails, what a client needs to validate a form, and how its submit button follows its state.
+ *
+ * Two runtimes act on these and must agree: `IoxFormComponent` (the engine's component path) and the
+ * string-form runtime (every header / footer global and every string-rendered page —
+ * vectoriox/iox-client-engine#13). The builder canvas reads `submitButtonView` too, for its Sending state.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core: no Angular, no DOM.
+ */
+
+/** Which of the form's four states is showing — written on the form as `data-iox-state`. */
+declare enum FormRenderState {
+    Idle = "idle",
+    Submitting = "submitting",
+    Success = "success",
+    Error = "error"
+}
+/**
+ * The fields a CLIENT needs to validate a form: never its actions (where submissions go — an email
+ * address, a webhook) and never its anti-spam settings. A string-rendered form carries this on
+ * `FORM_FIELDS_ATTRIBUTE`, the way a string slider carries its inputs.
+ */
+interface ClientFormSpec {
+    feedback: FeedbackTiming | string;
+    fields: FieldSpec[];
+}
+
 /**
  * How a message KEY becomes text a visitor reads.
  *
@@ -1205,13 +1233,7 @@ declare class FormRuntimeService {
 declare const IOX_FORM_TRANSPORT: InjectionToken<FormTransport>;
 /** Where a successful submit sends the visitor. Provided by the host; absent on the canvas. */
 declare const IOX_FORM_NAVIGATOR: InjectionToken<(url: string) => void>;
-/** Which of the form's four states the canvas / runtime is showing. */
-declare enum FormRenderState {
-    Idle = "idle",
-    Submitting = "submitting",
-    Success = "success",
-    Error = "error"
-}
+
 /**
  * Directive-host Form: the real `<form>` IS the host — no wrapper, no inner/outer split. Children
  * (fields, layout, the submit button, and the two state blocks) render into it via `childrenHost`.
@@ -1238,7 +1260,11 @@ declare class IoxFormComponent implements OnChanges, OnInit {
     formId: string;
     /** Author-facing name — what the submissions inbox groups by. */
     name: string;
-    renderState: FormRenderState | string;
+    /** Which state shows. Every change puts the submit buttons in it too (busy / disabled — iox-ui#42), through the
+     *  ONE applier the string runtime and the canvas call. */
+    set renderState(state: FormRenderState | string);
+    get renderState(): FormRenderState | string;
+    private _renderState;
     feedback: FeedbackTiming | string;
     /**
      * Move focus to the first field that failed, instead of leaving the visitor to hunt for red
@@ -1287,7 +1313,8 @@ declare class IoxFormComponent implements OnChanges, OnInit {
      * host's, which is the one part that genuinely differs between the engine and anything else.
      */
     private send;
-    /** Turn the server's answer into what the visitor sees. Public so a host-owned transport can reuse it. */
+    /** Turn the server's answer into what the visitor sees — the shared `submitOutcome`, which the string runtime
+     *  applies too. Public so a host-owned transport can reuse it. */
     applyResponse(response: SubmitResponse): void;
     /** The honeypot input's value, if the host rendered one. Absent reads as empty — never as spam. */
     private honeypotValue;
@@ -1400,20 +1427,21 @@ declare class IoxFieldComponent implements OnInit, OnDestroy {
  *
  * It carries no destination configuration of its own — "what happens with the data" is an ordered
  * action list on the FORM (decision D9), so there is nothing here to wire and nothing to get out of
- * sync. The button owns only its own appearance and its busy state.
+ * sync. The button owns only its own appearance.
  *
- * While submitting it shows `loadingLabel` and is disabled, which is the whole double-submit
- * defence on the client side (the server's rate limit is the real one).
+ * It follows its FORM's state (vectoriox/iox-ui#42): its two labels are both in the markup and the shared
+ * iox-forms.css shows "While sending" while the form's `data-iox-state` is submitting — on the canvas's Sending
+ * state, the component path and the string path alike; busy and disabled are written by the ONE applier
+ * (`syncSubmitButtons`) the form's runtimes call. Before, the button switched only on a `submitting` input
+ * nothing ever wrote. The string renderer writes the same markup (forms-core `submitButtonLabelsHtml`).
  */
 declare class IoxSubmitButtonComponent {
     nodeId: string;
     label: string;
     loadingLabel: string;
     disableWhileSubmitting: boolean;
-    /** Driven by the form's lifecycle, not by the author. */
-    submitting: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxSubmitButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IoxSubmitButtonComponent, "button[iox-submit]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "disableWhileSubmitting": { "alias": "disableWhileSubmitting"; "required": false; }; "submitting": { "alias": "submitting"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxSubmitButtonComponent, "button[iox-submit]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "disableWhileSubmitting": { "alias": "disableWhileSubmitting"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /**
@@ -2011,6 +2039,58 @@ declare const PART_CLASS_NAMES: Record<string, Record<string, string>>;
  *  Undefined when the type declares no such part (or no parts at all). */
 declare function partClassName(type: string, partKey: string): string | undefined;
 
+/**
+ * WHERE a state rule lands — the ONE selector planner both renderers emit state and part rules through
+ * (vectoriox/iox-client-engine#14). Before it the builder and the engine each kept a copy: the builder matched a
+ * structural state (first / last / odd / even child) on the OUTER element, the engine on `.iox-node` — on the
+ * engine's component path the INNER element, the only child of its host, so "last child" matched every item; and
+ * the engine dropped every part state but Wrong / Accepted while the builder applied a part's hover at all times.
+ *
+ * Returns full selectors (with their dots). Framework-free.
+ */
+/**
+ * Properties that govern how a node sits in its PARENT's layout (flex / grid item, block child) — they live on the
+ * OUTER element: the component's host, or the one element the string renderer and the canvas's collapsed hosts write.
+ * Everything else is "inner". One list for both renderers (it was typed twice).
+ */
+declare const OUTER_STYLE_PROPS: ReadonlySet<string>;
+/** Structural pseudo-classes — matched on the element that IS the sibling among siblings (the outer). */
+declare const STRUCTURAL_STATES: ReadonlyArray<string>;
+/** States whose pseudo-class lives on the PARENT (`parent-hover` → the parent's `:hover`). */
+declare const RELATIONAL_STATE_PSEUDO: Readonly<Record<string, string>>;
+declare function isStructuralState(state: string): boolean;
+/** What a state rule needs besides the node: its parent (relational) or its scope and trigger (targeted). */
+interface StateScope {
+    parentId?: string | null;
+    scopeId?: string | null;
+    triggerId?: string | null;
+}
+/** A state rule's selectors: `inner` for the node's own element; `outer`, when set, for the OUTER_STYLE_PROPS. */
+interface StateRulePlan {
+    inner: string;
+    outer?: string;
+}
+/**
+ * The selectors of `cssId`'s rule for `state`, or null when the state cannot be scoped yet (a relational state with
+ * no parent, a targeted one with no scope — never an unscoped, page-global rule).
+ *
+ * A structural state is matched on the outer element, and its styles reach the node's own element whether that is
+ * the same element (the string path, a one-element node, the canvas's collapsed hosts) or inside it (a component's
+ * host, a Repeater's row wrapper); its outer props stay on the outer element. Every other state is the node's own.
+ */
+declare function planStateRule(cssId: string, state: string, scope?: StateScope): StateRulePlan | null;
+/**
+ * The selector of a PART's rule (a Field's label, control, help, error — `PART_CLASS_NAMES`), optionally in a state:
+ * Wrong / Accepted and a component state on the NODE (that is where the class / attribute is), Hover / Pressed /
+ * Focus on the PART itself. Null for a state a part does not take (structural, relational, targeted).
+ */
+declare function planPartRule(cssId: string, partClass: string, state?: string | null): string | null;
+/** Split a style map into the node's own props and its OUTER_STYLE_PROPS. */
+declare function splitOuterProps(styles: Record<string, any>): {
+    inner: Record<string, any>;
+    outer: Record<string, any>;
+};
+
 /** Trait names whose value Swiper reads per breakpoint. Anything else is config-wide. */
 declare const SWIPER_RESPONSIVE_TRAITS: readonly string[];
 /** `{ [minWidth]: { slidesPerView, … } }` — Swiper's own `breakpoints` shape. */
@@ -2238,6 +2318,49 @@ interface AnimateActionOptions {
     /** The frames are `buildInteractionKeyframes`' reversed: a reverse pass never splits text, it just fades back. */
     reverse?: boolean;
 }
+/** The id every interaction run's Animation carries — how a re-trigger finds the runs it interrupts. */
+declare const INTERACTION_ANIMATION_ID = "iox-interaction";
+/**
+ * What a run that has ended leaves on its element (vectoriox/iox-client-engine#12, iox-ui#41) — ONE rule for the
+ * canvas and the live site.
+ *
+ * `Release`: the last frame IS the element's natural state (an entrance, an exit played back, a one-shot like a
+ * rotate). The run is cancelled and no frame is written inline, so the stylesheet applies again — the element
+ * style's `:hover` / `:active` transforms included. Before, the last frame (`transform: translateY(0)`) was locked
+ * inline on the site and kept by `fill: both` on the canvas, and an element that had entered never pressed again.
+ *
+ * `Hold`: the last frame HIDES the element (an exit, an entrance played back): it is kept, inline.
+ */
+declare enum SettleMode {
+    Release = "release",
+    Hold = "hold"
+}
+declare function settleModeFor(type: string, reverse?: boolean): SettleMode;
+interface SettleOptions {
+    /** Properties a runtime never writes inline — the canvas never a transform (one inside the scaled page breaks Lenis). */
+    readonly skip?: ReadonlySet<string>;
+}
+/**
+ * Leave `el` as a run that has ended — or one that never plays, under reduced motion — should (`SettleMode`). The
+ * frame is written (Hold) or released (Release) BEFORE `anim` is cancelled, so nothing flashes between the two.
+ */
+declare function settleInteraction(el: HTMLElement, frames: ReadonlyArray<InteractionKeyframe> | null | undefined, mode: SettleMode, options?: SettleOptions, anim?: Animation | null): void;
+/**
+ * Interrupt (Emil 52/59/62): the interaction runs in flight on `el` over the same properties are stopped — never
+ * stacked — and the new run starts from what the element shows NOW (its presentation value), not from frame 0: a
+ * hover-out halfway through the hover-in turns back from where it is, a re-trigger continues. Untouched when
+ * nothing is running (the run starts from its own first frame, as before).
+ */
+declare function framesFromLiveValue(el: HTMLElement, frames: ReadonlyArray<InteractionKeyframe>): InteractionKeyframe[];
+/**
+ * Play an element action and settle it when it ends — THE call both runtimes make for an animated action: it starts
+ * from the live value (`framesFromLiveValue`, inside `animateAction`) and ends by the ONE settle rule. A run that is
+ * interrupted is never settled: the run that interrupted it owns the element now.
+ */
+declare function playInteraction(el: HTMLElement, action: {
+    type: string;
+    params?: Readonly<Record<string, unknown>> | null;
+}, frames: ReadonlyArray<InteractionKeyframe>, timing: KeyframeAnimationOptions, options?: AnimateActionOptions & SettleOptions): Animation;
 /**
  * Start an element action's animation: THE call both runtimes make. Most actions are one `element.animate`; a text
  * reveal plays its pieces and a clip reveal opens from the side the page's direction makes of Start and End, then takes
@@ -3226,5 +3349,69 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, 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, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, 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, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RevealActionType, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planResponsiveRules, planScroll, planSwiperOptions, playDualLayerTransition, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, viewportTransitionContext, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SliderBootOptions, SliderControlElements, SliderInputs, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };
+/** What a host gives a string-rendered form: the POST (the engine's), where a redirect goes, how a message reads. */
+interface StringFormOptions {
+    transport?: FormTransport | null;
+    navigate?: ((url: string) => void) | null;
+    messages?: FormMessageResolver;
+}
+/**
+ * A form the SSR engine's string renderer wrote — every header / footer global, every string-rendered page —
+ * run with the behaviour `IoxFormComponent` gives a component-path form (vectoriox/iox-client-engine#13): the
+ * forms-core runtime decides when an error shows, a valid submit POSTs through the host's transport with the
+ * anti-spam fields, the form moves idle → submitting → success / error on `data-iox-state` (the shared CSS shows
+ * the designed block), the first problem takes focus and the failure is announced. Nothing posts natively.
+ *
+ * Its fields come from the form itself (`data-iox-form-fields`, the spec minus its destinations), so the
+ * runtime needs no node tree. Idempotent per element.
+ */
+declare class StringFormRuntime {
+    private readonly form;
+    private readonly spec;
+    private readonly options;
+    private state;
+    private inFlight;
+    private readonly renderedAt;
+    private readonly listeners;
+    private readonly messages;
+    constructor(form: HTMLFormElement, spec: ClientFormSpec, options?: StringFormOptions);
+    destroy(): void;
+    /** The visitor's answers, keyed by the spec's field names. */
+    values(): Record<string, unknown>;
+    private listen;
+    private fieldNameOf;
+    private onEdit;
+    private onLeave;
+    private onSubmit;
+    private send;
+    private apply;
+    private setRenderState;
+    private fullSpec;
+    private fieldElement;
+    private controlsOf;
+    private valueOf;
+    /** Every field's error, aria-invalid, describedby and invalid class — as `IoxFieldComponent` renders them. */
+    private render;
+    private renderError;
+    private announce;
+    private focusFirstInvalid;
+    private honeypotValue;
+}
+/** The runtime already running a form element, if any. */
+declare function stringFormRuntimeOf(form: Element | null | undefined): StringFormRuntime | null;
+/**
+ * Run a string-rendered form (one carrying `data-iox-form-fields`) — once: a form already running is returned as is.
+ * Null for an element that is not one (a component-path form never carries the attribute; it runs itself).
+ */
+declare function attachStringForm(form: Element | null | undefined, options?: StringFormOptions): StringFormRuntime | null;
+
+/**
+ * Put every submit button of `form` in the form's state (vectoriox/iox-ui#42): busy (`aria-busy`) and — unless its
+ * author turned it off — disabled while the form sends; itself again otherwise. The ONE applier: the component path's
+ * form, the string runtime and the canvas's Sending state all call it, from the shared `submitButtonView`. A button
+ * inside a nested form belongs to that form, not this one.
+ */
+declare function syncSubmitButtons(form: Element | null | undefined, state: FormRenderState | string | null | undefined): void;
+
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, 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, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_ANIMATION_ID, INTERACTION_HIDDEN_ATTRIBUTE, 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, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, framesFromLiveValue, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, stateNamesIn, statePseudoClass, stateSelectorSuffix, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, viewportTransitionContext, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.80.0",
+  "version": "5.81.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/forms-core/public-api.ts

@@ -18,5 +18,6 @@ export * from './options';
 export * from './runtime';
 export * from './rule-catalog';
 export * from './transport';
+export * from './submit-lifecycle';
 export * from './form-presets';
 export * from './nesting';

package/src/forms-core/submit-lifecycle.ts

@@ -0,0 +1,128 @@
+/**
+ * The submit LIFECYCLE's decisions — what a form shows after the server answers, what it says when a
+ * submit fails, what a client needs to validate a form, and how its submit button follows its state.
+ *
+ * Two runtimes act on these and must agree: `IoxFormComponent` (the engine's component path) and the
+ * string-form runtime (every header / footer global and every string-rendered page —
+ * vectoriox/iox-client-engine#13). The builder canvas reads `submitButtonView` too, for its Sending state.
+ *
+ * ⚠️ Framework-free, like the rest of forms-core: no Angular, no DOM.
+ */
+
+import { FeedbackTiming, FieldSpec, FormSpec } from './form.model';
+import { SubmitResponse } from './transport';
+import { FieldError } from './validate';
+
+/** Which of the form's four states is showing — written on the form as `data-iox-state`. */
+export enum FormRenderState {
+    Idle = 'idle',
+    Submitting = 'submitting',
+    Success = 'success',
+    Error = 'error',
+}
+
+/** The attribute every renderer writes a form's state on (the canvas switcher, both live paths). */
+export const FORM_STATE_ATTRIBUTE = 'data-iox-state';
+
+/** What the form does once the server has answered. */
+export interface SubmitOutcome {
+    state: FormRenderState;
+    /** Per-field verdicts to put back on the fields (the form stays Idle so the visitor can fix them). */
+    errors?: Record<string, FieldError>;
+    /** A success clears the answers, so they cannot be sent twice. */
+    reset: boolean;
+    redirect?: string;
+}
+
+/**
+ * The server's answer → what the visitor sees. Only a confirmed success is Success; per-field verdicts
+ * land on the fields; anything else (a dropped network included) is the designed Error block.
+ */
+export function submitOutcome(response: SubmitResponse | null | undefined): SubmitOutcome {
+    if (response?.ok) return { state: FormRenderState.Success, reset: true, ...(response.redirect ? { redirect: response.redirect } : {}) };
+    if (response?.errors && Object.keys(response.errors).length) return { state: FormRenderState.Idle, errors: response.errors, reset: false };
+    return { state: FormRenderState.Error, reset: false };
+}
+
+/** What the live region says after a refused submit: how many fields need attention, or that it did not send. */
+export function failureAnnouncement(errors: Readonly<Record<string, unknown>> | null | undefined): string {
+    const count = errors ? Object.keys(errors).length : 0;
+    if (!count) return 'That did not send.';
+    return `${count} ${count === 1 ? 'field needs' : 'fields need'} attention.`;
+}
+
+/**
+ * The fields a CLIENT needs to validate a form: never its actions (where submissions go — an email
+ * address, a webhook) and never its anti-spam settings. A string-rendered form carries this on
+ * `FORM_FIELDS_ATTRIBUTE`, the way a string slider carries its inputs.
+ */
+export interface ClientFormSpec {
+    feedback: FeedbackTiming | string;
+    fields: FieldSpec[];
+}
+
+export const FORM_FIELDS_ATTRIBUTE = 'data-iox-form-fields';
+
+export function clientFormSpec(spec: Pick<FormSpec, 'feedback' | 'fields'>): ClientFormSpec {
+    return { feedback: spec.feedback ?? FeedbackTiming.Smart, fields: [...(spec.fields ?? [])] };
+}
+
+/** The attribute's value back into a spec, or null when it is missing or not one. */
+export function parseClientFormSpec(raw: string | null | undefined): ClientFormSpec | null {
+    if (!raw) return null;
+    try {
+        const parsed = JSON.parse(raw);
+        if (!parsed || !Array.isArray(parsed.fields)) return null;
+        return { feedback: typeof parsed.feedback === 'string' ? parsed.feedback : FeedbackTiming.Smart, fields: parsed.fields };
+    } catch {
+        return null;
+    }
+}
+
+/** How a submit button wears its form's state (vectoriox/iox-ui#42). */
+export interface SubmitButtonView {
+    busy: boolean;
+    disabled: boolean;
+}
+
+/** While its form sends, a submit button is busy, and disabled unless its author turned that off — ONE rule for the
+ *  canvas's Sending state, the component path and the string path. Its "Sending…" label is the shared CSS's, keyed on
+ *  the same `data-iox-state`. */
+export function submitButtonView(state: FormRenderState | string | null | undefined, disableWhileSubmitting = true): SubmitButtonView {
+    const busy = state === FormRenderState.Submitting;
+    return { busy, disabled: busy && disableWhileSubmitting !== false };
+}
+
+/** On a submit button whose author turned "Disable while sending" off. */
+export const SUBMIT_KEEP_ENABLED_ATTRIBUTE = 'data-iox-keep-enabled';
+
+export enum SubmitLabelClass {
+    Labels = 'iox-submit__labels',
+    Idle = 'iox-submit__idle',
+    Busy = 'iox-submit__busy',
+}
+
+/**
+ * A submit button's words, as markup: its label, or — when it has a "While sending" label — both, stacked in one
+ * cell (the button keeps the longer one's width and never jumps). The string renderer's copy of
+ * `IoxSubmitButtonComponent`'s template; `escape` is the renderer's.
+ */
+export function submitButtonLabelsHtml(label: string, loadingLabel: string | null | undefined, escape: (v: string) => string): string {
+    if (!loadingLabel) return escape(label);
+    return `<span class="${SubmitLabelClass.Labels}"><span class="${SubmitLabelClass.Idle}">${escape(label)}</span>` +
+        `<span class="${SubmitLabelClass.Busy}">${escape(loadingLabel)}</span></span>`;
+}
+
+export const FORM_HONEYPOT_CLASS = 'iox-form__hp';
+export const FORM_ANNOUNCER_ATTRIBUTE = 'data-iox-form-announcer';
+
+/**
+ * The honeypot and the failure announcer every form holds, as markup — what `IoxFormComponent`'s template
+ * renders, for the string renderer. The honeypot is off-screen (some bots skip hidden inputs), out of the
+ * Tab order and the accessibility tree; the announcer is present from the start (a live region added at
+ * the moment it gains text is not reliably announced).
+ */
+export function formChromeHtml(honeypotField: string): string {
+    return `<div class="${FORM_HONEYPOT_CLASS}" aria-hidden="true"><input type="text" name="${honeypotField}" tabindex="-1" autocomplete="off"></div>` +
+        `<div class="${FORM_HONEYPOT_CLASS}" ${FORM_ANNOUNCER_ATTRIBUTE} role="status" aria-live="assertive" aria-atomic="true"></div>`;
+}

package/styles/iox-forms.css

@@ -49,6 +49,21 @@
 .iox-field__error   { margin: 4px 0 0; }
 .iox-submit         { font: inherit; border: none; cursor: pointer; }
 
+/* The submit button follows its FORM's state (vectoriox/iox-ui#42). Its two labels (forms-core
+   submitButtonLabelsHtml / IoxSubmitButtonComponent) share one grid cell, so the button keeps the longer one's
+   width and never jumps; the form's data-iox-state picks the one that shows — the canvas's Sending state, the
+   component path and the string path alike. `visibility` (not display) keeps the hidden one out of the
+   accessible name. Busy and disabled are written by syncSubmitButtons. */
+.iox-submit__labels      { display: inline-grid; }
+.iox-submit__labels > *  { grid-area: 1 / 1; }
+.iox-form:not([data-iox-state="submitting"]) .iox-submit__busy,
+.iox-form[data-iox-state="submitting"] .iox-submit__idle { visibility: hidden; }
+.iox-submit[aria-busy="true"] { cursor: progress; }
+
+/* The honeypot and the failure announcer (forms-core `formChromeHtml`, IoxFormComponent's template): off-screen
+   rather than display:none — some bots skip hidden inputs, and a live region must stay in the tree. */
+.iox-form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
+
 /* Visually hidden, still announced — a label may be hidden, never deleted. */
 .iox-field__label--hidden {
     position: absolute; width: 1px; height: 1px; margin: -1px;