@evervault/js 2.23.0 → 2.24.0

package/dist/evervault-js.js

@@ -285,7 +285,7 @@ function a(e, r) {
 					borderBottomLeftRadius: "var(--ev-roundness, 6px)"
 				} }
 			},
-			"[ev-component=card][ev-fields*=cvc][ev-fields*=expiry]": {
+			"[ev-component=card][ev-layout=auto][ev-fields*=cvc][ev-fields*=expiry]": {
 				"& .field[ev-name=expiry]": { "& input": { borderBottomLeftRadius: "var(--ev-roundness, 6px)" } },
 				"& .field[ev-name=cvc]": {
 					marginLeft: "-1px",

package/dist/evervault-js.umd.cjs

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Evervault={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={primary:`--ev-color-primary`,greyTone:`--ev-grey-tone`,roundness:`--ev-roundness`,font:`--ev-font-family`};function n(e,n){if(!n)return e;let{selectors:r}=n,i={...e[`:root`]};for(let[e,r]of Object.entries(t)){let t=n[e];t&&(i[r]=t)}return{...e,...r??{},":root":{...i,...r?.[`:root`]??{}}}}function r(e,n){let r=typeof e==`function`||e!=null&&(`styles`in e||`fonts`in e||`fontFaces`in e);return r&&typeof e==`object`&&[...Object.keys(t),`selectors`].some(t=>t in e)&&console.warn(`Evervault: the first argument looks like a theme but also has preset config keys, which are ignored. Pass the config as the second argument, for example clean(theme, { primary }).`),r||e==null?[e??void 0,n]:[void 0,e]}function i(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({":root":{"--icon-offset":`1.9rem`},body:{paddingBottom:2,fontFamily:`var(--ev-font-family, inherit)`},label:{fontSize:14,marginBottom:4,display:`block`,color:`#0a2540`},input:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6px 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},select:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6px 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`},button:{fontSize:16,height:40,border:`1px solid #e6ebf1`,padding:`0 12px`},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`},"[ev-component=card]":{gap:16},"[ev-component=pin] input":{height:80,fontSize:20,caretColor:`transparent`},"[ev-component=card]:has(.icon)":{"& .field[ev-name=number]":{position:`relative`},"& .icon":{left:10,height:20,position:`absolute`,top:`var(--icon-offset)`},"& .field[ev-name=number] input":{paddingLeft:48}}},a),...i?e.extend(i):{}}})}function a(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({body:{paddingTop:4,fontFamily:`var(--ev-font-family, inherit)`},".field":{position:`relative`},label:{top:10,left:8,zIndex:3,fontSize:14,lineHeight:1,height:`20px`,display:`flex`,color:`var(--ev-grey-tone, #717f96)`,padding:`0 4px`,alignItems:`center`,position:`absolute`,pointerEvents:`none`,transformOrigin:`center left`,transition:`transform 150ms, background 150ms`},input:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,"&::placeholder":{color:`transparent`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,"&::placeholder":{color:`transparent`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".field:focus-within label, .field:not([ev-has-value=false]) label":{background:`white`,transform:`translateY(-100%) scale(0.8)`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`},".field:not([ev-valid=false]):focus-within label":{color:`var(--ev-color-primary, #63e)`},".field[ev-valid=false] label":{color:`#df1c41`},".field[ev-has-value=true][ev-valid=true]:not(:focus-within) label":{color:`#0a2540`},"[ev-component=card]":{gap:16},"[ev-component=card]:has(.icon)":{"& .icon":{left:10,height:20,position:`absolute`,top:10,opacity:0},"& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])":{"& .icon":{opacity:1},"& input":{paddingLeft:45}}}},a),...i?e.extend(i):{}}})}function o(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({":root":{"--icon-offset":`34px`},body:{paddingBottom:2,fontFamily:`var(--ev-font-family, inherit)`},label:{fontSize:14,marginBottom:`0.5rem`,color:`#0a2540`,display:`none`},".field:first-child label":{display:`block`},"fieldset[ev-valid=false]":{paddingBottom:`1.5rem`},input:{height:40,fontSize:16,borderRadius:0,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:0,color:`#0a2540`,padding:`6 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`,position:`absolute`,left:0,bottom:0,display:`none`},".field[ev-valid=false]":{zIndex:4},".field:focus-within":{zIndex:5},"[ev-component=card]":{gap:0,"& .field[ev-valid=false]:nth-child(1) .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=false] .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=false] .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=true]:nth-child(3) + [ev-valid=false] .error":{display:`block`},"& .field:not(:last-child)":{marginBottom:`-1px`},"& .field:first-child":{"& input":{borderTopLeftRadius:`var(--ev-roundness, 6px)`,borderTopRightRadius:`var(--ev-roundness, 6px)`}},"& .field:last-child":{"& input":{borderBottomRightRadius:`var(--ev-roundness, 6px)`,borderBottomLeftRadius:`var(--ev-roundness, 6px)`}}},"[ev-component=card][ev-fields*=cvc][ev-fields*=expiry]":{"& .field[ev-name=expiry]":{"& input":{borderBottomLeftRadius:`var(--ev-roundness, 6px)`}},"& .field[ev-name=cvc]":{marginLeft:`-1px`,"& input":{borderBottomLeftRadius:0}}},"[ev-component=pin]":{gap:0,"& input":{height:60},"& .field:not(:first-child)":{marginLeft:`-1px`},"& .field:first-child input":{borderTopLeftRadius:`var(--ev-roundness, 6px)`,borderBottomLeftRadius:`var(--ev-roundness, 6px)`},"& .field:last-child input":{borderTopRightRadius:`var(--ev-roundness, 6px)`,borderBottomRightRadius:`var(--ev-roundness, 6px)`}},"[ev-component=card]:has(.icon)":{"& .icon":{left:10,height:20,position:`absolute`,top:`var(--icon-offset)`},"& .field[ev-name=number] input":{paddingLeft:48}}},a),...i?e.extend(i):{}}})}function s(e){return typeof window>`u`?``:window.getComputedStyle(document.documentElement).getPropertyValue(e).trim()}var c=null;async function l(){return c||(c=new Promise((e,t)=>{let n=document.createElement(`script`);if(n.src=`https://js.evervault.com/v2`,n.onload=()=>e(),n.onerror=()=>{c=null,t()},!document.head)throw Error(`Expected document.head not to be null. Evervault.js requires a <head> element.`);document.head.appendChild(n)}),c)}async function u(){if(window.Evervault)return window.Evervault;try{return await l(),window.Evervault}catch{throw Error(`Failed to load Evervault.js`)}}async function d(e,t,n){return new(await(u()))(e,t,n)}Promise.resolve().then(()=>{u()}),e.clean=i,e.cssVar=s,e.loadEvervault=d,e.material=a,e.minimal=o});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Evervault={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={primary:`--ev-color-primary`,greyTone:`--ev-grey-tone`,roundness:`--ev-roundness`,font:`--ev-font-family`};function n(e,n){if(!n)return e;let{selectors:r}=n,i={...e[`:root`]};for(let[e,r]of Object.entries(t)){let t=n[e];t&&(i[r]=t)}return{...e,...r??{},":root":{...i,...r?.[`:root`]??{}}}}function r(e,n){let r=typeof e==`function`||e!=null&&(`styles`in e||`fonts`in e||`fontFaces`in e);return r&&typeof e==`object`&&[...Object.keys(t),`selectors`].some(t=>t in e)&&console.warn(`Evervault: the first argument looks like a theme but also has preset config keys, which are ignored. Pass the config as the second argument, for example clean(theme, { primary }).`),r||e==null?[e??void 0,n]:[void 0,e]}function i(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({":root":{"--icon-offset":`1.9rem`},body:{paddingBottom:2,fontFamily:`var(--ev-font-family, inherit)`},label:{fontSize:14,marginBottom:4,display:`block`,color:`#0a2540`},input:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6px 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},select:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6px 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`},button:{fontSize:16,height:40,border:`1px solid #e6ebf1`,padding:`0 12px`},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`},"[ev-component=card]":{gap:16},"[ev-component=pin] input":{height:80,fontSize:20,caretColor:`transparent`},"[ev-component=card]:has(.icon)":{"& .field[ev-name=number]":{position:`relative`},"& .icon":{left:10,height:20,position:`absolute`,top:`var(--icon-offset)`},"& .field[ev-name=number] input":{paddingLeft:48}}},a),...i?e.extend(i):{}}})}function a(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({body:{paddingTop:4,fontFamily:`var(--ev-font-family, inherit)`},".field":{position:`relative`},label:{top:10,left:8,zIndex:3,fontSize:14,lineHeight:1,height:`20px`,display:`flex`,color:`var(--ev-grey-tone, #717f96)`,padding:`0 4px`,alignItems:`center`,position:`absolute`,pointerEvents:`none`,transformOrigin:`center left`,transition:`transform 150ms, background 150ms`},input:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,"&::placeholder":{color:`transparent`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,"&::placeholder":{color:`transparent`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".field:focus-within label, .field:not([ev-has-value=false]) label":{background:`white`,transform:`translateY(-100%) scale(0.8)`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`},".field:not([ev-valid=false]):focus-within label":{color:`var(--ev-color-primary, #63e)`},".field[ev-valid=false] label":{color:`#df1c41`},".field[ev-has-value=true][ev-valid=true]:not(:focus-within) label":{color:`#0a2540`},"[ev-component=card]":{gap:16},"[ev-component=card]:has(.icon)":{"& .icon":{left:10,height:20,position:`absolute`,top:10,opacity:0},"& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])":{"& .icon":{opacity:1},"& input":{paddingLeft:45}}}},a),...i?e.extend(i):{}}})}function o(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({":root":{"--icon-offset":`34px`},body:{paddingBottom:2,fontFamily:`var(--ev-font-family, inherit)`},label:{fontSize:14,marginBottom:`0.5rem`,color:`#0a2540`,display:`none`},".field:first-child label":{display:`block`},"fieldset[ev-valid=false]":{paddingBottom:`1.5rem`},input:{height:40,fontSize:16,borderRadius:0,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:0,color:`#0a2540`,padding:`6 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`,position:`absolute`,left:0,bottom:0,display:`none`},".field[ev-valid=false]":{zIndex:4},".field:focus-within":{zIndex:5},"[ev-component=card]":{gap:0,"& .field[ev-valid=false]:nth-child(1) .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=false] .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=false] .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=true]:nth-child(3) + [ev-valid=false] .error":{display:`block`},"& .field:not(:last-child)":{marginBottom:`-1px`},"& .field:first-child":{"& input":{borderTopLeftRadius:`var(--ev-roundness, 6px)`,borderTopRightRadius:`var(--ev-roundness, 6px)`}},"& .field:last-child":{"& input":{borderBottomRightRadius:`var(--ev-roundness, 6px)`,borderBottomLeftRadius:`var(--ev-roundness, 6px)`}}},"[ev-component=card][ev-layout=auto][ev-fields*=cvc][ev-fields*=expiry]":{"& .field[ev-name=expiry]":{"& input":{borderBottomLeftRadius:`var(--ev-roundness, 6px)`}},"& .field[ev-name=cvc]":{marginLeft:`-1px`,"& input":{borderBottomLeftRadius:0}}},"[ev-component=pin]":{gap:0,"& input":{height:60},"& .field:not(:first-child)":{marginLeft:`-1px`},"& .field:first-child input":{borderTopLeftRadius:`var(--ev-roundness, 6px)`,borderBottomLeftRadius:`var(--ev-roundness, 6px)`},"& .field:last-child input":{borderTopRightRadius:`var(--ev-roundness, 6px)`,borderBottomRightRadius:`var(--ev-roundness, 6px)`}},"[ev-component=card]:has(.icon)":{"& .icon":{left:10,height:20,position:`absolute`,top:`var(--icon-offset)`},"& .field[ev-name=number] input":{paddingLeft:48}}},a),...i?e.extend(i):{}}})}function s(e){return typeof window>`u`?``:window.getComputedStyle(document.documentElement).getPropertyValue(e).trim()}var c=null;async function l(){return c||(c=new Promise((e,t)=>{let n=document.createElement(`script`);if(n.src=`https://js.evervault.com/v2`,n.onload=()=>e(),n.onerror=()=>{c=null,t()},!document.head)throw Error(`Expected document.head not to be null. Evervault.js requires a <head> element.`);document.head.appendChild(n)}),c)}async function u(){if(window.Evervault)return window.Evervault;try{return await l(),window.Evervault}catch{throw Error(`Failed to load Evervault.js`)}}async function d(e,t,n){return new(await(u()))(e,t,n)}Promise.resolve().then(()=>{u()}),e.clean=i,e.cssVar=s,e.loadEvervault=d,e.material=a,e.minimal=o});

package/dist/evervault.d.ts

@@ -287,6 +287,12 @@ declare type CardBrandName =
 | "uatp"
 | "rupay";
 
+declare interface CardDefaultValues {
+    name?: string;
+    // Each <ev-field> by its name.
+    fields?: Record<string, string>;
+}
+
 declare interface CardEvents {
     ready: () => void;
     error: () => void;
@@ -307,6 +313,16 @@ declare interface CardExpiry {
 
 declare type CardField = "name" | "number" | "expiry" | "cvc";
 
+declare interface CardFieldMap<T> {
+    name?: T;
+    number?: T;
+    expiry?: T;
+    expiryMonth?: T;
+    expiryYear?: T;
+    cvc?: T;
+    fields?: T | Record<string, T>;
+}
+
 declare interface CardFieldTranslations<E extends TranslationsObject>
 extends TranslationsObject {
     label?: string;
@@ -323,26 +339,12 @@ declare interface CardFrameConfig {
     acceptedBrands?: CardBrandName[];
     customBrands?: CustomBrand[];
     translations?: Partial<CardTranslations>;
-    autoProgress?: boolean;
+    autoProgress?: boolean | CardFieldMap<boolean>;
     redactCVC?: boolean;
     allow3DigitAmexCVC?: boolean;
-    defaultValues?: {
-        name?: string;
-    };
-    autoComplete?: {
-        name?: boolean;
-        number?: boolean;
-        expiry?: boolean;
-        cvc?: boolean;
-    };
-    validation?: {
-        name?: {
-            regex?: RegExp;
-        };
-        cvc?: {
-            optional?: boolean;
-        };
-    };
+    defaultValues?: CardDefaultValues;
+    autoComplete?: boolean | CardFieldMap<boolean>;
+    validation?: CardValidation;
     agentTools?: AgentToolsFrameConfig;
 }
 
@@ -353,6 +355,11 @@ declare interface CardHostConfiguration {
 
 declare type CardIcons = Record<CardBrandName | "default", string>;
 
+declare interface CardLabelTranslations extends TranslationsObject {
+    label?: string;
+    placeholder?: string;
+}
+
 declare interface CardOptions {
     colorScheme?: ColorScheme;
     icons?: boolean | Partial<CardIcons>;
@@ -363,26 +370,12 @@ declare interface CardOptions {
     acceptedBrands?: CardBrandName[];
     customBrands?: CustomBrand[];
     translations?: Partial<CardTranslations>;
-    autoProgress?: boolean;
+    autoProgress?: boolean | CardFieldMap<boolean>;
     redactCVC?: boolean;
     allow3DigitAmexCVC?: boolean;
-    defaultValues?: {
-        name?: string;
-    };
-    autoComplete?: {
-        name?: boolean;
-        number?: boolean;
-        expiry?: boolean;
-        cvc?: boolean;
-    };
-    validation?: {
-        name?: {
-            regex?: RegExp;
-        };
-        cvc?: {
-            optional?: boolean;
-        };
-    };
+    defaultValues?: CardDefaultValues;
+    autoComplete?: boolean | CardFieldMap<boolean>;
+    validation?: CardValidation;
     agentTools?: AgentToolsConfig;
 }
 
@@ -397,12 +390,15 @@ declare interface CardPayload {
         expiry: CardExpiry;
         cvc: string | null;
     };
+    // Each value encrypted; null when empty or invalid.
+    fields: Record<string, string | null>;
     isValid: boolean;
     isComplete: boolean;
     errors: null | Partial<{
         number?: string;
         cvc?: string;
         expiry?: string;
+        fields?: Record<string, string>;
     }>;
 }
 
@@ -413,7 +409,7 @@ declare interface CardSpecNode {
     children?: CardSpecNode[];
 }
 
-declare type CardSpecNodeType = "row" | CardField;
+declare type CardSpecNodeType = "row" | CardField | ExpiryHalf | "field";
 
 declare interface CardTranslations extends TranslationsObject {
     number: CardFieldTranslations<{
@@ -421,7 +417,25 @@ declare interface CardTranslations extends TranslationsObject {
         unsupportedBrand?: string;
     }>;
     expiry: CardFieldTranslations<{ invalid?: string }>;
+    // The halves of a split expiry; an invalid date is reported as `expiry`.
+    expiryMonth?: CardLabelTranslations;
+    expiryYear?: CardLabelTranslations;
     cvc: CardFieldTranslations<{ invalid?: string }>;
+    // For an <ev-field> without an `errormessage`.
+    field?: { errors?: { required?: string; invalid?: string } };
+    // Each <ev-field> by its name, ahead of `field`.
+    fields?: Record<string, CustomFieldTranslations>;
+}
+
+declare interface CardValidation {
+    name?: {
+        regex?: RegExp;
+    };
+    cvc?: {
+        optional?: boolean;
+    };
+    // Each <ev-field> by its name.
+    fields?: Record<string, CustomFieldValidation>;
 }
 
 export declare function clean(config?: PresetConfig): ThemeDefinition;
@@ -510,6 +524,27 @@ declare interface CustomConfig {
     appKey?: CageKey;
 }
 
+declare interface CustomFieldTarget {
+    field: "field";
+    name: string;
+}
+
+declare interface CustomFieldTranslations extends TranslationsObject {
+    label?: string;
+    placeholder?: string;
+    errors?: { required?: string; invalid?: string };
+}
+
+declare interface CustomFieldValidation {
+    required?: boolean;
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: string;
+    max?: string;
+    step?: string;
+}
+
 declare interface CustomStyles {
     cardNumberText?: CSSStyleDeclaration;
     cardNumberLabel?: CSSStyleDeclaration;
@@ -1255,10 +1290,11 @@ declare interface EvervaultRequestProps {
     url?: string;
 }
 
-declare interface FieldEvent {
-    field: CardField;
+declare type ExpiryHalf = "expiryMonth" | "expiryYear";
+
+declare type FieldEvent = ({ field: CardField } | CustomFieldTarget) & {
     data: CardPayload;
-}
+};
 
 declare class Form {
     #private;
@@ -1420,6 +1456,7 @@ declare interface GooglePayEvents {
     success: () => void;
     error: (error: string) => void;
     cancel: () => void;
+    unavailable: () => void;
 }
 
 declare interface GooglePayOptions {

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@evervault/js",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "description": "Evervault.js loader for client-side browser applications",
   "license": "MIT",
   "type": "module",
@@ -21,9 +21,9 @@
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.2",
     "themes": "0.1.24",
-    "types": "0.23.1",
-    "@evervault/browser": "2.69.0",
-    "tsconfig": "0.1.0"
+    "@evervault/browser": "2.71.0",
+    "tsconfig": "0.1.0",
+    "types": "0.23.1"
   },
   "scripts": {
     "build": "vite build",