@incodetech/prizma-core-screens 0.2.4 → 0.2.7

package/src/EkybBusinessDetailsScreen.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaButton } from '@incodetech/prizma-core-web/button';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { EkybBusinessState, EkybBusinessValues, EkybStrings } from './EkybStrings';
 import './ScreenLayout.css';
@@ -69,6 +69,12 @@ export interface EkybBusinessDetailsScreenProps
  * bar is at `currentState="Start"`: segment 1 filled, segments 2 and 3 grey,
  * exactly what 5919:68599 renders. Both offsets around it live in
  * `ScreenLayout.css`, never here.
+ *
+ * `emptyError` is Continue pressed with the fields still empty (Elena,
+ * 2026-09-30, GUIDELINES §6-E empty-submit rule; precedent `FormsFieldScreen`'s
+ * `emptyError`): both REQUIRED fields render empty in Core's `error` state with
+ * `requiredError` under them, and Continue is disabled. `empty` keeps Continue
+ * enabled so the press can happen.
  */
 export const EkybBusinessDetailsScreen = forwardRef<
   HTMLDivElement,
@@ -78,8 +84,9 @@ export const EkybBusinessDetailsScreen = forwardRef<
     {
       strings,
       state = 'empty',
-      values,
+      values: valuesProp,
       screenId = `ekyb-business-${state}`,
+      ctaDisabled,
       overrides,
       onAction,
       ...shell
@@ -87,6 +94,13 @@ export const EkybBusinessDetailsScreen = forwardRef<
     ref,
   ) => {
     const copy = strings.business;
+    const emptyError = state === 'emptyError';
+    const values = emptyError ? undefined : valuesProp;
+    // Core's own error treatment, spread onto the REQUIRED fields only; the
+    // error state shows no placeholder (the `FormsFieldScreen` precedent).
+    const missing = emptyError
+      ? { error: true, errorText: strings.requiredError, placeholder: undefined }
+      : {};
 
     return (
       <PrizmaFormScreen
@@ -104,6 +118,8 @@ export const EkybBusinessDetailsScreen = forwardRef<
         title={copy.title}
         subtitle={copy.subtitle}
         ctaLabel={copy.ctaLabel}
+        /* Disabled only after the empty submit; `empty` keeps it enabled. */
+        ctaDisabled={emptyError || ctaDisabled}
         linkContent={
           <PrizmaButton
             variant="secondary"
@@ -121,16 +137,18 @@ export const EkybBusinessDetailsScreen = forwardRef<
         overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
         onAction={onAction}
         /* Exploration ekyb-desktop: on a tablet or desktop frame the two
-           fields share a row; on the phone nothing changes. */
+           fields stay on two rows, each spanning the column (Elena,
+           2026-09-28); `responsive` still pairs Continue and Back. On the
+           phone nothing changes. */
         responsive
         {...shell}
       >
-        <PrizmaFormRow>
         <PrizmaTextField
           label={copy.businessName.label}
           placeholder={copy.businessName.placeholder}
           required
           requiredHint={strings.requiredHint}
+          {...missing}
           autoComplete="off"
           defaultValue={values?.businessName ?? ''}
         />
@@ -139,10 +157,10 @@ export const EkybBusinessDetailsScreen = forwardRef<
           placeholder={copy.taxId.placeholder}
           required
           requiredHint={strings.requiredHint}
+          {...missing}
           autoComplete="off"
           defaultValue={values?.taxId ?? ''}
         />
-        </PrizmaFormRow>
       </PrizmaFormScreen>
     );
   },

package/src/EkybCountryScreen.tsx

@@ -55,14 +55,22 @@ export interface EkybCountryScreenProps
  *    live interaction) — the same mechanism Phone Input's `countryCode` and
  *    CURP's `Gene.dropdown` sections use. The search bar Figma draws inside the
  *    menu is Core's own `searchable`.
- * 3. The closed field and the menu row are DIFFERENT faces of one option:
- *    5707:54174 draws "🇺🇸 United States" in the field while the rows read
- *    "🇺🇸 +1 United States". That is Core's `PrizmaDropdownOption.fieldLabel`,
- *    so nothing is hand-composed. The flag travels inside the label text
- *    because Core still ships no country-flag primitive (#PI-3).
+ * 3. Menu rows and the closed field read the same "🇺🇸 United States": flag
+ *    and country name, no dial code. Figma 5707:54174 draws the rows with
+ *    Phone Input's "+1" prefixes, dropped by the owner (Elena, 2026-09-28)
+ *    because a country of registration has no phone prefix. The flag travels
+ *    inside the label text because Core still ships no country-flag primitive
+ *    (#PI-3).
  *
  * This page is the only eKYB form page with NO "Back" secondary and NO Stepper —
  * it is step 0, before the three-step wizard starts.
+ *
+ * `emptyError` is Continue pressed with no country chosen (Elena, 2026-09-30,
+ * GUIDELINES §6-E empty-submit rule; precedent `FormsFieldScreen`'s
+ * `emptyError`): the dropdown renders empty, with no placeholder, in Core's
+ * `error` state with `requiredError` under it, and Continue is disabled. The
+ * field draws no `*`, but it is the page's only input and the flow cannot go on
+ * without it, so it is treated as required. `empty` keeps Continue enabled.
  */
 export const EkybCountryScreen = forwardRef<HTMLDivElement, EkybCountryScreenProps>(
   (
@@ -72,6 +80,7 @@ export const EkybCountryScreen = forwardRef<HTMLDivElement, EkybCountryScreenPro
       countries = [],
       value,
       screenId = `ekyb-country-${state}`,
+      ctaDisabled,
       overrides,
       onAction,
       ...shell
@@ -81,7 +90,9 @@ export const EkybCountryScreen = forwardRef<HTMLDivElement, EkybCountryScreenPro
     const copy = strings.country;
     // `empty` is the only section drawn on the placeholder; both other sections
     // draw a chosen country in the closed field.
-    const selected = state === 'empty' ? null : (value ?? countries[0]?.value ?? null);
+    const emptyError = state === 'emptyError';
+    const selected =
+      state === 'empty' || emptyError ? null : (value ?? countries[0]?.value ?? null);
 
     return (
       <PrizmaFormScreen
@@ -89,6 +100,8 @@ export const EkybCountryScreen = forwardRef<HTMLDivElement, EkybCountryScreenPro
         title={copy.title}
         subtitle={copy.subtitle}
         ctaLabel={copy.ctaLabel}
+        /* Disabled only after the empty submit; `empty` keeps it enabled. */
+        ctaDisabled={emptyError || ctaDisabled}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
         screenId={screenId}
@@ -102,7 +115,15 @@ export const EkybCountryScreen = forwardRef<HTMLDivElement, EkybCountryScreenPro
       >
         <PrizmaDropdown
           label={copy.field.label}
-          placeholder={copy.field.placeholder}
+          /* Required, but UNMARKED: a single-input screen shows no asterisk
+             and no legend (Core pattern "Optimistic submission", single-input
+             screens; Elena 2026-09-30). The requirement surfaces on submit,
+             through the empty-submit error. */
+          /* The error state draws the field with nothing in it, not even the
+             placeholder (the `FormsFieldScreen` precedent). */
+          placeholder={emptyError ? undefined : copy.field.placeholder}
+          error={emptyError}
+          errorText={emptyError ? strings.requiredError : undefined}
           options={countries}
           /* Uncontrolled: a screen is one static spec state, so no `onChange` is
              needed. Core's `readOnly`/`disabled` are NOT used to freeze it —

package/src/EkybOwnersScreen.tsx

@@ -59,6 +59,14 @@ export interface EkybOwnersScreenProps
  * - `loading`        5663:94390 — `directorFilled` with the submission in
  *   flight: every field, both "Add another" links and "Back" go inert, and the
  *   spinner rides the CTA, never a field (the Phone Input lesson, #PI-5)
+ * - `uboEmptyError` / `directorEmptyError` (no frame) — `uboEmpty` /
+ *   `directorEmpty` after Continue was pressed with the fields still empty
+ *   (Elena, 2026-09-30, GUIDELINES §6-E empty-submit rule; precedent
+ *   `FormsFieldScreen`'s `emptyError`): every field renders empty, the two
+ *   REQUIRED UBO fields in Core's `error` state with `requiredError` and no
+ *   placeholder, the optional Director fields unflagged, and Continue
+ *   disabled. The `*Empty` states keep Continue enabled so the press can
+ *   happen.
  *
  * Four things are deliberate:
  *
@@ -99,8 +107,9 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
     {
       strings,
       state = 'uboEmpty',
-      values,
+      values: valuesProp,
       screenId = `ekyb-owners-${state}`,
+      ctaDisabled,
       className,
       overrides,
       onAction,
@@ -111,8 +120,20 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
     const copy = strings.owners;
     const busy = state === 'loading';
     const secondUbo = state === 'uboAdded';
+    const emptyError = state === 'uboEmptyError' || state === 'directorEmptyError';
+    const values = emptyError ? undefined : valuesProp;
     const showDirector =
-      state === 'directorEmpty' || state === 'directorFilled' || secondUbo || busy;
+      state === 'directorEmpty' ||
+      state === 'directorFilled' ||
+      state === 'directorEmptyError' ||
+      secondUbo ||
+      busy;
+    // Core's own error treatment, spread AFTER each required UBO field's own
+    // placeholder so the error state shows none (the `FormsFieldScreen`
+    // precedent). The Director fields are optional and never receive it.
+    const missing = emptyError
+      ? { error: true, errorText: strings.requiredError, placeholder: undefined }
+      : {};
 
     return (
       <PrizmaFormScreen
@@ -134,6 +155,9 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
         title={copy.title}
         subtitle={copy.subtitle}
         ctaLabel={copy.ctaLabel}
+        /* Disabled only after the empty submit; the `*Empty` states keep it
+           enabled. */
+        ctaDisabled={emptyError || ctaDisabled}
         /* `loading` swaps the CTA label for Core's designed spinner. */
         ctaLoading={busy}
         ctaLoadingLabel={copy.ctaLoadingLabel}
@@ -164,14 +188,19 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
           placeholder={copy.uboName.placeholder}
           required
           requiredHint={strings.requiredHint}
+          {...missing}
           autoComplete="off"
           defaultValue={values?.uboName ?? ''}
           disabled={busy}
         />
-        {/* Figma draws no asterisk on the surname — it is optional. */}
+        {/* Required since 2026-09-28 (Elena): the frames drew no asterisk on the
+            surname, but a beneficial owner needs both names. */}
         <PrizmaTextField
           label={copy.uboSurname.label}
           placeholder={copy.uboSurname.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          {...missing}
           autoComplete="off"
           defaultValue={values?.uboSurname ?? ''}
           disabled={busy}
@@ -192,6 +221,8 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
               <PrizmaTextField
                 label={copy.uboSurname.label}
                 placeholder={copy.uboSurname.placeholder}
+                required
+                requiredHint={strings.requiredHint}
                 autoComplete="off"
                 defaultValue={values?.secondUboSurname ?? ''}
               />

package/src/EkybStrings.ts

@@ -34,15 +34,21 @@
  * - `dropdown` — the same selection with the MENU OPEN over the form: search
  *   bar plus the country rows (Core's documentation-only `forceOpen`, since a
  *   screen is one static spec state and never a live interaction)
+ * - `emptyError` — Continue was pressed with no country chosen (GUIDELINES
+ *   §6-E empty-submit rule, Elena 2026-09-30): the dropdown in Core's error
+ *   state with `requiredError`, Continue disabled. Not a Figma frame.
  */
-export type EkybCountryState = 'empty' | 'filled' | 'dropdown';
+export type EkybCountryState = 'empty' | 'filled' | 'dropdown' | 'emptyError';
 
 /** The two `eKYB.Bdetails` (business identity) sections: every field on its
- *  resting empty surface, or every field carrying a value. */
-export type EkybBusinessState = 'empty' | 'filled';
+ *  resting empty surface, or every field carrying a value — plus `emptyError`,
+ *  Continue pressed with the fields empty (empty-submit rule, 2026-09-30):
+ *  every required field in Core's error state, Continue disabled. */
+export type EkybBusinessState = 'empty' | 'filled' | 'emptyError';
 
-/** The two address sections (the SECOND `eKYB.Bdetails` parent). Same axis. */
-export type EkybAddressState = 'empty' | 'filled';
+/** The two address sections (the SECOND `eKYB.Bdetails` parent). Same axis,
+ *  same `emptyError` (the optional Address line 2 shows no error). */
+export type EkybAddressState = 'empty' | 'filled' | 'emptyError';
 
 /**
  * The `eKYB.UBO.*` and `eKYB.director.*` sections — one screen family, because
@@ -63,6 +69,11 @@ export type EkybAddressState = 'empty' | 'filled';
  *   flight, so EVERY field, both "Add another" links and "Back" go inert and
  *   the spinner rides the CTA, never a field (the Phone Input lesson,
  *   DEVIATIONS #PI-5)
+ * - `uboEmptyError` / `directorEmptyError` — `uboEmpty` / `directorEmpty` after
+ *   Continue was pressed with the fields empty (GUIDELINES §6-E empty-submit
+ *   rule, Elena 2026-09-30): the two REQUIRED UBO fields in Core's error state
+ *   with `requiredError`, the optional Director fields unflagged, Continue
+ *   disabled. Not Figma frames.
  */
 export type EkybOwnersState =
   | 'uboEmpty'
@@ -70,7 +81,9 @@ export type EkybOwnersState =
   | 'directorEmpty'
   | 'directorFilled'
   | 'uboAdded'
-  | 'loading';
+  | 'loading'
+  | 'uboEmptyError'
+  | 'directorEmptyError';
 
 /**
  * One selectable row in the country / state menus. Runtime data, not copy — the
@@ -84,9 +97,8 @@ export interface EkybOption {
   /** The row label as drawn in the open menu. */
   label: string;
   /** Compact face for the CLOSED field when it differs from the menu row —
-   *  Core's own `PrizmaDropdownOption.fieldLabel`. `eKYB.country.dropdown`
-   *  draws "🇺🇸 +1 United States" in the row and "🇺🇸 United States" in the
-   *  field. */
+   *  Core's own `PrizmaDropdownOption.fieldLabel`. The eKYB country list
+   *  does not need it: rows and field both read "🇺🇸 United States". */
   fieldLabel?: string;
 }
 
@@ -139,6 +151,13 @@ export interface EkybStrings {
    * localizable and never hardcoded in a screen.
    */
   requiredHint?: string;
+  /**
+   * Under every empty REQUIRED field once the primary was pressed with it
+   * still empty — the `emptyError` states (GUIDELINES §6-E empty-submit rule,
+   * Elena 2026-09-30). Core's own `errorText` slot; SDK key
+   * `dynamicForms.fieldRequired`.
+   */
+  requiredError: string;
   /** Shared "Back" secondary action drawn under "Continue" on every page except
    *  `country`. Emits `secondary`. */
   backLabel: string;
@@ -217,7 +236,7 @@ export interface EkybStrings {
     title: string;
     subtitle?: string;
     uboName: EkybFieldStrings;
-    /** Figma draws NO `*` on the surname — it is optional. */
+    /** Required, like the name (Elena, 2026-09-28); the frames drew no `*`. */
     uboSurname: EkybFieldStrings;
     /** The tertiary link under the UBO block ("Add another UBO (Optional)"). */
     addUboLabel: string;

package/src/EkycCountryCatalog.ts

@@ -20,7 +20,10 @@
 // Verification", and no variant draws a close in the nav; steps after the
 // first get the archetype's Back button instead of a back arrow (#EKC-2).
 
-export type EkycFieldKind = 'text' | 'date' | 'phone' | 'dropdown' | 'radio';
+/** `password`: Core's `PrizmaPassword`, the field with the eye that hides the
+ *  typed value. For the identifiers a stranger must not read over a shoulder:
+ *  the SSN / ITIN fields (Elena, 2026-09-28). No requirement checklist. */
+export type EkycFieldKind = 'text' | 'date' | 'phone' | 'dropdown' | 'radio' | 'password';
 
 export type EkycFieldKey =
   | 'firstName' | 'middleName' | 'middleNameOptional' | 'lastName' | 'surname' | 'maternalSurname'
@@ -75,6 +78,8 @@ export interface EkycCountryVariant {
 }
 
 const t = (key: EkycFieldKey, extra: Partial<EkycField> = {}): EkycField => ({ key, kind: 'text', ...extra });
+/** A hidden-by-default identifier, with the eye to reveal it. */
+const secret = (key: EkycFieldKey, extra: Partial<EkycField> = {}): EkycField => ({ key, kind: 'password', ...extra });
 const date = (key: EkycFieldKey = 'dateOfBirth', extra: Partial<EkycField> = {}): EkycField => ({ key, kind: 'date', ...extra });
 // Required fields carry Core's asterisk (`required` + `requiredHint`), the
 // owner's rule (Elena, 2026-09-24, DEVIATIONS #EKC-6): first name, last name or
@@ -112,7 +117,7 @@ export const EKYC_COUNTRY_CATALOG: EkycCountryVariant[] = [
   {
     id: 'us-telco-1', country: 'US', label: 'United States', provider: 'Telco 1', stepper: 3,
     steps: [
-      { node: '2098:9575', fields: [...NAME_PAIR(), email(), ...DOB_PHONE('US'), t('ssnLast4')] },
+      { node: '2098:9575', fields: [...NAME_PAIR(), email(), ...DOB_PHONE('US'), secret('ssnLast4')] },
       { node: '5854:76222', section: 'license', fields: [t('licenseNumber'), { key: 'licenseState', kind: 'dropdown', placeholder: 'selectState' }] },
       { node: '5854:76221', section: 'address', fields: US_ADDRESS },
     ],
@@ -129,7 +134,7 @@ export const EKYC_COUNTRY_CATALOG: EkycCountryVariant[] = [
     steps: [
       /* Same First | Last pair as the licence variant; Middle name (Optional)
          follows it and spans (#EKC-5). */
-      { node: '2098:9577', fields: [...NAME_PAIR(), t('middleNameOptional'), ...DOB_PHONE('US'), email(), t('ssnOrItin')] },
+      { node: '2098:9577', fields: [...NAME_PAIR(), t('middleNameOptional'), ...DOB_PHONE('US'), email(), secret('ssnOrItin')] },
       { node: '5857:34094', section: 'address', fields: US_ADDRESS },
     ],
   },
@@ -148,7 +153,7 @@ export const EKYC_COUNTRY_CATALOG: EkycCountryVariant[] = [
   {
     id: 'ca-res-credit', country: 'CA', label: 'Canada', provider: 'Residential credit', stepper: 2,
     steps: [
-      { node: '2098:9570', fields: [...NAME_PAIR(), email(), ...DOB_PHONE('CA'), t('ssnOrItin')] },
+      { node: '2098:9570', fields: [...NAME_PAIR(), email(), ...DOB_PHONE('CA'), secret('ssnOrItin')] },
       { node: '5857:36450', section: 'address', fields: CODE_ADDRESS('stateCodeCa') },
     ],
   },

package/src/EkycCountryFormScreen.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaPassword } from '@incodetech/prizma-core-web/password';
 import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
 import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
 import { PrizmaCombined, type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
@@ -28,11 +29,20 @@ export interface EkycCountryFormScreenProps
   values?: EkycCountryValues;
   /**
    * The state after Continue was pressed with fields still empty: every empty
-   * field shows Core's error state and `country.requiredError` under it.
-   * Continue itself is ALWAYS enabled (Elena, 2026-09-24): validation happens
-   * on press, not by greying the button.
+   * REQUIRED field shows Core's error state and `country.requiredError` under
+   * it, and Continue is disabled (GUIDELINES §6-E empty-submit rule, Elena
+   * 2026-09-30). Without it Continue stays enabled: validation happens on
+   * press, the resting page never greys the button.
    */
   showErrors?: boolean;
+  /**
+   * Field keys whose typed value failed the format check on Continue (an
+   * invalid CPF, say). Each keeps its value, shows Core's error state and
+   * `country.invalidErrors[key]` under it; Continue stays enabled so the user
+   * corrects it and presses again, the CURP precedent (`CurpEnterScreen`'s
+   * `invalid`). A key with no message in `invalidErrors` shows no error.
+   */
+  invalidFields?: string[];
   /** Dial codes the phone field offers. Runtime data, never copy. */
   phoneCountries?: PrizmaCountry[];
   /** Options for the dropdown fields, keyed by field key. Runtime data. */
@@ -52,10 +62,13 @@ export interface EkycCountryFormScreenProps
  * dropdown, radio pair — so a new country is a catalogue entry, never a file.
  *
  * Deliberate, per frame and per owner:
- * - Continue is ALWAYS enabled (Elena, 2026-09-24, overriding the grey button
- *   most frames draw): pressing it with empty fields is the `showErrors` state,
- *   Core's error ring and message under each empty field. The radio pair has
- *   no error state in Core, so an empty gender shows none (DEVIATIONS #EKC-4).
+ * - Continue is enabled on the resting page (Elena, 2026-09-24, overriding the
+ *   grey button most frames draw): pressing it with empty fields is the
+ *   `showErrors` state, Core's error ring and message under each empty
+ *   required field, and THEN Continue is disabled. The "always enabled" half
+ *   of DEVIATIONS #EKC-4 is superseded by the 2026-09-30 empty-submit rule
+ *   (GUIDELINES §6-E). The radio pair has no error state in Core, so an empty
+ *   gender still shows none.
  * - ONE title per step (Elena, 2026-09-24): the personal-data step is "Enter
  *   your details" with its subtitle; a licence step is titled "Driver's
  *   License details" and an address step "Address details", with nothing
@@ -82,7 +95,7 @@ const groupRows = (fields: EkycField[]): EkycField[][] => {
   return groups;
 };
 export const EkycCountryFormScreen = forwardRef<HTMLDivElement, EkycCountryFormScreenProps>(
-  ({ strings, variant, step = 1, values, showErrors = false, phoneCountries, options, screenId, overrides, onAction, ...shell }, ref) => {
+  ({ strings, variant, step = 1, values, showErrors = false, invalidFields, phoneCountries, options, screenId, overrides, onAction, ...shell }, ref) => {
     const v = typeof variant === 'string' ? ekycCountryVariant(variant) : variant;
     if (!v) return null;
     const s = v.steps[Math.min(Math.max(step, 1), v.steps.length) - 1];
@@ -90,15 +103,23 @@ export const EkycCountryFormScreen = forwardRef<HTMLDivElement, EkycCountryFormS
     const stepperState: PrizmaStepperState = step <= 1 ? 'Start' : (Math.min(step, 6) as PrizmaStepperState);
 
     const label = (f: EkycField) => c.fields[f.key] ?? f.key;
-    const placeholder = (f: EkycField) => (f.placeholder ? c.placeholders[f.placeholder] : c.placeholders[f.key]);
+    // A lone field in its empty-submit error drops its placeholder, as the
+    // single-input screens do (Phone, Email and CURP's `emptyError`).
+    const lone = s.fields.length === 1;
+    const placeholder = (f: EkycField) =>
+      lone && showErrors && !values?.[f.key] ? undefined : f.placeholder ? c.placeholders[f.placeholder] : c.placeholders[f.key];
 
     const renderField = (f: EkycField) => {
       // Only a REQUIRED empty field is an error on press (Elena, 2026-09-24,
-      // DEVIATIONS #EKC-6): an optional field left blank shows nothing.
-      const missing = showErrors && Boolean(f.required) && !values?.[f.key];
+      // DEVIATIONS #EKC-6): an optional field left blank shows nothing. A
+      // step's lone field is required by definition, asterisk or not (the
+      // single-input rule, as Phone and Email Input: Elena, 2026-10-02).
+      const required = Boolean(f.required) || lone;
+      const missing = showErrors && required && !values?.[f.key];
+      const invalidText = invalidFields?.includes(f.key) ? c.invalidErrors?.[f.key] : undefined;
       const common = {
         key: f.key, label: label(f), required: f.required, requiredHint: strings.details.requiredHint,
-        error: missing || undefined, errorText: missing ? c.requiredError : undefined,
+        error: missing || Boolean(invalidText) || undefined, errorText: missing ? c.requiredError : invalidText,
       } as const;
       switch (f.kind) {
         case 'date':
@@ -126,6 +147,22 @@ export const EkycCountryFormScreen = forwardRef<HTMLDivElement, EkycCountryFormS
               defaultValue={values?.[f.key] ?? null}
             />
           );
+        case 'password':
+          /* The SSN / ITIN fields: Core's Password field, hidden by default, the
+             eye reveals it. No requirement checklist — this is an identifier,
+             not a password to compose (Elena, 2026-09-28). */
+          return (
+            <PrizmaPassword
+              {...common}
+              placeholder={placeholder(f)}
+              autoComplete="off"
+              defaultValue={values?.[f.key] ?? ''}
+              showPasswordLabel={c.showValueLabel}
+              hidePasswordLabel={c.hideValueLabel}
+              showHelper={false}
+              showRequirements={false}
+            />
+          );
         case 'radio':
           return (
             <PrizmaRadioGroup key={f.key} name={f.key} legend={label(f)} defaultValue={values?.[f.key]} className="ekyc-country__radios">
@@ -158,6 +195,8 @@ export const EkycCountryFormScreen = forwardRef<HTMLDivElement, EkycCountryFormS
           ) : undefined
         }
         ctaLabel={c.ctaLabel}
+        /* Greyed only after the empty submit (2026-09-30 empty-submit rule). */
+        ctaDisabled={showErrors}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
         screenId={screenId}

package/src/EkycDetailsScreen.tsx

@@ -71,6 +71,13 @@ export interface EkycDetailsScreenProps
  * the label row Figma draws as "First name *" — so Middle name, the one
  * optional field, correctly renders none.
  *
+ * `emptyError` is the state after Continue was pressed with the fields still
+ * empty (Elena, 2026-09-30, GUIDELINES §6-E empty-submit rule; drawn precedent
+ * `FormsFieldScreen`'s `emptyError`): every field renders empty, the three
+ * REQUIRED ones carry Core's `error` + `country.requiredError`, Middle name
+ * stays unflagged (DEVIATIONS #EKC-6), and Continue is disabled. The resting
+ * `default` keeps Continue enabled so the press can happen at all.
+ *
  * Figma draws a two-segment journey bar between the nav and the title on every
  * page-1 frame, and it is the only chrome that separates page 1 from page 2.
  * Archetype E had no slot above the title; the gap is now CLOSED in the
@@ -85,8 +92,9 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
     {
       strings,
       state = 'default',
-      values,
+      values: valuesProp,
       screenId = `ekyc-details-${state}`,
+      ctaDisabled,
       className,
       overrides,
       onAction,
@@ -98,6 +106,13 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
     // rings First name blue and shows its clear ✕; the other two draw every
     // field resting.
     const focused = state === 'focused';
+    // The empty-submit state: every field empty, required ones in error.
+    const emptyError = state === 'emptyError';
+    const values = emptyError ? undefined : valuesProp;
+    // Core's own error treatment, spread onto the REQUIRED fields only.
+    const missing = emptyError
+      ? { error: true, errorText: strings.country.requiredError }
+      : {};
 
     return (
       <PrizmaFormScreen
@@ -122,6 +137,9 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
         title={strings.details.title}
         subtitle={strings.details.subtitle}
         ctaLabel={strings.details.ctaLabel}
+        /* Disabled only after the empty submit; the resting page keeps it
+           enabled so the press can happen. */
+        ctaDisabled={emptyError || ctaDisabled}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
         screenId={screenId}
@@ -146,6 +164,7 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
             label={strings.details.firstNameLabel}
             required
             requiredHint={strings.details.requiredHint}
+            {...missing}
             defaultValue={values?.firstName ?? ''}
             autoComplete="off"
             /* Only 2101:8159 draws the ✕, and only in this field. */
@@ -156,6 +175,7 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
             label={strings.details.lastNameLabel}
             required
             requiredHint={strings.details.requiredHint}
+            {...missing}
             defaultValue={values?.lastName ?? ''}
             autoComplete="off"
             clearable={false}
@@ -171,6 +191,7 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
           label={strings.details.dateOfBirthLabel}
           required
           requiredHint={strings.details.requiredHint}
+          {...missing}
           defaultValue={values?.dateOfBirth ?? ''}
           autoComplete="off"
           /* No `onCalendarClick`: a screen is a static spec state with no

package/src/EkycStrings.ts

@@ -43,8 +43,12 @@
  *               the clear ✕ (2101:8159 draws the OS keyboard over the CTA; the
  *               keyboard is OS chrome, never a screen element)
  * - `filled`  — all four fields resting with their values
+ * - `emptyError` — Continue was pressed with the fields empty (GUIDELINES §6-E
+ *               empty-submit rule, Elena 2026-09-30): the three REQUIRED fields
+ *               in Core's error state with `country.requiredError`, Middle name
+ *               (optional) unflagged, and Continue disabled. Not a Figma frame.
  */
-export type EkycDetailsState = 'default' | 'focused' | 'filled';
+export type EkycDetailsState = 'default' | 'focused' | 'filled' | 'emptyError';
 
 /**
  * The page-2 sections (`eKYC.default` / `eKYC.filled` / `eKYC.loading`), same
@@ -153,6 +157,10 @@ export interface EkycStrings {
     licenseSection: string;
     /** Accessible name of the phone field's dial-code list. */
     countryListLabel: string;
+    /** Accessible names for the eye on a `password` field (the SSN / ITIN
+     *  fields): while the value is hidden, and while it is shown. */
+    showValueLabel: string;
+    hideValueLabel: string;
     /** The gender radio pair, Argentina. */
     genderOptions: { value: string; label: string }[];
     fields: Record<string, string>;
@@ -160,8 +168,12 @@ export interface EkycStrings {
     ctaLabel: string;
     /** The secondary button on a step after the first. */
     backLabel: string;
-    /** Under every empty field once Continue was pressed (`showErrors`). */
+    /** Under every empty REQUIRED field once Continue was pressed: the
+     *  by-country `showErrors` state and page 1's `emptyError` both read it. */
     requiredError: string;
+    /** Under a field whose value failed the format check on Continue, by
+     *  field key (`invalidFields`). `cpf` is SDK key `dynamicForms.invalidCpf`. */
+    invalidErrors?: Record<string, string>;
   };
 
   /** `eKYC.processing` — spinner over the status line, no button. */

package/src/ElectronicSignatureLayout.css

@@ -47,6 +47,12 @@
   border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
   border-radius: var(--prizma-border-radius-small);
   text-align: start;
+  /* Air between the frame and the CTA band. Archetype G's list middle carries
+     no bottom gap (its content normally ends well above the band), so a frame
+     that fills the middle sat flush against Continue (owner-reported
+     2026-09-29). Spacing/16 is the archetype's own scrolling-middle → band gap
+     (`.prizma-screen-layout__list--scroll`, ScreenLayout.css). */
+  margin-bottom: var(--prizma-spacing-16);
 }
 
 /* The agreement's own typography — Body/M Regular on Text/Body/500, the pair

package/src/EmailInputStrings.ts

@@ -27,13 +27,18 @@
  * - `filled`  — focused field with a complete address
  * - `error`   — negative field + clear ✕ + the invalid-format row
  * - `loading` — field greyed while the code is requested, spinner in the CTA
+ * - `emptyError` — "Continue" pressed with the field still empty: the field
+ *   stays empty (no placeholder) in Core's error state with `requiredError`,
+ *   and the CTA is disabled. GUIDELINES §6-E empty-submit rule (Elena,
+ *   2026-09-30).
  */
 export type EmailInputVerifyState =
   | 'default'
   | 'typing'
   | 'filled'
   | 'error'
-  | 'loading';
+  | 'loading'
+  | 'emptyError';
 
 /**
  * The `email.OTP.*` sections — same layout, different code-field state:
@@ -58,6 +63,12 @@ export interface EmailInputStrings {
   verifiedLabel: string;
   /** Accessible name for the logo nav row. */
   navLabel?: string;
+  /**
+   * Error row under the required field when the primary CTA is pressed with it
+   * still empty (the verify screen's `emptyError` state): "This field is
+   * required". SDK key `dynamicForms.fieldRequired`.
+   */
+  requiredError: string;
 
   /** email.verifyEmail.* */
   verify: {