@verbb/formie-browser 1.0.8 → 1.0.10

package/dist/js/core/create-formie-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-formie-client.d.ts","sourceRoot":"","sources":["../../../src/js/core/create-formie-client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,YAAY,EAGf,MAAM,mBAAmB,CAAC;AAs1B3B,wBAAgB,kBAAkB,IAAI,YAAY,CAysBjD"}
+{"version":3,"file":"create-formie-client.d.ts","sourceRoot":"","sources":["../../../src/js/core/create-formie-client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,YAAY,EAGf,MAAM,mBAAmB,CAAC;AA81B3B,wBAAgB,kBAAkB,IAAI,YAAY,CAysBjD"}

package/dist/js/core/submit-flow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"submit-flow.d.ts","sourceRoot":"","sources":["../../../src/js/core/submit-flow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAYxD,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAMhF;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,GAAG,OAAO,CAchF;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAK/D;AAED,wBAAsB,qBAAqB,CAAC,MAAM,EAAE;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB,GAAG,EAAE,QAAQ,CAAC;IACd,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,0BAA0B,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5D,GAAG,OAAO,CAAC,gBAAgB,CAAC,CA2D5B"}
+{"version":3,"file":"submit-flow.d.ts","sourceRoot":"","sources":["../../../src/js/core/submit-flow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAYxD,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAMhF;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,GAAG,OAAO,CAchF;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAK/D;AAED,wBAAsB,qBAAqB,CAAC,MAAM,EAAE;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB,GAAG,EAAE,QAAQ,CAAC;IACd,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,0BAA0B,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5D,GAAG,OAAO,CAAC,gBAAgB,CAAC,CA6D5B"}

package/dist/js/core/submit-result-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"submit-result-state.d.ts","sourceRoot":"","sources":["../../../src/js/core/submit-result-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA6H1D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAqB/E;AA4GD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CA0B5F;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CA0B9D;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAwD9E;AAkKD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,CAsGhH"}
+{"version":3,"file":"submit-result-state.d.ts","sourceRoot":"","sources":["../../../src/js/core/submit-result-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA6H1D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAqB/E;AA4GD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CA0B5F;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CA0B9D;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAoE9E;AAkKD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,CAsGhH"}

package/dist/js/core/submit-result-ui.d.ts

@@ -5,6 +5,7 @@ export declare function clearFormSuccess(form: HTMLFormElement): void;
 export declare function clearAriaInvalid(form: HTMLFormElement): void;
 export declare function renderFieldErrors(form: HTMLFormElement, fieldErrors: Record<string, string[]>): void;
 export declare function renderFormErrors(form: HTMLFormElement, formErrors: string[]): void;
+export declare function renderFormNotice(form: HTMLFormElement, message: string): void;
 export declare function renderFormSuccess(form: HTMLFormElement, message: string): void;
 export declare function applySubmitResultUi(form: HTMLFormElement, result: FormSubmitResult): void;
 //# sourceMappingURL=submit-result-ui.d.ts.map

package/dist/js/core/submit-result-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"submit-result-ui.d.ts","sourceRoot":"","sources":["../../../src/js/core/submit-result-ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA+L1D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAqC5D;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAmB3D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CA6B5D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAI5D;AAaD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAoDpG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAclF;AAgBD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAmC9E;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAyBzF"}
+{"version":3,"file":"submit-result-ui.d.ts","sourceRoot":"","sources":["../../../src/js/core/submit-result-ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA+L1D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAqC5D;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAmB3D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CA6B5D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAI5D;AAaD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAoDpG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAclF;AAaD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAY7E;AAgBD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAmC9E;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAsCzF"}

package/dist/js/modules/fields/checkbox-radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-radio.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/fields/checkbox-radio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AA6PjE,eAAO,MAAM,mBAAmB,EAAE,sBA+CjC,CAAC"}
+{"version":3,"file":"checkbox-radio.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/fields/checkbox-radio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AA8XjE,eAAO,MAAM,mBAAmB,EAAE,sBA+CjC,CAAC"}

package/dist/js/modules/fields/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/fields/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CA0B3F,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/fields/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CA2B3F,CAAC"}

package/dist/js/modules/fields/password-validation.d.ts

@@ -0,0 +1,3 @@
+import type { FormieModuleDefinition } from '#contracts/modules';
+export declare const passwordValidationModule: FormieModuleDefinition;
+//# sourceMappingURL=password-validation.d.ts.map

package/dist/js/modules/fields/password-validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-validation.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/fields/password-validation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAwGjE,eAAO,MAAM,wBAAwB,EAAE,sBAyBtC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../../src/js/utils/fields.ts"],"names":[],"mappings":"AAYA,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,CAQ7E;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAatE;AAED,wBAAgB,eAAe,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAgB9D"}
+{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../../src/js/utils/fields.ts"],"names":[],"mappings":"AAYA,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,CAQ7E;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAatE;AAED,wBAAgB,eAAe,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CA4B9D"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbb/formie-browser",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -70,7 +70,7 @@
     "@placekit/autocomplete-js": "^2.2.1",
     "@uppy/core": "^5.2.0",
     "@uppy/xhr-upload": "^5.2.0",
-    "@verbb/formie-core": "1.0.8",
+    "@verbb/formie-core": "1.0.10",
     "expression-language": "^2.5.4",
     "flatpickr": "^4.6.13",
     "friendly-challenge": "^0.9.19",

package/src/css/theme/_tokens.css

@@ -52,6 +52,8 @@
         --formie-neutral-200: #e2e8f0;
         --formie-neutral-300: #cbd5e1;
         --formie-neutral-400: #94a3b8;
+        /* Lightest slate step that meets ~3:1 non-text contrast on white (WCAG 1.4.11). */
+        --formie-neutral-450: #8796ac;
         --formie-neutral-500: #64748b;
         --formie-neutral-600: #475569;
         --formie-neutral-700: #334155;
@@ -101,16 +103,19 @@
         --formie-color-surface-subtle: var(--formie-neutral-50);
         --formie-color-surface-muted: var(--formie-neutral-100);
         --formie-color-text: var(--formie-neutral-700);
-        --formie-color-text-muted: var(--formie-neutral-500);
+        --formie-color-text-muted: var(--formie-neutral-600);
         --formie-color-heading: var(--formie-neutral-900);
+        /* Structural chrome: tabs, groups, dividers. */
         --formie-color-border: var(--formie-neutral-300);
+        /* Interactive controls: inputs, selects, checkboxes. Border-only; use focus ring for interaction contrast. */
+        --formie-color-border-control: var(--formie-neutral-400);
         --formie-color-border-soft: var(--formie-neutral-200);
         --formie-color-primary: var(--formie-primary-400);
         --formie-color-primary-hover: var(--formie-primary-500);
         --formie-color-primary-border: var(--formie-primary-500);
         --formie-color-primary-soft: var(--formie-primary-100);
         --formie-color-focus-ring: var(--formie-primary-300);
-        --formie-color-danger: var(--formie-danger-500);
+        --formie-color-danger: var(--formie-danger-600);
         --formie-color-danger-soft: var(--formie-danger-50);
         --formie-color-danger-dark: var(--formie-danger-900);
         --formie-color-success: var(--formie-success-500);
@@ -158,8 +163,8 @@
         --formie-button-icon-border-radius: var(--formie-radius-full);
         --formie-button-icon-background: var(--formie-neutral-100);
         --formie-button-icon-background-hover: var(--formie-neutral-200);
-        --formie-button-icon-border: var(--formie-border-width) solid var(--formie-neutral-300);
-        --formie-button-icon-border-hover: var(--formie-border-width) solid var(--formie-neutral-400);
+        --formie-button-icon-border: var(--formie-border-width) solid var(--formie-color-border-control);
+        --formie-button-icon-border-hover: var(--formie-border-width) solid var(--formie-neutral-450);
         --formie-button-icon-color: var(--formie-neutral-950);
         --formie-button-opacity-disabled: 0.7;
         --formie-button-shadow-focus: 0 0 0 3px var(--formie-color-border-soft);
@@ -273,7 +278,7 @@
         --formie-signature-width: 100%;
         --formie-signature-height: 8rem;
         --formie-signature-background: var(--formie-color-surface-subtle);
-        --formie-signature-border: 1px solid var(--formie-color-border);
+        --formie-signature-border: 1px solid var(--formie-color-border-control);
         --formie-signature-border-radius: var(--formie-radius-sm);
 
         --formie-signature-remove-button-top: 0;

package/src/css/theme/fields/_check-radio.css

@@ -51,7 +51,7 @@
         height: var(--formie-check-size);
         content: "";
         cursor: pointer;
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         background-color: var(--formie-check-label-background-color);
         background-repeat: no-repeat;
         background-position: center center;
@@ -105,4 +105,29 @@
     .formie-field-has-error .formie-radio-input:focus-visible+.formie-radio-option-label::before {
         box-shadow: var(--formie-shadow-danger-focus);
     }
+
+    .formie-other-option-text {
+        display: none;
+        flex: 0 0 100%;
+        width: 100%;
+        max-width: 100%;
+        margin-top: var(--formie-space-1);
+    }
+
+    .formie-field-option:has(> input[data-formie-other-option]),
+    .formie-other-option {
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+
+    .formie-field-option:has(> input[data-formie-other-option]:checked) > .formie-other-option-text,
+    .formie-field-option:has(> input[data-formie-other-option]:checked) > label ~ .formie-other-option-text,
+    .formie-other-option:has(> input[data-formie-other-option]:checked) > .formie-other-option-text {
+        display: block;
+    }
+
+    .formie-layout-horizontal .formie-field-option:has(> input[data-formie-other-option]),
+    .formie-layout-horizontal .formie-other-option {
+        flex: 1 1 100%;
+    }
 }

package/src/css/theme/fields/_combobox.css

@@ -32,7 +32,7 @@
     overflow: hidden;
     z-index: 1;
     width: 100%;
-    border: var(--formie-border-width) solid var(--formie-color-border);
+    border: var(--formie-border-width) solid var(--formie-color-border-control);
     border-radius: var(--formie-radius-sm);
     background-color: var(--formie-color-surface);
     background-image: none;

package/src/css/theme/fields/_file.css

@@ -12,7 +12,7 @@
         margin-inline-end: var(--formie-space-2);
         padding: calc(var(--formie-control-padding-y) - 1px) var(--formie-space-2);
         min-height: calc(var(--formie-control-height) - (var(--formie-space-1) * 2));
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: calc(var(--formie-radius-sm) - 1px);
         background: var(--formie-color-surface-subtle);
         color: var(--formie-color-heading);
@@ -26,7 +26,7 @@
 
     .formie-file-input:hover::file-selector-button,
     .formie-file-input:hover::-webkit-file-upload-button {
-        border-color: color-mix(in srgb, var(--formie-color-border) 70%, var(--formie-color-heading) 30%);
+        border-color: color-mix(in srgb, var(--formie-color-border-control) 70%, var(--formie-color-heading) 30%);
         background: var(--formie-color-surface-muted);
     }
 
@@ -47,7 +47,7 @@
     .formie-file-summary {
         padding: var(--formie-file-summary-padding);
         gap: var(--formie-gap-file-summary);
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
     }
 

package/src/css/theme/fields/_input.css

@@ -2,7 +2,7 @@
 
     .formie-input,
     .formie-textarea {
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
         transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;

package/src/css/theme/fields/_repeater.css

@@ -9,7 +9,7 @@
         display: grid;
         gap: var(--formie-space-4);
         padding: var(--formie-space-4);
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-md);
         transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
     }

package/src/css/theme/fields/_rich-text.css

@@ -1,6 +1,6 @@
 @layer formie-theme {
     .formie-rich-text {
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
         box-sizing: border-box;

package/src/css/theme/fields/_select.css

@@ -1,6 +1,6 @@
 @layer formie-theme {
     .formie-select {
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
         transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;

package/src/css/theme/fields/_survey-presentations.css

@@ -263,7 +263,7 @@
         gap: var(--formie-space-2);
         margin: 0;
         padding: var(--formie-space-2) var(--formie-space-3);
-        border: var(--formie-border-width) solid var(--formie-survey-rank-item-border-color, var(--formie-color-border));
+        border: var(--formie-border-width) solid var(--formie-survey-rank-item-border-color, var(--formie-color-border-control));
         border-radius: var(--formie-border-radius);
         background: var(--formie-survey-rank-item-background, var(--formie-color-surface));
         cursor: move;

package/src/css/theme/fields/_table.css

@@ -17,7 +17,7 @@
         text-align: var(--formie-table-th-text-align);
         font-size: var(--formie-table-th-font-size);
         font-weight: var(--formie-table-th-font-weight);
-        color: var(--formie-table-th-color, var(--formie-gray-500));
+        color: var(--formie-table-th-color, var(--formie-color-text-muted));
     }
 
     .formie-table th,

package/src/css/theme/fields/_upload-manager.css

@@ -13,7 +13,7 @@
         gap: var(--formie-space-2);
         padding: var(--formie-space-4);
         min-height: calc(var(--formie-control-height) * 3);
-        border: var(--formie-border-width) dashed var(--formie-color-border);
+        border: var(--formie-border-width) dashed var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface-subtle);
         color: var(--formie-color-text);
@@ -61,7 +61,7 @@
         align-items: center;
         gap: var(--formie-space-2);
         padding: var(--formie-space-2) var(--formie-space-3);
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
     }
@@ -150,7 +150,7 @@
     }
 
     .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-label {
-        color: var(--formie-color-success, var(--formie-color-primary));
+        color: var(--formie-color-success-dark, var(--formie-color-primary));
         font-weight: var(--formie-font-weight-medium);
     }
 

package/src/css/theme/integrations/_paypal.css

@@ -1,6 +1,6 @@
 @layer formie-theme {
     .formie-paypal-button {
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
         box-sizing: border-box;

package/src/css/theme/integrations/_payway.css

@@ -1,6 +1,6 @@
 @layer formie-theme {
     .formie-payway-button {
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
         box-sizing: border-box;

package/src/css/theme/integrations/_stripe.css

@@ -10,7 +10,7 @@
         min-height: 12rem;
         width: 100%;
         padding: var(--formie-space-4);
-        border: var(--formie-border-width) solid var(--formie-color-border);
+        border: var(--formie-border-width) solid var(--formie-color-border-control);
         border-radius: var(--formie-radius-sm);
         background: var(--formie-color-surface);
         color: var(--formie-color-text-muted);

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

@@ -415,9 +415,17 @@ function applyRefreshTokensToForm(form: HTMLFormElement, refreshTokens: FormEndp
     // Refresh-tokens mutates continuity inputs in place so cached or long-lived
     // forms keep submitting with fresh CSRF/request/captcha state.
     if (refreshTokens.csrf?.param && refreshTokens.csrf?.token) {
-        const csrfInput = form.querySelector(`input[name="${refreshTokens.csrf.param}"]`) as HTMLInputElement | null;
+        let csrfInput = form.querySelector(`input[name="${refreshTokens.csrf.param}"]`) as HTMLInputElement | null;
+
         if (csrfInput) {
             csrfInput.value = refreshTokens.csrf.token;
+        } else {
+            csrfInput = document.createElement('input');
+            csrfInput.type = 'hidden';
+            csrfInput.name = refreshTokens.csrf.param;
+            csrfInput.value = refreshTokens.csrf.token;
+            csrfInput.setAttribute('autocomplete', 'off');
+            form.prepend(csrfInput);
         }
     }
 

package/src/js/core/submit-flow.ts

@@ -90,11 +90,13 @@ export async function executeAjaxSubmitFlow(params: {
             validateOnSubmit,
         });
         applySubmitResultUi(form, result);
+        // Let captcha modules refresh one-time tokens before payment follow-up
+        // handlers (e.g. Stripe confirm) trigger an internal resubmit.
+        dispatchSubmitResult(result);
         applySubmitResultState(form, result, action);
         if (shouldRefreshTokensAfterSubmit(result)) {
             await onRefreshTokensAfterSubmit(result);
         }
-        dispatchSubmitResult(result);
     } catch (error) {
         result = {
             ok: false,

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

@@ -335,6 +335,18 @@ export function applyPageState(form: HTMLFormElement, nextPageId: string): void
         toggleThemeClasses(tab, form, 'tabCurrent', isCurrent);
         toggleThemeClasses(tab, form, 'tabComplete', isComplete);
 
+        const tabLink = tab.querySelector('[data-formie-tab-link]');
+
+        if (tabLink) {
+            toggleThemeClasses(tabLink, form, 'tabLinkCurrent', isCurrent);
+
+            if (isCurrent) {
+                removeThemeClasses(tabLink, form, 'tabLinkInactive');
+            } else {
+                addThemeClasses(tabLink, form, 'tabLinkInactive');
+            }
+        }
+
         if (isCurrent) {
             tab.setAttribute('aria-current', 'page');
         } else {

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

@@ -367,6 +367,31 @@ export function renderFormErrors(form: HTMLFormElement, formErrors: string[]): v
     });
 }
 
+function isPaymentFollowUpResult(result: FormSubmitResult): boolean {
+    if (result.ok || result.keepSubmitLoading !== true) {
+        return false;
+    }
+
+    const meta = (result.meta || {}) as Record<string, unknown>;
+    const paymentStatus = String(meta.paymentStatus || '');
+
+    return paymentStatus === 'actionRequired' || paymentStatus === 'pending';
+}
+
+export function renderFormNotice(form: HTMLFormElement, message: string): void {
+    const container = ensureFormErrorContainer(form);
+    const messageContainer = ensureFormErrorMessageContainer(form, container);
+
+    addThemeClasses(container, form, 'errors');
+
+    const noticeNode = document.createElement('div');
+    noticeNode.setAttribute('data-formie-notice', 'true');
+    noticeNode.setAttribute('role', 'status');
+    addThemeClasses(noticeNode, form, 'message');
+    noticeNode.textContent = message;
+    messageContainer.appendChild(noticeNode);
+}
+
 function shouldRenderSuccessMessage(form: HTMLFormElement, result: FormSubmitResult): boolean {
     if (!result.message || result.nextPage || result.redirect) {
         // Page changes and redirects are transitional outcomes, not terminal
@@ -432,15 +457,28 @@ export function applySubmitResultUi(form: HTMLFormElement, result: FormSubmitRes
         return;
     }
 
-    if (result.fieldErrors) {
-        renderFieldErrors(form, result.fieldErrors);
-    }
+    if (!result.ok) {
+        if (isPaymentFollowUpResult(result)) {
+            const meta = (result.meta || {}) as Record<string, unknown>;
+            const message = String(meta.paymentMessage || '').trim();
 
-    if (result.formErrors?.length) {
-        renderFormErrors(form, result.formErrors);
-    } else if (!result.fieldErrors && result.message) {
-        renderFormErrors(form, [result.message]);
-    }
+            if (message) {
+                renderFormNotice(form, message);
+            }
+
+            return;
+        }
+
+        if (result.fieldErrors) {
+            renderFieldErrors(form, result.fieldErrors);
+        }
 
-    focusFirstValidationError(form);
+        if (result.formErrors?.length) {
+            renderFormErrors(form, result.formErrors);
+        } else if (!result.fieldErrors && result.message) {
+            renderFormErrors(form, [result.message]);
+        }
+
+        focusFirstValidationError(form);
+    }
 }