@verbb/formie-browser 1.0.6 → 1.0.8

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

@@ -1,4 +1,5 @@
 import type { FormSubmitResult } from '#contracts/schema';
+import { applyErrorAriaLive, getErrorAriaLivePreference, resolveSubmitErrorAriaLive } from '#core/error-aria-live';
 import { ensureFieldErrorContainer as resolveFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import { focusFirstValidationError } from '#core/validation-focus';
@@ -124,8 +125,10 @@ function ensureFormErrorMessageContainer(form: HTMLFormElement, container: HTMLE
     // Form-level errors use a live region because they are often the only output
     // for submit-stage failures such as provider or transport errors.
     messageContainer.setAttribute('role', 'alert');
-    messageContainer.setAttribute('aria-live', 'polite');
-    messageContainer.setAttribute('aria-atomic', 'true');
+    applyErrorAriaLive(
+        messageContainer,
+        resolveSubmitErrorAriaLive(getErrorAriaLivePreference(form)),
+    );
 
     return messageContainer;
 }
@@ -295,6 +298,8 @@ function appendDescribedBy(input: HTMLElement, describedById: string): void {
 }
 
 export function renderFieldErrors(form: HTMLFormElement, fieldErrors: Record<string, string[]>): void {
+    const errorAriaLive = resolveSubmitErrorAriaLive(getErrorAriaLivePreference(form));
+
     Object.entries(fieldErrors).forEach(([handle, messages]) => {
         const fieldNode = form.querySelector(`[data-formie-field-handle="${handle}"]`);
 
@@ -307,8 +312,7 @@ export function renderFieldErrors(form: HTMLFormElement, fieldErrors: Record<str
             ? container.id
             : `${handle}-errors`;
         container.id = containerId;
-        container.setAttribute('aria-live', 'polite');
-        container.setAttribute('aria-atomic', 'true');
+        applyErrorAriaLive(container, errorAriaLive);
         addThemeClasses(fieldNode as HTMLElement, form, 'fieldLayoutError');
         (fieldNode as HTMLElement).setAttribute('data-formie-field-has-error', 'true');
 

package/src/js/modules/captchas/factories.ts

@@ -436,6 +436,10 @@ export function createManagedCaptchaModule<
                         return;
                     }
 
+                    // Reconcile immediately so captcha placeholders on the newly
+                    // visible page are mounted before screen-stage policy runs.
+                    visibility.reconcileImmediate();
+
                     // By the time provider `screen()` runs, the widget is
                     // guaranteed to be mounted and the active placeholder is
                     // resolved. That lets provider code focus on challenge

package/src/js/modules/captchas/host.ts

@@ -17,6 +17,7 @@ type Cleanup = () => void;
 type ObserveVisiblePlaceholdersResult = {
     cleanup: Cleanup;
     reconcile: () => void;
+    reconcileImmediate: () => void;
     getVisible: () => HTMLElement[];
 };
 
@@ -115,7 +116,12 @@ const CAPTCHA_VISIBILITY_EVENTS = [
     'formie:page:navigate',
     'formie:page:navigate:after',
     'formie:submit:result',
-];
+] as const;
+
+const CAPTCHA_IMMEDIATE_RECONCILE_EVENTS = new Set<string>([
+    'formie:page:navigate',
+    'formie:page:navigate:after',
+]);
 
 function bindDomEvent(target: EventTarget, eventName: string, callback: EventListener): Cleanup {
     target.addEventListener(eventName, callback);
@@ -152,7 +158,7 @@ function isElementVisible(target: Element): target is HTMLElement {
 
     const style = window.getComputedStyle(target);
 
-    return style.display !== 'none' && style.visibility !== 'hidden';
+    return style.display !== 'none' && style.visibility !== 'hidden' && target.getClientRects().length > 0;
 }
 
 function getPrimaryPlaceholder(root: Element, selector: string): HTMLElement | null {
@@ -271,6 +277,11 @@ function observeVisiblePlaceholders(
         }),
         ...CAPTCHA_VISIBILITY_EVENTS.map((eventName) => {
             return bindDomEvent(root, eventName, () => {
+                if (CAPTCHA_IMMEDIATE_RECONCILE_EVENTS.has(eventName)) {
+                    reconcileNow();
+                    return;
+                }
+
                 reconcile();
             });
         }),
@@ -292,6 +303,7 @@ function observeVisiblePlaceholders(
             visible.clear();
         },
         reconcile,
+        reconcileImmediate: reconcileNow,
         getVisible: () => {
             return queryCaptchaPlaceholders(root, selector).filter((placeholder) => isElementVisible(placeholder));
         },

package/src/js/modules/captchas/recaptcha-enterprise.ts

@@ -4,6 +4,7 @@ import {
 import { CAPTCHA_EXECUTE_WAIT_FOR_VALUE_MS } from '#modules/captchas/constants';
 import {
     loadRecaptchaGlobal,
+    whenRecaptchaReady,
     type RecaptchaGlobal,
     type RecaptchaProviderOptions,
 } from '#modules/captchas/recaptcha-shared';
@@ -94,19 +95,21 @@ export const recaptchaEnterpriseModule = defineCaptchaModule<RecaptchaEnterprise
             return;
         }
 
-        if (provider.enterpriseType === 'score' || provider.enterpriseType === 'policy') {
-            // Score and policy-based keys execute by site key and can resolve
-            // directly to a token. We write that token into the shared transport
-            // layer so the backend can validate it in the usual way.
-            const token = await enterpriseApi.execute(provider.siteKey || '', { action: provider.action || 'submit' });
+        await whenRecaptchaReady(api, async() => {
+            if (provider.enterpriseType === 'score' || provider.enterpriseType === 'policy') {
+                // Score and policy-based keys execute by site key and can resolve
+                // directly to a token. We write that token into the shared transport
+                // layer so the backend can validate it in the usual way.
+                const token = await enterpriseApi.execute(provider.siteKey || '', { action: provider.action || 'submit' });
 
-            if (typeof token === 'string' && token.trim() !== '') {
-                services.tokens.write(token.trim());
+                if (typeof token === 'string' && token.trim() !== '') {
+                    services.tokens.write(token.trim());
+                }
+            } else {
+                // Fallback branch for any future Enterprise widget-like mode.
+                enterpriseApi.execute(widget);
             }
-        } else {
-            // Fallback branch for any future Enterprise widget-like mode.
-            enterpriseApi.execute(widget);
-        }
+        });
 
         const hasToken = await services.tokens.wait(CAPTCHA_EXECUTE_WAIT_FOR_VALUE_MS);
 

package/src/js/modules/captchas/recaptcha-shared.ts

@@ -67,3 +67,17 @@ export async function loadRecaptchaGlobal(
         timeoutMs: CAPTCHA_PROVIDER_LOAD_TIMEOUT_MS,
     });
 }
+
+export function whenRecaptchaReady(api: RecaptchaGlobal, callback: () => void | Promise<void>): Promise<void> {
+    const readyApi = api.enterprise || api;
+
+    return new Promise((resolve, reject) => {
+        try {
+            readyApi.ready(() => {
+                Promise.resolve(callback()).then(resolve).catch(reject);
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+}

package/src/js/modules/captchas/recaptcha-v3.ts

@@ -4,6 +4,7 @@ import {
 import { CAPTCHA_EXECUTE_WAIT_FOR_VALUE_MS } from '#modules/captchas/constants';
 import {
     loadRecaptchaGlobal,
+    whenRecaptchaReady,
     type RecaptchaGlobal,
     type RecaptchaProviderOptions,
 } from '#modules/captchas/recaptcha-shared';
@@ -40,11 +41,13 @@ export const recaptchaV3Module = defineCaptchaModule<RecaptchaProviderOptions, R
 
         // v3 returns its token directly from `execute()`, unlike widget-based
         // captchas that signal completion later via callbacks.
-        const token = await api.execute(provider.siteKey || '', { action: provider.action || 'submit' });
+        await whenRecaptchaReady(api, async() => {
+            const token = await api.execute(provider.siteKey || '', { action: provider.action || 'submit' });
 
-        if (typeof token === 'string' && token.trim() !== '') {
-            services.tokens.write(token.trim());
-        }
+            if (typeof token === 'string' && token.trim() !== '') {
+                services.tokens.write(token.trim());
+            }
+        });
 
         // We still wait on the shared token layer so the module follows the
         // same transport contract as every other captcha provider.

package/src/js/modules/captchas/turnstile.ts

@@ -14,6 +14,7 @@ type TurnstileGlobal = {
     render: (container: HTMLElement, options: Record<string, unknown>) => string;
     execute: (widgetId: string) => void;
     reset: (widgetId: string) => void;
+    remove: (widgetId: string) => void;
 };
 
 // Provider-specific options only. Generic captcha concerns are handled by the
@@ -123,9 +124,14 @@ export const turnstileModule = defineCaptchaModule<TurnstileProviderOptions, Tur
         });
     },
     unmount: ({ api, widget, services }) => {
-        // Reset provider state whenever the widget is torn down so the DOM
-        // transport layer and the provider widget stay in sync.
-        api.reset(widget);
+        // Remove the widget before clearing placeholder DOM so Turnstile does not
+        // log errors about orphaned challenge iframes during remounts.
+        if (typeof api.remove === 'function') {
+            api.remove(widget);
+        } else {
+            api.reset(widget);
+        }
+
         services.tokens.clear();
     },
 });

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

@@ -72,7 +72,49 @@ function setVisibilityState(node: Element, hidden: boolean): boolean {
     return wasHidden !== hidden;
 }
 
+const SUBMIT_CONTROL_SELECTOR = 'button[type="submit"], button[data-formie-action], input[type="submit"]';
+
+function syncControlDisabledState(control: Element, hidden: boolean): void {
+    if (!(control instanceof HTMLButtonElement || control instanceof HTMLInputElement)) {
+        return;
+    }
+
+    if (hidden) {
+        if (!control.hasAttribute(CONDITION_DISABLED_ATTR)) {
+            if (control.hasAttribute('disabled')) {
+                control.setAttribute(PRESERVED_DISABLED_ATTR, 'true');
+            }
+
+            control.setAttribute(CONDITION_DISABLED_ATTR, 'true');
+        }
+
+        control.setAttribute('disabled', 'true');
+        return;
+    }
+
+    if (!control.hasAttribute(CONDITION_DISABLED_ATTR)) {
+        return;
+    }
+
+    if (control.hasAttribute(PRESERVED_DISABLED_ATTR)) {
+        control.setAttribute('disabled', 'true');
+        control.removeAttribute(PRESERVED_DISABLED_ATTR);
+    } else {
+        control.removeAttribute('disabled');
+    }
+
+    control.removeAttribute(CONDITION_DISABLED_ATTR);
+}
+
 function syncDisabledState(node: Element, hidden: boolean): void {
+    if (node.matches(SUBMIT_CONTROL_SELECTOR)) {
+        syncControlDisabledState(node, hidden);
+    }
+
+    node.querySelectorAll(SUBMIT_CONTROL_SELECTOR).forEach((control) => {
+        syncControlDisabledState(control, hidden);
+    });
+
     node.querySelectorAll('input, textarea, select').forEach((input) => {
         if (hidden) {
             if (!input.hasAttribute(CONDITION_DISABLED_ATTR)) {

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

@@ -21,6 +21,9 @@ export const builtinFieldModuleLoaders: Record<string, () => Promise<FormieModul
     'rich-text': () => import('#modules/fields/rich-text').then((module) => module.richTextModule),
     'signature': () => import('#modules/fields/signature').then((module) => module.signatureModule),
     'summary': () => import('#modules/fields/summary').then((module) => module.summaryModule),
+    'survey-likert': () => import('#modules/fields/survey-likert').then((module) => module.surveyLikertModule),
+    'survey-rank': () => import('#modules/fields/survey-rank').then((module) => module.surveyRankModule),
+    'survey-rating': () => import('#modules/fields/survey-rating').then((module) => module.surveyRatingModule),
     'table': () => import('#modules/fields/table').then((module) => module.tableModule),
     'text-limit': () => import('#modules/fields/text-limit').then((module) => module.textLimitModule),
 };

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

@@ -11,6 +11,8 @@ import { requestText } from '#utils/http';
 const BLOCKS_SELECTOR = '[data-formie-summary-blocks]';
 const CONTAINER_SELECTOR = '[data-formie-summary-container]';
 const SUMMARY_ACTION = 'formie/fields/get-summary-html';
+const THEME_CONFIG_ATTR = 'data-formie-theme-config';
+const FRONTEND_THEME_ATTR = 'data-formie-frontend-theme';
 const MODULE_ID = 'summary';
 const debug = createDebug('fields', 'summary');
 
@@ -18,6 +20,8 @@ ensureModuleStyles(MODULE_ID, [summaryCss]);
 
 type SummaryRequestState = {
     accessToken: string | null;
+    themeConfig: string | null;
+    frontendTheme: string | null;
 };
 
 function getSummaryRequestUrl(): string {
@@ -27,12 +31,14 @@ function getSummaryRequestUrl(): string {
     return url.toString();
 }
 
-function getSummaryRequestState(field: HTMLElement): SummaryRequestState {
+function getSummaryRequestState(field: HTMLElement, form: HTMLFormElement): SummaryRequestState {
     const summaryTokenInput = field.querySelector('[data-formie-summary-token]') as HTMLInputElement | null;
     const accessToken = summaryTokenInput?.value?.trim() || null;
 
     return {
         accessToken,
+        themeConfig: form.getAttribute(THEME_CONFIG_ATTR)?.trim() || null,
+        frontendTheme: form.getAttribute(FRONTEND_THEME_ATTR)?.trim() || null,
     };
 }
 
@@ -47,6 +53,14 @@ async function requestSummaryHtml(form: HTMLFormElement, state: SummaryRequestSt
     formData.set('action', SUMMARY_ACTION);
     formData.set('accessToken', state.accessToken);
 
+    if (state.themeConfig) {
+        formData.set('themeConfig', state.themeConfig);
+    }
+
+    if (state.frontendTheme) {
+        formData.set('frontendTheme', state.frontendTheme);
+    }
+
     return requestText(getSummaryRequestUrl(), {
         method: 'POST',
         body: formData,
@@ -101,7 +115,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         toggleThemeClasses(blocks, form, 'loading', false);
     };
 
-    const initialState = getSummaryRequestState(field);
+    const initialState = getSummaryRequestState(field, form);
     setLoadingState(!!initialState.accessToken);
 
     const queueFetch = (): void => {
@@ -114,7 +128,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 
     const fetchSummary = debounce(async() => {
-        const state = getSummaryRequestState(field);
+        const state = getSummaryRequestState(field, form);
 
         if (!getBlocks() || !state.accessToken) {
             debug.warn('Missing state for fetch.', state);

package/src/js/modules/fields/survey-likert.ts

@@ -0,0 +1,50 @@
+import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-likert-field-layout]';
+const MODULE_ID = 'survey-likert';
+const debug = createDebug('fields', 'survey-likert');
+
+ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
+
+export const surveyLikertModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+        });
+
+        await ctx.emit('formie:module:survey-likert:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                debug.log('Module destroy.', {
+                    fieldCount: fields.length,
+                });
+                void ctx.emit('formie:module:survey-likert:destroy', {});
+            },
+        };
+    },
+};