@simprints/simface-sdk 0.9.1 → 0.11.1

package/README.md

@@ -1,6 +1,6 @@
 # SimFace SDK
 
-SimFace SDK provides facial recognition for web-based KYC workflows. It is a drop-in Web Component and JavaScript API that handles camera capture, face quality validation, and communication with the SimFace backend.
+SimFace SDK provides facial recognition for web-based KYC workflows. It exposes one primary JavaScript API for enrollment and verification, plus a lower-level Web Component for advanced UI control.
 
 Works in: all modern browsers, WhatsApp in-app browser, and mobile WebViews.
 
@@ -8,7 +8,20 @@ This repository is the public frontend SDK and demo repo for SimFace. For fronte
 
 The backend API, infrastructure, and TensorFlow Lite runtime live in the separate private backend repository.
 
-The capture flow is planned explicitly as: auto camera -> manual camera -> media picker. Hosts can keep the default popup experience or opt into embedded capture with the same fallback policy.
+The capture flow is planned explicitly as: auto camera -> manual camera -> media picker. The primary API supports two UI modes:
+- popup capture: the SDK opens and manages its own modal capture flow
+- embedded capture: the SDK runs capture inside a host-provided `simface-capture` element
+
+## Face Quality Checks
+
+The SDK automatically performs these checks on captured images before submission:
+
+1. Face presence - at least one face must be detected.
+2. Single face - only one face should be in the frame.
+3. Face size - face must not be too close or too far.
+4. Centering - face must be approximately centered in the frame.
+
+If a check fails, the user is prompted with specific guidance and asked to retake the photo.
 
 ## Quick Start
 
@@ -75,55 +88,138 @@ if (result.match) {
 }
 ```
 
-## Try the local demo
+### 5. Choose the capture UI mode
 
-Build the SDK at the repository root, then run the demo:
+`enroll()` and `verify()` are the main SDK entry points. They both use the same capture workflow and backend API. The only UI difference is where the capture UI is rendered.
 
-```bash
-npm install
-npm run build
+Both functions accept:
+- `workflowOptions`: optional capture behavior that applies to both popup and embedded flows
+- `captureElement`: optional existing `simface-capture` element; if this argument is present, the SDK uses embedded mode
 
-cd demo
-npm install
-npm run dev
+#### Popup capture
+
+If you omit `captureElement`, the SDK opens its popup capture UI:
+
+```javascript
+const workflowOptions = {
+  capturePreference: 'auto-preferred',
+  allowMediaPickerFallback: true,
+};
+
+const enrollResult = await enroll(config, 'unique-user-id', workflowOptions);
+const verifyResult = await verify(config, 'unique-user-id', workflowOptions);
 ```
 
-The demo runs at `http://localhost:4173` and consumes the built SDK artifact from `dist/`. To enable HTTPS (required for camera access from other devices on the local network), set `DEMO_USE_HTTPS=true` before starting the demo.
+#### Embedded capture
 
-## Capture strategy
+If you want capture inline in your page, create a `simface-capture` element and pass it as `captureElement`. The SDK still owns the capture lifecycle; it just renders the UI inline instead of in a popup.
 
-The top-level SDK helpers accept an optional third `captureOptions` argument so the host can choose popup vs embedded capture and tune the fallback chain:
+```html
+<simface-capture
+  embedded
+  capture-preference="auto-preferred"
+  label="Take a selfie for verification"
+  idle-feedback-label="Start verification to see camera guidance here."
+  capture-label="Snap photo"
+  retake-label="Take another"
+  confirm-label="Use this photo"
+  retry-label="Start over"
+></simface-capture>
+```
 
 ```javascript
-import { enroll } from '@simprints/simface-sdk';
-
-const result = await enroll(config, 'unique-user-id', {
-  presentation: 'embedded',
-  container: '#capture-slot',
+const workflowOptions = {
   capturePreference: 'auto-preferred',
   allowMediaPickerFallback: true,
-  label: 'Capture a face for enrollment',
-  confirmLabel: 'Confirm enrollment capture',
-});
+};
+
+const captureElement = document.querySelector('simface-capture');
+
+const enrollResult = await enroll(config, 'unique-user-id', workflowOptions, captureElement);
+const verifyResult = await verify(config, 'unique-user-id', workflowOptions, captureElement);
 ```
 
-Supported capture planning options:
+| workflowOptions | Type | Default | Notes |
+|--------|------|---------|-------|
+| `capturePreference` | `'auto-preferred' \| 'manual-only'` | `'auto-preferred'` | Controls auto vs manual shutter |
+| `allowMediaPickerFallback` | `boolean` | `true` | Falls back to file picker if camera is unavailable |
+
+## API Reference
+
+### Primary SDK API
+
+The main integration surface is:
+- `enroll(config, clientId, workflowOptions?, captureElement?)`
+- `verify(config, clientId, workflowOptions?, captureElement?)`
+
+These functions:
+- run the camera capture workflow
+- manage popup or embedded capture UI
+- perform face quality validation
+- call the backend API for enrollment or verification
+
+### `enroll(config, clientId, workflowOptions?, captureElement?): Promise<EnrollResult>`
+
+Opens the camera, captures a face image with quality validation, and enrolls the user.
+
+Parameters:
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `config` | `SimFaceConfig` | SDK configuration (`apiUrl`, `projectId`, `apiKey`) |
+| `clientId` | `string` | Unique identifier for the user |
+| `workflowOptions` | `SimFaceWorkflowOptions` | Optional popup/embedded-agnostic capture behavior |
+| `captureElement` | `SimFaceCaptureElement` | Optional embedded `simface-capture` element |
+
+Returns: `EnrollResult`
+
+### `verify(config, clientId, workflowOptions?, captureElement?): Promise<VerifyResult>`
+
+Opens the camera, captures a face image, and verifies against the enrolled face.
+
+Parameters:
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `config` | `SimFaceConfig` | SDK configuration (`apiUrl`, `projectId`, `apiKey`) |
+| `clientId` | `string` | Unique identifier for the user |
+| `workflowOptions` | `SimFaceWorkflowOptions` | Optional popup/embedded-agnostic capture behavior |
+| `captureElement` | `SimFaceCaptureElement` | Optional embedded `simface-capture` element |
+
+Returns: `VerifyResult`
+
+### `SimFaceAPIClient` and the backend REST interface
+
+`SimFaceAPIClient` is the lower-level HTTP client used internally by `enroll()` and `verify()`. Use it when you want direct control over when capture happens and when backend calls are made.
 
-- `presentation: 'popup' | 'embedded'`
-- `capturePreference: 'auto-preferred' | 'manual-only'`
-- `allowMediaPickerFallback: boolean`
-- `container: HTMLElement | string` (required for top-level embedded capture)
-- `label` / `confirmLabel`
+Typical cases for using `SimFaceAPIClient` directly:
+- advanced UI flows driven by your own application state
+- direct use of the `simface-capture` component
+- custom orchestration where capture and backend submission happen in separate steps
 
-## Web Component
+At a high level:
+- `enroll()` and `verify()` = capture UI + quality checks + backend submission
+- `SimFaceAPIClient` = backend submission only
 
-For more control over the UI, use the `<simface-capture>` Web Component directly:
+`SimFaceAPIClient` maps directly to the backend REST interface:
+- `validateAPIKey()` -> `POST /api/v1/auth/validate`
+- `enroll(clientId, imageBlob)` -> `POST /api/v1/enroll`
+- `verify(clientId, imageBlob)` -> `POST /api/v1/verify`
+
+## Advanced: Direct `simface-capture` control
+
+Use the `simface-capture` Web Component directly when you want the host application to manage capture state itself instead of letting `enroll()` or `verify()` orchestrate it. In this mode, the component is also the source of truth for embedded UI copy.
 
 ```html
 <simface-capture
   embedded
   capture-preference="auto-preferred"
   label="Take a selfie for verification"
+  idle-feedback-label="Start verification to see camera guidance here."
+  capture-label="Snap photo"
+  retake-label="Take another"
+  confirm-label="Use this photo"
+  retry-label="Start over"
 ></simface-capture>
 
 <script type="module">
@@ -150,16 +246,30 @@ For more control over the UI, use the `<simface-capture>` Web Component directly
   captureEl.addEventListener('simface-error', (e) => {
     console.error('Capture error:', e.detail.error);
   });
+
+  await captureEl.startCapture();
 </script>
 ```
 
+In this advanced flow:
+1. the host renders the component
+2. the host starts capture with `startCapture()` or by setting `active = true`
+3. the component emits capture events
+4. the host decides what backend call to make with `SimFaceAPIClient`
+
+This is more flexible, but it also means the host owns more of the workflow.
+
 ### Component Attributes
 
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
-| `label` | String | `"Take a selfie"` | Instructional text shown on the capture button |
+| `label` | String | `"Capturing Face"` | Primary instructional text shown by the component |
+| `idle-feedback-label` | String | `"Start a capture to see camera guidance here."` | Idle guidance text shown in the feedback area before capture begins |
 | `embedded` | Boolean | `false` | Runs the component inline instead of delegating to the popup capture service |
-| `confirm-label` | String | `"Use this capture"` | Confirm button label used in preview state |
+| `capture-label` | String | `"Take photo"` | Manual capture button label |
+| `retake-label` | String | `"Retake"` | Preview retake button label |
+| `confirm-label` | String | `"Accept"` | Confirm button label used in preview state |
+| `retry-label` | String | `"Try again"` | Error-state retry button label |
 | `capture-preference` | `"auto-preferred" \| "manual-only"` | `"auto-preferred"` | Whether auto capture should be preferred or disabled |
 | `allow-media-picker-fallback` | Boolean | `true` | Whether the component may fall back to the media picker if camera capture is unavailable |
 
@@ -171,23 +281,31 @@ For more control over the UI, use the `<simface-capture>` Web Component directly
 | `simface-cancelled` | - | Fires when the user cancels the capture flow |
 | `simface-error` | `{ error: string }` | Fires on capture/detection errors |
 
-## API Reference
+## Type Definitions
 
-### `enroll(config, clientId, captureOptions?): Promise<EnrollResult>`
+### `SimFaceConfig`
 
-Opens the camera, captures a face image with quality validation, and enrolls the user.
+```typescript
+interface SimFaceConfig {
+  apiUrl: string;
+  projectId: string;
+  apiKey: string;
+}
+```
 
-Parameters:
+### `SimFaceWorkflowOptions`
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `config` | `SimFaceConfig` | SDK configuration (`apiUrl`, `projectId`, `apiKey`) |
-| `clientId` | `string` | Unique identifier for the user |
-| `captureOptions` | `SimFaceCaptureOptions` | Optional capture presentation/fallback overrides |
+```typescript
+interface SimFaceWorkflowOptions {
+  capturePreference?: 'auto-preferred' | 'manual-only';
+  allowMediaPickerFallback?: boolean;
+}
+```
+
+### `EnrollResult`
 
-Returns `EnrollResult`:
 ```typescript
-{
+interface EnrollResult {
   success: boolean;
   clientId: string;
   message?: string;
@@ -195,21 +313,10 @@ Returns `EnrollResult`:
 }
 ```
 
-### `verify(config, clientId, captureOptions?): Promise<VerifyResult>`
-
-Opens the camera, captures a face image, and verifies against the enrolled face.
-
-Parameters:
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `config` | `SimFaceConfig` | SDK configuration (`apiUrl`, `projectId`, `apiKey`) |
-| `clientId` | `string` | Unique identifier for the user |
-| `captureOptions` | `SimFaceCaptureOptions` | Optional capture presentation/fallback overrides |
+### `VerifyResult`
 
-Returns `VerifyResult`:
 ```typescript
-{
+interface VerifyResult {
   match: boolean;
   score: number;
   threshold: number;
@@ -218,29 +325,6 @@ Returns `VerifyResult`:
 }
 ```
 
-### `SimFaceConfig`
-
-```typescript
-{
-  apiUrl: string;
-  projectId: string;
-  apiKey: string;
-}
-```
-
-### `SimFaceCaptureOptions`
-
-```typescript
-{
-  presentation?: 'popup' | 'embedded';
-  capturePreference?: 'auto-preferred' | 'manual-only';
-  allowMediaPickerFallback?: boolean;
-  container?: HTMLElement | string;
-  label?: string;
-  confirmLabel?: string;
-}
-```
-
 ## Backend API Endpoints
 
 For clients integrating directly with the REST API:
@@ -268,17 +352,6 @@ Health check endpoint.
 
 Response: `{ "status": "ok" }`
 
-## Face Quality Checks
-
-The SDK automatically performs these checks on captured images before submission:
-
-1. Face presence - at least one face must be detected.
-2. Single face - only one face should be in the frame.
-3. Face size - face must not be too close or too far.
-4. Centering - face must be approximately centered in the frame.
-
-If a check fails, the user is prompted with specific guidance and asked to retake the photo.
-
 ## Browser Compatibility
 
 | Browser | Camera Capture | Face Detection |
@@ -290,3 +363,18 @@ If a check fails, the user is prompted with specific guidance and asked to retak
 | Samsung Internet | Yes | Yes |
 
 > Note: In WhatsApp's in-app browser, the camera opens via the device's native camera app rather than an in-browser preview. Face quality checks run after the photo is taken.
+
+## Try the local demo
+
+Build the SDK at the repository root, then run the demo:
+
+```bash
+npm install
+npm run build
+
+cd demo
+npm install
+npm run dev
+```
+
+The demo runs at `http://localhost:4173` and consumes the built SDK artifact from `dist/`. To enable HTTPS (required for camera access from other devices on the local network), set `DEMO_USE_HTTPS=true` before starting the demo.

package/dist/components/simface-capture.d.ts

@@ -10,9 +10,13 @@ import type { CapturePreference } from '../types/index.js';
  */
 export declare class SimFaceCapture extends LitElement {
     label: string;
+    idleFeedbackLabel: string;
     embedded: boolean;
     active: boolean;
     confirmLabel: string;
+    captureLabel: string;
+    retakeLabel: string;
+    retryLabel: string;
     capturePreference: CapturePreference;
     allowMediaPickerFallback: boolean;
     private captureState;
@@ -31,6 +35,7 @@ export declare class SimFaceCapture extends LitElement {
     private pendingActiveSync;
     static styles: import("lit").CSSResult;
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
     updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     startCapture(): Promise<void>;

package/dist/components/simface-capture.js

@@ -8,7 +8,7 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { assessFaceQuality } from '../services/face-detection.js';
 import { CAPTURE_GUIDE_MASK_PATH, CAPTURE_GUIDE_PATH, } from '../shared/auto-capture.js';
-import { buildCapturePlan, normalizeCaptureOptions, resolveCaptureCapabilities, } from '../shared/capture-flow.js';
+import { buildCapturePlan, normalizeCaptureOptions, resolveCaptureCapabilities, DEFAULT_CAPTURE_LABEL, DEFAULT_IDLE_FEEDBACK_LABEL, DEFAULT_LABEL, DEFAULT_CONFIRM_LABEL, DEFAULT_RETAKE_LABEL, DEFAULT_RETRY_LABEL, } from '../shared/capture-flow.js';
 import { CameraCaptureSessionController, } from '../shared/capture-session.js';
 import { CameraAccessError, blobToImage, captureFromFileInput, openUserFacingCameraStream, } from '../shared/capture-runtime.js';
 /**
@@ -22,15 +22,19 @@ import { CameraAccessError, blobToImage, captureFromFileInput, openUserFacingCam
 let SimFaceCapture = class SimFaceCapture extends LitElement {
     constructor() {
         super(...arguments);
-        this.label = 'Take a selfie';
+        this.label = DEFAULT_LABEL;
+        this.idleFeedbackLabel = DEFAULT_IDLE_FEEDBACK_LABEL;
         this.embedded = false;
         this.active = false;
-        this.confirmLabel = 'Use this capture';
+        this.confirmLabel = DEFAULT_CONFIRM_LABEL;
+        this.captureLabel = DEFAULT_CAPTURE_LABEL;
+        this.retakeLabel = DEFAULT_RETAKE_LABEL;
+        this.retryLabel = DEFAULT_RETRY_LABEL;
         this.capturePreference = 'auto-preferred';
         this.allowMediaPickerFallback = true;
         this.captureState = 'idle';
         this.errorMessage = '';
-        this.feedbackMessage = 'Start a capture to see camera guidance here.';
+        this.feedbackMessage = DEFAULT_IDLE_FEEDBACK_LABEL;
         this.feedbackTone = 'neutral';
         this.previewUrl = '';
         this.qualityResult = null;
@@ -46,6 +50,11 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         super.disconnectedCallback();
         this.stopSession();
     }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('idleFeedbackLabel') && this.captureState === 'idle') {
+            this.feedbackMessage = this.idleFeedbackLabel;
+        }
+    }
     updated(changedProperties) {
         if (!changedProperties.has('active') || this.pendingActiveSync) {
             return;
@@ -78,11 +87,20 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         await this.beginCapture();
     }
     renderCaptureState() {
+        const showClose = this.captureState !== 'idle';
         return html `
-      <p class="capture-copy">${this.label}</p>
+      ${showClose
+            ? html `<button class="close-btn" data-simface-action="cancel" @click=${this.handleCancel} aria-label="Close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>`
+            : ''}
 
+      <p class="capture-copy">${this.label}</p>
       ${this.captureState === 'idle'
-            ? html `<p class="capture-copy">Waiting for the host page to start capture.</p>`
+            ? ''
             : html `
             <div class="stage">
               <video
@@ -117,24 +135,21 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         ${this.captureState === 'live'
             ? html `
               ${this.captureMode === 'manual'
-                ? html `<button class="btn btn-secondary" data-simface-action="capture" ?disabled=${!this.canTakePhoto} @click=${this.handleManualCapture}>Take photo</button>`
+                ? html `<button class="btn btn-primary" data-simface-action="capture" ?disabled=${!this.canTakePhoto} @click=${this.handleManualCapture}>${this.captureLabel}</button>`
                 : ''}
-              <button class="btn btn-ghost" data-simface-action="cancel" @click=${this.handleCancel}>Cancel</button>
             `
             : ''}
         ${this.captureState === 'preview'
             ? html `
-              <button class="btn btn-secondary" data-simface-action="retake" @click=${this.handleRetake}>Retake</button>
+              <button class="btn btn-retake" data-simface-action="retake" @click=${this.handleRetake}>${this.retakeLabel}</button>
               ${this.qualityResult?.passesQualityChecks === false
                 ? ''
-                : html `<button class="btn btn-primary" data-simface-action="confirm" @click=${this.handleConfirm}>${this.confirmLabel}</button>`}
-              <button class="btn btn-ghost" data-simface-action="cancel" @click=${this.handleCancel}>Cancel</button>
+                : html `<button class="btn btn-confirm" data-simface-action="confirm" @click=${this.handleConfirm}>${this.confirmLabel}</button>`}
             `
             : ''}
         ${this.captureState === 'error'
             ? html `
-              <button class="btn btn-primary" data-simface-action="retry" @click=${this.beginCapture}>Try again</button>
-              <button class="btn btn-ghost" data-simface-action="cancel" @click=${this.handleCancel}>Cancel</button>
+              <button class="btn btn-primary" data-simface-action="retry" @click=${this.beginCapture}>${this.retryLabel}</button>
             `
             : ''}
       </div>
@@ -150,12 +165,15 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         this.feedbackMessage = 'Requesting camera access...';
         this.feedbackTone = 'neutral';
         const options = normalizeCaptureOptions({
-            presentation: 'embedded',
             capturePreference: this.capturePreference,
             allowMediaPickerFallback: this.allowMediaPickerFallback,
-            label: this.label,
-            confirmLabel: this.confirmLabel,
-        });
+        }, this);
+        options.label = this.label;
+        options.idleFeedbackLabel = this.idleFeedbackLabel;
+        options.confirmLabel = this.confirmLabel;
+        options.captureLabel = this.captureLabel;
+        options.retakeLabel = this.retakeLabel;
+        options.retryLabel = this.retryLabel;
         const capabilities = await resolveCaptureCapabilities({
             capturePreference: options.capturePreference,
         });
@@ -321,7 +339,7 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         this.clearPreviewUrl();
         this.captureState = 'idle';
         this.errorMessage = '';
-        this.feedbackMessage = 'Start a capture to see camera guidance here.';
+        this.feedbackMessage = this.idleFeedbackLabel;
         this.feedbackTone = 'neutral';
         this.syncProgress(0);
         this.qualityResult = null;
@@ -396,25 +414,56 @@ SimFaceCapture.styles = css `
     :host([embedded]) {
       max-width: none;
       margin: 0;
-      text-align: left;
     }
 
     .container {
+      position: relative;
       padding: 16px;
       border: 1px solid #e0e0e0;
-      border-radius: 12px;
+      border-radius: 16px;
       background: #fafafa;
     }
 
+    .close-btn {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      z-index: 10;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border: none;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.06);
+      color: #49454f;
+      cursor: pointer;
+      transition: background-color 0.15s;
+    }
+
+    .close-btn:hover {
+      background: rgba(0, 0, 0, 0.12);
+    }
+
+    .close-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
     .capture-shell {
       display: flex;
       flex-direction: column;
+      align-items: center;
       gap: 16px;
     }
 
     .capture-copy {
       margin: 0;
       color: #334155;
+      text-align: center;
+      width: 100%;
     }
 
     .stage {
@@ -427,7 +476,6 @@ SimFaceCapture.styles = css `
         radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 30%),
         linear-gradient(180deg, #0f172a, #020617);
       box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
-      align-self: center;
     }
 
     .video,
@@ -483,22 +531,23 @@ SimFaceCapture.styles = css `
 
     .btn-row {
       display: flex;
-      flex-wrap: wrap;
       gap: 12px;
+      width: min(100%, 420px);
     }
 
     .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      padding: 12px 24px;
-      margin: 8px 4px 0 0;
+      flex: 1;
+      padding: 14px 24px;
       border: none;
-      border-radius: 999px;
-      font-size: 16px;
+      border-radius: 100px;
+      font-size: 15px;
       font-weight: 600;
+      letter-spacing: 0.02em;
       cursor: pointer;
-      transition: background-color 0.2s;
+      transition: background-color 0.15s, box-shadow 0.15s;
     }
 
     .btn-primary {
@@ -508,11 +557,33 @@ SimFaceCapture.styles = css `
 
     .btn-primary:hover {
       background: #1d4ed8;
+      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
     }
 
     .btn-primary:disabled {
       background: #93c5fd;
       cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    .btn-confirm {
+      background: #16a34a;
+      color: white;
+    }
+
+    .btn-confirm:hover {
+      background: #15803d;
+      box-shadow: 0 1px 3px rgba(22, 163, 74, 0.3);
+    }
+
+    .btn-retake {
+      background: #dc2626;
+      color: white;
+    }
+
+    .btn-retake:hover {
+      background: #b91c1c;
+      box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
     }
 
     .btn-secondary {
@@ -524,17 +595,17 @@ SimFaceCapture.styles = css `
       background: #d1d5db;
     }
 
-    .btn-ghost {
-      background: #e2e8f0;
-      color: #0f172a;
-    }
-
     .quality-msg {
       padding: 10px 14px;
       border-radius: 14px;
-      margin: 8px 0 0;
       font-size: 14px;
       font-weight: 600;
+      width: min(100%, 420px);
+      min-height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
     }
 
     .quality-good {
@@ -581,6 +652,9 @@ SimFaceCapture.styles = css `
 __decorate([
     property({ type: String })
 ], SimFaceCapture.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'idle-feedback-label' })
+], SimFaceCapture.prototype, "idleFeedbackLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SimFaceCapture.prototype, "embedded", void 0);
@@ -590,6 +664,15 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'confirm-label' })
 ], SimFaceCapture.prototype, "confirmLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'capture-label' })
+], SimFaceCapture.prototype, "captureLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'retake-label' })
+], SimFaceCapture.prototype, "retakeLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'retry-label' })
+], SimFaceCapture.prototype, "retryLabel", void 0);
 __decorate([
     property({ type: String, attribute: 'capture-preference' })
 ], SimFaceCapture.prototype, "capturePreference", void 0);