@vectoriox/iox-ui 5.79.0 → 5.81.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -4387,6 +4387,101 @@ function normaliseErrors(raw) {
     return Object.keys(errors).length ? errors : undefined;
 }
 
+/**
+ * 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`. */
+var FormRenderState;
+(function (FormRenderState) {
+    FormRenderState["Idle"] = "idle";
+    FormRenderState["Submitting"] = "submitting";
+    FormRenderState["Success"] = "success";
+    FormRenderState["Error"] = "error";
+})(FormRenderState || (FormRenderState = {}));
+/** The attribute every renderer writes a form's state on (the canvas switcher, both live paths). */
+const FORM_STATE_ATTRIBUTE = 'data-iox-state';
+/**
+ * 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.
+ */
+function submitOutcome(response) {
+    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. */
+function failureAnnouncement(errors) {
+    const count = errors ? Object.keys(errors).length : 0;
+    if (!count)
+        return 'That did not send.';
+    return `${count} ${count === 1 ? 'field needs' : 'fields need'} attention.`;
+}
+const FORM_FIELDS_ATTRIBUTE = 'data-iox-form-fields';
+function clientFormSpec(spec) {
+    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. */
+function parseClientFormSpec(raw) {
+    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;
+    }
+}
+/** 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`. */
+function submitButtonView(state, disableWhileSubmitting = true) {
+    const busy = state === FormRenderState.Submitting;
+    return { busy, disabled: busy && disableWhileSubmitting !== false };
+}
+/** On a submit button whose author turned "Disable while sending" off. */
+const SUBMIT_KEEP_ENABLED_ATTRIBUTE = 'data-iox-keep-enabled';
+var SubmitLabelClass;
+(function (SubmitLabelClass) {
+    SubmitLabelClass["Labels"] = "iox-submit__labels";
+    SubmitLabelClass["Idle"] = "iox-submit__idle";
+    SubmitLabelClass["Busy"] = "iox-submit__busy";
+})(SubmitLabelClass || (SubmitLabelClass = {}));
+/**
+ * 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.
+ */
+function submitButtonLabelsHtml(label, loadingLabel, escape) {
+    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>`;
+}
+const FORM_HONEYPOT_CLASS = 'iox-form__hp';
+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).
+ */
+function formChromeHtml(honeypotField) {
+    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>`;
+}
+
 /**
  * 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
@@ -4663,6 +4758,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             type: Injectable
         }] });
 
+const SUBMIT_BUTTON_SELECTOR = '.iox-submit';
+const FORM_SELECTOR = 'form, .iox-form';
+/**
+ * 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.
+ */
+function syncSubmitButtons(form, state) {
+    if (!form?.querySelectorAll)
+        return;
+    for (const button of Array.from(form.querySelectorAll(SUBMIT_BUTTON_SELECTOR))) {
+        if (button.closest?.(FORM_SELECTOR) !== form)
+            continue;
+        const view = submitButtonView(state, !button.hasAttribute(SUBMIT_KEEP_ENABLED_ATTRIBUTE));
+        if (view.busy)
+            button.setAttribute('aria-busy', 'true');
+        else
+            button.removeAttribute('aria-busy');
+        if (view.disabled)
+            button.setAttribute('disabled', '');
+        else
+            button.removeAttribute('disabled');
+    }
+}
+
 /**
  * How a host makes the form actually send. The SSR engine provides one (an HttpClient POST); the
  * builder canvas deliberately does NOT — an author pressing Submit while designing must never file
@@ -4672,14 +4793,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const IOX_FORM_TRANSPORT = new InjectionToken('IOX_FORM_TRANSPORT');
 /** Where a successful submit sends the visitor. Provided by the host; absent on the canvas. */
 const IOX_FORM_NAVIGATOR = new InjectionToken('IOX_FORM_NAVIGATOR');
-/** Which of the form's four states the canvas / runtime is showing. */
-var FormRenderState;
-(function (FormRenderState) {
-    FormRenderState["Idle"] = "idle";
-    FormRenderState["Submitting"] = "submitting";
-    FormRenderState["Success"] = "success";
-    FormRenderState["Error"] = "error";
-})(FormRenderState || (FormRenderState = {}));
 /**
  * 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`.
@@ -4697,6 +4810,13 @@ var FormRenderState;
  * which are styleable, translated and announced. Validation still runs — ours does it.
  */
 class IoxFormComponent {
+    /** 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) {
+        this._renderState = state;
+        syncSubmitButtons(this.host?.nativeElement, state);
+    }
+    get renderState() { return this._renderState; }
     /**
      * Constructor injection rather than `inject()`, for the same reason as Field: this library's
      * specs construct components directly. `runtime` is provided by THIS component (see
@@ -4712,7 +4832,7 @@ class IoxFormComponent {
         this.formId = '';
         /** Author-facing name — what the submissions inbox groups by. */
         this.name = '';
-        this.renderState = FormRenderState.Idle;
+        this._renderState = FormRenderState.Idle;
         this.feedback = FeedbackTiming.Smart;
         /**
          * Move focus to the first field that failed, instead of leaving the visitor to hunt for red
@@ -4798,30 +4918,28 @@ class IoxFormComponent {
         this.runtime.setSubmitting(false);
         this.applyResponse(response);
     }
-    /** 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) {
-        if (!response?.ok) {
-            // Per-field verdicts go back onto the fields; anything else is a whole-form failure,
-            // which is what the designed Error block is for.
-            if (response?.errors) {
-                this.runtime.applyErrors(response.errors);
-                this.renderState = FormRenderState.Idle;
-                this.announce(response.errors);
-                if (this.focusFirstProblem)
-                    this.focusFirstInvalid();
-                return;
-            }
-            this.renderState = FormRenderState.Error;
+        const outcome = submitOutcome(response);
+        this.renderState = outcome.state;
+        if (outcome.errors) {
+            this.runtime.applyErrors(outcome.errors);
+            this.announce(outcome.errors);
+            if (this.focusFirstProblem)
+                this.focusFirstInvalid();
+            return;
+        }
+        if (outcome.state === FormRenderState.Error) {
             this.announce(null);
             return;
         }
-        this.renderState = FormRenderState.Success;
         // Clear the values so a visitor who stays on the page does not see their old answers behind
         // the success message, and cannot resubmit them by pressing enter.
         this.runtime.reset();
         this.resetControls();
-        if (response.redirect && this.navigate)
-            this.navigate(response.redirect);
+        if (outcome.redirect && this.navigate)
+            this.navigate(outcome.redirect);
     }
     /** The honeypot input's value, if the host rendered one. Absent reads as empty — never as spam. */
     honeypotValue() {
@@ -4843,10 +4961,7 @@ class IoxFormComponent {
     announce(errors) {
         if (!this.announceFailure)
             return;
-        const count = errors ? Object.keys(errors).length : 0;
-        const next = count
-            ? `${count} ${count === 1 ? 'field needs' : 'fields need'} attention.`
-            : 'That did not send.';
+        const next = failureAnnouncement(errors);
         this.announcement = '';
         // A microtask is enough for the empty value to be committed before the new one lands.
         Promise.resolve().then(() => { this.announcement = next; });
@@ -4880,7 +4995,7 @@ class IoxFormComponent {
              aria-live="assertive"
              aria-atomic="true">{{ announcement }}</div>
         <ng-container #childrenHost></ng-container>
-    `, isInline: true, styles: [":host{box-sizing:border-box}.iox-form__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, decorators: [{
             type: Component,
@@ -4904,7 +5019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[attr.data-iox-state]': 'renderState',
                         '[attr.aria-busy]': "renderState === 'submitting' ? 'true' : null",
                         '(submit)': 'onSubmit($event)',
-                    }, providers: [FormRuntimeService], standalone: false, styles: [":host{box-sizing:border-box}.iox-form__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}\n"] }]
+                    }, providers: [FormRuntimeService], standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: FormRuntimeService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5398,10 +5513,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  *
  * 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`).
  */
 class IoxSubmitButtonComponent {
     constructor() {
@@ -5409,19 +5527,17 @@ class IoxSubmitButtonComponent {
         this.label = 'Submit';
         this.loadingLabel = 'Sending…';
         this.disableWhileSubmitting = true;
-        /** Driven by the form's lifecycle, not by the author. */
-        this.submitting = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxSubmitButtonComponent, isStandalone: false, selector: "button[iox-submit]", inputs: { nodeId: "nodeId", label: "label", loadingLabel: "loadingLabel", disableWhileSubmitting: "disableWhileSubmitting", submitting: "submitting" }, host: { properties: { "class": "'iox-submit iox-node-' + nodeId", "attr.type": "'submit'", "attr.disabled": "submitting && disableWhileSubmitting ? \"\" : null", "attr.aria-busy": "submitting ? \"true\" : null" } }, ngImport: i0, template: `{{ submitting && loadingLabel ? loadingLabel : label }}`, isInline: true, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxSubmitButtonComponent, isStandalone: false, selector: "button[iox-submit]", inputs: { nodeId: "nodeId", label: "label", loadingLabel: "loadingLabel", disableWhileSubmitting: "disableWhileSubmitting" }, host: { properties: { "class": "'iox-submit iox-node-' + nodeId", "attr.type": "'submit'", "attr.data-iox-keep-enabled": "disableWhileSubmitting === false ? \"\" : null" } }, ngImport: i0, template: `@if (loadingLabel) {<span class="iox-submit__labels"><span class="iox-submit__idle">{{ label }}</span><span class="iox-submit__busy">{{ loadingLabel }}</span></span>} @else {<ng-container>{{ label }}</ng-container>}`, isInline: true, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[iox-submit]', template: `{{ submitting && loadingLabel ? loadingLabel : label }}`, host: {
+            args: [{ selector: 'button[iox-submit]', template: `@if (loadingLabel) {<span class="iox-submit__labels"><span class="iox-submit__idle">{{ label }}</span><span class="iox-submit__busy">{{ loadingLabel }}</span></span>} @else {<ng-container>{{ label }}</ng-container>}`, host: {
                         '[class]': "'iox-submit iox-node-' + nodeId",
                         '[attr.type]': "'submit'",
-                        '[attr.disabled]': 'submitting && disableWhileSubmitting ? "" : null',
-                        '[attr.aria-busy]': 'submitting ? "true" : null',
+                        // forms-core SUBMIT_KEEP_ENABLED_ATTRIBUTE — read by `syncSubmitButtons`.
+                        '[attr.data-iox-keep-enabled]': 'disableWhileSubmitting === false ? "" : null',
                     }, standalone: false, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }]
         }], propDecorators: { nodeId: [{
                 type: Input
@@ -5431,8 +5547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], disableWhileSubmitting: [{
                 type: Input
-            }], submitting: [{
-                type: Input
             }] } });
 
 /**
@@ -6029,6 +6143,84 @@ function partClassName(type, partKey) {
     return PART_CLASS_NAMES[type]?.[partKey];
 }
 
+/**
+ * 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).
+ */
+const OUTER_STYLE_PROPS = new Set([
+    'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+    'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
+    'gridColumn', 'gridRow', 'justifySelf',
+    'width',
+]);
+/** Structural pseudo-classes — matched on the element that IS the sibling among siblings (the outer). */
+const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
+/** States whose pseudo-class lives on the PARENT (`parent-hover` → the parent's `:hover`). */
+const RELATIONAL_STATE_PSEUDO = { 'parent-hover': 'hover' };
+function isStructuralState(state) {
+    return STRUCTURAL_STATES.includes(state);
+}
+/**
+ * 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.
+ */
+function planStateRule(cssId, state, scope = {}) {
+    if (TARGETED_STATE_SUFFIX[state]) {
+        const body = scope.scopeId && scope.triggerId ? targetedStateSelector(state, scope.scopeId, scope.triggerId, cssId) : null;
+        return body ? { inner: `.${body}` } : null;
+    }
+    const relational = RELATIONAL_STATE_PSEUDO[state];
+    if (relational)
+        return scope.parentId ? { inner: `.iox-node-${scope.parentId}:${relational} .iox-node-${cssId}` } : null;
+    const validationClass = VALIDATION_STATE_CLASS[state];
+    if (validationClass)
+        return { inner: `.${buildPartSelector(cssId, undefined, validationClass)}` };
+    if (isStructuralState(state)) {
+        const outer = `.iox-outer-${cssId}:${state}`;
+        return { inner: `${outer}.iox-node-${cssId}, ${outer} .iox-node-${cssId}`, outer };
+    }
+    return { inner: `.iox-node-${cssId}${stateSelectorSuffix(state)}` };
+}
+/**
+ * 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).
+ */
+function planPartRule(cssId, partClass, state) {
+    if (!state)
+        return `.${buildPartSelector(cssId, partClass)}`;
+    const validationClass = VALIDATION_STATE_CLASS[state];
+    if (validationClass)
+        return `.${buildPartSelector(cssId, partClass, validationClass)}`;
+    if (isStructuralState(state) || RELATIONAL_STATE_PSEUDO[state] || TARGETED_STATE_SUFFIX[state])
+        return null;
+    const suffix = stateSelectorSuffix(state);
+    // An attribute state (`current`, `on`) is the node's; a pseudo-class is the part's own.
+    return suffix.startsWith('[') ? `.iox-node-${cssId}${suffix} .${partClass}` : `.iox-node-${cssId} .${partClass}${suffix}`;
+}
+/** Split a style map into the node's own props and its OUTER_STYLE_PROPS. */
+function splitOuterProps(styles) {
+    const inner = {};
+    const outer = {};
+    for (const [k, v] of Object.entries(styles))
+        (OUTER_STYLE_PROPS.has(k) ? outer : inner)[k] = v;
+    return { inner, outer };
+}
+
 /**
  * "This link is the page you're on" (CC1, N2). ONE decision for the builder canvas and both engine
  * paths: a link whose target is the current page renders `aria-current="page"` — in the raw SSR too —
@@ -6284,6 +6476,96 @@ function clipFrames(params, inlineSign = 1) {
     return [{ opacity: 1, clipPath: revealClipPath(0, from, inlineSign) }, { opacity: 1, clipPath: revealClipPath(SHOWN_PERCENT, from, inlineSign) }];
 }
 const INLINE_FROMS = new Set([SceneRevealFrom.Start, SceneRevealFrom.End]);
+/** The id every interaction run's Animation carries — how a re-trigger finds the runs it interrupts. */
+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.
+ */
+var SettleMode;
+(function (SettleMode) {
+    SettleMode["Release"] = "release";
+    SettleMode["Hold"] = "hold";
+})(SettleMode || (SettleMode = {}));
+function settleModeFor(type, reverse = false) {
+    const hides = reverse ? ENTRANCE_ACTION_TYPES.has(type) : EXIT_ACTION_TYPES.has(type);
+    return hides ? SettleMode.Hold : SettleMode.Release;
+}
+/** Every CSS property a run's frames touch. */
+function framePropertyNames(frames) {
+    const names = new Set();
+    for (const frame of frames ?? [])
+        for (const key of Object.keys(frame))
+            names.add(keyframePropertyName(key));
+    return [...names];
+}
+/**
+ * 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.
+ */
+function settleInteraction(el, frames, mode, options = {}, anim) {
+    if (mode === SettleMode.Hold) {
+        for (const [prop, value] of keyframeStyleEntries(finalKeyframe(frames))) {
+            if (!options.skip?.has(prop))
+                el.style.setProperty(prop, value);
+        }
+    }
+    else {
+        for (const prop of framePropertyNames(frames))
+            el.style.removeProperty(prop);
+    }
+    anim?.cancel();
+}
+/** The keyframe properties an Animation animates (camelCase, as `getKeyframes` names them). */
+function animatedKeys(anim) {
+    const keyframes = anim.effect?.getKeyframes?.() ?? [];
+    const skip = new Set(['offset', 'computedOffset', 'easing', 'composite']);
+    return keyframes.flatMap(k => Object.keys(k).filter(key => !skip.has(key)));
+}
+/**
+ * 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).
+ */
+function framesFromLiveValue(el, frames) {
+    const first = frames[0];
+    if (!first)
+        return [...frames];
+    const keys = new Set(Object.keys(first));
+    const running = (el.getAnimations?.() ?? [])
+        .filter(a => a.id === INTERACTION_ANIMATION_ID && animatedKeys(a).some(k => keys.has(k)));
+    if (!running.length)
+        return [...frames];
+    const style = el.ownerDocument?.defaultView?.getComputedStyle(el);
+    const live = { ...first };
+    for (const key of keys) {
+        const value = style?.getPropertyValue(keyframePropertyName(key));
+        if (value)
+            live[key] = value;
+    }
+    for (const anim of running)
+        anim.cancel();
+    return [live, ...frames.slice(1)];
+}
+/**
+ * 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.
+ */
+function playInteraction(el, action, frames, timing, options = {}) {
+    const anim = animateAction(el, action, frames, { fill: 'both', ...timing }, { reverse: options.reverse });
+    const mode = settleModeFor(action.type, options.reverse);
+    anim.finished?.then(() => settleInteraction(el, frames, mode, options, anim)).catch(() => { });
+    return anim;
+}
 /**
  * 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
@@ -6297,15 +6579,22 @@ function animateAction(el, action, frames, timing, options = {}) {
             return reveal;
     }
     if (action.type !== RevealActionType.Clip)
-        return el.animate(frames, timing);
+        return tagged(el.animate(framesFromLiveValue(el, frames), timing));
     const rtl = INLINE_FROMS.has(revealFromOf(action.params)) && el.ownerDocument.defaultView?.getComputedStyle(el).direction === 'rtl';
     const mirrored = rtl ? clipFrames(action.params, -1) : frames;
     const played = rtl && options.reverse ? [...mirrored].reverse() : mirrored;
-    const anim = el.animate(played, timing);
+    const anim = tagged(el.animate(framesFromLiveValue(el, played), timing));
     if (!options.reverse)
         anim.addEventListener('finish', () => anim.cancel(), { once: true });
     return anim;
 }
+function tagged(anim) {
+    try {
+        anim.id = INTERACTION_ANIMATION_ID;
+    }
+    catch { /* a stub without an id */ }
+    return anim;
+}
 /** `translateX` → `translate-x`, `opacity` → `opacity`: the CSS property name of a keyframe key. */
 function keyframePropertyName(key) {
     return key.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -8179,6 +8468,251 @@ function playDualLayerTransition(resolved, layers) {
     return inc.animate(resolved.inFrames, resolved.inOptions).finished.then(() => undefined, () => undefined);
 }
 
+const FIELD_ATTRIBUTE = 'data-iox-field';
+const CONTROL_CLASS = 'iox-field__control';
+const ERROR_CLASS = 'iox-field__error';
+const HELP_CLASS = 'iox-field__help';
+const INVALID_CLASS = 'iox-invalid';
+const BOOTED = '__ioxStringForm';
+/**
+ * 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.
+ */
+class StringFormRuntime {
+    constructor(form, spec, options = {}) {
+        this.form = form;
+        this.spec = spec;
+        this.options = options;
+        this.state = INITIAL_FORM_STATE;
+        this.inFlight = false;
+        this.renderedAt = Date.now();
+        this.listeners = [];
+        this.messages = options.messages ?? defaultMessageResolver;
+        this.listen('input', e => this.onEdit(e));
+        this.listen('change', e => this.onEdit(e));
+        this.listen('focusout', e => this.onLeave(e));
+        this.listen('submit', e => this.onSubmit(e));
+        form[BOOTED] = this;
+    }
+    destroy() {
+        for (const [type, fn] of this.listeners)
+            this.form.removeEventListener(type, fn);
+        this.listeners.length = 0;
+        delete this.form[BOOTED];
+    }
+    /** The visitor's answers, keyed by the spec's field names. */
+    values() {
+        const out = {};
+        for (const field of this.spec.fields)
+            out[field.name] = this.valueOf(field);
+        return out;
+    }
+    listen(type, fn) {
+        this.form.addEventListener(type, fn);
+        this.listeners.push([type, fn]);
+    }
+    fieldNameOf(event) {
+        const target = event.target;
+        if (!target?.classList?.contains(CONTROL_CLASS))
+            return null;
+        return target.closest(`[${FIELD_ATTRIBUTE}]`)?.getAttribute(FIELD_ATTRIBUTE) ?? null;
+    }
+    onEdit(event) {
+        const name = this.fieldNameOf(event);
+        if (!name)
+            return;
+        this.state = onFieldChange(this.state, name, this.values(), this.fullSpec());
+        this.render();
+    }
+    onLeave(event) {
+        const name = this.fieldNameOf(event);
+        if (!name)
+            return;
+        this.state = onFieldBlur(this.state, name, this.values(), this.fullSpec());
+        this.render();
+    }
+    onSubmit(event) {
+        // Never the browser's own submission: it would reload the page with the answers in the address and send nothing.
+        event.preventDefault();
+        if (this.inFlight)
+            return;
+        const values = this.values();
+        this.state = onSubmitAttempt(this.state, values, this.fullSpec());
+        this.render();
+        if (Object.keys(this.state.errors).length) {
+            this.announce(this.state.errors);
+            this.focusFirstInvalid();
+            return;
+        }
+        if (!this.options.transport)
+            return;
+        void this.send(values);
+    }
+    async send(values) {
+        this.inFlight = true;
+        this.setRenderState(FormRenderState.Submitting);
+        let response;
+        try {
+            response = await this.options.transport({
+                formId: this.form.getAttribute('data-iox-form') ?? '',
+                values: withAntiSpamFields(values, this.renderedAt, this.honeypotValue()),
+            });
+        }
+        catch {
+            // The call never reached the server — the Error block, never Success.
+            response = { ok: false };
+        }
+        this.inFlight = false;
+        this.apply(response);
+    }
+    apply(response) {
+        const outcome = submitOutcome(response);
+        this.setRenderState(outcome.state);
+        if (outcome.errors) {
+            this.state = { ...this.state, submitted: true, submitting: false, errors: { ...outcome.errors } };
+            this.render();
+            this.announce(outcome.errors);
+            this.focusFirstInvalid();
+            return;
+        }
+        if (outcome.state === FormRenderState.Error) {
+            this.announce(null);
+            return;
+        }
+        this.form.reset();
+        this.state = resetFormState();
+        this.render();
+        if (outcome.redirect)
+            this.options.navigate?.(outcome.redirect);
+    }
+    setRenderState(state) {
+        this.form.setAttribute(FORM_STATE_ATTRIBUTE, state);
+        if (state === FormRenderState.Submitting)
+            this.form.setAttribute('aria-busy', 'true');
+        else
+            this.form.removeAttribute('aria-busy');
+        syncSubmitButtons(this.form, state);
+        this.state = { ...this.state, submitting: state === FormRenderState.Submitting };
+    }
+    fullSpec() {
+        return { formId: '', name: '', feedback: this.spec.feedback, fields: this.spec.fields, actions: [], antiSpam: { honeypot: true, minFillMs: 0 } };
+    }
+    fieldElement(name) {
+        // Compared, never interpolated into a selector: a field key may hold characters a selector chokes on.
+        for (const el of Array.from(this.form.querySelectorAll(`[${FIELD_ATTRIBUTE}]`))) {
+            if (el.getAttribute(FIELD_ATTRIBUTE) === name && el.closest('form') === this.form)
+                return el;
+        }
+        return null;
+    }
+    controlsOf(field) {
+        return Array.from(field.querySelectorAll(`.${CONTROL_CLASS}`));
+    }
+    valueOf(spec) {
+        const el = this.fieldElement(spec.name);
+        if (!el)
+            return undefined;
+        const controls = this.controlsOf(el);
+        const first = controls[0];
+        if (!first)
+            return undefined;
+        if (first.type === 'radio')
+            return controls.find(c => c.checked)?.value ?? '';
+        if (first.type === 'checkbox')
+            return first.checked;
+        if (first.type === 'range')
+            return Number(first.value);
+        return first.value;
+    }
+    /** Every field's error, aria-invalid, describedby and invalid class — as `IoxFieldComponent` renders them. */
+    render() {
+        for (const field of this.spec.fields) {
+            const el = this.fieldElement(field.name);
+            if (!el)
+                continue;
+            const error = this.state.errors[field.name];
+            const shown = !!error && shouldShowError(field.name, this.state, this.spec.feedback);
+            const text = shown ? this.messages(error.messageKey, error.params) : '';
+            el.classList.toggle(INVALID_CLASS, shown && !!text);
+            this.renderError(el, shown ? text : '');
+        }
+    }
+    renderError(field, text) {
+        const controls = this.controlsOf(field);
+        const id = (controls[0]?.id || `iox-field-${field.getAttribute(FIELD_ATTRIBUTE)}`) + '-error';
+        let p = field.querySelector(`.${ERROR_CLASS}`);
+        if (text) {
+            if (!p) {
+                p = field.ownerDocument.createElement('p');
+                p.className = ERROR_CLASS;
+                p.id = id;
+                p.setAttribute('role', 'alert');
+                field.appendChild(p);
+            }
+            p.textContent = text;
+        }
+        else {
+            p?.remove();
+        }
+        const helpId = field.querySelector(`.${HELP_CLASS}`)?.id;
+        const describedBy = [helpId, text ? id : ''].filter(Boolean).join(' ');
+        for (const control of controls) {
+            if (text)
+                control.setAttribute('aria-invalid', 'true');
+            else
+                control.removeAttribute('aria-invalid');
+            if (describedBy)
+                control.setAttribute('aria-describedby', describedBy);
+            else
+                control.removeAttribute('aria-describedby');
+        }
+    }
+    announce(errors) {
+        const region = this.form.querySelector(`[${FORM_ANNOUNCER_ATTRIBUTE}]`);
+        if (!region)
+            return;
+        // Cleared first: a live region speaks on CHANGE, and the same failure twice must be said twice.
+        region.textContent = '';
+        const next = failureAnnouncement(errors);
+        Promise.resolve().then(() => { region.textContent = next; });
+    }
+    focusFirstInvalid() {
+        for (const field of this.spec.fields) {
+            if (!this.state.errors[field.name])
+                continue;
+            const el = this.fieldElement(field.name);
+            this.controlsOf(el ?? this.form)[0]?.focus();
+            return;
+        }
+    }
+    honeypotValue() {
+        return this.form.querySelector(`input[name="${HONEYPOT_FIELD}"]`)?.value ?? '';
+    }
+}
+/** The runtime already running a form element, if any. */
+function stringFormRuntimeOf(form) {
+    return form?.[BOOTED] ?? 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).
+ */
+function attachStringForm(form, options = {}) {
+    if (!form || form.tagName !== 'FORM')
+        return null;
+    const running = stringFormRuntimeOf(form);
+    if (running)
+        return running;
+    const spec = parseClientFormSpec(form.getAttribute(FORM_FIELDS_ATTRIBUTE));
+    return spec ? new StringFormRuntime(form, spec, options) : null;
+}
+
 /*
  * Public API Surface of iox-ui
  */
@@ -8187,5 +8721,5 @@ function playDualLayerTransition(resolved, layers) {
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map