@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/FormsLongFormScreen.js

@@ -33,7 +33,9 @@ const PRESET_ROWS = {
         { 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' },
     ],
 };
 /**
@@ -85,10 +87,19 @@ const OPTIONAL_VARIANT = {
  * 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(({ strings, preset = 'eKyc', state = 'default', values, focusedField, options, countries, screenId = `forms-long-form-${preset}-${state}`, className, overrides, onAction, ...shell }, ref) => {
     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
     // other preset draws it, so the override never leaks to a preset whose
@@ -106,20 +117,30 @@ export const FormsLongFormScreen = forwardRef(({ strings, preset = 'eKyc', state
         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':
-                return (_jsx(PrizmaDropdown, { label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, options: countryList.map((c) => ({ value: c.code, label: c.name })), value: value || null, searchable: true, searchPlaceholder: copy.searchPlaceholder, disabled: busy, forceState: focused ? 'focused' : undefined, renderLeading: (option) => {
+                return (_jsx(PrizmaDropdown, { label: label, required: required, requiredHint: strings.requiredHint, placeholder: placeholder, options: countryList.map((c) => ({ value: c.code, label: c.name })), value: value || null, searchable: true, searchPlaceholder: copy.searchPlaceholder, disabled: busy, error: invalid, errorText: errorText, forceState: focused ? 'focused' : undefined, renderLeading: (option) => {
                         const match = countryList.find((c) => c.code === option.value);
                         return match ? _jsx(PrizmaCountryFlag, { country: match }) : null;
                     } }, row.key));
             case 'select':
-                return (_jsx(PrizmaDropdown, { label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, options: options?.[row.key] ?? [], value: value || null, disabled: busy, forceState: focused ? 'focused' : undefined }, row.key));
+                return (_jsx(PrizmaDropdown, { label: label, required: required, requiredHint: strings.requiredHint, placeholder: placeholder, options: options?.[row.key] ?? [], value: value || null, disabled: busy, error: invalid, errorText: errorText, forceState: focused ? 'focused' : undefined }, row.key));
             case 'date':
-                return (_jsx(PrizmaDateField, { className: focused ? 'prizma-input-datefield--focused' : undefined, label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, defaultValue: value, disabled: busy, calendarLabel: copy.calendarLabel }, row.key));
+                return (_jsx(PrizmaDateField, { className: focused ? 'prizma-input-datefield--focused' : undefined, label: label, required: required, requiredHint: strings.requiredHint, 
+                    /* 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 }, row.key));
             default:
-                return (_jsx(PrizmaTextField, { className: focused ? 'prizma-input-textfield--focused' : undefined, label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, defaultValue: value, type: row.kind === 'email' ? 'email' : 'text', inputMode: row.kind === 'email' ? 'email' : undefined, autoComplete: row.kind === 'email' ? 'email' : 'off', autoCapitalize: row.kind === 'email' ? 'none' : undefined, spellCheck: false, disabled: busy, 
+                return (_jsx(PrizmaTextField, { className: focused ? 'prizma-input-textfield--focused' : undefined, label: label, required: required, requiredHint: strings.requiredHint, placeholder: placeholder, defaultValue: value, type: row.kind === 'email' ? 'email' : 'text', inputMode: row.kind === 'email' ? 'email' : undefined, autoComplete: row.kind === 'email' ? 'email' : 'off', 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, clearLabel: copy.clearLabel }, row.key));
@@ -134,12 +155,12 @@ export const FormsLongFormScreen = forwardRef(({ strings, preset = 'eKyc', state
         ]
             .filter(Boolean)
             .join(' '), 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', ctaLoading: busy, ctaLoadingLabel: copy.ctaLoadingLabel, 
+        /* 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
            archetype's variant pans them and keeps Spacing/16 of clear surface
            above the CTA. No module CSS re-declares this. */

package/dist/FormsStrings.d.ts

@@ -80,8 +80,12 @@ 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';
+export type FormsLongFormState = 'default' | 'focused' | 'filled' | 'loading' | 'optional' | 'emptyError';
 /** Copy for one single-field section. */
 export interface FormsFieldCopy {
     /** H2 ("Enter your title", "Enter your email", "Enter your phone number"). */
@@ -161,6 +165,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>;
     /** The choice sections. */

package/dist/GeolocationBrowserStepsScreen.d.ts

@@ -31,9 +31,13 @@ export interface GeolocationBrowserStepsScreenProps extends Omit<PrizmaListScree
  * 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

package/dist/GeolocationBrowserStepsScreen.js

@@ -55,9 +55,13 @@ const STEP_ICONS = {
  * 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
@@ -85,7 +89,7 @@ export const GeolocationBrowserStepsScreen = forwardRef(({ strings, browser = 's
         ...overrides,
         align: overrides?.align ?? 'left',
     };
-    return (_jsx(PrizmaListScreen, { ref: ref, title: strings.browserSteps.title, subtitle: slice?.label, ctaLabel: strings.browserSteps.ctaLabel, secondaryCtaLabel: showSkip ? strings.browserSteps.skipLabel : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: alignedOverrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListCommonIssues, { items: (slice?.steps ?? []).map((step) => ({
+    return (_jsx(PrizmaListScreen, { ref: ref, title: strings.browserSteps.title, ctaLabel: strings.browserSteps.ctaLabel, secondaryCtaLabel: showSkip ? strings.browserSteps.skipLabel : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: alignedOverrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListCommonIssues, { items: (slice?.steps ?? []).map((step) => ({
                 icon: STEP_ICONS[step.kind],
                 title: step.label,
                 showSubtitle: false,

package/dist/GeolocationStrings.d.ts

@@ -76,6 +76,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/dist/IdCaptureLayout.css

@@ -59,12 +59,129 @@
   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);
+}
+
+/* ── A notice on the stage: the horizontal frame may give up height too ──────
+ * The "Need more time?" offer (`.id-capture-stage__notice`, IDC-32) adds ~90px
+ * of content to the bottom band. On the 390 × 844 reference the band has the
+ * room and nothing moves. On a short panel it does not: measured 2026-10-15,
+ * the horizontal ID frame is aspect-locked and does not shrink, so the column
+ * overflowed and the notice ran 10px into the help strip at 320 × 693 and 36px
+ * at the closed iPhone Duo (466 × 678). The same recipe as the vertical rule
+ * above, applied to the horizontal frames ONLY while a notice is on the stage:
+ * the frame starts at its full-width height and gives up height when the
+ * column is short, the aspect ratio narrows it to match, the title band keeps
+ * its content height. Face Capture makes the identical trade at 320 (its
+ * selfie frame gives up Spacing/40 for the notice, ScreenLayout.css) and the
+ * owner's rule is explicit that the frame may get smaller (2026-08-18). A
+ * stage without a notice is untouched. */
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) {
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .id-capture-band--top {
+  flex-shrink: 0;
+  min-height: min-content;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--horizontal:not(.prizma-id-capture--poa) {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--horizontal: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)) * 220 / 350);
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--passport.prizma-id-capture--horizontal .prizma-id-capture__frame {
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 254 / 350);
+}
+
+/* ── Short panels: the tutorial art is sized by its halo, not its canvas ─────
+ * `PrizmaIllustrationIdTutorial` is a 342 × 392 canvas with the halo centred
+ * at r130 (y 66–326) and the hand-and-document artwork inside it (y 100–313;
+ * the passport's hand fades out above). The 66 above and below the halo are
+ * air at rest; the bottom band is where the hand travels in from during the
+ * loop. The selfie illustration is a 296 canvas with the same r130 halo and 18
+ * of air: on the 844 reference both halos are 260 and the two tutorials match.
+ *
+ * On a short panel the tutorial middle is height-limited (ScreenLayout.css,
+ * #F-35) and the two canvases scale by height, so the ID halo comes out 18 %
+ * smaller than the selfie's (170 vs 209 on the closed iPhone Duo, measured
+ * 2026-10-14; Camila: "ID tutorials have illustration a bit too small, no?
+ * Compared to the size on the selfie tutorial one"). Fixed by cropping the
+ * canvas to the halo band plus Spacing/16 on each side — y 50 to 342, 292
+ * units, the same 89 % the selfie's halo takes of its own box — so the halo
+ * fills the slot the way the selfie's does. The wrapper takes the slot and
+ * clips; the svg is scaled so 292 of its 392 units fill the wrapper and
+ * centres, so the crop is symmetric around the halo and the halo's centre
+ * does not move. During the loop the entering hand is clipped 50 units
+ * earlier than the canvas clips it, which is invisible against the fade.
+ * Outside the query nothing exists: the reference renders the full canvas.
+ * DEVIATIONS #IDC-31. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__flex > .prizma-illustration-tutorial {
+    flex: 1 1 0;
+    min-height: 0;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .prizma-screen-layout__flex > .prizma-illustration-tutorial > svg {
+    flex: none;
+    height: calc(100% * 392 / 292);
+    width: auto;
+    max-width: none;
+  }
+}
+
 /* ── Camera stage (dark) ───────────────────────────────────────────────────── */
 
 /* The stage's nav row carries only the close X (no logo — the camera owns the
  * screen). The foundation `.prizma-screen-nav` supplies the status-bar reserve,
  * the 44px flow slot and the un-fixing of Core's PrizmaNavigation; the ink is
- * the only thing the camera stage changes: Core's nav icon is the THEMED
+ * the only thing the camera stage changes: Core's nav icon is the themed
  * `Icon/Neutral/500`, which disappears on the always-dark camera surface, so it
  * takes the camera's own Static ink — the same token PrizmaCaptureManual uses
  * for the shutter and the "?" help control. DEVIATIONS.md #IDC-21. */
@@ -78,6 +195,44 @@
   width: 100%;
 }
 
+/* ── The "Need more time?" notice ─────────────────────────────────────────────
+ * The Snackbar the stage raises 20 s before auto-capture falls back to the
+ * shutter (IdCaptureStageScreen `extendTime`, 2026-10-15). It takes the BOTTOM
+ * band — the air between the encrypted row and the strip's reserved space —
+ * because, unlike Face Capture, this stage's strip is never empty: the "?" help
+ * control rides it on every stage (IDC-29), so the shared rail the selfie notice
+ * uses (`.prizma-screen-layout__capture-notice`) would land on top of it.
+ *
+ * The band is `justify-content: flex-end`, so the notice sits just above the
+ * strip's Spacing/12 of breathing and the frame above does not move when the
+ * offer arrives. The band is also `flex: 1; min-height: 0`, which on a short
+ * panel would let it shrink to nothing and spill the notice upward over the
+ * encrypted row; with a notice in it the band keeps its content height and the
+ * shortfall goes where this stylesheet already sends it — the vertical frame
+ * (the short-panel rule above), which the owner has said may get smaller
+ * (2026-08-18). DEVIATIONS #IDC-32. */
+.id-capture-band:has(> .id-capture-stage__notice) {
+  flex-shrink: 0;
+  min-height: min-content;
+  padding-top: var(--prizma-spacing-16);
+}
+
+.id-capture-stage__notice {
+  display: flex;
+  /* The HUD column centres its copy; the Snackbar's own text is left-set. */
+  text-align: left;
+}
+
+/* On a 320 phone the notice drops its status glyph — the same call Face
+ * Capture made (Camila, 2026-10-05, ScreenLayout.css): 44 of the 272px column
+ * on a decorative mark pushed the body to four lines. The icon is
+ * `aria-hidden`; the copy carries the meaning without it. */
+@container pcs-screen (max-width: 340px) {
+  .id-capture-stage__notice .prizma-snackbar__icon {
+    display: none;
+  }
+}
+
 /* The feedback pill replaces the title block on the error stages (Figma
  * `1-5-5 … 1-5-9-id-errors`): same band, same Spacing/40 above the frame. */
 .id-capture-stage__feedback {
@@ -85,6 +240,54 @@
   justify-content: center;
 }
 
+/* ── Short or narrow panels: the live cue takes Template B ───────────────────
+ * `PrizmaCaptureFeedback` ships two templates on its `showAnimation` axis:
+ * A, the 120-ish pill with the illustration and a Headline/H3 title, and B, a
+ * 72 pill with no illustration and Headline/H5. The error stages draw A on the
+ * 390 × 844 reference. On a closed iPhone Duo (678) A still fits — measured
+ * 2026-10-14, the frame lands at 198–473 with the pill above it — but it is
+ * the tallest element on a stage that has just lost 166px, and on a 640 phone
+ * or a 320 column it does not fit at all. Video Selfie already made this call
+ * for its own cues (DEVIATIONS #VS-30, Camila 2026-10-07): under 340 wide or
+ * 720 tall the pill is B. The same line here, so the two camera modules agree
+ * on when a cue goes compact. Nothing is re-skinned: fill, radius, stroke and
+ * shadow are Core's and identical between A and B (capture-feedback.md §4.4);
+ * what changes is exactly Template B's four switches, taken from
+ * `CaptureFeedback.css`'s own `--compact` modifier.
+ *
+ * A container query, not the prop: the screen cannot know the panel's height,
+ * the shell's `pcs-screen` container can. ONE `or` condition, not two
+ * comma-separated queries (lightningcss rejects the latter; see
+ * VideoSelfieLayout.css). The 390 reference is unchanged. DEVIATIONS #IDC-30. */
+@container pcs-screen ((max-width: 340px) or (max-height: 720px)) {
+  .id-capture-stage__feedback .prizma-capture-feedback__illustration {
+    display: none;
+  }
+
+  /* Template B: body padding-bottom 12 → 16, itemSpacing 8 → 4. */
+  .id-capture-stage__feedback .prizma-capture-feedback__body {
+    padding: var(--prizma-spacing-16) 0;
+    gap: var(--prizma-spacing-4);
+  }
+
+  /* Title Headline/H3 → Headline/H5. */
+  .id-capture-stage__feedback .prizma-capture-feedback__title {
+    font-weight: var(--prizma-headline-h5-font-weight);
+    font-size: var(--prizma-headline-h5-font-size);
+    line-height: var(--prizma-headline-h5-line-height);
+    letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  }
+
+  /* Subtitle Headline/H5 → Body/M Regular. */
+  .id-capture-stage__feedback .prizma-capture-feedback__subtitle {
+    font-family: var(--prizma-body-family);
+    font-weight: var(--prizma-body-m-regular-font-weight);
+    font-size: var(--prizma-body-m-regular-font-size);
+    line-height: var(--prizma-body-m-regular-line-height);
+    letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  }
+}
+
 /* ── Removed: promoted into the foundation ───────────────────────────────────
  * `.id-capture-glyph*` (the non-status glyph slot) is now
  * `ScreenLayout.css`'s `__glyph` — DEVIATIONS #DC-29, closed.
@@ -102,7 +305,7 @@
  *
  * The plate needs no override — Core's own `mode="overlay"` already makes the
  * window transparent, which is what the light screens want. The ink does: the
- * row is re-inked with the THEMED body token so it also survives dark mode,
+ * row is re-inked with the themed body token so it also survives dark mode,
  * scoped to the light screens only (the camera stage keeps Core's Static white).
  * Core gap — PrizmaIdCapture has no surface-aware encrypted row. DEVIATIONS.md #IDC-28.
  */

package/dist/IdCaptureStageScreen.d.ts

@@ -32,6 +32,28 @@ export interface IdCaptureStageScreenProps extends Omit<PrizmaScreenShellProps,
     still?: ReactNode;
     /** Digit shown by the countdown Timer (`*-countdown` sections 1..3). */
     countdownValue?: 1 | 2 | 3;
+    /**
+     * Raise the "Need more time?" offer over the feed — the accessibility
+     * notification shown 20 s before auto-capture falls back to the shutter.
+     *
+     * A MODIFIER of whatever stage state is already showing, not a twelfth
+     * state: the 30 s fallback timer runs underneath the hint overlay, so the
+     * person can be shown the hand-and-document ghost and offered more time in
+     * the same frame. Needs `strings.stage.extendTime`; without it the flag is a
+     * no-op, which is what a host that has not localized the copy should get
+     * rather than English. Same contract as `FaceCaptureCapturingScreen`.
+     */
+    extendTime?: boolean;
+    /** Tapping "Extend auto-capture". The host resets its own fallback timer. */
+    onExtendTime?: () => void;
+    /**
+     * A notice band of the host's own, in the slot `extendTime` uses. Wins over
+     * `extendTime` when both are given. Exists for a host that needs the
+     * Snackbar to do something the static one cannot — Core Lab's prototype
+     * swaps in a copy whose count actually runs down — without reaching into
+     * the screen. The static `extendTime` notice stays the default.
+     */
+    notice?: ReactNode;
     screenId?: string;
     overrides?: PrizmaScreenOverrides;
     onAction?: PrizmaScreenActionHandler;
@@ -64,6 +86,31 @@ export interface IdCaptureStageScreenProps extends Omit<PrizmaScreenShellProps,
  * to the column's bottom padding) — no offsets are invented here, and
  * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
  * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto-capture gives up after a configured timeout (30 s in the module's own
+ * flow frames) and drops the person onto the shutter. Someone who is
+ * struggling — a tremor, low vision, a dark room, a card that will not sit
+ * flat — gets moved off the EASIER path precisely because they were slow,
+ * which is backwards. So 20 s before the switch, the stage offers to stay on
+ * auto. A client turns it on per flow from the dashboard; with it off, nothing
+ * about today's capture changes. It is the conformance route for WCAG 2.2.1
+ * Timing Adjustable via the *Extend* clause (warn before the limit, ≥20 s to
+ * act, ≥10 extensions) — the reasoning, the `role="alert"` decision and the
+ * `neutral` state are all Face Capture's (2026-10-05) and are not re-argued
+ * here: `FaceCaptureCapturingScreen`'s header is the record. One feature, two
+ * modules, one Snackbar.
+ *
+ * WHERE IT SITS is the one thing this module decides differently. Face
+ * Capture anchors the notice on the shutter-strip rail because, there, notice
+ * and shutter are alternatives — a capturing screen either raises the offer or
+ * shows the button. ID Capture's strip is never free: the "?" help control
+ * rides it on every stage, auto or manual (IDC-29). So the notice takes the
+ * BOTTOM BAND instead — the flexible air between the encrypted row and the
+ * strip's reserved space — which is the one slot on this stage nothing else
+ * owns. It bottom-anchors there like the band's other content would, so the
+ * frame above does not move when the offer arrives. DEVIATIONS.md #IDC-32.
  */
 export declare const IdCaptureStageScreen: React.ForwardRefExoticComponent<IdCaptureStageScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default IdCaptureStageScreen;

package/dist/IdCaptureStageScreen.js

@@ -1,10 +1,11 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PrizmaNavigation } from '@incodetech/prizma-core-web/navigation';
 import { PrizmaIdCapture, } from '@incodetech/prizma-core-web/id-capture';
 import { PrizmaCaptureManual } from '@incodetech/prizma-core-web/capture-manual';
 import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
 import { PrizmaScreenShell } from './ScreenShell';
 import './ScreenLayout.css';
@@ -68,8 +69,33 @@ const STAGE_FEEDBACK = {
  * to the column's bottom padding) — no offsets are invented here, and
  * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
  * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto-capture gives up after a configured timeout (30 s in the module's own
+ * flow frames) and drops the person onto the shutter. Someone who is
+ * struggling — a tremor, low vision, a dark room, a card that will not sit
+ * flat — gets moved off the EASIER path precisely because they were slow,
+ * which is backwards. So 20 s before the switch, the stage offers to stay on
+ * auto. A client turns it on per flow from the dashboard; with it off, nothing
+ * about today's capture changes. It is the conformance route for WCAG 2.2.1
+ * Timing Adjustable via the *Extend* clause (warn before the limit, ≥20 s to
+ * act, ≥10 extensions) — the reasoning, the `role="alert"` decision and the
+ * `neutral` state are all Face Capture's (2026-10-05) and are not re-argued
+ * here: `FaceCaptureCapturingScreen`'s header is the record. One feature, two
+ * modules, one Snackbar.
+ *
+ * WHERE IT SITS is the one thing this module decides differently. Face
+ * Capture anchors the notice on the shutter-strip rail because, there, notice
+ * and shutter are alternatives — a capturing screen either raises the offer or
+ * shows the button. ID Capture's strip is never free: the "?" help control
+ * rides it on every stage, auto or manual (IDC-29). So the notice takes the
+ * BOTTOM BAND instead — the flexible air between the encrypted row and the
+ * strip's reserved space — which is the one slot on this stage nothing else
+ * owns. It bottom-anchors there like the band's other content would, so the
+ * frame above does not move when the offer arrives. DEVIATIONS.md #IDC-32.
  */
-export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id', side = 'front', vertical = false, state = 'empty', manual = false, showClose = state !== 'empty', feedback, camera, still, countdownValue = 3, screenId = `id-capture-${documentType}-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
+export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id', side = 'front', vertical = false, state = 'empty', manual = false, showClose = state !== 'empty', feedback, camera, still, countdownValue = 3, extendTime, onExtendTime, notice, screenId = `id-capture-${documentType}-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
     const slice = documentType === 'passport'
         ? strings.stage.passport
         : side === 'back'
@@ -77,12 +103,22 @@ export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id',
             : strings.stage.front;
     const pillKind = feedback === undefined ? STAGE_FEEDBACK[state] : feedback;
     const pillCopy = pillKind ? strings.feedback[pillKind] : undefined;
+    const offer = strings.stage.extendTime;
+    // No copy, no notice: a host that has not localized this must not get
+    // English, and the flag alone is not permission to invent it.
+    const band = notice ??
+        (extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", isMultiline: true, 
+            // Assertive on purpose — a polite region can queue behind the
+            // stage's own state announcements and be read out after the 20 s
+            // has already run out. FaceCaptureCapturingScreen's header has the
+            // full reasoning; this instance follows it.
+            role: "alert", linkLabel: offer.linkLabel, onLinkClick: onExtendTime, children: [_jsx("strong", { children: offer.title }), _jsx("br", {}), offer.description] })) : undefined);
     return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("header", { className: "prizma-screen-nav id-capture-stage__nav", children: _jsx(PrizmaNavigation, { showIncodeLogo: false, showRightIcon: showClose, closeLabel: strings.closeLabel, "aria-label": strings.navLabel, onRightIconClick: () => onAction?.({ type: 'secondary', screenId }) }) }), _jsxs("div", { className: [
                     'prizma-viewfinder__content',
                     overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band" })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, tooltipText: manual ? strings.stage.manualTooltip : undefined, ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
+                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band", children: band ? _jsx("div", { className: "id-capture-stage__notice", children: band }) : null })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, tooltipText: manual ? strings.stage.manualTooltip : undefined, ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
 });
 IdCaptureStageScreen.displayName = 'IdCaptureStageScreen';
 export default IdCaptureStageScreen;

package/dist/IdCaptureStrings.d.ts

@@ -102,6 +102,25 @@ export interface IdCaptureStrings {
         /** Visually-hidden state announcements, per stage state — forwarded to
          *  `PrizmaIdCapture.stateLabels`. */
         stateLabels?: Partial<Record<IdCaptureStageState, string>>;
+        /**
+         * stage.extendTime — the accessibility offer that rides the camera stage
+         * 20 s before auto-capture gives up and hands over to the shutter
+         * ("Need more time? / Manual capture starts in 20 s / Extend auto-capture").
+         * The same contract as Face Capture's `extendTime`: one feature, two
+         * modules, identical copy, so the locale overlay translates both at once.
+         *
+         * `description` is one localized sentence that CONTAINS the count, not a
+         * template — ten locales put the number in ten places. Optional: a host
+         * that has not localized it gets no notice rather than English.
+         */
+        extendTime?: {
+            /** Bold first line — "Need more time?" */
+            title: string;
+            /** "Manual capture starts in 20 s" — the count lives inside the copy. */
+            description: string;
+            /** The action that keeps the user on auto — "Extend auto-capture". */
+            linkLabel: string;
+        };
     };
     /** The on-camera feedback pills the error stages carry. */
     feedback: Partial<Record<IdCaptureFeedbackKind, IdCaptureFeedbackCopy>>;

package/dist/ListScreen.d.ts

@@ -61,9 +61,30 @@ export interface PrizmaListScreenProps extends Omit<PrizmaScreenShellProps, 'dar
      *  (common issues) and "Quit process" (permission). Figma draws Core's
      *  `tertiary-link` composite in the band's top slot. */
     linkLabel?: string;
+    /**
+     * A SECOND tertiary link, under the first. Reusability's selection draws
+     * "What data will be shared?" over "Incode’s Privacy Policy" with no primary
+     * between them — two non-primary actions a host has to tell apart, so this
+     * one emits `tertiary` where `linkLabel` emits `secondary` (the #PI-10
+     * reasoning). Stacked at the band's flat Spacing/16 like everything else in
+     * it. Omit it and nothing renders, so every existing consumer is untouched.
+     * DEVIATIONS #RU-4.
+     */
+    secondaryLinkLabel?: string;
+    /**
+     * A shell-level layer painted OVER the whole screen — the same slot
+     * archetypes A and E carry (#F-32, #BC-8): a scrim plus Core's
+     * `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top of the
+     * dimmed list. It cannot ride in the content column: it is absolutely
+     * positioned against the shell. Reusability's shared-details sheet is the
+     * first List consumer (DEVIATIONS #RU-5).
+     */
+    overlay?: ReactNode;
     /** "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;