@metropolle/design-system 1.2026.0-1.22.2325 → 1.2026.0-1.24.927

package/dist/css/components.css

@@ -3808,65 +3808,85 @@ html[data-theme="light"] .mds-profile-card__verified-trigger {
 }
 
 .mds-profile-card__verified-popup {
+  /* Position to the LEFT of the trigger icon */
   position: absolute;
-  top: calc(100% + 12px);
-  right: 0;
-  padding: 16px;
+  top: 50%;
+  right: calc(100% + 12px);
+  transform: translateY(-50%);
+  padding: 32px 40px;
   /* Liquid Glass popup */
-  background: rgba(20, 20, 30, 0.75);
-  backdrop-filter: blur(16px) saturate(140%);
-  -webkit-backdrop-filter: blur(16px) saturate(140%);
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(20, 20, 30, 0.9);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.25),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  min-width: 180px;
-  z-index: 20;
+    0 16px 48px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  min-width: 320px;
+  z-index: 100;
 }
 
 html[data-theme="light"] .mds-profile-card__verified-popup {
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.98);
   box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.08),
+    0 16px 48px rgba(0, 0, 0, 0.15),
     inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
+/* Mobile: popup centered on screen */
+@media (max-width: 768px) {
+  .mds-profile-card__verified-popup {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    right: 0;
+    bottom: auto;
+    transform: translateY(-50%);
+    width: 280px;
+    min-width: auto;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 24px 28px;
+    z-index: 1000;
+  }
+}
+
 .mds-profile-card__verified-header {
   font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
-  font-size: 12px;
+  font-size: 16px;
   font-weight: bold;
   color: #00d4aa;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  margin-bottom: 14px;
+  margin-bottom: 20px;
   white-space: nowrap;
 }
 
 .mds-profile-card__verified-stats {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 14px;
 }
 
 .mds-profile-card__stat-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 20px;
+  gap: 32px;
 }
 
 .mds-profile-card__stat-label {
   font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
-  font-size: 11px;
+  font-size: 14px;
   color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
   letter-spacing: 0.06em;
 }
 
 .mds-profile-card__stat-value {
   font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
-  font-size: 11px;
+  font-size: 14px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
@@ -3880,8 +3900,8 @@ html[data-theme="light"] .mds-profile-card__verified-popup {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 14px;
-  padding-top: 10px;
+  margin-top: 20px;
+  padding-top: 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
@@ -3892,7 +3912,7 @@ html[data-theme="light"] .mds-profile-card__verified-footer {
 .mds-profile-card__verified-sequence,
 .mds-profile-card__verified-date {
   font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
-  font-size: 10px;
+  font-size: 12px;
   color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
   letter-spacing: 0.06em;
   text-transform: uppercase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metropolle/design-system",
-  "version": "1.2026.01.22.2325",
+  "version": "1.2026.01.24.0927",
   "description": "Sistema de design unificado para a plataforma Metropolle",
   "type": "module",
   "main": "dist/react/index.js",