@metropolle/design-system 1.0.0-beta.2026.1.24.924.ea29e2a → 1.0.0-beta.2026.1.25.11.9200926

package/dist/css/components.css

@@ -3814,24 +3814,26 @@ html[data-theme="light"] .mds-profile-card__verified-trigger {
   right: calc(100% + 12px);
   transform: translateY(-50%);
   padding: 32px 40px;
-  /* Liquid Glass popup */
-  background: rgba(20, 20, 30, 0.9);
-  backdrop-filter: blur(24px) saturate(160%);
-  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  /* Liquid Glass popup - increased blur for better legibility */
+  background: rgba(20, 20, 30, 0.82);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
   border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow:
     0 16px 48px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
   min-width: 320px;
   z-index: 100;
 }
 
 html[data-theme="light"] .mds-profile-card__verified-popup {
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(255, 255, 255, 0.98);
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.95);
   box-shadow:
-    0 16px 48px rgba(0, 0, 0, 0.15),
+    0 16px 48px rgba(0, 0, 0, 0.12),
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
@@ -3896,6 +3898,60 @@ html[data-theme="light"] .mds-profile-card__verified-popup {
   color: #00d4aa;
 }
 
+/* FEAT-090: Verification Score Checks */
+.mds-profile-card__verified-checks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 16px 0;
+}
+
+.mds-profile-card__check-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.mds-profile-card__check-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: bold;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
+}
+
+.mds-profile-card__check-icon--passed {
+  background: rgba(0, 212, 170, 0.15);
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-profile-card__check-icon {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="light"] .mds-profile-card__check-icon--passed {
+  background: rgba(0, 180, 140, 0.15);
+  color: #00b48c;
+}
+
+.mds-profile-card__check-label {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+html[data-theme="light"] .mds-profile-card__check-label {
+  color: rgba(0, 0, 0, 0.7);
+}
+
 .mds-profile-card__verified-footer {
   display: flex;
   justify-content: space-between;
@@ -3987,6 +4043,16 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
     transform: none;
     justify-content: center;
     margin-top: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* Info dots: horizontal on mobile */
+  .mds-profile-card__info-dots {
+    flex-direction: row;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   .mds-profile-card__social {
@@ -4033,11 +4099,11 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
 .mds-profile-card__photo-modal {
   position: fixed;
   inset: 0;
-  z-index: 9999;
+  z-index: 99999; /* Higher z-index to cover everything including header */
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: 16px;
   cursor: pointer;
   animation: mds-photo-modal-fade-in 0.25s ease-out;
 }
@@ -4052,17 +4118,18 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
 }
 
 .mds-profile-card__photo-modal-backdrop {
-  position: absolute;
+  position: fixed;
   inset: 0;
-  background: rgba(10, 10, 15, 0.6);
-  backdrop-filter: blur(20px) saturate(120%);
-  -webkit-backdrop-filter: blur(20px) saturate(120%);
+  /* Stronger blur to cover entire page including header */
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(30px) saturate(100%);
+  -webkit-backdrop-filter: blur(30px) saturate(100%);
 }
 
 html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(20px) saturate(140%);
-  -webkit-backdrop-filter: blur(20px) saturate(140%);
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(30px) saturate(120%);
+  -webkit-backdrop-filter: blur(30px) saturate(120%);
 }
 
 .mds-profile-card__photo-modal-content {
@@ -4070,8 +4137,11 @@ html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Desktop: 90% of viewport */
   max-width: 90vw;
   max-height: 90vh;
+  width: auto;
+  height: auto;
   animation: mds-photo-modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -4087,25 +4157,518 @@ html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
 }
 
 .mds-profile-card__photo-modal-image {
-  max-width: 100%;
-  max-height: 90vh;
+  /* Fill available space while maintaining aspect ratio */
+  width: auto;
+  height: auto;
+  max-width: 90vw;
+  max-height: 85vh;
   -o-object-fit: contain;
      object-fit: contain;
-  border-radius: 20px;
+  border-radius: 16px;
   /* Liquid Glass frame */
   background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow:
-    0 25px 80px rgba(0, 0, 0, 0.4),
-    0 10px 30px rgba(0, 0, 0, 0.2),
+    0 25px 80px rgba(0, 0, 0, 0.5),
+    0 10px 30px rgba(0, 0, 0, 0.3),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 html[data-theme="light"] .mds-profile-card__photo-modal-image {
   background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(0, 0, 0, 0.1);
   box-shadow:
-    0 25px 80px rgba(0, 0, 0, 0.15),
-    0 10px 30px rgba(0, 0, 0, 0.08),
+    0 25px 80px rgba(0, 0, 0, 0.2),
+    0 10px 30px rgba(0, 0, 0, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
+
+/* Mobile: Photo expands to fill screen width */
+@media (max-width: 700px) {
+  .mds-profile-card__photo-modal {
+    padding: 12px;
+  }
+
+  .mds-profile-card__photo-modal-content {
+    max-width: 96vw;
+    max-height: 85vh;
+  }
+
+  .mds-profile-card__photo-modal-image {
+    max-width: 96vw;
+    max-height: 80vh;
+    border-radius: 12px;
+  }
+}
+
+/* =============================================================================
+   FEAT-090: Verification Score Components (Settings Page)
+   ============================================================================= */
+
+.mds-verification-score-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px 40px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="light"] .mds-verification-score-display {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.mds-verification-score-number {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 4rem;
+  font-weight: bold;
+  line-height: 1;
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-verification-score-number {
+  color: #00b48c;
+}
+
+.mds-verification-score-label {
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.mds-verification-checks-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mds-verification-check-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.2s ease;
+}
+
+html[data-theme="light"] .mds-verification-check-card {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.06);
+}
+
+.mds-verification-check-card--passed {
+  background: rgba(0, 212, 170, 0.05);
+  border-color: rgba(0, 212, 170, 0.2);
+}
+
+html[data-theme="light"] .mds-verification-check-card--passed {
+  background: rgba(0, 180, 140, 0.05);
+  border-color: rgba(0, 180, 140, 0.2);
+}
+
+.mds-verification-check-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 16px;
+  font-weight: bold;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
+}
+
+.mds-verification-check-card--passed .mds-verification-check-icon {
+  background: rgba(0, 212, 170, 0.15);
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-verification-check-icon {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="light"] .mds-verification-check-card--passed .mds-verification-check-icon {
+  background: rgba(0, 180, 140, 0.15);
+  color: #00b48c;
+}
+
+.mds-verification-check-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mds-verification-check-action {
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   FEAT-090: Verification Tab (Modal/Backoffice)
+   ============================================================================= */
+
+.mds-verification-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 8px 0;
+}
+
+.mds-verification-score-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(0, 212, 170, 0.05);
+  border: 1px solid rgba(0, 212, 170, 0.15);
+  border-radius: 12px;
+}
+
+.mds-verification-score-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 24px;
+  background: rgba(0, 212, 170, 0.1);
+  border-radius: 10px;
+}
+
+.mds-verification-score-badge .mds-verification-score-number {
+  display: block;
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 2.5rem;
+  font-weight: bold;
+  line-height: 1;
+  color: #00d4aa;
+  text-align: center;
+}
+
+.mds-verification-score-badge .mds-verification-score-label {
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+  text-align: center;
+  margin-top: 4px;
+}
+
+.mds-verification-score-info {
+  flex: 1;
+}
+
+.mds-verification-checks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-verification-check-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  transition: all 0.2s ease;
+}
+
+.mds-verification-check-item--passed {
+  background: rgba(0, 212, 170, 0.05);
+  border-color: rgba(0, 212, 170, 0.2);
+}
+
+.mds-verification-check-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
+}
+
+.mds-verification-check-item--passed .mds-verification-check-status {
+  background: rgba(0, 212, 170, 0.15);
+  color: #00d4aa;
+}
+
+.mds-verification-check-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mds-verification-check-item .mds-btn {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.mds-verification-check-item .mds-btn--sm {
+  padding: 6px 12px;
+  font-size: 0.75rem;
+}
+
+html[data-theme="light"] .mds-verification-score-header {
+  background: rgba(0, 180, 140, 0.05);
+  border-color: rgba(0, 180, 140, 0.15);
+}
+
+html[data-theme="light"] .mds-verification-score-badge {
+  background: rgba(0, 180, 140, 0.1);
+}
+
+html[data-theme="light"] .mds-verification-score-badge .mds-verification-score-number {
+  color: #00b48c;
+}
+
+html[data-theme="light"] .mds-verification-check-item {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.06);
+}
+
+html[data-theme="light"] .mds-verification-check-item--passed {
+  background: rgba(0, 180, 140, 0.05);
+  border-color: rgba(0, 180, 140, 0.15);
+}
+
+html[data-theme="light"] .mds-verification-check-status {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="light"] .mds-verification-check-item--passed .mds-verification-check-status {
+  background: rgba(0, 180, 140, 0.15);
+  color: #00b48c;
+}
+
+/* =============================================================================
+   FEAT-090: VerificationScoreCard Component (Unified)
+   Used by ProfileCard popup, @front settings, @back UserIdentityModal
+   ============================================================================= */
+
+/* Compact Popup Variant (ProfileCard) */
+.mds-verification-popup {
+  min-width: 200px;
+}
+
+.mds-verification-popup__header {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary, #fff);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="light"] .mds-verification-popup__header {
+  color: var(--mds-color-text-primary, #1f2937);
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.mds-verification-popup__checks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mds-verification-popup__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 0.75rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+html[data-theme="light"] .mds-verification-popup__footer {
+  border-top-color: rgba(0, 0, 0, 0.1);
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.mds-verification-popup__sequence,
+.mds-verification-popup__date {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+}
+
+/* Compact Check Item (for popup) */
+.mds-verification-check-item--compact {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.mds-verification-check-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.mds-verification-check-icon--passed {
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-verification-check-icon {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="light"] .mds-verification-check-icon--passed {
+  color: #00b48c;
+}
+
+.mds-verification-check-label {
+  font-size: 0.8125rem;
+  color: var(--mds-color-text-primary, #fff);
+}
+
+html[data-theme="light"] .mds-verification-check-label {
+  color: var(--mds-color-text-primary, #1f2937);
+}
+
+/* Full Card Variant */
+.mds-verification-card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.mds-verification-card__header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(0, 212, 170, 0.05);
+  border: 1px solid rgba(0, 212, 170, 0.15);
+  border-radius: 12px;
+}
+
+html[data-theme="light"] .mds-verification-card__header {
+  background: rgba(0, 180, 140, 0.05);
+  border-color: rgba(0, 180, 140, 0.15);
+}
+
+.mds-verification-card__badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 24px;
+  background: rgba(0, 212, 170, 0.1);
+  border-radius: 10px;
+}
+
+html[data-theme="light"] .mds-verification-card__badge {
+  background: rgba(0, 180, 140, 0.1);
+}
+
+.mds-verification-card__badge-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.mds-verification-card__badge-score {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 2.5rem;
+  font-weight: bold;
+  line-height: 1;
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-verification-card__badge-score {
+  color: #00b48c;
+}
+
+.mds-verification-card__title {
+  flex: 1;
+}
+
+.mds-verification-card__heading {
+  margin: 0 0 4px 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary, #fff);
+}
+
+html[data-theme="light"] .mds-verification-card__heading {
+  color: var(--mds-color-text-primary, #1f2937);
+}
+
+.mds-verification-card__subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+html[data-theme="light"] .mds-verification-card__subtitle {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.mds-verification-card__error {
+  padding: 12px 16px;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  border-radius: 8px;
+  color: #ef4444;
+  font-size: 0.875rem;
+}
+
+.mds-verification-card__checks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-verification-check-description {
+  display: block;
+  font-size: 0.9375rem;
+  color: var(--mds-color-text-primary, #fff);
+}
+
+html[data-theme="light"] .mds-verification-check-description {
+  color: var(--mds-color-text-primary, #1f2937);
+}
+
+.mds-verification-check-points {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+  margin-top: 2px;
+}
+
+html[data-theme="light"] .mds-verification-check-points {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.mds-verification-card__info {
+  margin: 0;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+html[data-theme="light"] .mds-verification-card__info {
+  background: rgba(0, 0, 0, 0.02);
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}

package/dist/react/components/react/ProfileCard/ProfileCard.d.ts

@@ -6,6 +6,7 @@
  * @package @metropolle/design-system
  */
 import React from 'react';
+import { VerificationCheck } from '../VerificationScore';
 export interface ProfileCardUser {
     identity_id: string;
     full_name: string;
@@ -26,6 +27,14 @@ export interface ProfileCardUser {
     photo_url_full?: string;
     registration_sequence?: number;
     mfa_enabled?: boolean;
+    verification_score?: VerificationScore;
+}
+export type { VerificationCheck } from '../VerificationScore';
+export interface VerificationScore {
+    score: number;
+    max_score: number;
+    breakdown: Record<string, boolean>;
+    checks: VerificationCheck[];
 }
 export interface ProfileCardProps {
     /** User data to display */