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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1135,6 +1135,7 @@ html[data-theme="light"] select.mds-input {
1135
1135
 
1136
1136
  /* Select Search */
1137
1137
  .mds-select-search {
1138
+ position: relative; /* Required for absolute positioning of search icon */
1138
1139
  flex-shrink: 0; /* Don't shrink in flex container */
1139
1140
  padding: 8px;
1140
1141
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -3807,65 +3808,85 @@ html[data-theme="light"] .mds-profile-card__verified-trigger {
3807
3808
  }
3808
3809
 
3809
3810
  .mds-profile-card__verified-popup {
3811
+ /* Position to the LEFT of the trigger icon */
3810
3812
  position: absolute;
3811
- top: calc(100% + 12px);
3812
- right: 0;
3813
- padding: 16px;
3813
+ top: 50%;
3814
+ right: calc(100% + 12px);
3815
+ transform: translateY(-50%);
3816
+ padding: 32px 40px;
3814
3817
  /* Liquid Glass popup */
3815
- background: rgba(20, 20, 30, 0.75);
3816
- backdrop-filter: blur(16px) saturate(140%);
3817
- -webkit-backdrop-filter: blur(16px) saturate(140%);
3818
- border-radius: 14px;
3819
- border: 1px solid rgba(255, 255, 255, 0.1);
3818
+ background: rgba(20, 20, 30, 0.9);
3819
+ backdrop-filter: blur(24px) saturate(160%);
3820
+ -webkit-backdrop-filter: blur(24px) saturate(160%);
3821
+ border-radius: 20px;
3822
+ border: 1px solid rgba(255, 255, 255, 0.15);
3820
3823
  box-shadow:
3821
- 0 8px 24px rgba(0, 0, 0, 0.25),
3822
- inset 0 1px 0 rgba(255, 255, 255, 0.05);
3823
- min-width: 180px;
3824
- z-index: 20;
3824
+ 0 16px 48px rgba(0, 0, 0, 0.4),
3825
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
3826
+ min-width: 320px;
3827
+ z-index: 100;
3825
3828
  }
3826
3829
 
3827
3830
  html[data-theme="light"] .mds-profile-card__verified-popup {
3828
- background: rgba(255, 255, 255, 0.7);
3829
- border: 1px solid rgba(255, 255, 255, 0.9);
3831
+ background: rgba(255, 255, 255, 0.92);
3832
+ border: 1px solid rgba(255, 255, 255, 0.98);
3830
3833
  box-shadow:
3831
- 0 8px 24px rgba(0, 0, 0, 0.08),
3834
+ 0 16px 48px rgba(0, 0, 0, 0.15),
3832
3835
  inset 0 1px 0 rgba(255, 255, 255, 1);
3833
3836
  }
3834
3837
 
3838
+ /* Mobile: popup centered on screen */
3839
+ @media (max-width: 768px) {
3840
+ .mds-profile-card__verified-popup {
3841
+ position: fixed;
3842
+ top: 50%;
3843
+ left: 0;
3844
+ right: 0;
3845
+ bottom: auto;
3846
+ transform: translateY(-50%);
3847
+ width: 280px;
3848
+ min-width: auto;
3849
+ margin-left: auto;
3850
+ margin-right: auto;
3851
+ padding: 24px 28px;
3852
+ z-index: 1000;
3853
+ }
3854
+ }
3855
+
3835
3856
  .mds-profile-card__verified-header {
3836
3857
  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
3837
- font-size: 12px;
3858
+ font-size: 16px;
3838
3859
  font-weight: bold;
3839
3860
  color: #00d4aa;
3840
3861
  letter-spacing: 0.08em;
3841
3862
  text-transform: uppercase;
3842
- margin-bottom: 14px;
3863
+ margin-bottom: 20px;
3843
3864
  white-space: nowrap;
3844
3865
  }
3845
3866
 
3846
3867
  .mds-profile-card__verified-stats {
3847
3868
  display: flex;
3848
3869
  flex-direction: column;
3849
- gap: 10px;
3870
+ gap: 14px;
3850
3871
  }
3851
3872
 
3852
3873
  .mds-profile-card__stat-item {
3853
3874
  display: flex;
3854
3875
  justify-content: space-between;
3855
3876
  align-items: center;
3856
- gap: 20px;
3877
+ gap: 32px;
3857
3878
  }
3858
3879
 
3859
3880
  .mds-profile-card__stat-label {
3860
3881
  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
3861
- font-size: 11px;
3882
+ font-size: 14px;
3862
3883
  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
3863
3884
  letter-spacing: 0.06em;
3864
3885
  }
3865
3886
 
3866
3887
  .mds-profile-card__stat-value {
3867
3888
  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
3868
- font-size: 11px;
3889
+ font-size: 14px;
3869
3890
  letter-spacing: 0.06em;
3870
3891
  text-transform: uppercase;
3871
3892
  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
@@ -3879,8 +3900,8 @@ html[data-theme="light"] .mds-profile-card__verified-popup {
3879
3900
  display: flex;
3880
3901
  justify-content: space-between;
3881
3902
  align-items: center;
3882
- margin-top: 14px;
3883
- padding-top: 10px;
3903
+ margin-top: 20px;
3904
+ padding-top: 16px;
3884
3905
  border-top: 1px solid rgba(255, 255, 255, 0.08);
3885
3906
  }
3886
3907
 
@@ -3891,7 +3912,7 @@ html[data-theme="light"] .mds-profile-card__verified-footer {
3891
3912
  .mds-profile-card__verified-sequence,
3892
3913
  .mds-profile-card__verified-date {
3893
3914
  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
3894
- font-size: 10px;
3915
+ font-size: 12px;
3895
3916
  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
3896
3917
  letter-spacing: 0.06em;
3897
3918
  text-transform: uppercase;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metropolle/design-system",
3
- "version": "1.2026.01.22.1838",
3
+ "version": "1.2026.01.24.0927",
4
4
  "description": "Sistema de design unificado para a plataforma Metropolle",
5
5
  "type": "module",
6
6
  "main": "dist/react/index.js",