@khipu/design-system 0.1.0-alpha.38 → 0.1.0-alpha.40

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-04-09T17:23:49.715Z
+ * Generated: 2026-04-15T17:09:26.428Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -261,6 +261,10 @@
   --kds-border-medium: #999999;
   --kds-border-dark: #666666;
 
+  /* Border widths */
+  --kds-border-width-sm: 1px;
+  --kds-border-width-md: 2px;
+
   /* ==========================================================================
      SEMANTIC ALIASES
      ========================================================================== */
@@ -1400,7 +1404,9 @@ a.kds-btn.kds-btn-block {
 .kds-m-8 { margin: var(--kds-spacing-8); }
 
 .kds-mt-0 { margin-top: 0; }
+.kds-mt-1 { margin-top: var(--kds-spacing-1); }
 .kds-mt-2 { margin-top: var(--kds-spacing-2); }
+.kds-mt-3 { margin-top: var(--kds-spacing-3); }
 .kds-mt-4 { margin-top: var(--kds-spacing-4); }
 .kds-mt-6 { margin-top: var(--kds-spacing-6); }
 .kds-mt-8 { margin-top: var(--kds-spacing-8); }
@@ -1408,6 +1414,7 @@ a.kds-btn.kds-btn-block {
 .kds-mb-0 { margin-bottom: 0; }
 .kds-mb-1 { margin-bottom: var(--kds-spacing-1); }
 .kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
+.kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
 .kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
 .kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
 .kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
@@ -1429,7 +1436,7 @@ a.kds-btn.kds-btn-block {
 .kds-mx-auto { margin-left: auto; margin-right: auto; }
 
 /* Spacing utilities - Padding */
-.kds-p-0 { padding: 0; }
+.kds-p-0 { padding: 0 !important; }
 .kds-p-2 { padding: var(--kds-spacing-2); }
 .kds-p-4 { padding: var(--kds-spacing-4); }
 .kds-p-6 { padding: var(--kds-spacing-6); }
@@ -1699,8 +1706,7 @@ button.kds-locale-switcher-toggle,
     background: transparent;
     border: 1px solid var(--kds-color-gray-400);
     border-radius: var(--kds-radius-button);
-    color: var(--on-primary);
-    padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
+    color: var(--kds-color-text-primary);
     cursor: pointer;
     font-size: var(--kds-font-size-sm);
     font-family: var(--kds-font-family-secondary);
@@ -1919,7 +1925,6 @@ body.kds-layout {
 footer.primary {
     background: var(--primary);
     padding: var(--kds-spacing-4) var(--kds-spacing-3);
-    margin-top: var(--kds-spacing-6);
     color: var(--on-primary);
 }
 
@@ -2132,6 +2137,67 @@ body.dark {
   color: var(--primary);
 }
 
+/* ==========================================
+   PASSWORD STRENGTH METER
+   Barra de fortaleza de contraseña (3 niveles)
+   Usando tokens de diseño
+   ========================================== */
+
+.kds-password-strength {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    margin-top: var(--kds-spacing-0-5);
+    margin-bottom: var(--kds-spacing-1);
+}
+
+.kds-password-strength-bars {
+    display: flex;
+    gap: var(--kds-spacing-0-5);
+    flex: 1;
+}
+
+.kds-password-strength-bars span {
+    flex: 1;
+    height: var(--kds-spacing-0-5);
+    border-radius: var(--kds-radius-sm);
+    background: var(--outline-variant);
+    transition: background 0.2s ease;
+}
+
+.kds-password-strength-bars span.weak {
+    background: var(--kds-color-error-main);
+}
+
+.kds-password-strength-bars span.medium {
+    background: var(--kds-color-warning-main);
+}
+
+.kds-password-strength-bars span.strong {
+    background: var(--kds-color-success-main);
+}
+
+.kds-password-strength-label {
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-medium);
+    min-width: var(--kds-spacing-6);
+    text-align: right;
+    color: var(--kds-color-text-secondary);
+}
+
+.kds-password-strength-label.weak {
+    color: var(--kds-color-error-main);
+}
+
+.kds-password-strength-label.medium {
+    color: var(--kds-color-warning-main);
+}
+
+.kds-password-strength-label.strong {
+    color: var(--kds-color-success-main);
+}
+
 /* ========================================
    TOOLTIPS - Personaliza Beer CSS .tooltip
    ======================================== */
@@ -2325,7 +2391,6 @@ label.radio:has(input:disabled) {
     align-items: center;
     justify-content: center;
     flex: 1;
-    min-height: calc(100vh - var(--kds-navbar-height));
 }
 
 /* Stage Actions - Bottom button area (if not using sticky footer) */
@@ -2593,6 +2658,7 @@ dialog.modal .field.border:focus-within {
     max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
+    min-height: unset;
 }
 
 /* Nav should have no padding - only background color */
@@ -2674,11 +2740,6 @@ footer > .kds-container-center {
     max-width: 1200px;
 }
 
-/* Margin top utilities */
-.kds-mt-3 {
-    margin-top: var(--kds-spacing-3);
-}
-
 /* ========================================
    AUTOMATIC SPACING SYSTEM
    Components handle their own spacing
@@ -3089,8 +3150,8 @@ footer > .kds-container-center {
     display: flex;
     flex-direction: column;
     overflow: visible;
-    padding-top: var(--kds-spacing-4);
-    padding-bottom: var(--kds-spacing-4);
+    padding-top: var(--kds-spacing-6);
+    padding-bottom: var(--kds-spacing-6);
 }
 
 /* ============================================
@@ -3890,20 +3951,6 @@ dialog#surveyModal button.circle {
     font-size: var(--kds-font-size-sm);
 }
 
-/* Spacing utilities */
-.kds-mt-1 { margin-top: var(--kds-spacing-1); }
-.kds-mt-2 { margin-top: var(--kds-spacing-2); }
-.kds-mt-3 { margin-top: var(--kds-spacing-3); }
-.kds-mt-4 { margin-top: var(--kds-spacing-4); }
-.kds-mt-6 { margin-top: var(--kds-spacing-6); }
-.kds-mt-8 { margin-top: var(--kds-spacing-8); }
-
-.kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
-.kds-mb-3 { margin-bottom: var(--kds-spacing-3); }
-.kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
-.kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
-.kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
-
 /* Display utilities */
 .kds-hidden {
     display: none;
@@ -4192,3 +4239,12 @@ dialog#surveyModal button.circle {
 .z-1000 {
     z-index: 1000;
 }
+
+/* height and min-heighy (for layout purposes) */
+.min-h-unset{
+    min-height: unset !important;
+}
+
+.secondary-nav-border {
+    border-bottom: var(--kds-border-width-sm) solid var(--kds-color-divider);
+}