@incodetech/web 0.0.0-dev-20260715-a93e8b97 → 0.0.0-dev-20260715-dcc78bcd

package/dist/flow/styles.css

@@ -4009,6 +4009,51 @@
     }
   }
 
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   .incode-container {
     width: 100%;
   }
@@ -4334,6 +4379,8 @@
     animation-fill-mode: both;
     animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
     animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
   }
 
   .resize {
@@ -4813,6 +4860,11 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -9315,6 +9367,52 @@
   container-type: inline-size;
 }
 
+.IncodeVideoSelfieSwitchingCameraPage {
+  background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {
+  flex: 1;
+  position: relative;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {
+  width: var(--spacing-40, var(--spacing-40, 40px));
+  height: var(--spacing-40, var(--spacing-40, 40px));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+}
+
 .IncodeVideoSelfieTutorialPage .IncodePageContent {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
 }
@@ -9398,126 +9496,104 @@
 .IncodeVsStepsHeader {
   inset-inline: var(--spacing-0, var(--spacing-none, 0px));
   top: var(--spacing-0, var(--spacing-none, 0px));
-  z-index: 60;
+  gap: var(--spacing-2, var(--spacing-2, 2px));
   width: 100%;
-  height: 65px;
-  color: var(--color-white, #fff);
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-top: var(--spacing-24, var(--spacing-24, 24px));
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+  z-index: var(--video-selfie-chrome-z-index);
   background-color: #0000;
-  gap: 5px;
-  padding-inline: 15px;
   list-style-type: none;
   display: flex;
   position: absolute;
 }
 
 .IncodeVsStepsHeader .IncodeVsStepsHeaderStep {
-  flex: 1;
-  justify-content: center;
-  align-items: flex-end;
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
   width: 100%;
-  height: 100%;
-  padding-bottom: 10px;
+  height: var(--video-selfie-stepper-height);
+  flex-direction: column;
+  flex: 1;
   display: flex;
   position: relative;
 }
 
 .IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {
-  width: 32px;
+  width: var(--spacing-32, var(--spacing-32, 32px));
+  height: var(--spacing-32, var(--spacing-32, 32px));
 }
 
-.IncodeVsStepsHeader .IncodeVsStepsHeaderStep:after {
-  content: "";
-  opacity: .2;
-  background: currentColor;
-  border-radius: 5px;
+.IncodeVsStepsHeader .IncodeVsStepsHeaderPill {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
   width: 100%;
-  height: 3px;
-  position: absolute;
-  top: 7px;
-  left: 0;
+  height: var(--video-selfie-stepper-pill-height);
+  opacity: .25;
+  transition: opacity .3s ease-in-out;
 }
 
-.IncodeVsStepsHeader .IncodeVsStepsHeaderStepActive:after {
-  opacity: .4;
-  height: 5px;
-  top: 6px;
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {
+  opacity: .5;
 }
 
-.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent:after {
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {
   opacity: 1;
-  top: 6px;
 }
 
-.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderStep:after {
+.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {
+  background-color: var(--border-status-positive-static);
   opacity: 1;
-  background: #0cd5a2;
-  height: 5px;
-  top: 6px;
 }
 
-.IncodeVsSelfieMask {
-  z-index: 50;
-  border: 6.9px solid #fff;
-  border-radius: 50%;
-  width: 90cqw;
-  height: 90cqw;
-  transition: border-color .3s ease-in-out;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMask {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  z-index: var(--video-selfie-mask-z-index);
+  width: 86cqw;
+  height: 86cqw;
+  box-shadow: var(--video-selfie-mask-vignette-shadow);
   position: absolute;
-  top: 50%;
+  top: calc(50% - 7cqw);
   left: 50%;
   transform: translate(-50%, -50%);
-  box-shadow: 0 0 0 99999px #0009;
 }
 
-.IncodeVsSelfieMaskLoading {
-  border-color: #0093fd;
-}
-
-.IncodeVsSelfieMaskCapturing {
-  border-color: #0cd5a2;
-}
-
-.IncodeVsSelfieMaskError {
-  border-color: #ff5c6f;
-}
-
-.IncodeVsSelfieMask .IncodeVsSelfieMaskFrame {
-  width: auto;
-  max-width: none;
-  height: calc(85cqw - 40px);
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  height: 100%;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  overflow: visible;
 }
 
-.IncodeVsSelfieMaskText {
-  z-index: 60;
-  text-align: center;
-  color: #fff;
-  flex-direction: column;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {
+  inset-inline: var(--spacing-0, var(--spacing-none, 0px));
   align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
   width: 100%;
-  max-width: 80%;
-  margin: 0 auto;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.4;
+  z-index: var(--video-selfie-chrome-z-index);
+  max-width: var(--video-selfie-feedback-max-width);
+  flex-direction: column;
+  margin-inline: auto;
   display: flex;
   position: absolute;
-  top: calc(50% + 45cqw + 24px);
-  left: 0;
-  right: 0;
+  top: calc(50% + 36cqw + 40px);
 }
 
-.IncodeVsSelfieMaskTextCapturing {
-  color: #0cd5a2;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {
+  width: var(--spacing-32, var(--spacing-32, 32px));
+  height: var(--spacing-32, var(--spacing-32, 32px));
 }
 
-.IncodeVsSelfieMaskText img {
-  width: 2rem;
-  height: 2rem;
-  margin-bottom: 8px;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
 .IncodeVsIdMask {

package/dist/themes/dark.css

@@ -1253,6 +1253,12 @@
   --digital-id-file-name-max-w: 200px;
   --digital-id-progress-bar-w: 164px;
   --digital-id-progress-bar-h: 8px;
+  --video-selfie-mask-vignette-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
+  --video-selfie-feedback-max-width: 80%;
+  --video-selfie-stepper-height: 45px;
+  --video-selfie-stepper-pill-height: 5px;
+  --video-selfie-mask-z-index: 50;
+  --video-selfie-chrome-z-index: 60;
 }
 [data-incode-theme='dark'] {
   /* Surface / Neutral */

package/dist/themes/light.css

@@ -1253,4 +1253,10 @@
   --digital-id-file-name-max-w: 200px;
   --digital-id-progress-bar-w: 164px;
   --digital-id-progress-bar-h: 8px;
+  --video-selfie-mask-vignette-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
+  --video-selfie-feedback-max-width: 80%;
+  --video-selfie-stepper-height: 45px;
+  --video-selfie-stepper-pill-height: 5px;
+  --video-selfie-mask-z-index: 50;
+  --video-selfie-chrome-z-index: 60;
 }

package/dist/video-selfie/styles.css

@@ -585,6 +585,51 @@
     }
   }
 
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   .incode-container {
     width: 100%;
   }
@@ -758,6 +803,8 @@
     animation-fill-mode: both;
     animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
     animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
   }
 
   .resize {
@@ -857,6 +904,11 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -1076,6 +1128,52 @@
   container-type: inline-size;
 }
 
+.IncodeVideoSelfieSwitchingCameraPage {
+  background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {
+  flex: 1;
+  position: relative;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {
+  width: var(--spacing-40, var(--spacing-40, 40px));
+  height: var(--spacing-40, var(--spacing-40, 40px));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+}
+
 .IncodeVideoSelfieTutorialPage .IncodePageContent {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
 }
@@ -1159,126 +1257,104 @@
 .IncodeVsStepsHeader {
   inset-inline: var(--spacing-0, var(--spacing-none, 0px));
   top: var(--spacing-0, var(--spacing-none, 0px));
-  z-index: 60;
+  gap: var(--spacing-2, var(--spacing-2, 2px));
   width: 100%;
-  height: 65px;
-  color: var(--color-white, #fff);
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-top: var(--spacing-24, var(--spacing-24, 24px));
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+  z-index: var(--video-selfie-chrome-z-index);
   background-color: #0000;
-  gap: 5px;
-  padding-inline: 15px;
   list-style-type: none;
   display: flex;
   position: absolute;
 }
 
 .IncodeVsStepsHeader .IncodeVsStepsHeaderStep {
-  flex: 1;
-  justify-content: center;
-  align-items: flex-end;
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
   width: 100%;
-  height: 100%;
-  padding-bottom: 10px;
+  height: var(--video-selfie-stepper-height);
+  flex-direction: column;
+  flex: 1;
   display: flex;
   position: relative;
 }
 
 .IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {
-  width: 32px;
+  width: var(--spacing-32, var(--spacing-32, 32px));
+  height: var(--spacing-32, var(--spacing-32, 32px));
 }
 
-.IncodeVsStepsHeader .IncodeVsStepsHeaderStep:after {
-  content: "";
-  opacity: .2;
-  background: currentColor;
-  border-radius: 5px;
+.IncodeVsStepsHeader .IncodeVsStepsHeaderPill {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
   width: 100%;
-  height: 3px;
-  position: absolute;
-  top: 7px;
-  left: 0;
+  height: var(--video-selfie-stepper-pill-height);
+  opacity: .25;
+  transition: opacity .3s ease-in-out;
 }
 
-.IncodeVsStepsHeader .IncodeVsStepsHeaderStepActive:after {
-  opacity: .4;
-  height: 5px;
-  top: 6px;
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {
+  opacity: .5;
 }
 
-.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent:after {
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {
   opacity: 1;
-  top: 6px;
 }
 
-.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderStep:after {
+.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {
+  background-color: var(--border-status-positive-static);
   opacity: 1;
-  background: #0cd5a2;
-  height: 5px;
-  top: 6px;
 }
 
-.IncodeVsSelfieMask {
-  z-index: 50;
-  border: 6.9px solid #fff;
-  border-radius: 50%;
-  width: 90cqw;
-  height: 90cqw;
-  transition: border-color .3s ease-in-out;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMask {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  z-index: var(--video-selfie-mask-z-index);
+  width: 86cqw;
+  height: 86cqw;
+  box-shadow: var(--video-selfie-mask-vignette-shadow);
   position: absolute;
-  top: 50%;
+  top: calc(50% - 7cqw);
   left: 50%;
   transform: translate(-50%, -50%);
-  box-shadow: 0 0 0 99999px #0009;
-}
-
-.IncodeVsSelfieMaskLoading {
-  border-color: #0093fd;
 }
 
-.IncodeVsSelfieMaskCapturing {
-  border-color: #0cd5a2;
-}
-
-.IncodeVsSelfieMaskError {
-  border-color: #ff5c6f;
-}
-
-.IncodeVsSelfieMask .IncodeVsSelfieMaskFrame {
-  width: auto;
-  max-width: none;
-  height: calc(85cqw - 40px);
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  height: 100%;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  overflow: visible;
 }
 
-.IncodeVsSelfieMaskText {
-  z-index: 60;
-  text-align: center;
-  color: #fff;
-  flex-direction: column;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {
+  inset-inline: var(--spacing-0, var(--spacing-none, 0px));
   align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
   width: 100%;
-  max-width: 80%;
-  margin: 0 auto;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.4;
+  z-index: var(--video-selfie-chrome-z-index);
+  max-width: var(--video-selfie-feedback-max-width);
+  flex-direction: column;
+  margin-inline: auto;
   display: flex;
   position: absolute;
-  top: calc(50% + 45cqw + 24px);
-  left: 0;
-  right: 0;
+  top: calc(50% + 36cqw + 40px);
 }
 
-.IncodeVsSelfieMaskTextCapturing {
-  color: #0cd5a2;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {
+  width: var(--spacing-32, var(--spacing-32, 32px));
+  height: var(--spacing-32, var(--spacing-32, 32px));
 }
 
-.IncodeVsSelfieMaskText img {
-  width: 2rem;
-  height: 2rem;
-  margin-bottom: 8px;
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
 .IncodeVsIdMask {

package/dist/video-selfie/video-selfie.es.js

@@ -7,6 +7,7 @@ import { t as Page } from "../page-DidH_RkX.js";
 import { t as Title } from "../typography-BZIpjo97.js";
 import { t as TransitionSpinner } from "../transitionSpinner-CuNCqHNi.js";
 import { t as Button } from "../button-Dz6AsbmF.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-uXtAKBTO.js";
 import { n as CameraFrame, t as CameraView } from "../cameraView-DIEzM5ru.js";
 import { i as Permissions } from "../capture-D3ke7s8S.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
@@ -159,51 +160,80 @@ var VideoSelfieTutorial = ({ config, onStart, isLoading }) => {
 	});
 };
 //#endregion
-//#region src/modules/video-selfie/assets/face-frame.svg
-var face_frame_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='336'%20height='518'%20viewBox='0%200%20336%20518'%3e%3cpath%20fill='none'%20fill-rule='evenodd'%20stroke='%23FFF'%20stroke-dasharray='7.139999675750732,19.03999967575073'%20stroke-width='9.044'%20d='M168%20513.392c76.83%200%20162.893-113.92%20162.893-254.447S280.236%204.498%20168%204.498%205.107%20118.418%205.107%20258.945%2091.17%20513.392%20168%20513.392z'/%3e%3c/svg%3e";
-//#endregion
 //#region src/modules/video-selfie/assets/failVideoselfieSolid.svg
 var failVideoselfieSolid_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%20fill='none'%20version='1.1'%20id='svg2'%20sodipodi:docname='fail_videoselfie_solid.svg'%20inkscape:version='1.3%20(0e150ed,%202023-07-21)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs2'%20/%3e%3csodipodi:namedview%20id='namedview2'%20pagecolor='%23ffffff'%20bordercolor='%23000000'%20borderopacity='0.25'%20inkscape:showpageshadow='2'%20inkscape:pageopacity='0.0'%20inkscape:pagecheckerboard='0'%20inkscape:deskcolor='%23d1d1d1'%20inkscape:zoom='3.6875'%20inkscape:cx='31.864407'%20inkscape:cy='32'%20inkscape:window-width='3840'%20inkscape:window-height='2107'%20inkscape:window-x='0'%20inkscape:window-y='25'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M45%208.5C44.1716%208.5%2043.5%209.17157%2043.5%2010C43.5%2010.8284%2044.1716%2011.5%2045%2011.5H52C52.1326%2011.5%2052.2598%2011.5527%2052.3536%2011.6464C52.4473%2011.7402%2052.5%2011.8674%2052.5%2012V19C52.5%2019.8284%2053.1716%2020.5%2054%2020.5C54.8284%2020.5%2055.5%2019.8284%2055.5%2019V12C55.5%2011.0717%2055.1313%2010.1815%2054.4749%209.52513C53.8185%208.86875%2052.9283%208.5%2052%208.5H45ZM55.5%2045C55.5%2044.1716%2054.8284%2043.5%2054%2043.5C53.1716%2043.5%2052.5%2044.1716%2052.5%2045V52C52.5%2052.1326%2052.4473%2052.2598%2052.3536%2052.3536C52.2598%2052.4473%2052.1326%2052.5%2052%2052.5H45C44.1716%2052.5%2043.5%2053.1716%2043.5%2054C43.5%2054.8284%2044.1716%2055.5%2045%2055.5H52C52.9283%2055.5%2053.8185%2055.1313%2054.4749%2054.4749C55.1313%2053.8185%2055.5%2052.9283%2055.5%2052V45ZM10%2043.5C10.8284%2043.5%2011.5%2044.1716%2011.5%2045V52C11.5%2052.1326%2011.5527%2052.2598%2011.6464%2052.3536C11.7402%2052.4473%2011.8674%2052.5%2012%2052.5H19C19.8284%2052.5%2020.5%2053.1716%2020.5%2054C20.5%2054.8284%2019.8284%2055.5%2019%2055.5H12C11.0717%2055.5%2010.1815%2055.1313%209.52513%2054.4749C8.86875%2053.8185%208.5%2052.9283%208.5%2052V45C8.5%2044.1716%209.17157%2043.5%2010%2043.5ZM12%208.5C11.0717%208.5%2010.1815%208.86875%209.52513%209.52513C8.86875%2010.1815%208.5%2011.0717%208.5%2012V19C8.5%2019.8284%209.17157%2020.5%2010%2020.5C10.8284%2020.5%2011.5%2019.8284%2011.5%2019V12C11.5%2011.8674%2011.5527%2011.7402%2011.6464%2011.6464C11.7402%2011.5527%2011.8674%2011.5%2012%2011.5H19C19.8284%2011.5%2020.5%2010.8284%2020.5%2010C20.5%209.17157%2019.8284%208.5%2019%208.5H12Z'%20fill='%23FF5C6F'%20id='path1'%20style='fill:%23ff5c6f;fill-opacity:1'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M41.4142%2025.4142C42.1953%2024.6332%2042.1953%2023.3668%2041.4142%2022.5858C40.6332%2021.8047%2039.3668%2021.8047%2038.5858%2022.5858L32%2029.1716L25.4142%2022.5858C24.6332%2021.8047%2023.3668%2021.8047%2022.5858%2022.5858C21.8047%2023.3668%2021.8047%2024.6332%2022.5858%2025.4142L29.1716%2032L22.5858%2038.5858C21.8047%2039.3668%2021.8047%2040.6332%2022.5858%2041.4142C23.3668%2042.1953%2024.6332%2042.1953%2025.4142%2041.4142L32%2034.8284L38.5858%2041.4142C39.3668%2042.1953%2040.6332%2042.1953%2041.4142%2041.4142C42.1953%2040.6332%2042.1953%2039.3668%2041.4142%2038.5858L34.8284%2032L41.4142%2025.4142Z'%20fill='white'%20id='path2'%20style='fill:%23ff5c6f;fill-opacity:1'%20/%3e%3c/svg%3e";
 //#endregion
-//#region src/modules/video-selfie/assets/success-selfie.svg
-var success_selfie_default = "data:image/svg+xml,%3csvg%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M44.2413%2012.0554L40.5562%208.27767C40.0509%207.75929%2039.4364%207.5%2038.714%207.5C37.991%207.5%2037.3765%207.75929%2036.8712%208.27767L19.0955%2026.5278L11.129%2018.3332C10.6231%2017.8146%2010.009%2017.5556%209.28662%2017.5556C8.5638%2017.5556%207.94965%2017.8146%207.44379%2018.3332L3.7587%2022.111C3.25284%2022.6295%203%2023.2593%203%2024.0002C3%2024.7405%203.25284%2025.3709%203.7587%2025.8893L13.5676%2035.9445L17.2529%2039.7222C17.7585%2040.241%2018.3728%2040.5%2019.0955%2040.5C19.8178%2040.5%2020.4322%2040.2403%2020.938%2039.7222L24.6233%2035.9445L44.2413%2015.8334C44.7467%2015.3149%2045%2014.6852%2045%2013.9443C45.0004%2013.2038%2044.7467%2012.574%2044.2413%2012.0554Z'%20fill='%230CD5A2'/%3e%3c/svg%3e";
+//#region src/modules/video-selfie/assets/check-circle.svg
+var check_circle_default = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='16'%20cy='16'%20r='16'%20fill='%23189F60'/%3e%3cpath%20d='M10.5%2016.4L14.3%2020.2L21.5%2012'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
 //#endregion
 //#region src/modules/video-selfie/selfieMask.tsx
 /**
-* Port of V1's `SelfieMask`: a fullscreen circular cut-out (dark vignette via
-* box-shadow) with the face-frame guide inside and a status line below. Border
-* + text color track {@link BorderState} (idle → white, loading → blue,
-* success → green, error → red).
+* Gradient stops for the 9px ring, keyed by variant (verified against the
+* Figma ring SVGs). A single stop repeated renders as a solid stroke.
 */
-var SelfieMask = ({ borderState = "idle", message }) => {
-	const isError = borderState === "error";
-	const isSuccess = borderState === "success";
+var RING_GRADIENT = {
+	idle: ["var(--border-neutral-100-static)", "var(--border-neutral-100-static)"],
+	processing: ["var(--border-brand-500)", "var(--surface-neutral-0-static)"],
+	success: ["var(--border-status-positive-static)", "var(--surface-neutral-0-static)"],
+	error: ["var(--border-status-negative-static)", "var(--border-status-negative-static)"]
+};
+/**
+* Selfie capture mask (latest design): a fullscreen circular cut-out (dark
+* vignette via box-shadow) framed by a chunky 9px gradient ring, with a status
+* line — and, per state, a spinner or a success check — below it. The ring
+* gradient tracks the {@link SelfieMaskVariant}: idle neutral, processing blue,
+* success green, error red.
+*/
+var SelfieMask = ({ variant = "idle", message }) => {
+	const [fromColor, toColor] = RING_GRADIENT[variant];
+	const gradientId = `IncodeVsSelfieRing-${variant}`;
 	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("div", {
-		class: cn("IncodeVsSelfieMask", {
-			IncodeVsSelfieMaskLoading: borderState === "loading",
-			IncodeVsSelfieMaskCapturing: isSuccess,
-			IncodeVsSelfieMaskError: isError
-		}),
+		class: "IncodeVsSelfieMask",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ u("img", {
-			src: face_frame_default,
-			alt: "",
-			class: "IncodeVsSelfieMaskFrame"
+		children: /* @__PURE__ */ u("svg", {
+			class: "IncodeVsSelfieMaskRing",
+			viewBox: "0 0 335 335",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ u("circle", {
+				cx: "167.5",
+				cy: "167.5",
+				r: "163",
+				stroke: `url(#${gradientId})`,
+				"stroke-width": "9"
+			}), /* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("linearGradient", {
+				id: gradientId,
+				x1: "27.7485",
+				y1: "34.8117",
+				x2: "246.205",
+				y2: "290.602",
+				gradientUnits: "userSpaceOnUse",
+				children: [/* @__PURE__ */ u("stop", { "stop-color": fromColor }), /* @__PURE__ */ u("stop", {
+					offset: "1",
+					"stop-color": toColor
+				})]
+			}) })]
 		})
-	}), /* @__PURE__ */ u("p", {
-		class: cn("IncodeVsSelfieMaskText", { IncodeVsSelfieMaskTextCapturing: isSuccess }),
+	}), /* @__PURE__ */ u("div", {
+		class: "IncodeVsSelfieMaskFeedback",
 		role: "region",
 		"aria-live": "polite",
 		children: [
-			isError ? /* @__PURE__ */ u("img", {
-				src: failVideoselfieSolid_default,
-				alt: ""
+			variant === "processing" ? /* @__PURE__ */ u(LoadingIcon, { size: 64 }) : null,
+			variant === "success" ? /* @__PURE__ */ u("img", {
+				src: check_circle_default,
+				alt: "",
+				class: "IncodeVsSelfieMaskIcon"
 			}) : null,
-			isSuccess ? /* @__PURE__ */ u("img", {
-				src: success_selfie_default,
-				alt: ""
+			variant === "error" ? /* @__PURE__ */ u("img", {
+				src: failVideoselfieSolid_default,
+				alt: "",
+				class: "IncodeVsSelfieMaskIcon"
 			}) : null,
-			message
+			/* @__PURE__ */ u("p", {
+				class: "IncodeVsSelfieMaskText",
+				children: message
+			})
 		]
 	})] });
 };
@@ -658,11 +688,12 @@ var STEP_ICONS = {
 	speech: consent_default
 };
 /**
-* Port of V1's `StepsHeader`: a full-width segmented progress bar fixed to the
-* top of the capture screen, overlaid transparently on the live camera. Each
-* step is a segment with a thin white progress line and an icon — the current
-* step shows its module icon, completed steps show a check. When every step is
-* done the lines turn green.
+* Port of V1's `StepsHeader`, restyled to the latest design: a full-width
+* segmented "ticket" fixed to the top of the capture screen, overlaid
+* transparently on the live camera. Each step is a pill segment with a 32px
+* icon below it — the current step shows its module icon at full opacity,
+* completed steps show a check (half opacity), upcoming steps are faded. When
+* every step is done the pills turn green.
 */
 var StepsHeader = ({ steps, currentIndex }) => {
 	const { t } = useTranslation();
@@ -672,13 +703,15 @@ var StepsHeader = ({ steps, currentIndex }) => {
 		"aria-label": t("videoSelfie.progressSteps", { defaultValue: "Progress steps" }),
 		children: steps.map((step, index) => {
 			const isCurrent = index === currentIndex && !isFinished;
-			const isActive = index <= currentIndex && !isFinished;
 			const isCompleted = index < currentIndex && !isFinished;
 			const label = t(`videoSelfie.step.${step}`);
 			return /* @__PURE__ */ u("li", {
-				class: cn("IncodeVsStepsHeaderStep", isActive && "IncodeVsStepsHeaderStepActive", isCurrent && "IncodeVsStepsHeaderStepCurrent"),
+				class: cn("IncodeVsStepsHeaderStep", isCompleted && "IncodeVsStepsHeaderStepCompleted", isCurrent && "IncodeVsStepsHeaderStepCurrent"),
 				"aria-current": isCurrent ? "step" : void 0,
-				children: isFinished ? /* @__PURE__ */ u("img", {
+				children: [/* @__PURE__ */ u("span", {
+					class: "IncodeVsStepsHeaderPill",
+					"aria-hidden": "true"
+				}), isFinished ? /* @__PURE__ */ u("img", {
 					src: green_check_default,
 					alt: label
 				}) : isCompleted ? /* @__PURE__ */ u("img", {
@@ -687,12 +720,46 @@ var StepsHeader = ({ steps, currentIndex }) => {
 				}) : isCurrent ? /* @__PURE__ */ u("img", {
 					src: STEP_ICONS[step],
 					alt: label
-				}) : null
+				}) : null]
 			}, step);
 		})
 	});
 };
 //#endregion
+//#region src/modules/video-selfie/assets/switch-camera.svg
+var switch_camera_default = "data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20width='100%25'%20height='100%25'%20overflow='visible'%20style='display:%20block;'%20viewBox='0%200%2040%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='icon%20frame'%3e%3cpath%20id='Vector'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.9983%2028.7492C18.4366%2028.7492%2016.9316%2028.1808%2015.7616%2027.1458C15.45%2026.8725%2015.2966%2026.4625%2015.3483%2026.0508C15.4%2025.6408%2015.6533%2025.2825%2016.0216%2025.0942L18.56%2023.8058C19.1783%2023.4942%2019.9283%2023.7392%2020.2416%2024.3558C20.5533%2024.9708%2020.3083%2025.7242%2019.6916%2026.0358L19.3716%2026.1992C19.5766%2026.2325%2019.7866%2026.2492%2019.9983%2026.2492C22.1516%2026.2492%2023.905%2024.4975%2023.905%2022.3425C23.905%2021.6525%2024.465%2021.0925%2025.155%2021.0925C25.845%2021.0925%2026.405%2021.6525%2026.405%2022.3425C26.405%2025.8758%2023.53%2028.7492%2019.9983%2028.7492ZM13.5933%2022.3408C13.5933%2018.8108%2016.4666%2015.9375%2019.9983%2015.9375C21.5616%2015.9375%2023.0683%2016.5058%2024.2366%2017.5392C24.5466%2017.8125%2024.7%2018.2242%2024.6483%2018.6342C24.5966%2019.0442%2024.3433%2019.4025%2023.975%2019.5892L21.4383%2020.8775C20.8216%2021.1942%2020.0716%2020.9458%2019.7566%2020.3308C19.445%2019.7142%2019.69%2018.9625%2020.3066%2018.6492L20.625%2018.4875C20.4183%2018.4542%2020.21%2018.4375%2019.9983%2018.4375C17.845%2018.4375%2016.0933%2020.1875%2016.0933%2022.3408C16.0933%2023.0308%2015.5333%2023.5908%2014.8433%2023.5908C14.1533%2023.5908%2013.5933%2023.0308%2013.5933%2022.3408ZM29.9266%2011.4192C29.3233%2011.3958%2028.76%2011.1425%2028.3566%2010.7208C28.2816%2010.6375%2027.9833%2010.2675%2027.2933%208.9725C26.4966%207.48583%2024.9583%206.5625%2023.275%206.5625H16.755C15.0983%206.5625%2013.5716%207.46417%2012.7683%208.91417C12.0433%2010.2308%2011.74%2010.6208%2011.66%2010.7092C11.24%2011.1475%2010.675%2011.4025%2010.1033%2011.4275C6.83497%2011.4275%204.16997%2014.0875%204.16664%2017.3575V26.7608C4.16664%2030.9942%207.60997%2034.4392%2011.8433%2034.4392H28.1566C32.39%2034.4392%2035.8333%2030.9942%2035.8333%2026.7608V17.3542C35.8333%2014.0808%2033.17%2011.4192%2029.9266%2011.4192Z'%20fill='var(--fill-0,%20white)'/%3e%3c/g%3e%3c/svg%3e";
+//#endregion
+//#region src/modules/video-selfie/switchingCameraScreen.tsx
+var SwitchingCameraScreen = ({ steps, currentIndex, facing }) => {
+	const { t } = useTranslation();
+	const title = facing === "user" ? t("videoSelfie.switchingToFront") : t("videoSelfie.switchingToBack");
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		hideFooterBranding: true,
+		className: "IncodeVideoSelfieSwitchingCameraPage",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeVideoSelfieSwitchingCamera",
+			children: [/* @__PURE__ */ u(StepsHeader, {
+				steps,
+				currentIndex
+			}), /* @__PURE__ */ u("div", {
+				class: "IncodeVideoSelfieSwitchingCameraContent",
+				role: "status",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ u("img", {
+					src: switch_camera_default,
+					alt: "",
+					"aria-hidden": true,
+					class: "IncodeVideoSelfieSwitchingCameraIcon"
+				}), /* @__PURE__ */ u(AutoFocusTitle, {
+					className: "IncodeVideoSelfieSwitchingCameraTitle",
+					children: title
+				})]
+			})]
+		})
+	});
+};
+//#endregion
 //#region src/modules/video-selfie/video-selfie.tsx
 /**
 * How long the "show the front / back" ID instruction stays pinned on screen
@@ -702,7 +769,7 @@ var StepsHeader = ({ steps, currentIndex }) => {
 var ID_INSTRUCTION_DWELL_MS = 3e3;
 /** Maps the recording status + live detection feedback to a border state. */
 var getBorderState = (state) => {
-	if (state.status === "starting" || state.status === "switchingCamera") return "loading";
+	if (state.status === "starting") return "loading";
 	switch (state.detectionStatus) {
 		case "success": return "success";
 		case "error": return "error";
@@ -712,6 +779,20 @@ var getBorderState = (state) => {
 		default: return "idle";
 	}
 };
+/**
+* Maps the live detection feedback to the selfie mask's visual state. Only
+* `capturing` reads as the blue "processing" ring (spinner + "Processing…");
+* all other live-detection guidance shows the neutral idle ring, matching the
+* latest design's "look at your front camera" screen.
+*/
+var getSelfieVariant = (detectionStatus) => {
+	switch (detectionStatus) {
+		case "success": return "success";
+		case "error": return "error";
+		case "capturing": return "processing";
+		default: return "idle";
+	}
+};
 var VideoSelfieContent = ({ config, onFinish, onError }) => {
 	const { t } = useTranslation();
 	const cameraWarmer = T(() => config ? createVideoSelfieCameraWarmer(config) : null, [config]);
@@ -769,13 +850,18 @@ var VideoSelfieContent = ({ config, onFinish, onError }) => {
 	});
 	if (state.status === "finished" || state.status === "error" || state.status === "aborted") return null;
 	if (state.status === "finalizing") return /* @__PURE__ */ u(TransitionSpinner, {});
+	if (state.status === "switchingCamera") return /* @__PURE__ */ u(SwitchingCameraScreen, {
+		steps,
+		currentIndex: state.stepIndex,
+		facing: facingModeForStep(state.step ?? "selfie")
+	});
 	const isFrontCamera = facingModeForStep(step) === "user";
 	const borderState = getBorderState(state);
 	const detectionStatus = state.detectionStatus;
 	const idMode = step === "backId" ? "back" : "front";
 	const stepLabel = t(`videoSelfie.step.${step}`);
 	const maskMessage = () => {
-		if (detectionStatus === "success") return t("videoSelfie.allGood");
+		if (detectionStatus === "success") return t("videoSelfie.lookingGood");
 		if (detectionStatus === "capturing") return t("common.processing");
 		if (detectionStatus === "error") return t("common.tryAgain");
 		if (isFrontCamera) switch (detectionStatus) {
@@ -808,7 +894,7 @@ var VideoSelfieContent = ({ config, onFinish, onError }) => {
 			onDone: () => manager.nextStep()
 		});
 		return isFrontCamera ? /* @__PURE__ */ u(SelfieMask, {
-			borderState,
+			variant: getSelfieVariant(detectionStatus),
 			message: maskMessage()
 		}) : /* @__PURE__ */ u(IdMask, {
 			borderState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260715-a93e8b97",
+  "version": "0.0.0-dev-20260715-dcc78bcd",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/IncodeTechnologies/incode-web-sdk.git"
@@ -291,7 +291,7 @@
     "qrcode": "^1.5.4",
     "signature_pad": "^5.1.3",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260715-a93e8b97"
+    "@incodetech/core": "0.0.0-dev-20260715-dcc78bcd"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",