@smileid/web-components 11.4.0 → 11.4.2

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/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -9,7 +9,25 @@ import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
 // Legacy web component fallback (used when Mediapipe isn't available)
 import '../selfie-capture/SelfieCapture';
 // Mediapipe loader/manager used by SmartSelfieCapture
-import { getMediapipeInstance } from '../smartselfie-capture/utils/mediapipeManager';
+import {
+  getMediapipeInstance,
+  UnsupportedMediapipeEnvironmentError,
+} from '../smartselfie-capture/utils/mediapipeManager';
+
+// Minimal typing for the optional Sentry SDK that host pages may expose on
+// `window`. We only depend on `captureException`, so keep the surface tight.
+// Sentry tag values are expected to be strings, so the type enforces that.
+type SentryTags = Record<string, string>;
+declare global {
+  interface Window {
+    Sentry?: {
+      captureException: (
+        error: unknown,
+        context?: { tags?: SentryTags },
+      ) => void;
+    };
+  }
+}
 
 interface Props {
   timeout?: number;
@@ -29,6 +47,12 @@ interface Props {
 
 const DEFAULT_MEDIAPIPE_WAIT_MS = 90 * 1000; // For when legacy fallback is NOT allowed, we wait the full 90s for mediapipe to load before showing an error.
 const DEFAULT_WAIT_MS = 20 * 1000; // default for when legacy fallback is allowed we wait for 20s
+// Cap retries on transient init failures so we don't spin forever, while still
+// allowing recovery from short-lived issues (e.g. CDN hiccups while the
+// wrapper is preloading in a hidden state). Retries are spaced with
+// exponential backoff (base * 2^(attempt-1)) so we don't hammer the CDN.
+const MAX_MEDIAPIPE_INIT_ATTEMPTS = 3;
+const MEDIAPIPE_RETRY_BASE_DELAY_MS = 500;
 
 // Wrapper component that decides whether to use the modern
 // SmartSelfieCapture (Mediapipe-based) or fallback to the legacy `selfie-capture`
@@ -73,29 +97,110 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   const [loadingProgress, setLoadingProgress] = useState(isCypress ? 100 : 0);
   const [initialSessionCompleted, setInitialSessionCompleted] = useState(false);
   const [mediapipeLoading, setMediapipeLoading] = useState(false);
+  // `unsupportedEnvironment` is a permanent, one-shot signal: we know
+  // MediaPipe cannot run here, so stop trying.
+  const [unsupportedEnvironment, setUnsupportedEnvironment] = useState(false);
+  // Bounded retry counter for transient init failures.
+  const [mediapipeInitAttempts, setMediapipeInitAttempts] = useState(0);
+  // Dedup flag so we only report a given init failure to Sentry once per
+  // wrapper instance, even if we end up retrying.
+  const [mediapipeInitReported, setMediapipeInitReported] = useState(false);
   const [usingSelfieCapture, setUsingSelfieCapture] = useState(false);
 
-  // Attempt to load Mediapipe (once). If Mediapipe is already ready, loading,
-  // or running under Cypress, skip the attempt. This side-effect flips
-  // mediapipeReady/mediapipeLoading flags which control which component is used.
+  // Attempt to load Mediapipe (with a small bounded retry budget). If
+  // Mediapipe is already ready, currently loading, the environment is
+  // definitively unsupported, we've exhausted our retry budget, or we're
+  // running under Cypress, skip the attempt. On transient failure we wait
+  // (exponential backoff) before allowing the effect to re-run.
   useEffect(() => {
-    if (mediapipeReady || mediapipeLoading || isCypress) return;
+    if (
+      mediapipeReady ||
+      mediapipeLoading ||
+      unsupportedEnvironment ||
+      mediapipeInitAttempts >= MAX_MEDIAPIPE_INIT_ATTEMPTS ||
+      isCypress
+    )
+      return undefined;
+
+    let cancelled = false;
+    let retryTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
     const loadMediapipe = async () => {
       setMediapipeLoading(true);
+      const attemptNumber = mediapipeInitAttempts + 1;
+      setMediapipeInitAttempts(attemptNumber);
       try {
         await getMediapipeInstance();
+        if (cancelled) return;
         setMediapipeReady(true);
+        setMediapipeLoading(false);
       } catch (error) {
+        if (cancelled) return;
         // Loading failed; we'll fall back to the legacy selfie-capture component
-        // after the loadingProgress reaches 100%.
+        // after the loadingProgress reaches 100% (or sooner for definitively
+        // unsupported environments — see below).
         console.error('Failed to load Mediapipe:', error);
+        const isUnsupportedEnvironment =
+          error instanceof UnsupportedMediapipeEnvironmentError;
+        // Report to Sentry (when the host page has exposed it on window) so we
+        // can observe how often users land on the fallback path and which
+        // environments are affected. Dedup so retries don't flood Sentry.
+        if (!mediapipeInitReported) {
+          setMediapipeInitReported(true);
+          window.Sentry?.captureException(error, {
+            tags: {
+              area: 'mediapipe_init',
+              mediapipe_unsupported_environment: isUnsupportedEnvironment
+                ? 'true'
+                : 'false',
+            },
+          });
+        }
+        // When the environment definitively cannot run MediaPipe (e.g. no
+        // WebAssembly reftypes support), there is no point retrying or keeping
+        // the user staring at the loading spinner for the full countdown —
+        // mark as unsupported and short-circuit to the fallback decision
+        // immediately.
+        if (isUnsupportedEnvironment) {
+          setUnsupportedEnvironment(true);
+          setLoadingProgress(100);
+          setMediapipeLoading(false);
+          return;
+        }
+        // Transient failure: wait with exponential backoff before allowing the
+        // effect to re-run by flipping mediapipeLoading back to false. If
+        // we've exhausted our retry budget, just release the loading flag so
+        // the countdown / fallback UI can proceed.
+        const hasRetriesLeft = attemptNumber < MAX_MEDIAPIPE_INIT_ATTEMPTS;
+        if (!hasRetriesLeft) {
+          setMediapipeLoading(false);
+          return;
+        }
+        const backoffMs =
+          MEDIAPIPE_RETRY_BASE_DELAY_MS * 2 ** (attemptNumber - 1);
+        retryTimeoutId = setTimeout(() => {
+          retryTimeoutId = null;
+          if (cancelled) return;
+          setMediapipeLoading(false);
+        }, backoffMs);
       }
-      setMediapipeLoading(false);
     };
 
     loadMediapipe();
-  }, [mediapipeReady, mediapipeLoading]);
+
+    return () => {
+      cancelled = true;
+      if (retryTimeoutId !== null) {
+        clearTimeout(retryTimeoutId);
+      }
+    };
+  }, [
+    mediapipeReady,
+    mediapipeLoading,
+    unsupportedEnvironment,
+    mediapipeInitAttempts,
+    mediapipeInitReported,
+  ]);
 
   // When using the loading countdown (startCountdown), increment the
   // visible loading progress. This is only used while mediapipe hasn't

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

@@ -67,10 +67,61 @@ declare global {
       instance: FaceLandmarker | null;
       loading: Promise<FaceLandmarker> | null;
       loaded: boolean;
+      supportsWasmReftypes?: boolean;
     };
   }
 }
 
+/**
+ * @description Detects whether the current runtime supports the WebAssembly
+ * reference-types proposal (the `externref` value type). MediaPipe Tasks
+ * Vision ships a .wasm that uses `externref`; on older engines (e.g. Chrome
+ * < 96, Safari < 15, Firefox < 79) `WebAssembly.instantiate` throws
+ * `CompileError: invalid value type 'externref'`. We probe support once with
+ * `WebAssembly.validate` against a tiny module whose only feature is an
+ * `externref`-typed global so callers can short-circuit and fall back to the
+ * legacy selfie capture flow instead of triggering an unhandled rejection.
+ * @returns {boolean} True if the runtime accepts reftypes / externref.
+ */
+const supportsWasmReftypes = (): boolean => {
+  if (typeof WebAssembly === 'undefined' || !WebAssembly.validate) {
+    return false;
+  }
+
+  try {
+    // Minimal module: magic + version + global section with one externref
+    // global (value type 0x6f) initialized to ref.null extern (0xd0 0x6f 0x0b).
+    const bytes = new Uint8Array([
+      0x00,
+      0x61,
+      0x73,
+      0x6d, // \0asm magic
+      0x01,
+      0x00,
+      0x00,
+      0x00, // version 1
+      0x06,
+      0x06,
+      0x01, // global section, 6 bytes, 1 global
+      0x6f,
+      0x00, // externref, immutable
+      0xd0,
+      0x6f,
+      0x0b, // ref.null extern; end
+    ]);
+    return WebAssembly.validate(bytes);
+  } catch {
+    return false;
+  }
+};
+
+export class UnsupportedMediapipeEnvironmentError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'UnsupportedMediapipeEnvironmentError';
+  }
+}
+
 /**
  * @description Reads system architecture hints from User-Agent Client Hints.
  * @returns {Promise<string | null>} Lower-cased hint string or null when hints are unavailable.
@@ -175,6 +226,19 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
     return mediapipeGlobal.loading;
   }
 
+  // Fail fast on engines that don't support WebAssembly reftypes/externref.
+  // The MediaPipe Tasks Vision .wasm uses externref globals; instantiating it
+  // on older browsers throws an unhandled `CompileError`. We detect once and
+  // cache the result so callers fall back to the legacy capture flow.
+  if (mediapipeGlobal.supportsWasmReftypes === undefined) {
+    mediapipeGlobal.supportsWasmReftypes = supportsWasmReftypes();
+  }
+  if (!mediapipeGlobal.supportsWasmReftypes) {
+    throw new UnsupportedMediapipeEnvironmentError(
+      'WebAssembly reference types (externref) are not supported in this browser; MediaPipe Tasks Vision cannot be loaded.',
+    );
+  }
+
   mediapipeGlobal.loading = (async () => {
     try {
       const vision = await FilesetResolver.forVisionTasks(
@@ -212,4 +276,5 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
 export const __testUtils = {
   matchesExcludedGpu,
   getDelegateFromGpuDetection,
+  supportsWasmReftypes,
 };

package/lib/components/signature-pad/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@smileid/signature-pad",
-      "version": "11.3.0",
+      "version": "11.4.0",
       "dependencies": {
         "signature_pad": "^5.0.2"
       },
@@ -1359,10 +1359,11 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/for-each": {
       "version": "0.3.3",
@@ -2321,10 +2322,11 @@
       }
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },

package/lib/components/signature-pad/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.4.0",
-  "private": "true",
+  "version": "11.4.2",
+  "private": true,
   "exports": {
     ".": "./index.js"
   },

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -23,7 +23,7 @@ function scwTemplateString() {
       ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.allowLegacySelfieFallback}
     ></selfie-capture-screens>
     <document-capture-screens ${this.applyComponentThemeColor} document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
-     ${this.hideBackOfId} ${this.applyComponentThemeColor} hidden></document-capture-screens>
+     ${this.hideBackOfId} ${this.newInstructions} ${this.applyComponentThemeColor} hidden></document-capture-screens>
   </div>
 `;
 }
@@ -78,6 +78,7 @@ class SmartCameraWeb extends HTMLElement {
       'hide-back-to-host',
       'show-navigation',
       'theme-color',
+      'new-instructions',
     ];
   }
 
@@ -93,6 +94,7 @@ class SmartCameraWeb extends HTMLElement {
       case 'hide-back-to-host':
       case 'show-navigation':
       case 'theme-color':
+      case 'new-instructions':
         this.disconnectedCallback();
         this.shadowRoot.innerHTML = this.render();
         this.setUpEventListeners();
@@ -227,6 +229,10 @@ class SmartCameraWeb extends HTMLElement {
     return this.hasAttribute('hide-back-of-id') ? 'hide-back-of-id' : '';
   }
 
+  get newInstructions() {
+    return this.hasAttribute('new-instructions') ? 'new-instructions' : '';
+  }
+
   get showNavigation() {
     return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
   }

package/lib/styles/src/styles.js

@@ -290,7 +290,7 @@ ${typography}
     padding-bottom: 2rem;
   }
 
-  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions {
+  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions, document-capture-instructions-v2 {
     height: 100%;
     display: block;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.0",
+  "version": "11.4.2",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -77,10 +77,11 @@
   "type": "module",
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
   "dependencies": {
+    "@lottiefiles/dotlottie-web": "^0.71.0",
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
     "@preact/signals": "^2.1.1",
     "@tabler/icons-preact": "^3.34.0",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "preact": "^10.27.3",
     "preact-custom-element": "^4.3.0",
     "preact-router": "^4.1.2",
@@ -108,7 +109,7 @@
     "prettier": "^3.6.2",
     "rollup-plugin-visualizer": "^6.0.3",
     "typescript": "^5.8.3",
-    "vite": "^7.2.2",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-tsconfig-paths": "^1.4.1"
   },

package/dist/README.md

@@ -1,15 +0,0 @@
-# Instructions
-
-These components can be used to capture id document or liveness images
-
-1. [`smart-camera-web`](./components/smart-camera-web/src/)
-2. [`document-capture-screens`](./components/document/src/README.md)
-3. [`selfie-capture-screens`](./components/selfie/README.md)
-
-## Orchestration
-
-To build your own flow, we have several components that can be used together
-
-### document-capture-instructions
-
-This is the screen used to instruct the user how to capture document using both the camera and/or upload.

package/dist/components/README.md

@@ -1,14 +0,0 @@
-# Instructions
-
-These components can be used to capture id document or liveness images
-
-1. [`document-capture-screens`](./document/src/README.md)
-2. [`selfie-capture-screens`](./selfie/README.md)
-
-## Orchestration
-
-To build your own flow, we have several components that can be used together
-
-### document-capture-instructions
-
-This is the screen used to instruct the user how to capture document using both the camera and/or upload.