@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/src/FaceCaptureLayout.css

@@ -12,7 +12,72 @@
  * inherit all three as correct defaults.
  */
 
-/* Nothing module-specific is left: the non-status glyph slot this file used to
- * own (`.face-capture-glyph`) was the third byte-identical copy of one pattern,
- * so it moved to `ScreenLayout.css` as `__glyph` — DEVIATIONS #DC-29, closed.
- * The file is kept as the module's landing place for future additions. */
+/* The non-status glyph slot this file used to own (`.face-capture-glyph`) was
+ * the third byte-identical copy of one pattern, so it moved to
+ * `ScreenLayout.css` as `__glyph` — DEVIATIONS #DC-29, closed. */
+
+/* ── Short panels: the capture stack moves up, the ring never changes size ───
+ * `PrizmaSelfieCapture` is a fixed stack by design: Spacing/40, the 335 stage,
+ * Spacing/32, the instruction, and in manual mode another Spacing/32 and the 64
+ * shutter, then Spacing/40 — 583 tall on the manual screen, every number
+ * measured off the module Figma (DEVIATIONS #12). Under the nav and above the
+ * footer's reserve a closed iPhone Duo leaves 513 (678 − 103 − 62, measured
+ * 2026-10-14), so the manual stack ran 70 past its column and the shutter
+ * landed on the verified tag (shutter 582–646, tag 606–636). The auto-capture
+ * screens are 94 shorter and fit the Duo as authored.
+ *
+ * The RING is not what gives ground. Camila, 2026-10-14: the face frame is the
+ * same size on every screen, because the user has to see their face; if it
+ * ever had to shrink it would shrink on every capture screen together, and we
+ * avoid that. So the stack moves UP instead: the root's Spacing/40 above and
+ * below go (the ring sits flush under the nav row, 40 higher than on the
+ * reference) and the two Spacing/32 gaps become Spacing/16, which on the
+ * manual screen is 112 back — 103 + 334 + 16 + 41 + 16 + 64 = 574, 32 of air
+ * above the tag. Instruction and shutter keep their height, the ring its 334.
+ *
+ * EVERY capture screen takes it, not only the manual one that needed it
+ * (Camila, 2026-10-14: "put all face frames at the height that the manual
+ * capture one is, so we don't need a jump there"). The ring not moving between
+ * screens is the rule Video Selfie's #VS-24 was written for: a capture window
+ * that jumps as the step advances reads as a glitch. So on a short panel the
+ * whole module's ring is at 103, auto, manual, loading and verdict alike.
+ * Outside the query not one declaration exists, so the reference is
+ * byte-identical. DEVIATIONS #20. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture {
+    padding-block: 0;
+    gap: var(--prizma-spacing-16);
+  }
+}
+
+/* ── Big panels: the ring grows to the column and the stack moves down ───────
+ * The mirror of the block above, and the capture counterpart of the tutorial's
+ * #F-36. On the 768 × 1024 iPad the column widens to 468 but the stack kept
+ * its 335 ring flush under the nav, so the ring read small (335 in a 420
+ * content column, 85px of air either side) and high (its centre at 30% of the
+ * panel, where the 390 phone has it at 37%), with 300px of empty column under
+ * the instruction (Camila, 2026-10-19: "the face frame too small and way up
+ * the screen", on the tablet flow, grid and screen view alike).
+ *
+ * Two owner decisions, 2026-10-20. The RING GROWS: the 2026-10-14 rule that
+ * the ring never changes size was written so it would not SHRINK on a short
+ * panel, and on a panel this big the person's face is still what the screen is
+ * about, so the stage takes the content column's full measure (420 inside the
+ * 468 wide column), the way #F-36 lets the tutorial art grow. Every state
+ * grows together (auto, manual, loading, verdict) so the ring still never
+ * jumps between steps. The STACK MOVES DOWN BY A FIXED OFFSET, not to the
+ * centre: the stack under the ring is a different height on every screen
+ * (the manual one carries the shutter), so centring THAT would move the ring
+ * between steps, the bug #VS-24 exists for; the same reason Video Selfie's
+ * #VS-32 took an offset. Spacing/40 + Spacing/32 above the ring puts its
+ * centre at 102 + 72 + 210 = 384, 37.5% of 1024, the reference's own
+ * proportion (measured 2026-10-20); the manual screen's shutter ends at 765
+ * with the verified tag at 978. Both axes gate it for #F-36's reasons: `min-height: 845px` keeps the
+ * 844 reference and every short panel byte-identical, `min-width: 468px` keeps
+ * it off phones and foldables where the column stays 390. DEVIATIONS #21. */
+@container pcs-screen ((min-height: 845px) and (min-width: 468px)) {
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture {
+    max-width: 100%;
+    padding-top: calc(var(--prizma-spacing-40) + var(--prizma-spacing-32));
+  }
+}

package/src/FaceCaptureStrings.ts

@@ -56,6 +56,30 @@ export interface FaceCaptureStrings {
    *  `initiating` has no instruction in the design; omit it. */
   capturing: Partial<Record<FaceCaptureCapturingState, string>>;
 
+  /**
+   * faceCapture.capturing.extendTime — the accessibility offer that rides any
+   * capturing state 20 s before auto capture falls back to manual.
+   *
+   * It exists for WCAG 2.2.1 Timing Adjustable, satisfied through the *Extend*
+   * clause: warn before the limit expires, give the user at least 20 s to
+   * extend with a simple action, and let them extend at least ten times. The
+   * 20 s is that threshold, not a chosen duration — which is why `description`
+   * is a whole string and not a number the screen formats: ten locales write
+   * that sentence ten different ways, and the count has to live inside it.
+   *
+   * Shown only when accessibility mode is ON for the flow (a per-flow
+   * dashboard setting). With it off, nothing about today's capture changes.
+   * Optional for that reason: a host that never turns it on never writes it.
+   */
+  extendTime?: {
+    /** Bold first line — "Need more time?" */
+    title: string;
+    /** "Manual capture starts in 20 s" — carries the count, see above. */
+    description: string;
+    /** The action that keeps the user on auto — "Extend auto-capture". */
+    linkLabel: string;
+  };
+
   /** faceCapture.manualCapture.default */
   manualCapture: {
     /** "Align your face within the silhouette and press the button to capture" */

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

@@ -29,6 +29,20 @@
   padding-top: var(--pfs-fields-offset, var(--prizma-spacing-32));
 }
 
+/* ── Field stack pinned to the CTA band ──────────────────────────────────────
+ * `fieldsAlign="end"` on `PrizmaFormScreen`. The stack keeps its `flex: 1`
+ * column and simply packs its rows at the bottom, so the space between the
+ * title block and the first row is what is left over rather than a value
+ * anybody declares. The `margin-bottom` is the frame's own Spacing/16 between
+ * the card and the Button group (`biometricConsent.empty`, 2001:16361 — the
+ * CONTENT column's gap), the same value the scrolling stack uses for the same
+ * seam, so the two shapes agree on how far a row sits from Continue. Biometric
+ * Consent is the first consumer. DEVIATIONS #BC-1. */
+.prizma-form-screen__fields--end {
+  justify-content: flex-end;
+  margin-bottom: var(--prizma-spacing-16);
+}
+
 /* ── Scrolling field stack ───────────────────────────────────────────────────
  * Screens are authored at 390×844 and never reflow (DEVIATIONS #17), but some
  * Form sections draw a middle column taller than the frame and let it pan:
@@ -129,6 +143,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/FormScreen.tsx

@@ -62,6 +62,13 @@ export interface PrizmaFormScreenProps
    * body text.
    */
   linkLabel?: string;
+  /**
+   * Renders `linkLabel` in Core's disabled treatment, for a link that exists
+   * but cannot be pressed yet — Phone Input's "Resend code in 30s" while the
+   * resend timer runs (Figma `phoneNumber.OTP.typing`, Tertiary / Link ·
+   * Disabled).
+   */
+  linkDisabled?: boolean;
   /**
    * A composed line below the primary: body copy with inline links, e.g. Phone
    * Input's "Didn't receive the code? **Resend code** or **Change phone
@@ -98,6 +105,27 @@ export interface PrizmaFormScreenProps
    * eKYB, Data Sharing Consent); it is the archetype's now. DEVIATIONS #DSC-2.
    */
   scrollFields?: boolean;
+  /**
+   * Where the field stack sits in the column when it is SHORTER than the
+   * space it has. `start` (the default) hangs it off the title block, which is
+   * every form so far. `end` pins it to the CTA band instead, leaving the space
+   * between the title and the stack empty — Biometric Consent's section draws
+   * exactly that: a `justify-between` middle with the Title at the top and the
+   * one consent card flush against Continue, Spacing/16 above it
+   * (`biometricConsent.empty`, 2001:16361). Selected here so the module
+   * declares no layout of its own; the rule lives once in `FormScreen.css`.
+   * DEVIATIONS #BC-1.
+   */
+  fieldsAlign?: 'start' | 'end';
+  /**
+   * A shell-level layer painted OVER the whole screen — the same slot archetype
+   * A carries for Document Capture's method sheet (#F-32, #DC-30): a scrim plus
+   * Core's `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top
+   * of the dimmed form. It cannot ride in the content column: it is absolutely
+   * positioned against the shell. Biometric Consent's quit confirmation is the
+   * first Form consumer (DEVIATIONS #BC-8).
+   */
+  overlay?: ReactNode;
   /**
    * Let the field stack change SHAPE on a wide screen: `PrizmaFormRow` pairs
    * become two lanes and Continue + Back share a row, once the shell's own
@@ -140,12 +168,15 @@ export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps
       ctaLoading = false,
       ctaLoadingLabel,
       linkLabel,
+      linkDisabled,
       linkContent,
       verifiedLabel,
       children,
       fieldsOffset,
       fieldsGap,
       scrollFields = false,
+      fieldsAlign = 'start',
+      overlay,
       responsive = false,
       navLabel,
       screenId,
@@ -179,6 +210,7 @@ export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps
           className={[
             'prizma-form-screen__fields',
             scrollFields ? 'prizma-form-screen__fields--scroll' : null,
+            fieldsAlign === 'end' ? 'prizma-form-screen__fields--end' : null,
           ]
             .filter(Boolean)
             .join(' ')}
@@ -217,6 +249,7 @@ export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps
               <PrizmaButton
                 variant="tertiary-link"
                 size="L"
+                disabled={linkDisabled}
                 onClick={() => onAction?.({ type: 'secondary', screenId })}
               >
                 {linkLabel}
@@ -231,6 +264,7 @@ export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps
           </div>
         ) : null}
       </div>
+      {overlay}
     </PrizmaScreenShell>
   ),
 );

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. */