@simprints/simface-sdk 0.10.1 → 0.12.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,70 +88,138 @@ if (result.match) {
 }
 ```
 
-### 5. Customize capture behavior
+### 5. Choose the capture UI mode
 
-Both `enroll()` and `verify()` accept an optional third argument to control how the camera capture UI is presented. Define the options once and pass them to either call:
+`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.
 
-```javascript
-const captureOptions = {
-  // 'popup' (default) opens a fullscreen modal dialog.
-  // 'embedded' renders the capture component inline in a host container.
-  presentation: 'popup',
+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
 
-  // 'auto-preferred' (default) uses automatic face-framing capture when supported,
-  // falling back to manual shutter. 'manual-only' always shows a manual shutter button.
-  capturePreference: 'auto-preferred',
+#### Popup capture
+
+If you omit `captureElement`, the SDK opens its popup capture UI:
 
-  // When true (default), falls back to the device media/file picker if camera access
-  // is unavailable (e.g. denied permissions, or WhatsApp in-app browser).
+```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);
+```
+
+#### Embedded capture
+
+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.
 
-  // Only used when presentation is 'embedded'. Specifies the host container element
-  // (CSS selector string or HTMLElement). Ignored for 'popup' mode.
-  container: '#capture-slot',
+```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>
+```
 
-  // Optional UI label overrides (apply to both popup and embedded).
-  label: 'Take a selfie for verification',
-  confirmLabel: 'Use this photo',
+```javascript
+const workflowOptions = {
+  capturePreference: 'auto-preferred',
+  allowMediaPickerFallback: true,
 };
 
-const enrollResult = await enroll(config, 'unique-user-id', captureOptions);
-const verifyResult = await verify(config, 'unique-user-id', captureOptions);
+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);
 ```
 
-| Option | Type | Default | Notes |
+| workflowOptions | Type | Default | Notes |
 |--------|------|---------|-------|
-| `presentation` | `'popup' \| 'embedded'` | `'popup'` | Popup opens a fullscreen modal; embedded renders inline |
 | `capturePreference` | `'auto-preferred' \| 'manual-only'` | `'auto-preferred'` | Controls auto vs manual shutter |
 | `allowMediaPickerFallback` | `boolean` | `true` | Falls back to file picker if camera is unavailable |
-| `container` | `HTMLElement \| string` | — | Required for embedded via top-level helpers; ignored for popup |
-| `label` | `string` | `'Capturing Face'` | Instructional text shown during capture |
-| `confirmLabel` | `string` | `'Accept'` | Confirm button label in preview state |
 
-## Try the local demo
+## API Reference
 
-Build the SDK at the repository root, then run the demo:
+### Primary SDK API
 
-```bash
-npm install
-npm run build
+The main integration surface is:
+- `enroll(config, clientId, workflowOptions?, captureElement?)`
+- `verify(config, clientId, workflowOptions?, captureElement?)`
 
-cd demo
-npm install
-npm run dev
-```
+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
 
-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.
+### `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>`
 
-## Web Component
+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`
 
-For more control over the UI, use the `<simface-capture>` Web Component directly:
+### `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.
+
+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
+
+At a high level:
+- `enroll()` and `verify()` = capture UI + quality checks + backend submission
+- `SimFaceAPIClient` = backend submission only
+
+`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">
@@ -165,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 | `"Capturing Face"` | 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 |
+| `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 |
 
@@ -186,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;
@@ -210,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;
@@ -233,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:
@@ -283,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 |
@@ -305,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, DEFAULT_LABEL, DEFAULT_CONFIRM_LABEL, } 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';
 /**
@@ -23,14 +23,18 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
     constructor() {
         super(...arguments);
         this.label = DEFAULT_LABEL;
+        this.idleFeedbackLabel = DEFAULT_IDLE_FEEDBACK_LABEL;
         this.embedded = false;
         this.active = false;
         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;
@@ -90,9 +99,8 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
             : ''}
 
       <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
@@ -127,13 +135,13 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         ${this.captureState === 'live'
             ? html `
               ${this.captureMode === 'manual'
-                ? html `<button class="btn btn-primary" 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>`
                 : ''}
             `
             : ''}
         ${this.captureState === 'preview'
             ? html `
-              <button class="btn btn-retake" 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-confirm" data-simface-action="confirm" @click=${this.handleConfirm}>${this.confirmLabel}</button>`}
@@ -141,7 +149,7 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
             : ''}
         ${this.captureState === 'error'
             ? html `
-              <button class="btn btn-primary" data-simface-action="retry" @click=${this.beginCapture}>Try again</button>
+              <button class="btn btn-primary" data-simface-action="retry" @click=${this.beginCapture}>${this.retryLabel}</button>
             `
             : ''}
       </div>
@@ -157,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,
         });
@@ -328,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;
@@ -393,7 +404,8 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
 SimFaceCapture.styles = css `
     :host {
       display: block;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: #212529;
       max-width: 400px;
       margin: 0 auto;
       text-align: center;
@@ -408,9 +420,9 @@ SimFaceCapture.styles = css `
     .container {
       position: relative;
       padding: 16px;
-      border: 1px solid #e0e0e0;
+      border: 1px solid #E0E0E0;
       border-radius: 16px;
-      background: #fafafa;
+      background: #F6F6F6;
     }
 
     .close-btn {
@@ -427,7 +439,7 @@ SimFaceCapture.styles = css `
       border: none;
       border-radius: 50%;
       background: rgba(0, 0, 0, 0.06);
-      color: #49454f;
+      color: #5D5E5E;
       cursor: pointer;
       transition: background-color 0.15s;
     }
@@ -450,7 +462,7 @@ SimFaceCapture.styles = css `
 
     .capture-copy {
       margin: 0;
-      color: #334155;
+      color: #5D5E5E;
       text-align: center;
       width: 100%;
     }
@@ -462,8 +474,8 @@ SimFaceCapture.styles = css `
       aspect-ratio: 3 / 4;
       border-radius: 22px;
       background:
-        radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 30%),
-        linear-gradient(180deg, #0f172a, #020617);
+        radial-gradient(circle at top, rgba(0, 179, 209, 0.16), transparent 30%),
+        linear-gradient(180deg, #1a1a1a, #0d0d0d);
       box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
     }
 
@@ -495,7 +507,7 @@ SimFaceCapture.styles = css `
     }
 
     .guide-mask {
-      fill: rgba(51, 65, 85, 0.75);
+      fill: rgba(42, 42, 42, 0.75);
       fill-rule: evenodd;
     }
 
@@ -509,7 +521,7 @@ SimFaceCapture.styles = css `
 
     .ring-progress {
       fill: none;
-      stroke: #22c55e;
+      stroke: #00B3D1;
       stroke-width: 2.8;
       stroke-linecap: round;
       stroke-linejoin: round;
@@ -533,24 +545,25 @@ SimFaceCapture.styles = css `
       border: none;
       border-radius: 100px;
       font-size: 15px;
-      font-weight: 600;
-      letter-spacing: 0.02em;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: var(--simface-button-text-transform, uppercase);
       cursor: pointer;
       transition: background-color 0.15s, box-shadow 0.15s;
     }
 
     .btn-primary {
-      background: #2563eb;
+      background: #00B3D1;
       color: white;
     }
 
     .btn-primary:hover {
-      background: #1d4ed8;
-      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
+      background: #009DB8;
+      box-shadow: 0 1px 3px rgba(0, 179, 209, 0.3);
     }
 
     .btn-primary:disabled {
-      background: #93c5fd;
+      background: #80D9E8;
       cursor: not-allowed;
       box-shadow: none;
     }
@@ -576,12 +589,12 @@ SimFaceCapture.styles = css `
     }
 
     .btn-secondary {
-      background: #e5e7eb;
-      color: #374151;
+      background: #E0E0E0;
+      color: #212529;
     }
 
     .btn-secondary:hover {
-      background: #d1d5db;
+      background: #D0D0D0;
     }
 
     .quality-msg {
@@ -608,21 +621,21 @@ SimFaceCapture.styles = css `
     }
 
     .quality-neutral {
-      background: #e2e8f0;
-      color: #0f172a;
+      background: #E0E0E0;
+      color: #212529;
     }
 
     .quality-manual {
-      background: #e0f2fe;
-      color: #0f172a;
+      background: #E0F7FB;
+      color: #212529;
     }
 
     .spinner {
       display: inline-block;
       width: 24px;
       height: 24px;
-      border: 3px solid #e5e7eb;
-      border-top: 3px solid #2563eb;
+      border: 3px solid #E0E0E0;
+      border-top: 3px solid #00B3D1;
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
       margin: 12px auto;
@@ -641,6 +654,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);
@@ -650,6 +666,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);