@incodetech/prizma-core-screens 0.2.3 → 0.2.7

package/src/EmailInputVerifyScreen.tsx

@@ -48,6 +48,13 @@ export interface EmailInputVerifyScreenProps
  * paints the DISABLED surface (owner definition 2026-07-12), which would grey
  * the four resting states Figma draws white. The field is uncontrolled instead
  * (DEVIATIONS #PI-6).
+ *
+ * `emptyError` is the empty-submit state (rule from Elena, 2026-09-30,
+ * GUIDELINES §6-E empty-submit rule): "Continue" was pressed with nothing
+ * typed. The field renders empty with no placeholder, in Core's error state
+ * with `requiredError`, and the primary CTA is disabled, following the drawn
+ * precedent in `FormsFieldScreen`. The resting `default` keeps the CTA enabled
+ * so the user can reach this state.
  */
 export const EmailInputVerifyScreen = forwardRef<HTMLDivElement, EmailInputVerifyScreenProps>(
   (
@@ -64,6 +71,9 @@ export const EmailInputVerifyScreen = forwardRef<HTMLDivElement, EmailInputVerif
   ) => {
     const busy = state === 'loading';
     const invalid = state === 'error';
+    // Empty submit: the field drops its placeholder and takes Core's error
+    // state with the shared "required" row; the CTA greys.
+    const emptyError = state === 'emptyError';
     const focused = state === 'typing' || state === 'filled';
 
     return (
@@ -74,6 +84,7 @@ export const EmailInputVerifyScreen = forwardRef<HTMLDivElement, EmailInputVerif
         ctaLabel={strings.verify.ctaLabel}
         /* Figma's `loading` section swaps the CTA label for Core's spinner. */
         ctaLoading={busy}
+        ctaDisabled={emptyError}
         ctaLoadingLabel={strings.verify.ctaLoadingLabel}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
@@ -97,13 +108,19 @@ export const EmailInputVerifyScreen = forwardRef<HTMLDivElement, EmailInputVerif
           /* Figma's field has no visible label row — the placeholder carries
              the meaning — so the copy rides `aria-label` (DEVIATIONS #PI-4). */
           aria-label={strings.verify.fieldLabel}
-          placeholder={strings.verify.placeholder}
+          placeholder={emptyError ? undefined : strings.verify.placeholder}
           /* Uncontrolled: a screen is one static spec state, so no `onChange`
              is needed and no warning is raised. */
-          defaultValue={value ?? ''}
+          defaultValue={emptyError ? '' : value ?? ''}
           disabled={busy}
-          error={invalid}
-          errorText={invalid ? strings.verify.errorText : undefined}
+          error={invalid || emptyError}
+          errorText={
+            invalid
+              ? strings.verify.errorText
+              : emptyError
+                ? strings.requiredError
+                : undefined
+          }
           /* The clear ✕ is drawn on the `error` section only. */
           clearable={invalid}
           clearLabel={strings.verify.clearLabel}

package/src/FaceMatchComparisonScreen.tsx

@@ -17,9 +17,9 @@ import './FaceMatchLayout.css';
 export type FaceMatchPhotoRole = 'selfie' | 'id' | 'nfc' | 'secondId';
 
 /** Host-supplied portraits, one per role the chosen variant asks for. A role
- *  left out renders the empty state: a Brand/50 disc, marked with
- *  `.face-match-cluster__photo--empty`. Interim treatment (2026-09-25) while
- *  the designed no-photo state is drawn; see FaceMatchLayout.css. */
+ *  left out renders the empty state (capture missing or not retrievable): a
+ *  grey Surface/Neutral/100 disc under its usual label tooltip, marked with
+ *  `.face-match-cluster__photo--empty`. See FaceMatchLayout.css. */
 export type FaceMatchComparisonPhotos = Partial<Record<FaceMatchPhotoRole, ReactNode>>;
 
 /**

package/src/FaceMatchLayout.css

@@ -57,8 +57,14 @@
 
   /* The disc's diameter, named once. `--matching`'s rosette and `--animated`'s
    * convergence both have to know it, and a second literal is a second thing to
-   * forget. Still a design literal, still DEVIATIONS #FM-22 — just not repeated. */
-  --face-match-photo: 160px;
+   * forget. Still a design literal, still DEVIATIONS #FM-22 — just not repeated.
+   *
+   * 160 at most, and smaller when two discs and their gap do not fit the
+   * content column: on a 320 phone the column is 272, so each disc takes
+   * (272 − 16) / 2 = 128 (Camila, 2026-09-28). `100cqi` is the screen shell's
+   * width (ScreenShell.css, `container-type: size`), less its two Spacing/24
+   * gutters. At 390 and up this resolves to 160, unchanged. */
+  --face-match-photo: min(160px, calc((100cqi - 2 * var(--prizma-spacing-24) - var(--prizma-spacing-16)) / 2));
   /* Half the distance between two neighbouring discs: what one of them has to
    * travel to reach the pair's centre line. */
   --face-match-half-step: calc((var(--face-match-photo, 160px) + var(--prizma-spacing-16)) / 2);
@@ -118,16 +124,16 @@
   background: var(--prizma-surface-neutral-100);
 }
 
-/* No photo supplied for this role.
+/* No photo for this role: the capture was never taken, or could not be
+ * retrieved.
  *
- * INTERIM (2026-09-25, owner call): colour is the whole state for now, so the
- * slot reads as a portrait that belongs here rather than an undesigned hole.
- * Brand/50 is the same disc PrizmaIllustrationAvatar sits on, which is where
- * the designed state is most likely to land. The real treatment (bust,
- * outline, or copy) replaces this rule; the modifier and its class name stay,
- * so swapping it in is a one-rule change and nothing downstream moves. */
+ * Owner call 2026-09-28 (replaces the 2026-09-25 Brand/50 interim): a plain
+ * grey disc, Surface/Neutral/100, the same neutral Core puts behind an image
+ * that is not there yet (CaptureDigitalId.css, list.css). The callout above it
+ * still renders, so the tooltip names which capture is missing. The modifier
+ * stays a named state so a richer treatment is still a one-rule change. */
 .face-match-cluster__photo--empty {
-  background: var(--prizma-surface-brand-50);
+  background: var(--prizma-surface-neutral-100);
 }
 
 .face-match-cluster__photo > img,
@@ -153,11 +159,14 @@
 }
 
 .face-match-cluster--matching .face-match-cluster__face + .face-match-cluster__face {
-  margin-left: -44px; /* hardcoded — Figma converged overlap; no token (verified absent) */
+  /* Figma converged overlap, 44 on the 160 disc; no token (verified absent).
+   * Kept as that ratio so the rosette holds its shape on a smaller disc. */
+  margin-left: calc(var(--face-match-photo, 160px) * -44 / 160);
 }
 
 .face-match-cluster--matching .face-match-cluster__row + .face-match-cluster__row {
-  margin-top: calc(-2 * var(--prizma-spacing-40));
+  /* Half a disc: 80 on the 160 disc (`2 × Spacing/40`), proportional below it. */
+  margin-top: calc(var(--face-match-photo, 160px) / -2);
 }
 
 /* ── The comparison, moving (`phase` on FaceMatchComparisonScreen) ───────────

package/src/FormScreen.css

@@ -129,6 +129,22 @@
     flex: none;
     width: calc(50% - var(--prizma-spacing-16) / 2);
     min-width: 0;
+    position: relative;
+  }
+  /* An error or helper line under ONE field of a pair made that field taller,
+   * and the bottom alignment above lifted its input above its neighbour's
+   * (Elena, 2026-10-02: "estos inputs tienen que estar alineados"). The line
+   * hangs below its input instead, out of the alignment, and the row reserves
+   * its height so the next row does not ride over it. */
+  .prizma-form-screen--responsive .prizma-form-screen__row > * > [class$="__error"],
+  .prizma-form-screen--responsive .prizma-form-screen__row > * > [class$="__helper"] {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: var(--prizma-spacing-8);
+  }
+  .prizma-form-screen--responsive .prizma-form-screen__row:has(> * > [class$="__error"], > * > [class$="__helper"]) {
+    padding-bottom: calc(var(--prizma-spacing-8) + var(--prizma-body-m-regular-line-height));
   }
 
   /* Continue and Back share a row: Back on the left, Continue on the right, as

package/src/FormsLongFormScreen.tsx

@@ -51,7 +51,9 @@ const PRESET_ROWS: Record<FormsLongFormPreset, FormsLongFormRow[]> = {
     { key: 'idNumber', kind: 'text', requirement: 'required' },
     { key: 'email', kind: 'email', requirement: 'required' },
     { key: 'residence', kind: 'country', requirement: 'required' },
-    { key: 'dob', kind: 'date', requirement: 'required' },
+    // Date of birth carries NO asterisk (owner Elena, 2026-09-30), so the
+    // `emptyError` state flags the other three rows and leaves it at rest.
+    { key: 'dob', kind: 'date', requirement: 'none' },
   ],
 };
 
@@ -131,6 +133,14 @@ export interface FormsLongFormScreenProps
  * into the CTA band — the half a module stylesheet kept losing. It is a no-op
  * on the short `name` preset, whose rows never overflow. DEVIATIONS #DSC-2,
  * restating #CURP-1.
+ *
+ * `emptyError` is the GUIDELINES §6-E empty-submit rule (Elena 2026-09-30):
+ * the user pressed the CTA with the form still empty. Every REQUIRED row
+ * renders empty, with no placeholder, in Core's own error state carrying
+ * `strings.requiredError`; optional and unmarked rows stay on their resting
+ * surface with no error. The CTA greys there and ONLY there: the resting
+ * `default` keeps it enabled, so the user can press it to reach the error —
+ * the `FormsFieldScreen` `emptyError` precedent applied to a stack.
  */
 export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScreenProps>(
   (
@@ -152,6 +162,7 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
   ) => {
     const copy = strings.longForm[preset];
     const busy = state === 'loading';
+    const emptyError = state === 'emptyError';
     const countryList = countries ?? [];
 
     // The Optional / Required pair documents the eKYC form specifically; no
@@ -174,8 +185,15 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
       const fieldCopy = copy.fields[row.key];
       const label = labelFor(row);
       const required = row.requirement === 'required';
-      const value = values?.[row.key] ?? '';
-      const focused = !busy && focusedField === row.key;
+      // `emptyError` is an EMPTY submit: every row renders empty, whatever
+      // values the host passed.
+      const value = emptyError ? '' : (values?.[row.key] ?? '');
+      const focused = !busy && !emptyError && focusedField === row.key;
+      // Only REQUIRED rows flag the empty submit. Their placeholder goes, as
+      // on the drawn `forms.IDnumber.error`; optional rows stay at rest.
+      const invalid = emptyError && required;
+      const errorText = invalid ? strings.requiredError : undefined;
+      const placeholder = invalid ? undefined : fieldCopy?.placeholder;
 
       switch (row.kind) {
         case 'country':
@@ -185,12 +203,14 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
               label={label}
               required={required}
               requiredHint={strings.requiredHint}
-              placeholder={fieldCopy?.placeholder}
+              placeholder={placeholder}
               options={countryList.map((c) => ({ value: c.code, label: c.name }))}
               value={value || null}
               searchable
               searchPlaceholder={copy.searchPlaceholder}
               disabled={busy}
+              error={invalid}
+              errorText={errorText}
               forceState={focused ? 'focused' : undefined}
               renderLeading={(option) => {
                 const match = countryList.find((c) => c.code === option.value);
@@ -205,10 +225,12 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
               label={label}
               required={required}
               requiredHint={strings.requiredHint}
-              placeholder={fieldCopy?.placeholder}
+              placeholder={placeholder}
               options={options?.[row.key] ?? []}
               value={value || null}
               disabled={busy}
+              error={invalid}
+              errorText={errorText}
               forceState={focused ? 'focused' : undefined}
             />
           );
@@ -220,9 +242,13 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
               label={label}
               required={required}
               requiredHint={strings.requiredHint}
-              placeholder={fieldCopy?.placeholder}
+              /* Core falls back to its DD/MM/YYYY mask on an undefined
+                 placeholder, so the error row passes an explicit empty one. */
+              placeholder={invalid ? '' : fieldCopy?.placeholder}
               defaultValue={value}
               disabled={busy}
+              error={invalid}
+              errorText={errorText}
               calendarLabel={copy.calendarLabel}
             />
           );
@@ -234,7 +260,7 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
               label={label}
               required={required}
               requiredHint={strings.requiredHint}
-              placeholder={fieldCopy?.placeholder}
+              placeholder={placeholder}
               defaultValue={value}
               type={row.kind === 'email' ? 'email' : 'text'}
               inputMode={row.kind === 'email' ? 'email' : undefined}
@@ -242,6 +268,8 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
               autoCapitalize={row.kind === 'email' ? 'none' : undefined}
               spellCheck={false}
               disabled={busy}
+              error={invalid}
+              errorText={errorText}
               /* Figma draws the clear ✕ only on the focused row of
                  `longform.focused`; every other row draws none. */
               clearable={focused}
@@ -266,12 +294,12 @@ export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScree
         title={copy.title}
         subtitle={copy.subtitle}
         ctaLabel={copy.ctaLabel}
-        /* `longform.default` and `longform.customizable`'s default section grey
-           the CTA until something is entered; `forms.name` draws it ENABLED on
-           the same empty form. Figma contradicts its own "optimistic rule"
-           sticky here, so each section is followed literally — DEVIATIONS
-           #FDE-3. */
-        ctaDisabled={state === 'default' && preset !== 'name'}
+        /* GUIDELINES §6-E empty-submit rule (Elena 2026-09-30): the CTA stays
+           ENABLED on the resting empty form, every preset alike, so the user
+           can press it; it greys only on `emptyError`, the state that press
+           leads to. This supersedes the per-section greying #FDE-3 followed
+           on `longform.default` and `longform.customizable`. */
+        ctaDisabled={emptyError}
         ctaLoading={busy}
         ctaLoadingLabel={copy.ctaLoadingLabel}
         /* The four- and five-row stacks are taller than the 844 frame; the

package/src/FormsStrings.ts

@@ -127,13 +127,18 @@ export type FormsLongFormPreset = 'name' | 'profile' | 'eKyc';
  * - `loading`  — `longform.loading`: the whole form greyed, spinner in the CTA
  * - `optional` — the "Optional / Required" documentation pair: the same form
  *                with mixed required and optional markers
+ * - `emptyError` — the user pressed the CTA with the form still empty: every
+ *                REQUIRED row renders empty in Core's error state with
+ *                `requiredError`, optional and unmarked rows stay clean, CTA
+ *                greyed (GUIDELINES §6-E empty-submit rule, Elena 2026-09-30)
  */
 export type FormsLongFormState =
   | 'default'
   | 'focused'
   | 'filled'
   | 'loading'
-  | 'optional';
+  | 'optional'
+  | 'emptyError';
 
 /** Copy for one single-field section. */
 export interface FormsFieldCopy {
@@ -218,6 +223,12 @@ export interface FormsStrings {
    * the label string by the screen. See DEVIATIONS #FDE-4.
    */
   optionalHint: string;
+  /**
+   * The error row every REQUIRED field shows on the `emptyError` long-form
+   * state ("This field is required"). Maps to the SDK's
+   * `dynamicForms.fieldRequired` key. GUIDELINES §6-E empty-submit rule.
+   */
+  requiredError: string;
 
   /** The single-field sections. */
   fields: Record<FormsFieldKey, FormsFieldCopy>;

package/src/GeolocationBrowserStepsScreen.tsx

@@ -97,9 +97,13 @@ export interface GeolocationBrowserStepsScreenProps
  * The rows are Core's `PrizmaCardListCommonIssues` verbatim; only the leading
  * glyph is chosen here, from the canonical bank (see `STEP_ICONS`).
  *
+ * No subtitle: the browser name (`label`) is NOT drawn under the title (owner
+ * call, Elena 2026-09-30). The label stays in the strings as the section's
+ * identifier for hosts and catalogs; the screen itself shows title + steps.
+ *
  * The title block is LEFT-aligned for this whole family. Every
- * `Geolocation.allowLocation.<browser>` section starts the two-line headline —
- * and the browser label under it — flush at the gutter, over left-led step
+ * `Geolocation.allowLocation.<browser>` section starts the two-line headline
+ * flush at the gutter, over left-led step
  * rows; a centred headline above a left-aligned list reads as a mistake. The
  * screen therefore DEFAULTS the archetype's own `align` override to `left`
  * rather than declaring any alignment of its own, and a host that passes
@@ -147,7 +151,6 @@ export const GeolocationBrowserStepsScreen = forwardRef<
       <PrizmaListScreen
         ref={ref}
         title={strings.browserSteps.title}
-        subtitle={slice?.label}
         ctaLabel={strings.browserSteps.ctaLabel}
         secondaryCtaLabel={showSkip ? strings.browserSteps.skipLabel : undefined}
         verifiedLabel={strings.verifiedLabel}

package/src/GeolocationStrings.ts

@@ -123,6 +123,9 @@ export interface GeolocationBrowserSteps {
    * rows and would render as one screen three times. Every browser therefore
    * SHOULD carry a label, extending the precedent Figma itself sets on Safari.
    * Still optional so a host that ships its own logo artwork can drop it.
+   *
+   * 2026-09-30 (Elena): the screen no longer RENDERS it as a subtitle. It is
+   * kept as the section's name for catalogs and hosts, not as on-screen copy.
    */
   label?: string;
   /** The steps, in order. */

package/src/IdCaptureLayout.css

@@ -59,6 +59,46 @@
   gap: var(--prizma-spacing-8); /* Title → instruction, GUIDELINES §5 */
 }
 
+/* ── Short screens: the vertical frame gives up height, never the title ──────
+ * The vertical ID (288:456) and passport (306:420) frames are tall. On a
+ * 320 × 693 phone the column is 272 wide, so the frame alone is ~431 tall and
+ * the stage ran 168px past the bottom, under the shutter strip (Camila,
+ * 2026-09-28). Here the frame is the ONE part of the column that shrinks: it
+ * starts at its full-width height (the column less its two Spacing/24
+ * gutters, over the aspect), and when the screen is too short the flex column
+ * takes the shortfall out of its height; the aspect ratio then narrows its
+ * width to match, so it stays an ID-shaped frame, centred. The title band
+ * keeps its content height. With room to spare (390 × 844) the frame never
+ * needs to shrink, so it sits exactly where it did.
+ *
+ * Scoped to ID + passport with `:not(--poa)`: Document Capture renders the
+ * same stage as `type="poa" isVertical`, so it carries `--vertical` too, but
+ * the PoA frame has NO aspect ratio (it fills the host's height). `width:
+ * auto` there collapsed it to a 0-wide sliver, a grey vertical bar down the
+ * camera screen (Elena, 2026-09-30). Only showed where this file and Document
+ * Capture's CSS ship in the same bundle, i.e. the production build. */
+.prizma-viewfinder__content:has(> .prizma-id-capture--vertical:not(.prizma-id-capture--poa)) {
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .prizma-id-capture--vertical:not(.prizma-id-capture--poa)) > .id-capture-band--top {
+  flex-shrink: 0;
+  min-height: min-content;
+}
+.prizma-viewfinder__content > .prizma-id-capture--vertical:not(.prizma-id-capture--poa) {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.prizma-viewfinder__content > .prizma-id-capture--vertical:not(.prizma-id-capture--poa) .prizma-id-capture__frame {
+  flex: 0 1 auto;
+  min-height: 0;
+  width: auto;
+  max-width: 100%;
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 456 / 288);
+}
+.prizma-viewfinder__content > .prizma-id-capture--passport.prizma-id-capture--vertical .prizma-id-capture__frame {
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 420 / 306);
+}
+
 /* ── Camera stage (dark) ───────────────────────────────────────────────────── */
 
 /* The stage's nav row carries only the close X (no logo — the camera owns the

package/src/ListScreen.tsx

@@ -77,6 +77,8 @@ export interface PrizmaListScreenProps
   /** "verified by" attribution copy for the footer tag. */
   verifiedLabel: string;
   navLabel?: string;
+  /** Opt-in back chevron in the nav (its accessible name). Emits `back`. */
+  backLabel?: string;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
@@ -122,6 +124,7 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
       linkLabel,
       verifiedLabel,
       navLabel,
+      backLabel,
       screenId,
       showHeader = true,
       showFooter = true,
@@ -132,7 +135,13 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
     ref,
   ) => (
     <PrizmaScreenShell ref={ref} {...shell}>
-      <PrizmaScreenNav reserved={!showHeader} logo={overrides?.logo} navLabel={navLabel} />
+      <PrizmaScreenNav
+        reserved={!showHeader}
+        logo={overrides?.logo}
+        navLabel={navLabel}
+        backLabel={backLabel}
+        onBack={() => onAction?.({ type: 'back', screenId })}
+      />
       {progress ? (
         <div className="prizma-screen-layout__progress">{progress}</div>
       ) : null}

package/src/PhoneInputLayout.css

@@ -21,6 +21,7 @@
   align-items: flex-start;
   gap: var(--prizma-spacing-8);
   width: 100%;
+  position: relative; /* the country menu's containing block — see below */
 }
 
 /* The dial-code dropdown hugs its content ("🇷🇸 +381"), as Figma draws it.
@@ -47,15 +48,15 @@
   min-width: 0;
 }
 
-/* The open menu must NOT inherit the hugged anchor's width: Core anchors the
- * menu to the trigger, so once the trigger hugs "🇷🇸 +381" the option rows
- * truncate ("+…"). The menu keeps its own readable width — it lists country
- * names and dial codes, which the closed field never shows. Sized to the
- * content and capped at the 342 column so it never escapes the screen.
+/* The open menu spans the WHOLE row (dial code + number field), as Figma's
+ * `Input / Combined` draws it: Core anchors the menu overlay to the trigger's
+ * `__anchor` (`position: relative`, Dropdown.css), so once the trigger hugs
+ * "🇷🇸 +381" the menu came out as narrow as the dial code. Releasing the
+ * anchor's positioning hands the overlay's `left: 0; right: 0` to the row
+ * above (`position: relative`), so the menu matches the row's width exactly.
+ * Core's own overlay offset (`top: 100% + Spacing/8`) is left untouched.
  * DEVIATIONS #PI-1 (same root cause as the hug).
  */
-.phone-input-combined__country .prizma-dropdown__menu {
-  width: max-content;
-  min-width: 100%;
-  max-width: 342px;
+.phone-input-combined__country .prizma-dropdown__anchor {
+  position: static;
 }

package/src/PhoneInputStrings.ts

@@ -20,13 +20,18 @@
  * - `typing`      — partial value, focused field
  * - `filled`      — complete value
  * - `loading`     — CTA in its loading treatment while the code is requested
+ * - `emptyError`  — "Continue" pressed with no number typed: the phone field
+ *   stays empty (no placeholder) in Core's error state with `requiredError`,
+ *   and the CTA is disabled. The dial code always carries a selection, so it
+ *   takes no error. GUIDELINES §6-E empty-submit rule (Elena, 2026-09-30).
  */
 export type PhoneInputVerifyState =
   | 'default'
   | 'countryCode'
   | 'typing'
   | 'filled'
-  | 'loading';
+  | 'loading'
+  | 'emptyError';
 
 /**
  * The `phoneNumber.OTP.*` sections — same layout, different field state:
@@ -63,6 +68,12 @@ export interface PhoneInputStrings {
   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;
 
   /** phoneNumber.verify.* */
   verify: {

package/src/PhoneInputVerifyScreen.tsx

@@ -55,6 +55,14 @@ const DEFAULT_COUNTRIES: PhoneInputCountry[] = [
  * primitives (`PrizmaDropdown`, `PrizmaTextField`) at the designed 56px min
  * height and `Border/Radius/small`, so the module layer contributes only the
  * row that pairs them (`PhoneInputLayout.css`) — no primitive is re-implemented.
+ *
+ * `emptyError` is the empty-submit state (rule from Elena, 2026-09-30,
+ * GUIDELINES §6-E empty-submit rule): "Continue" was pressed with no number
+ * typed. The phone field renders empty with no placeholder, in Core's error
+ * state with `requiredError`, and the primary CTA is disabled, following the
+ * drawn precedent in `FormsFieldScreen`. The dial code always carries a
+ * selection, so it takes no error. The resting `default` keeps the CTA enabled
+ * so the user can reach this state.
  */
 export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerifyScreenProps>(
   (
@@ -74,9 +82,11 @@ export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerif
     const selected = country ?? countries[0]?.value;
     const options = countries.map((c) => ({
       value: c.value,
-      // The closed field shows flag + dial code exactly as Figma draws it
-      // ("🇷🇸 +381"); the open menu row adds the country name.
-      label: [c.flag, c.dialCode].filter(Boolean).join(' '),
+      // The open menu row reads flag + dial code + country name
+      // ("🇷🇸 +381 Serbia"); the closed field keeps only flag + dial code
+      // ("🇷🇸 +381") through Core's `fieldLabel`, exactly as Figma draws it.
+      label: [c.flag, c.dialCode, c.label].filter(Boolean).join(' '),
+      fieldLabel: [c.flag, c.dialCode].filter(Boolean).join(' '),
     }));
 
     // Figma treats the states as three distinct field treatments, not one:
@@ -88,6 +98,9 @@ export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerif
     // for none of them — it would grey the resting states too (DEVIATIONS #PI-6).
     const busy = state === 'loading';
     const focused = state === 'typing';
+    // Empty submit: the number field drops its placeholder and takes Core's
+    // error state with the shared "required" row; the CTA greys.
+    const emptyError = state === 'emptyError';
 
     return (
       <PrizmaFormScreen
@@ -97,6 +110,7 @@ export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerif
         ctaLabel={strings.verify.ctaLabel}
         /* Figma's `loading` section swaps the CTA label for Core's spinner. */
         ctaLoading={busy}
+        ctaDisabled={emptyError}
         ctaLoadingLabel={strings.verify.ctaLoadingLabel}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
@@ -134,12 +148,14 @@ export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerif
             type="tel"
             inputMode="tel"
             aria-label={strings.verify.fieldLabel}
-            placeholder={strings.verify.placeholder}
+            placeholder={emptyError ? undefined : strings.verify.placeholder}
             /* Uncontrolled: a screen is one static spec state, and `value`
                without `onChange` would either warn or force `readOnly`, whose
                disabled surface is exactly the grey Figma does NOT draw here. */
-            defaultValue={value ?? ''}
+            defaultValue={emptyError ? '' : value ?? ''}
             disabled={busy}
+            error={emptyError}
+            errorText={emptyError ? strings.requiredError : undefined}
             /* Figma draws the clear ✕ only while the field is focused. */
             clearable={focused}
           />

package/src/QualifiedSignatureAcceptScreen.tsx

@@ -118,6 +118,7 @@ export const QualifiedSignatureAcceptScreen = forwardRef<
     // `loading` makes the whole form inert.
     const busy = state === 'loading';
     const ticked = state !== 'default';
+    const requiredHint = strings.accept.requiredHint;
 
     return (
       <PrizmaFormScreen
@@ -177,6 +178,12 @@ export const QualifiedSignatureAcceptScreen = forwardRef<
           role="group"
           aria-label={strings.accept.termsLabel}
         >
+          {/* The legend LEADS the group (Elena, 2026-09-30, picked from four
+              placements): it sits where the markers are and, on the five-clause
+              reading that scrolls, is still on screen on arrival. */}
+          {requiredHint && strings.accept.requiredLegend ? (
+            <p className="qualified-signature-terms__legend">{strings.accept.requiredLegend}</p>
+          ) : null}
           {terms.map((term) => (
             <PrizmaCheckbox
               key={term.id}
@@ -185,7 +192,11 @@ export const QualifiedSignatureAcceptScreen = forwardRef<
               value={term.id}
               checked={ticked}
               disabled={busy}
-              segments={term.segments}
+              required={Boolean(requiredHint)}
+              /* The `*` rides the END of the clause copy, the Data Sharing
+                 Consent idiom — the L card paints no marker of its own beside
+                 the box (owner, 2026-09-02). */
+              segments={requiredHint ? [...term.segments, ` ${requiredHint}`] : term.segments}
             />
           ))}
         </div>