@vectoriox/iox-ui 5.80.0 → 5.82.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1556,7 +1556,15 @@ const MARKER_FUNS = [
     ['markerColor', 'color'],
     ['markerFontSize', 'fontSize'],
 ];
-const TRANSITION_KEYS = ['transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+const TRANSITION_KEYS = ['transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty'];
+/** The Transition ▸ Properties trait (G2): what a transition names, comma-separated. Unset, the renderers fill in the
+ *  properties the node's states change (`withStateTransitions`); a transition never names `all` unless an author
+ *  typed it. */
+const TRANSITION_PROPERTY_KEY = 'transitionProperty';
+/** The property list a `transitionProperty` value names (`color, transform` → two entries). */
+function transitionPropertyList(value) {
+    return String(value ?? '').split(',').map(p => p.trim()).filter(Boolean);
+}
 // ─── Max lines (line clamp) ─────────────────────────────────────────────────────
 /** "Max lines" (Card v2, board 8 — opt-in on a Title / Text): a whole number clamps the text to that many
  *  lines with an ellipsis. It composes into the four declarations a line clamp takes; anything else
@@ -1740,13 +1748,15 @@ function composeVirtualTraits(raw, base = raw) {
     const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
     if (transformStr)
         result['transform'] = transformStr;
-    // transition — only emit when duration is non-zero
+    // transition — only when it is timed (a non-zero duration) and names what it moves: one entry per property
+    // (G2, Emil 183 — never `transition: all`); nothing to name, nothing to transition.
     const dur = raw['transitionDuration'] ?? base['transitionDuration'];
     const ease = raw['transitionTimingFunction'] ?? base['transitionTimingFunction'];
     const del = raw['transitionDelay'] ?? base['transitionDelay'];
-    if (dur && ease && dur !== '0ms' && dur !== '0s') {
+    const props = transitionPropertyList(raw[TRANSITION_PROPERTY_KEY] ?? base[TRANSITION_PROPERTY_KEY]);
+    if (dur && ease && dur !== '0ms' && dur !== '0s' && props.length) {
         const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
-        result['transition'] = `all ${dur} ${ease}${delPart}`;
+        result['transition'] = props.map(p => `${p} ${dur} ${ease}${delPart}`).join(', ');
     }
     // Max lines: the clamp takes over the node's display and overflow.
     const clamp = lineClamp(raw[MAX_LINES_KEY] ?? base[MAX_LINES_KEY]);
@@ -1858,6 +1868,8 @@ const NOOP_INITIAL_VALUES = {
     'aspect-ratio': ['auto'],
     'mix-blend-mode': ['normal'],
     'transform': ['none'], 'box-shadow': ['none'],
+    // G3: the Transform origin trait's default is the CSS initial (the centre) — never emitted on every node.
+    'transform-origin': ['center', 'center center', '50% 50%', '50% 50% 0', '50% 50% 0px'],
     // overflow initial is `visible`. A self-describing node serialises the Overflow trait's default,
     // so WITHOUT this the emitted `overflow: visible` would override component baselines that clip
     // (e.g. `.iox-card__img-wrap`, `.iox-slider`, `.iox-gallery` all set `overflow: hidden`), breaking
@@ -1978,12 +1990,41 @@ var ComponentState;
      *  `targetedStateSelector`. On a node OUTSIDE every item (composite T20, CC4a) the author PICKS the item — "when tab
      *  Night is on" — the same state and the same `:has()` scoped to the nearest common ancestor. */
     ComponentState["ItemOpen"] = "trigger-on";
+    /** G4: a control that cannot be used — a disabled button, or one marked aria-disabled. */
+    ComponentState["Disabled"] = "disabled";
+    /** G4: busy — a submit button while its form sends (`syncSubmitButtons`), a form while it sends. */
+    ComponentState["Busy"] = "busy";
+    /** G4: chosen — a toggle button pressed, an option checked or selected. */
+    ComponentState["Selected"] = "selected";
+    /** G4: the page has scrolled (a header that firms up once the page moves) — `SCROLLED_ATTRIBUTE` on the root. */
+    ComponentState["Scrolled"] = "scrolled";
 })(ComponentState || (ComponentState = {}));
-/** The attribute selector each (non-targeted) component state compiles to. */
+/** The page has scrolled: written on the document element by the live site (and on the canvas page by the builder). */
+const SCROLLED_ATTRIBUTE = 'data-iox-scrolled';
+/** The selector each (non-targeted) component state compiles to — an attribute, or an `:is()` of the ways a node can
+ *  be in it (a native `:disabled` or `aria-disabled`; pressed / checked / selected), so one rule covers every markup. */
 const COMPONENT_STATE_SELECTOR = {
     [ComponentState.Current]: '[aria-current="page"]',
     [ComponentState.On]: '[data-iox-on]',
+    [ComponentState.Disabled]: ':is(:disabled, [aria-disabled="true"])',
+    [ComponentState.Busy]: '[aria-busy="true"]',
+    [ComponentState.Selected]: ':is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"])',
+    [ComponentState.Scrolled]: `:is([${SCROLLED_ATTRIBUTE}], [${SCROLLED_ATTRIBUTE}] *)`,
 };
+/** Which types offer each control state (G4) in the Style panel's Component state group. */
+const G4_STATE_TYPES = [
+    [ComponentState.Disabled, ['ButtonBlock', 'Button', 'SubmitButton']],
+    [ComponentState.Busy, ['SubmitButton', 'ButtonBlock', 'Form']],
+    [ComponentState.Selected, ['ButtonBlock', 'LinkedContainer']],
+];
+/** Scrolled is offered on the site header and its parts — generation-core's NavRole family (`nav`, `nav.brand`…), the
+ *  drawer's parts aside (the drawer is a dialog over the page). Spelled here — the main entry does not import
+ *  generation-core; style-compiler.spec pins it to the enum. */
+const SCROLLED_STATE_ROLE = 'nav';
+const DRAWER_ROLE_PREFIX = 'nav.drawer';
+function offersScrolled(role) {
+    return !!role && (role === SCROLLED_STATE_ROLE || role.startsWith(`${SCROLLED_STATE_ROLE}.`)) && !role.startsWith(DRAWER_ROLE_PREFIX);
+}
 /** The composite roles that are themselves "on" when their item is open (they carry `data-iox-on`): an accordion's
  *  item, header and panel; a disclosure (its own item), its toggle and its panel (CC2.1); a tab and its panel (CC4a —
  *  "Active"). The main entry does not import composite-core, so the roles are spelled here — `style-compiler.spec` pins
@@ -2008,6 +2049,11 @@ function componentStatesFor(type, role, insideItem = false, itemsToPick = false)
         out.push(ComponentState.Current);
     if (insideItem || itemsToPick)
         out.push(ComponentState.ItemOpen);
+    for (const [state, types] of G4_STATE_TYPES)
+        if (type && types.includes(type))
+            out.push(state);
+    if (offersScrolled(role))
+        out.push(ComponentState.Scrolled);
     return out;
 }
 /**
@@ -2042,29 +2088,72 @@ function hasHoverState(stateStyles) {
  * The base-rule transition a hovering node gets when it declares none of its own, so a hover
  * animates instead of snapping. ONE copy for the builder canvas, the style panel and the engine.
  *
- * Two values, chosen by the element-style MARKER (§3b-bis): a node wearing an element style takes
+ * Two timings, chosen by the element-style MARKER (§3b-bis): a node wearing an element style takes
  * the motion tokens; a node without one (saved before DS2, not adopted) keeps the pre-DS2 literal
- * byte-for-byte — seeding an org's tokens must never change how a legacy page hovers.
+ * timing — seeding an org's tokens must never change how a legacy page hovers. WHAT transitions is the
+ * list of properties the node's states change (G2 — never `transition: all`).
  */
-const HOVER_DEFAULT_TRANSITION = 'all var(--iox-dur-fast) var(--iox-ease-standard)';
-const LEGACY_HOVER_TRANSITION = 'all 0.2s ease';
-/** The default hover transition for a node that wears `elementStyle` (or none). */
-function defaultHoverTransition(elementStyle) {
-    return elementStyle ? HOVER_DEFAULT_TRANSITION : LEGACY_HOVER_TRANSITION;
-}
-/** True when the RAW style map already yields a transition (an explicit one, or the composed
- *  transitionDuration/TimingFunction an element style writes). */
+const HOVER_DEFAULT_TRANSITION_TRAITS = {
+    transitionDuration: 'var(--iox-dur-fast)', transitionTimingFunction: 'var(--iox-ease-standard)',
+};
+const LEGACY_HOVER_TRANSITION_TRAITS = { transitionDuration: '0.2s', transitionTimingFunction: 'ease' };
+/** The default hover timing for a node that wears `elementStyle` (or none). */
+function defaultHoverTransitionTraits(elementStyle) {
+    return elementStyle ? HOVER_DEFAULT_TRANSITION_TRAITS : LEGACY_HOVER_TRANSITION_TRAITS;
+}
+const isFilled = (v) => v !== undefined && v !== null && String(v).trim() !== '';
+const isZeroDuration = (v) => /^-?0+(\.0+)?(ms|s)?$/.test(String(v ?? '').trim());
+/** True when the RAW style map times a transition of its own (an explicit `transition`, or the
+ *  transitionDuration / TimingFunction an element style writes). */
 function hasOwnTransition(styleProps) {
     const sp = styleProps ?? {};
-    if (sp['transition'] !== undefined && sp['transition'] !== null && sp['transition'] !== '')
+    if (isFilled(sp['transition']))
         return true;
-    return composeVirtualTraits(sp)['transition'] !== undefined;
+    return isFilled(sp['transitionDuration']) && !isZeroDuration(sp['transitionDuration']) && isFilled(sp['transitionTimingFunction']);
 }
-/** `styleProps` plus the default hover transition when the node hovers and sets none itself. */
-function withDefaultHoverTransition(styleProps, stateStyles, elementStyle) {
-    return hasHoverState(stateStyles) && !hasOwnTransition(styleProps)
-        ? { ...styleProps, transition: defaultHoverTransition(elementStyle) }
-        : styleProps;
+/** Keys a composed state map holds that are not properties a transition can name. */
+const NOT_TRANSITIONED = new Set(['__markerStyles', 'WebkitBackdropFilter', 'transition', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty']);
+/**
+ * The CSS properties a node's states change — what its transition names (G2, Emil 183: never `transition: all`).
+ * Every state the node holds, at every breakpoint, composed as the renderers compose it (translateX / scaleX → one
+ * `transform`, a gradient background → `background-image`…), in a stable order so both renderers emit one string.
+ */
+function stateTransitionProperties(stateStyles, responsive) {
+    const maps = [];
+    for (const map of Object.values(stateStyles ?? {}))
+        if (map)
+            maps.push(map);
+    for (const layer of Object.values(responsive ?? {}))
+        for (const map of Object.values(layer?.stateStyles ?? {}))
+            if (map)
+                maps.push(map);
+    const out = [];
+    for (const map of maps) {
+        for (const key of Object.keys(composeVirtualTraits(map, map))) {
+            if (NOT_TRANSITIONED.has(key))
+                continue;
+            const prop = styleKeyToKebab(key);
+            if (!out.includes(prop))
+                out.push(prop);
+        }
+    }
+    return out;
+}
+/**
+ * `styleProps` as a renderer compiles them: a hovering node with no timing of its own takes the default hover timing,
+ * and a node whose transition names no properties gets the ones its states change. An author's own `transitionProperty`
+ * (or a raw `transition`) always wins. Pure: the node's stored styles are never touched.
+ */
+function withStateTransitions(styleProps, stateStyles, elementStyle, responsive) {
+    let out = styleProps;
+    if (hasHoverState(stateStyles) && !hasOwnTransition(styleProps))
+        out = { ...out, ...defaultHoverTransitionTraits(elementStyle) };
+    if (!isFilled(out['transitionProperty']) && !isFilled(out['transition'])) {
+        const props = stateTransitionProperties(stateStyles, responsive);
+        if (props.length)
+            out = { ...out, transitionProperty: props.join(', ') };
+    }
+    return out;
 }
 /**
  * Per-type default `width` that the builder applies from each component's config
@@ -2088,12 +2177,13 @@ const DEFAULT_WIDTH_BY_TYPE = {
  * behaviour, which the engine must re-apply explicitly for parity. Returns `"prop: value"`
  * declarations to append AFTER the node's own compiled declarations.
  *
+ * The default hover transition is no longer one of them: it is composed into the node's own rule by
+ * `withStateTransitions` (both renderers), listing the properties its states change (G2).
+ *
  * @param type          Node type (registry key).
  * @param styleProps    The node's persisted styleProps.
- * @param hasHoverState Whether the node has a non-empty hover / parent-hover state.
- * @param elementStyle  The element style the node wears — picks the default hover transition.
  */
-function renderDefaultDeclarations(type, styleProps, hasHoverState, elementStyle) {
+function renderDefaultDeclarations(type, styleProps) {
     const sp = styleProps ?? {};
     const out = [];
     const isOutOfFlow = sp['position'] === 'fixed' || sp['position'] === 'absolute';
@@ -2121,12 +2211,6 @@ function renderDefaultDeclarations(type, styleProps, hasHoverState, elementStyle
     if (sp['borderWidth'] && sp['borderStyle'] === undefined) {
         out.push('border-style: solid');
     }
-    // Default transition so own/parent hover animates smoothly (parity with the builder). Skipped
-    // when the node composes its own (an element style's transitionDuration) — appended after the
-    // node's declarations, it would otherwise beat them in the engine only.
-    if (hasHoverState && !hasOwnTransition(sp)) {
-        out.push(`transition: ${defaultHoverTransition(elementStyle)}`);
-    }
     // Image defaults reapplied when unset (the config defaults aren't always persisted). height:auto
     // is only a DEFAULT — when the user sets an explicit height (e.g. 100%) it must WIN, so guard it
     // on `sp['height'] === undefined` (matching the builder, which respects a configured height). An
@@ -4387,6 +4471,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 +4842,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 +4877,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 +4894,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 +4916,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 +5002,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 +5045,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 +5079,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 +5103,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 +5597,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 +5611,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 +5631,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], disableWhileSubmitting: [{
                 type: Input
-            }], submitting: [{
-                type: Input
             }] } });
 
 /**
@@ -6029,6 +6227,98 @@ 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 };
+}
+/**
+ * The devices a hover rule is for (G1 — Emil 91, mobile-native M1): a phone has no hover, and a tap fires a false
+ * one that STICKS until the next tap elsewhere. Every hover, parent-hover and trigger-hover rule — the node's own and
+ * a part's — is emitted inside this query by both renderers; `:active` (a real press on touch) never is.
+ */
+const HOVER_MEDIA_QUERY = '(hover: hover) and (pointer: fine)';
+/** True for a state driven by a pointer hovering something (its own, its parent's, a chosen trigger's). */
+function isHoverState(state) {
+    return !!state && HOVER_STATES.includes(state);
+}
+/** `css` as it is emitted for `state`: inside `HOVER_MEDIA_QUERY` for a hover state, unchanged otherwise. */
+function gateHoverRule(state, css) {
+    return css && isHoverState(state) ? `@media ${HOVER_MEDIA_QUERY} {\n${css}\n}` : css;
+}
+
 /**
  * "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 +6574,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 +6677,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();
@@ -6365,6 +6752,145 @@ function finalKeyframe(frames) {
     return typeof last['clipPath'] === 'string' && FULLY_SHOWN_CLIP.test(last['clipPath']) ? { ...last, clipPath: 'none' } : last;
 }
 
+/**
+ * What an interaction's easing may be (G6, decision D8): one of the five CSS keywords, a `cubic-bezier()`, or the
+ * NAME of one of the look's easing tokens — so an author's entrance moves on the same curve as the site's buttons and
+ * dialogs (Emil 21: one token system), and Spring plays the look's spring (a `linear()` curve, `springToLinear`).
+ * Both runtimes resolve it the same way, through the CSS custom property on the element itself.
+ */
+var EasingKeyword;
+(function (EasingKeyword) {
+    EasingKeyword["Linear"] = "linear";
+    EasingKeyword["Ease"] = "ease";
+    EasingKeyword["EaseIn"] = "ease-in";
+    EasingKeyword["EaseOut"] = "ease-out";
+    EasingKeyword["EaseInOut"] = "ease-in-out";
+})(EasingKeyword || (EasingKeyword = {}));
+/** The look's easing tokens an interaction may name (their `--iox-<name>` holds the curve). */
+var EasingToken;
+(function (EasingToken) {
+    EasingToken["Standard"] = "ease-standard";
+    EasingToken["Enter"] = "ease-enter";
+    EasingToken["Exit"] = "ease-exit";
+    EasingToken["Spring"] = "ease-spring";
+})(EasingToken || (EasingToken = {}));
+const EASING_KEYWORDS = Object.values(EasingKeyword);
+const EASING_TOKENS = Object.values(EasingToken);
+/** What an unknown or unresolvable easing plays as: a deceleration, never ease-in (Emil 17). */
+const DEFAULT_INTERACTION_EASING = EasingKeyword.EaseOut;
+const NUMBER = '\\s*(-?\\d*\\.?\\d+)\\s*';
+const CUBIC_BEZIER = new RegExp(`^cubic-bezier\\(${NUMBER},${NUMBER},${NUMBER},${NUMBER}\\)$`);
+/** A well-formed `cubic-bezier(x1, y1, x2, y2)` whose x values sit in [0, 1] (what CSS and WAAPI accept). */
+function isCubicBezier(value) {
+    const m = CUBIC_BEZIER.exec(String(value ?? '').trim());
+    if (!m)
+        return false;
+    const [x1, , x2] = [Number(m[1]), Number(m[2]), Number(m[3])];
+    return x1 >= 0 && x1 <= 1 && x2 >= 0 && x2 <= 1;
+}
+function isEasingToken(value) {
+    return EASING_TOKENS.includes(String(value ?? ''));
+}
+/** True for anything an interaction may store as its easing. */
+function isInteractionEasing(value) {
+    return EASING_KEYWORDS.includes(String(value ?? '')) || isEasingToken(value) || isCubicBezier(value);
+}
+/** A token's value is a timing function WAAPI plays: a keyword, a cubic-bezier, or a `linear()` / `steps()` curve (the
+ *  spring's). Read by shape, so it answers alike in every browser, on the server and in a spec. */
+const TIMING_FUNCTION = /^(linear|steps)\(.+\)$/;
+function supportedEasing(value) {
+    return EASING_KEYWORDS.includes(value) || isCubicBezier(value) || TIMING_FUNCTION.test(value);
+}
+/**
+ * The timing function WAAPI plays for `easing` on `el`: a keyword or a curve as stored; a token name → the token's
+ * value as the element sees it (`--iox-ease-spring` → its `linear()`), so a section scheme or the canvas's token scope
+ * applies; anything else, or a token the element cannot resolve → `fallback`.
+ */
+function resolveInteractionEasing(easing, el, fallback = DEFAULT_INTERACTION_EASING) {
+    const value = String(easing ?? '').trim();
+    if (EASING_KEYWORDS.includes(value) || isCubicBezier(value))
+        return value;
+    if (!isEasingToken(value))
+        return fallback;
+    const resolved = el?.ownerDocument?.defaultView?.getComputedStyle(el).getPropertyValue(`--iox-${value}`)?.trim();
+    return resolved && supportedEasing(resolved) ? resolved : fallback;
+}
+
+/**
+ * When a pointer event should move something (G7 — Emil 85/86/91, mobile-native M1/M5). Both runtimes ask here.
+ *
+ *  · A hover trigger answers a mouse or a pen only: a finger has no hover, and a tap's emulated mouseenter left the
+ *    hover state on until the next tap elsewhere.
+ *  · Press feedback lands on pointer-DOWN, at once — the click (pointer-up) commits. Only an action that is pure
+ *    feedback moves early: an animation of the pressed element itself that hides nothing and shows nothing. Opening,
+ *    closing, navigating and toggling stay on the click, so dragging away still cancels them. A keyboard press (Enter,
+ *    Space) has no pointer-down, so it never animates (Emil 2).
+ */
+var PointerKind;
+(function (PointerKind) {
+    PointerKind["Mouse"] = "mouse";
+    PointerKind["Pen"] = "pen";
+    PointerKind["Touch"] = "touch";
+})(PointerKind || (PointerKind = {}));
+const HOVERING_POINTERS = new Set([PointerKind.Mouse, PointerKind.Pen]);
+/** True for a pointer that really hovers — a mouse or a pen, never a finger. An event with no pointer type (a synthetic
+ *  `mouseenter`) counts as a mouse. */
+function isHoverPointer(event) {
+    const kind = event?.pointerType;
+    return !kind || HOVERING_POINTERS.has(kind);
+}
+/** True for an action that is press FEEDBACK: it animates the pressed element itself and neither hides nor shows it. */
+function isPressFeedback(action) {
+    if (!action || action.disabled)
+        return false;
+    if (action.target && action.target !== 'self')
+        return false;
+    if (ENTRANCE_ACTION_TYPES.has(action.type) || EXIT_ACTION_TYPES.has(action.type) || action.type === VisibilityActionType.Toggle)
+        return false;
+    return !!buildInteractionKeyframes(action.type, action.params);
+}
+/** A click interaction's actions split by when they run: the feedback on pointer-down, the rest on the click. */
+function splitPressFeedback(actions) {
+    const onPress = [];
+    const onClick = [];
+    for (const action of actions ?? [])
+        (isPressFeedback(action) ? onPress : onClick).push(action);
+    return { onPress, onClick };
+}
+
+/** How far the page has to move before it counts as scrolled — past a trackpad's rest jitter. */
+const SCROLLED_THRESHOLD_PX = 8;
+/** True once `offset` has passed the threshold. */
+function isScrolled(offset, threshold = SCROLLED_THRESHOLD_PX) {
+    return Number.isFinite(offset) && offset > threshold;
+}
+/**
+ * Keep `SCROLLED_ATTRIBUTE` on `target` while `source` has scrolled past the threshold — what the Scrolled state (G4)
+ * compiles against, on the live site (the window → the document element) and on the canvas (its scroller → the page).
+ * One passive listener, read once per frame, written only when it changes. Returns the stop.
+ */
+function watchScrolled(source, target, threshold = SCROLLED_THRESHOLD_PX) {
+    let frame = 0;
+    const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => setTimeout(() => fn(0), 16);
+    const caf = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
+    const sync = () => {
+        frame = 0;
+        const scrolled = isScrolled(source.scrollY ?? source.scrollTop ?? 0, threshold);
+        if (scrolled !== target.hasAttribute(SCROLLED_ATTRIBUTE))
+            target.toggleAttribute(SCROLLED_ATTRIBUTE, scrolled);
+    };
+    const onScroll = () => { if (!frame)
+        frame = raf(sync); };
+    source.addEventListener('scroll', onScroll, { passive: true });
+    sync();
+    return () => {
+        source.removeEventListener('scroll', onScroll);
+        if (frame)
+            caf(frame);
+        target.removeAttribute(SCROLLED_ATTRIBUTE);
+    };
+}
+
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
  *
@@ -8179,6 +8705,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 +8958,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_INTERACTION_EASING, 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, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, 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_TRAITS, 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, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, 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, TRANSITION_PROPERTY_KEY, 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, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, 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, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map