@verbb/formie-browser 1.0.2 → 1.0.4

package/dist/js/utils/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/js/utils/i18n.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AA4DtE,wBAAgB,qBAAqB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE9D;AAED,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIlG;AAED,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CASpG;AAED,wBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,GAAE,uBAA4B,GAAG,MAAM,CAcrF;AAED,eAAO,MAAM,SAAS,UAAI,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/js/utils/i18n.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AA4DtE,wBAAgB,qBAAqB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE9D;AAED,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIlG;AAED,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CASpG;AA2LD,wBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,GAAE,uBAA4B,GAAG,MAAM,CAQrF;AAED,eAAO,MAAM,SAAS,UAAI,CAAC"}

package/dist/js/validation/rules/email.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../../../src/js/validation/rules/email.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAElE,QAAA,MAAM,KAAK,EAAE,wBAaZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../../../src/js/validation/rules/email.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAElE,QAAA,MAAM,KAAK,EAAE,wBAcZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/js/validation/rules/number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../../src/js/validation/rules/number.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAElE,QAAA,MAAM,MAAM,EAAE,wBAkDb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../../src/js/validation/rules/number.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAElE,QAAA,MAAM,MAAM,EAAE,wBAsDb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/js/validation/scope.d.ts

@@ -0,0 +1,6 @@
+export declare function getFormPages(form: HTMLFormElement): HTMLElement[];
+export declare function getValidationScope(form: HTMLFormElement): {
+    scope: Element;
+    final: boolean;
+};
+//# sourceMappingURL=scope.d.ts.map

package/dist/js/validation/scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../../src/js/validation/scope.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,EAAE,CAEjE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,CAoB5F"}

package/dist/js/validation/submit-readiness.d.ts

@@ -0,0 +1,4 @@
+import type { FormieValidator } from '#validation/validator';
+export declare function syncSubmitReadiness(form: HTMLFormElement, validator: FormieValidator): void;
+export declare function bindSubmitReadiness(form: HTMLFormElement, validator: FormieValidator, target: Element): () => void;
+//# sourceMappingURL=submit-readiness.d.ts.map

package/dist/js/validation/submit-readiness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"submit-readiness.d.ts","sourceRoot":"","sources":["../../../src/js/validation/submit-readiness.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAqB7D,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe,GAAG,IAAI,CA+C3F;AAED,wBAAgB,mBAAmB,CAC/B,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,eAAe,EAC1B,MAAM,EAAE,OAAO,GAChB,MAAM,IAAI,CAiFZ"}

package/dist/js/validation/validator.d.ts

@@ -24,6 +24,7 @@ export declare class FormieValidator {
     getInputValue(input: ValidationInput): string | boolean;
     isDirty(input: ValidationInput): boolean;
     shouldShowError(input: ValidationInput): boolean;
+    isValid(inputOrSelector?: Element | null, options?: ValidateOptions): boolean;
     validate(inputOrSelector?: Element | null, options?: ValidateOptions): ValidationError[];
     removeAllErrors(): void;
     removeError(input: ValidationInput): void;

package/dist/js/validation/validator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validator.d.ts","sourceRoot":"","sources":["../../../src/js/validation/validator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"validator.d.ts","sourceRoot":"","sources":["../../../src/js/validation/validator.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbb/formie-browser",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -65,7 +65,7 @@
     "vite": "^8.0.10"
   },
   "dependencies": {
-    "@verbb/formie-core": "1.0.2",
+    "@verbb/formie-core": "1.0.4",
     "@friendlycaptcha/sdk": "^1.0.0",
     "@placekit/autocomplete-js": "^2.2.1",
     "expression-language": "^2.5.4",

package/src/css/theme/forms/_form.css

@@ -101,6 +101,34 @@
         .formie-row[data-formie-field-count="4"] {
             grid-template-columns: repeat(4, minmax(0, 1fr));
         }
+
+        .formie-row[data-formie-field-count="5"] {
+            grid-template-columns: repeat(5, minmax(0, 1fr));
+        }
+    }
+
+    .formie-row[data-formie-row-submit-inline] > .formie-row-submit {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+
+    @media (min-width: 40rem) {
+        .formie-row[data-formie-row-submit-inline] {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: stretch;
+            gap: var(--formie-gap-row);
+        }
+
+        .formie-row[data-formie-row-submit-inline] > [data-formie-field] {
+            flex: 1 1 0;
+            min-width: 0;
+        }
+
+        .formie-row[data-formie-row-submit-inline] > .formie-row-submit {
+            flex: 0 0 auto;
+        }
     }
 
     .formie-errors {

package/src/js/core/create-formie-client.ts

@@ -25,6 +25,7 @@ import { clearSubmissionOnUnload, requestGraphqlRender, requestRefreshTokens, re
 import { createDebug } from '#utils/debug';
 import { createFormUnloadWarningGuard } from '#utils/unload-warning';
 import { FormieValidator } from '#validation/validator';
+import { bindSubmitReadiness } from '#validation/submit-readiness';
 
 type InternalInstanceState = {
     options: FormMountOptions;
@@ -1135,6 +1136,11 @@ export function createFormieClient(): FormieClient {
 
         if (form) {
             bindFormEvents(target, form, normalizedOptions, bus, validator, unbinds);
+
+            if (validator) {
+                unbinds.push(bindSubmitReadiness(form, validator, target));
+            }
+
             await refreshTokensIfNeeded(target, normalizedOptions, form);
         }
 

package/src/js/core/field-error-container.ts

@@ -0,0 +1,39 @@
+export type FieldErrorPosition = 'above' | 'below';
+
+export function getFieldErrorPosition(fieldNode: Element): FieldErrorPosition {
+    const layout = fieldNode.querySelector('[data-formie-field-layout]');
+    const position = layout?.getAttribute('data-formie-error-position')?.trim();
+
+    return position === 'above' ? 'above' : 'below';
+}
+
+export function ensureFieldErrorContainer(
+    fieldNode: Element,
+    applyTheme?: (container: HTMLElement) => void,
+): HTMLElement {
+    const existing = fieldNode.querySelector('[data-formie-field-errors]') as HTMLElement | null;
+
+    if (existing) {
+        return existing;
+    }
+
+    const content = fieldNode.querySelector('[data-formie-field-content]') as HTMLElement | null;
+    const control = fieldNode.querySelector('[data-formie-field-control]') as HTMLElement | null;
+    const position = getFieldErrorPosition(fieldNode);
+    const container = document.createElement('div');
+
+    container.setAttribute('data-formie-field-errors', 'true');
+    applyTheme?.(container);
+
+    if (content && control) {
+        if (position === 'above') {
+            content.insertBefore(container, control);
+        } else {
+            content.appendChild(container);
+        }
+    } else {
+        fieldNode.appendChild(container);
+    }
+
+    return container;
+}

package/src/js/core/submit-result-state.ts

@@ -6,6 +6,7 @@ import { addThemeClasses, removeThemeClasses, toggleThemeClasses } from '#theme/
 import { createDebug } from '#utils/debug';
 import { getFormStateEventName, normalizeFormieEventName } from '#utils/event-names';
 import type { FormieValidator } from '#validation/validator';
+import { syncSubmitReadiness } from '#validation/submit-readiness';
 
 type FormWithValidationApi = HTMLFormElement & {
     formieValidation?: FormieValidator;
@@ -101,6 +102,16 @@ function getConfiguredSubmitAction(form: HTMLFormElement): string {
     return (form.dataset.formieSubmitAction || '').trim();
 }
 
+function getResolvedSubmitAction(form: HTMLFormElement, result: FormSubmitResult): string {
+    const fromResponse = result.meta?.effectiveSubmitAction;
+
+    if (typeof fromResponse === 'string' && fromResponse.trim() !== '') {
+        return fromResponse.trim();
+    }
+
+    return getConfiguredSubmitAction(form);
+}
+
 function shouldHideFormOnSuccess(form: HTMLFormElement): boolean {
     const rawValue = form.dataset.formieSubmitActionFormHide;
 
@@ -287,6 +298,14 @@ export function clearSubmitLoading(form: HTMLFormElement): void {
         button.removeAttribute('data-formie-loading-indicator');
         button.removeAttribute('data-formie-loading-text');
     });
+
+    if (form.dataset.formieDisableSubmitUntilValid === 'true') {
+        const formWithValidation = form as FormWithValidationApi;
+
+        if (formWithValidation.formieValidation) {
+            syncSubmitReadiness(form, formWithValidation.formieValidation);
+        }
+    }
 }
 
 export function applyPageState(form: HTMLFormElement, nextPageId: string): void {
@@ -337,6 +356,14 @@ export function applyPageState(form: HTMLFormElement, nextPageId: string): void
     // follow-up submits, and server recovery land on the same page.
     setHiddenInputValue(form, 'pageId', nextPageId);
     syncPageTabErrors(form);
+
+    if (form.dataset.formieDisableSubmitUntilValid === 'true') {
+        const formWithValidation = form as FormWithValidationApi;
+
+        if (formWithValidation.formieValidation) {
+            syncSubmitReadiness(form, formWithValidation.formieValidation);
+        }
+    }
 }
 
 function syncSubmissionIdentity(form: HTMLFormElement, result: FormSubmitResult): void {
@@ -563,7 +590,7 @@ export function applySubmitResultState(form: HTMLFormElement, result: FormSubmit
     }
 
     if (action === 'submit' && !result.redirect?.url) {
-        const configuredSubmitAction = getConfiguredSubmitAction(form);
+        const configuredSubmitAction = getResolvedSubmitAction(form, result);
         const preserveHiddenState = configuredSubmitAction === 'message' && shouldHideFormOnSuccess(form);
 
         if (configuredSubmitAction === 'reload') {
@@ -586,7 +613,7 @@ export function applySubmitResultState(form: HTMLFormElement, result: FormSubmit
     }
 
     if (action === 'submit' && result.redirect?.url && result.redirect.target === 'new-tab') {
-        const configuredSubmitAction = getConfiguredSubmitAction(form);
+        const configuredSubmitAction = getResolvedSubmitAction(form, result);
         const preserveHiddenState = configuredSubmitAction === 'message' && shouldHideFormOnSuccess(form);
         clearPendingFinalSubmitReset(form);
         resetSubmissionState(form, { preserveHiddenState });

package/src/js/core/submit-result-ui.ts

@@ -1,4 +1,5 @@
 import type { FormSubmitResult } from '#contracts/schema';
+import { ensureFieldErrorContainer as resolveFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import { setFormHiddenState } from '#core/submit-result-state';
 import { addThemeClasses, removeThemeClasses } from '#theme/theme-classes';
@@ -150,16 +151,9 @@ function ensureFormSuccessContainer(form: HTMLFormElement, position: string): HT
 }
 
 function ensureFieldErrorContainer(fieldNode: Element): HTMLElement {
-    let container = fieldNode.querySelector('[data-formie-field-errors]') as HTMLElement | null;
-
-    if (!container) {
-        container = document.createElement('div');
-        container.setAttribute('data-formie-field-errors', 'true');
+    return resolveFieldErrorContainer(fieldNode, (container) => {
         addThemeClasses(container, fieldNode, 'fieldErrors');
-        fieldNode.appendChild(container);
-    }
-
-    return container;
+    });
 }
 
 function removeDescribedBy(input: HTMLElement, describedById: string): void {

package/src/js/modules/address/google-address.ts

@@ -8,6 +8,7 @@ type GoogleMaps = typeof google;
 type GoogleAddressProviderOptions = {
     apiKey?: string;
     options?: Record<string, unknown>;
+    countryDefaultValue?: string;
 };
 
 const SCRIPT_ID = 'FORMIE_GOOGLE_ADDRESS_SCRIPT';
@@ -194,6 +195,37 @@ function buildAddressFromComponents(formData: Record<string, string>): {
     };
 }
 
+function hasCountryRestriction(options: Record<string, unknown>): boolean {
+    const componentRestrictions = options.componentRestrictions;
+
+    if (componentRestrictions && typeof componentRestrictions === 'object') {
+        const country = (componentRestrictions as { country?: unknown }).country;
+
+        if (Array.isArray(country) ? country.length > 0 : Boolean(country)) {
+            return true;
+        }
+    }
+
+    const includedRegionCodes = options.includedRegionCodes;
+
+    return Array.isArray(includedRegionCodes) && includedRegionCodes.length > 0;
+}
+
+export function buildGoogleAutocompleteOptions(provider: GoogleAddressProviderOptions): Record<string, unknown> {
+    const options = { types: ['geocode'], ...(provider.options || {}) };
+    const country = provider.countryDefaultValue?.trim().toLowerCase();
+
+    if (!country || hasCountryRestriction(options)) {
+        return options;
+    }
+
+    return {
+        ...options,
+        componentRestrictions: { country },
+        includedRegionCodes: [country.toUpperCase()],
+    };
+}
+
 export const googleAddressModule = defineAddressModule<
     GoogleAddressProviderOptions,
     GoogleMaps,
@@ -218,7 +250,7 @@ export const googleAddressModule = defineAddressModule<
             return null;
         }
 
-        const options = { types: ['geocode'], ...(provider.options || {}) };
+        const options = buildGoogleAutocompleteOptions(provider);
         const autocomplete = new PlaceAutocompleteElement(options);
         const inputHeight = window.getComputedStyle(input).height;
 

package/src/js/modules/fields/checkbox-radio.ts

@@ -31,6 +31,14 @@ function getMinMaxRule(getRule: (rule: string) => unknown): { min: number | null
     };
 }
 
+function getSelectedOptionCount(field: HTMLElement): number {
+    return Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement && !isToggleCheckbox(input);
+    }).filter((input) => {
+        return input.checked;
+    }).length;
+}
+
 function registerValidators(form: HTMLFormElement | null): void {
     // Several checkbox/radio module instances can exist in one form, but the
     // custom validator should only be registered once per form lifecycle.
@@ -42,12 +50,7 @@ function registerValidators(form: HTMLFormElement | null): void {
                 return true;
             }
 
-            const inputs = Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
-                return input instanceof HTMLInputElement && !isToggleCheckbox(input);
-            });
-            const selected = inputs.filter((input) => {
-                return input.checked;
-            }).length;
+            const selected = getSelectedOptionCount(field);
             const { min, max } = getMinMaxRule(getRule);
 
             if (min !== null && selected < min) {
@@ -61,21 +64,24 @@ function registerValidators(form: HTMLFormElement | null): void {
             return true;
         },
         ({ field, label, t, getRule }) => {
-            const { min, max } = field ? getMinMaxRule(getRule) : { min: null, max: null };
-
-            if (min !== null && max !== null) {
-                return t('{attribute} must select between {min} and {max}.', { attribute: label, min, max });
+            if (!field) {
+                return t('{label} has an invalid value.', { label });
             }
 
-            if (min !== null) {
-                return t('{attribute} must select no less than {min}.', { attribute: label, min });
+            const selected = getSelectedOptionCount(field);
+            const { min, max } = getMinMaxRule(getRule);
+
+            if (min !== null && selected < min) {
+                return field.getAttribute('data-formie-validation-min-options-message')
+                    ?? t('{label} should contain at least {min, number} {min, plural, one{option} other{options}}.', { label, min });
             }
 
-            if (max !== null) {
-                return t('{attribute} must select no greater than {max}.', { attribute: label, max });
+            if (max !== null && selected > max) {
+                return field.getAttribute('data-formie-validation-max-options-message')
+                    ?? t('{label} should contain at most {max, number} {max, plural, one{option} other{options}}.', { label, max });
             }
 
-            return t('{attribute} has an invalid value.', { attribute: label });
+            return t('{label} has an invalid value.', { label });
         },
     );
     });

package/src/js/modules/fields/conditions/effects.ts

@@ -3,6 +3,9 @@ const PRESERVED_DISABLED_ATTR = 'data-formie-preserve-disabled';
 const CONDITIONAL_HIDDEN_ATTR = 'data-formie-conditionally-hidden';
 const PAGE_HIDDEN_ATTR = 'data-formie-page-hidden';
 const CONDITIONAL_HIDDEN_CLASS = 'formie-conditionally-hidden';
+const CP_MUTED_CLASS = 'fui-cp-muted-conditional-field';
+const CP_MUTED_EXPANDED_CLASS = 'fui-cp-muted-conditional-field--expanded';
+const CP_MUTED_ATTR = 'data-formie-cp-muted';
 const PAGE_HIDDEN_CLASS = 'formie-page-hidden';
 const ROW_HIDDEN_ATTR = 'data-formie-row-hidden';
 const ROW_HIDDEN_CLASS = 'formie-row-hidden';
@@ -143,6 +146,19 @@ function syncRowState(row: Element): void {
     }
 }
 
+function clearCpMutedState(node: Element): void {
+    node.removeAttribute(CP_MUTED_ATTR);
+    node.classList.remove(CP_MUTED_CLASS);
+    node.classList.remove(CP_MUTED_EXPANDED_CLASS);
+}
+
+function clearHideState(node: Element): void {
+    node.removeAttribute(CONDITIONAL_HIDDEN_ATTR);
+    node.removeAttribute(PAGE_HIDDEN_ATTR);
+    node.classList.remove(CONDITIONAL_HIDDEN_CLASS);
+    node.classList.remove(PAGE_HIDDEN_CLASS);
+}
+
 function syncAncestorRows(node: Element): void {
     let currentRow = node.closest(ROW_SELECTOR);
 
@@ -152,8 +168,26 @@ function syncAncestorRows(node: Element): void {
     }
 }
 
-export function applyConditionVisibility(node: Element, hidden: boolean, clearOnHide: boolean): boolean {
-    const stateChanged = setVisibilityState(node, hidden);
+export function applyConditionVisibility(
+    node: Element,
+    hidden: boolean,
+    clearOnHide: boolean,
+    options: { displayMode?: 'hide' | 'muted' } = {},
+): boolean {
+    if (options.displayMode === 'muted') {
+        return applyMutedConditionVisibility(node, hidden);
+    }
+
+    let stateChanged = false;
+
+    if (node.hasAttribute(CP_MUTED_ATTR)
+        || node.classList.contains(CP_MUTED_CLASS)
+        || node.classList.contains(CP_MUTED_EXPANDED_CLASS)) {
+        clearCpMutedState(node);
+        stateChanged = true;
+    }
+
+    stateChanged = setVisibilityState(node, hidden) || stateChanged;
 
     syncDisabledState(node, hidden);
     syncAncestorRows(node);
@@ -164,3 +198,46 @@ export function applyConditionVisibility(node: Element, hidden: boolean, clearOn
 
     return stateChanged;
 }
+
+function applyMutedConditionVisibility(node: Element, hidden: boolean): boolean {
+    let stateChanged = false;
+
+    if (hidden) {
+        if (node.hasAttribute(CONDITIONAL_HIDDEN_ATTR)
+            || node.hasAttribute(PAGE_HIDDEN_ATTR)
+            || node.classList.contains(CONDITIONAL_HIDDEN_CLASS)
+            || node.classList.contains(PAGE_HIDDEN_CLASS)) {
+            clearHideState(node);
+            stateChanged = true;
+        }
+
+        if (!node.hasAttribute(CP_MUTED_ATTR)) {
+            node.setAttribute(CP_MUTED_ATTR, 'true');
+            stateChanged = true;
+        }
+
+        if (!node.classList.contains(CP_MUTED_CLASS)) {
+            node.classList.add(CP_MUTED_CLASS);
+            stateChanged = true;
+        }
+    } else {
+        if (node.hasAttribute(CP_MUTED_ATTR)
+            || node.classList.contains(CP_MUTED_CLASS)
+            || node.classList.contains(CP_MUTED_EXPANDED_CLASS)) {
+            clearCpMutedState(node);
+            stateChanged = true;
+        }
+
+        if (node.hasAttribute(CONDITIONAL_HIDDEN_ATTR)
+            || node.hasAttribute(PAGE_HIDDEN_ATTR)
+            || node.classList.contains(CONDITIONAL_HIDDEN_CLASS)
+            || node.classList.contains(PAGE_HIDDEN_CLASS)) {
+            clearHideState(node);
+            stateChanged = true;
+        }
+    }
+
+    syncAncestorRows(node);
+
+    return stateChanged;
+}

package/src/js/modules/fields/conditions.ts

@@ -72,6 +72,9 @@ export const conditionsModule: FormieModuleDefinition = {
             });
         };
 
+        const cpDisplayMode = ctx.options?.cpDisplayMode === 'muted' ? 'muted' : 'hide';
+        let isApplyingConditions = false;
+
         const runEvaluationPass = (): boolean => {
             let hasStateChanges = false;
 
@@ -80,7 +83,16 @@ export const conditionsModule: FormieModuleDefinition = {
                     return queryConditionInputs(scopeRoot, entry.node, condition);
                 });
 
-                const stateChanged = applyConditionVisibility(entry.node, result.shouldHide, entry.settings.clearOnHide);
+                const displayMode = entry.node.hasAttribute('data-formie-page')
+                    ? 'hide'
+                    : cpDisplayMode;
+
+                const stateChanged = applyConditionVisibility(
+                    entry.node,
+                    result.shouldHide,
+                    entry.settings.clearOnHide,
+                    { displayMode },
+                );
                 hasStateChanges = hasStateChanges || stateChanged;
                 debug.log('Condition evaluated.', {
                     shouldHide: result.shouldHide,
@@ -100,26 +112,45 @@ export const conditionsModule: FormieModuleDefinition = {
         };
 
         const evaluateAll = (): void => {
-            for (let pass = 0; pass < MAX_EVALUATION_PASSES; pass += 1) {
-                if (!runEvaluationPass()) {
-                    break;
-                }
+            if (isApplyingConditions) {
+                return;
+            }
+
+            isApplyingConditions = true;
 
-                if (pass === MAX_EVALUATION_PASSES - 1) {
-                    debug.warn('Reached max evaluation passes.', { maxPasses: MAX_EVALUATION_PASSES });
+            try {
+                for (let pass = 0; pass < MAX_EVALUATION_PASSES; pass += 1) {
+                    if (!runEvaluationPass()) {
+                        break;
+                    }
+
+                    if (pass === MAX_EVALUATION_PASSES - 1) {
+                        debug.warn('Reached max evaluation passes.', { maxPasses: MAX_EVALUATION_PASSES });
+                    }
                 }
+            } finally {
+                isApplyingConditions = false;
             }
         };
 
         const scheduleEvaluateAll = (): void => {
+            if (isApplyingConditions) {
+                return;
+            }
+
             if (evaluationQueued) {
                 return;
             }
 
             evaluationQueued = true;
 
-            queueMicrotask(() => {
+            requestAnimationFrame(() => {
                 evaluationQueued = false;
+
+                if (isApplyingConditions) {
+                    return;
+                }
+
                 evaluateAll();
             });
         };
@@ -168,19 +199,32 @@ export const conditionsModule: FormieModuleDefinition = {
         };
 
         const scheduleRebuild = (): void => {
+            if (isApplyingConditions) {
+                return;
+            }
+
             if (rebuildQueued) {
                 return;
             }
 
             rebuildQueued = true;
 
-            queueMicrotask(() => {
+            requestAnimationFrame(() => {
                 rebuildQueued = false;
+
+                if (isApplyingConditions) {
+                    return;
+                }
+
                 rebuild();
             });
         };
 
         const observer = new MutationObserver((mutations) => {
+            if (isApplyingConditions) {
+                return;
+            }
+
             const shouldRebuild = mutations.some((mutation) => {
                 return mutation.type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0);
             });
@@ -200,8 +244,6 @@ export const conditionsModule: FormieModuleDefinition = {
             subtree: true,
             attributes: true,
             attributeFilter: [
-                'class',
-                'style',
                 'hidden',
                 'aria-hidden',
                 'data-formie-conditionally-hidden',