@smileid/web-components 11.3.0 → 11.4.1

package/lib/components/document/src/document-capture-instructions/index.js

@@ -1,3 +1,4 @@
 import DocumentInstruction from './DocumentCaptureInstructions';
+import './DocumentCaptureInstructions.tsx';
 
 export default DocumentInstruction;

package/lib/components/navigation/src/Navigation.js

@@ -4,6 +4,13 @@ class Navigation extends HTMLElement {
   connectedCallback() {
     const shadow = this.attachShadow({ mode: 'open' });
     const direction = getDirection();
+    const hostPadding = '0px';
+    const buttonSize = '40px';
+    const buttonBackground = 'rgba(132, 130, 130, 0.9)';
+    const buttonBorder = '1px solid rgba(255, 255, 255, 0.1)';
+    const iconSize = '20px';
+    const iconColor = this.hasThemeColor ? this.themeColor : '#FFFFFF';
+    const focusColor = '#FFFFFF';
 
     const style = document.createElement('style');
     style.textContent = `
@@ -12,6 +19,8 @@ class Navigation extends HTMLElement {
   max-inline-size: 100%;
   justify-content: ${this.showBackButton ? 'space-between' : 'flex-end'};
   direction: ${direction};
+  padding: var(--smileid-navigation-padding, ${hostPadding});
+  gap: 1rem;
 }
 
 :host([dir="rtl"]) .back-button svg,
@@ -20,50 +29,48 @@ class Navigation extends HTMLElement {
 }
 
 button {
-  --button-color: var(--color-default);
-  --flow-space: 3rem;
   -webkit-appearance: none;
   -moz-appearance: none;
-  align-items: center;
   appearance: none;
-  background-color: transparent;
-  border-radius: 2.5rem;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 1rem;
-  font-weight: 500;
-  inline-size: 100%;
-  justify-content: center;
-  letter-spacing: 0.05ch;
-  line-height: 1;
-  padding: 1rem 2.5rem;
-  text-align: center;
-  text-decoration: none;
-}
-
-button[data-type="icon"] {
+  width: ${buttonSize};
+  height: ${buttonSize};
+  border-radius: 50%;
+  background: var(--smileid-navigation-button-bg, ${buttonBackground});
+  border: ${buttonBorder};
+  display: flex;
   align-items: center;
-  background-color: transparent;
-  border: 0;
+  justify-content: center;
+  color: var(--smileid-navigation-icon-color, ${iconColor});
   cursor: pointer;
-  display: flex;
   padding: 0;
-  width: auto;
+  flex-shrink: 0;
+  transition: box-shadow 0.15s ease;
+}
+
+button:hover {
+  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.15);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--smileid-navigation-focus-color, ${focusColor});
+  outline-offset: 3px;
+}
+
+button svg {
+  width: ${iconSize};
+  height: ${iconSize};
 }
 
 :host::part(back-button) {
   display: flex;
   align-items: center;
-}
-
-:host::part(back-button-text) {
-  line-height: 1;
-  color: ${this.hasThemeColor ? this.themeColor : 'rgb(21, 31, 114)'} !important;
+  justify-content: center;
 }
 
 :host::part(close-button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .visually-hidden {
@@ -79,57 +86,51 @@ button[data-type="icon"] {
 
     const backButton = document.createElement('button');
     backButton.setAttribute('class', 'back-button');
-    backButton.setAttribute('data-type', 'icon');
     backButton.setAttribute('part', 'back-button');
     backButton.setAttribute('type', 'button');
+    backButton.setAttribute('aria-label', t('navigation.back'));
     backButton.innerHTML = `
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
+        aria-hidden="true"
         viewBox="0 0 24 24"
         fill="none"
+        xmlns="http://www.w3.org/2000/svg"
         data-rtl="${direction === 'rtl'}"
       >
         <path
-          fill="#DBDBC4"
-          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
-          opacity=".4"
-        />
-        <path
-          fill="${this.themeColor}"
-          d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+          d="M19 12H5M5 12L12 19M5 12L12 5"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
-      <span part="back-button-text">${t('navigation.back')}</span>
+      <span part="back-button-text" class="visually-hidden">${t('navigation.back')}</span>
     `;
 
     const closeButton = document.createElement('button');
     closeButton.setAttribute('class', 'close-button');
-    closeButton.setAttribute('data-type', 'icon');
     closeButton.setAttribute('part', 'close-button');
     closeButton.setAttribute('type', 'button');
+    closeButton.setAttribute(
+      'aria-label',
+      t('navigation.closeVerificationFrame'),
+    );
     closeButton.innerHTML = `
       <svg
-        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
         viewBox="0 0 24 24"
-        width="24"
-        height="24"
         fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill="#DBDBC4"
-          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
-          opacity=".4"
-        />
-        <path
-          fill="#91190F"
-          d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"
+          d="M18 6L6 18M6 6L18 18"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
-      <span class="visually-hidden"
-        >${t('navigation.closeVerificationFrame')}</span
-      >
     `;
 
     shadow.appendChild(style);

package/lib/components/navigation/src/Navigation.stories.js

@@ -12,6 +12,13 @@ const meta = {
     },
   },
   component: 'smileid-navigation',
+  decorators: [
+    (story) => `
+      <div style="background: #1a1a2e; padding: 24px; min-height: 100px;">
+        ${story()}
+      </div>
+    `,
+  ],
 };
 
 export default meta;

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -1,8 +1,6 @@
 import { useRef, useEffect } from 'preact/hooks';
-import { useSignal } from '@preact/signals';
 import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
-import throttle from 'lodash/throttle';
 
 import { getBoolProp } from '../../../../utils/props';
 import { useFaceCapture, useCamera } from './hooks';
@@ -50,13 +48,6 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
   const initialFacingMode = allowAgentMode ? 'environment' : 'user';
   const camera = useCamera(initialFacingMode);
 
-  const throttledMultipleFaces = useSignal(false);
-  const updateMultipleFacesUI = useRef(
-    throttle((value: boolean) => {
-      throttledMultipleFaces.value = value;
-    }, 100),
-  ).current;
-
   const faceCapture = useFaceCapture({
     videoRef: camera.videoRef,
     canvasRef,
@@ -106,14 +97,9 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
       faceCapture.stopDetectionLoop();
       camera.stopCamera();
       faceCapture.cleanup();
-      updateMultipleFacesUI.cancel();
     };
   }, []);
 
-  useEffect(() => {
-    updateMultipleFacesUI(faceCapture.multipleFaces.value);
-  }, [faceCapture.multipleFaces.value]);
-
   useEffect(() => {
     const navigation = navigationRef.current;
 
@@ -160,7 +146,6 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
         videoRef={camera.videoRef}
         canvasRef={canvasRef}
         facingMode={camera.facingMode}
-        multipleFaces={throttledMultipleFaces.value}
         progress={
           faceCapture.capturesTaken.value > 0
             ? faceCapture.capturesTaken.value / faceCapture.totalCaptures.value
@@ -178,6 +163,9 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
             isCapturing={faceCapture.isCapturing.value}
             hasFinishedCapture={faceCapture.hasFinishedCapture.value}
             isReadyToCapture={faceCapture.isReadyToCapture.value}
+            captureButtonFallbackEnabled={
+              faceCapture.captureButtonFallbackEnabled.value
+            }
             allowAgentMode={allowAgentMode}
             agentSupported={camera.agentSupported}
             showAgentModeForTests={showAgentModeForTests}

package/lib/components/selfie/src/smartselfie-capture/components/CameraPreview.tsx

@@ -5,7 +5,6 @@ interface CameraPreviewProps {
   videoRef: Ref<HTMLVideoElement>;
   canvasRef: Ref<HTMLCanvasElement>;
   facingMode: 'user' | 'environment';
-  multipleFaces: boolean;
   progress: number;
   interval: number;
   themeColor: string;
@@ -15,7 +14,6 @@ export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
   videoRef,
   canvasRef,
   facingMode,
-  multipleFaces,
   progress,
   interval,
   themeColor,
@@ -25,7 +23,7 @@ export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
       <div
         className="video-wrapper"
         style={{
-          clipPath: multipleFaces ? 'none' : 'url(#selfie-clip-path)',
+          clipPath: 'url(#selfie-clip-path)',
         }}
       >
         <div className="video-container">
@@ -42,13 +40,11 @@ export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
           />
         </div>
       </div>
-      {!multipleFaces && (
-        <OvalProgress
-          progress={progress}
-          duration={interval}
-          themeColor={themeColor}
-        />
-      )}
+      <OvalProgress
+        progress={progress}
+        duration={interval}
+        themeColor={themeColor}
+      />
     </div>
 
     <style>{`

package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx

@@ -5,6 +5,7 @@ interface CaptureControlsProps {
   isCapturing: boolean;
   hasFinishedCapture: boolean;
   isReadyToCapture: boolean;
+  captureButtonFallbackEnabled: boolean;
   allowAgentMode: boolean;
   agentSupported: boolean;
   showAgentModeForTests: boolean;
@@ -18,6 +19,7 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
   isCapturing,
   hasFinishedCapture,
   isReadyToCapture,
+  captureButtonFallbackEnabled,
   allowAgentMode,
   agentSupported,
   showAgentModeForTests,
@@ -32,7 +34,11 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
         id="start-image-capture"
         class="btn-primary"
         onClick={onStartCapture}
-        disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
+        disabled={
+          isCapturing ||
+          hasFinishedCapture ||
+          (!isReadyToCapture && !captureButtonFallbackEnabled)
+        }
       >
         {t('selfie.capture.button.startCapture')}
       </button>

package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts

@@ -51,11 +51,11 @@ export const useFaceCapture = ({
   const animationFrameRef = useRef<number | null>(null);
   const captureTimerRef = useRef<NodeJS.Timeout | null>(null);
   const resumeCaptureRef = useRef<(() => void) | null>(null);
+  const fallbackTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const faceDetected = useSignal(false);
   const faceInBounds = useSignal(false);
   const faceProximity = useSignal<'too-close' | 'too-far' | 'good'>('good');
-  const multipleFaces = useSignal(false);
   const videoAspectRatio = useSignal(16 / 9);
   const faceLandmarks = useSignal<any[]>([]);
   const currentSmileScore = useSignal(0);
@@ -64,6 +64,7 @@ export const useFaceCapture = ({
   const lastSmileTime = useSignal(0);
   const alertTitle = useSignal('');
   const isInitializing = useSignal(true);
+  const captureButtonFallbackEnabled = useSignal(false);
 
   const isCapturing = useSignal(false);
   const isPaused = useSignal(false);
@@ -83,8 +84,7 @@ export const useFaceCapture = ({
     () =>
       faceDetected.value &&
       faceInBounds.value &&
-      faceProximity.value === 'good' &&
-      !multipleFaces.value,
+      faceProximity.value === 'good',
   );
 
   const updateAlertImmediate = (messageKey: MessageKey | null) => {
@@ -101,6 +101,19 @@ export const useFaceCapture = ({
     }, 600),
   ).current;
 
+  const CAPTURE_FALLBACK_TIMEOUT_MS = 10000;
+
+  const startFallbackTimer = () => {
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+    }
+    fallbackTimerRef.current = setTimeout(() => {
+      if (!isReadyToCapture.value) {
+        captureButtonFallbackEnabled.value = true;
+      }
+    }, CAPTURE_FALLBACK_TIMEOUT_MS);
+  };
+
   const initializeFaceLandmarker = async () => {
     try {
       const isAlreadyLoaded =
@@ -114,10 +127,15 @@ export const useFaceCapture = ({
 
       faceLandmarkerRef.current = await getMediapipeInstance();
       isInitializing.value = false;
+      startFallbackTimer();
     } catch (error) {
       console.error('Failed to initialize MediaPipe:', error);
       isInitializing.value = false;
+      // MediaPipe failed — start the fallback timer so the button eventually
+      // enables and the user isn't permanently stuck.
+      startFallbackTimer();
     }
+    startFallbackTimer();
   };
 
   const setupCanvas = () => {
@@ -165,8 +183,6 @@ export const useFaceCapture = ({
   const updateAlerts = () => {
     if (isInitializing.value) {
       updateAlertImmediate('initializing');
-    } else if (multipleFaces.value) {
-      updateAlert('multiple-faces');
     } else if (!faceDetected.value) {
       updateAlert('no-face');
     } else if (faceProximity.value === 'too-close') {
@@ -260,13 +276,12 @@ export const useFaceCapture = ({
 
       // Check number of faces
       const numFaces = results.faceLandmarks ? results.faceLandmarks.length : 0;
-      multipleFaces.value = numFaces > 1;
 
       // Check if face is detected
       const hasFace =
         results.faceBlendshapes &&
         results.faceBlendshapes.length > 0 &&
-        numFaces === 1;
+        numFaces >= 1;
       faceDetected.value = hasFace;
 
       if (hasFace && results.faceLandmarks) {
@@ -322,7 +337,7 @@ export const useFaceCapture = ({
           }
         }
       } else {
-        // No face detected or multiple faces - reset values
+        // No face detected - reset values
         currentSmileScore.value = 0;
         currentFaceSize.value = 0;
         currentMouthOpen.value = 0;
@@ -334,7 +349,6 @@ export const useFaceCapture = ({
     } catch {
       faceDetected.value = false;
       faceInBounds.value = false;
-      multipleFaces.value = false;
       faceProximity.value = 'good';
       currentMouthOpen.value = 0;
 
@@ -417,7 +431,6 @@ export const useFaceCapture = ({
     isPaused.value = true;
 
     if (
-      !multipleFaces.value &&
       faceDetected.value &&
       faceInBounds.value &&
       faceProximity.value === 'good'
@@ -437,11 +450,6 @@ export const useFaceCapture = ({
         return;
       }
 
-      if (multipleFaces.value) {
-        pauseCapture();
-        return;
-      }
-
       if (!faceDetected.value) {
         return;
       }
@@ -474,8 +482,7 @@ export const useFaceCapture = ({
     if (
       faceDetected.value &&
       faceProximity.value === 'good' &&
-      faceInBounds.value &&
-      !multipleFaces.value
+      faceInBounds.value
     ) {
       const isInSmileZone = capturesTaken.value >= smileCheckpoint.value;
       if (isInSmileZone) {
@@ -556,6 +563,9 @@ export const useFaceCapture = ({
     if (captureTimerRef.current) {
       clearInterval(captureTimerRef.current);
     }
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+    }
     stopDetectionLoop();
     updateAlert.cancel();
   };
@@ -564,12 +574,16 @@ export const useFaceCapture = ({
     faceDetected.value = false;
     faceInBounds.value = false;
     faceProximity.value = 'good';
-    multipleFaces.value = false;
     faceLandmarks.value = [];
     currentSmileScore.value = 0;
     currentFaceSize.value = 0;
     currentMouthOpen.value = 0;
     lastSmileTime.value = 0;
+    captureButtonFallbackEnabled.value = false;
+    if (fallbackTimerRef.current) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
 
     if (canvasRef.current) {
       clearCanvas(canvasRef.current);
@@ -580,7 +594,6 @@ export const useFaceCapture = ({
     faceDetected,
     faceInBounds,
     faceProximity,
-    multipleFaces,
     videoAspectRatio,
     faceLandmarks,
     currentSmileScore,
@@ -590,6 +603,7 @@ export const useFaceCapture = ({
     alertTitle,
     isInitializing,
     isReadyToCapture,
+    captureButtonFallbackEnabled,
 
     isCapturing,
     isPaused,

package/lib/components/selfie/src/smartselfie-capture/utils/alertMessages.ts

@@ -1,7 +1,6 @@
 import { t } from '../../../../../domain/localisation';
 
 export const MESSAGES = {
-  'multiple-faces': () => t('selfie.smart.alert.multipleFaces'),
   'no-face': () => t('selfie.smart.alert.noFace'),
   'out-of-bounds': () => t('selfie.smart.alert.outOfBounds'),
   'too-close': () => t('selfie.smart.alert.tooClose'),