@khipu/design-system 0.2.0-alpha.3 → 0.2.0-alpha.5

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-05-13T19:14:37.483Z
+ * Generated: 2026-05-14T20:21:09.081Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -147,9 +147,9 @@
   --kds-letter-spacing-widest: 1px;
 
   /* Button typography */
-  --kds-typography-button-font-size: 0.9375rem;
+  --kds-typography-button-font-size: 0.875rem;
   --kds-typography-button-font-weight: 500;
-  --kds-typography-button-line-height: 26px;
+  --kds-typography-button-line-height: 1.5;
   --kds-typography-button-letter-spacing: 0.46px;
 
   /* Typography margins */
@@ -199,10 +199,10 @@
   --kds-spacing-input-padding-y: 16px;
   --kds-spacing-input-padding-x: 12px;
   --kds-spacing-input-padding: 16px 12px;
-  --kds-spacing-button-padding-y: 8px;
-  --kds-spacing-button-padding-x: 22px;
-  --kds-spacing-button-padding: 8px 22px;
-  --kds-spacing-button-min-height: 50px;
+  --kds-spacing-button-padding-y: 0;
+  --kds-spacing-button-padding-x: 16px;
+  --kds-spacing-button-padding: 0 16px;
+  --kds-spacing-button-min-height: 44px;
   --kds-spacing-button-icon-size: 20px;
   --kds-spacing-sidebar-width: 280px;
   --kds-spacing-sidebar-width-collapsed: 72px;
@@ -241,7 +241,7 @@
   --kds-radius-full: 9999px;
 
   /* Component-specific radii */
-  --kds-radius-button: 4px;
+  --kds-radius-button: 10px;
   --kds-radius-input: 4px;
   --kds-radius-card: 14px;
   --kds-radius-modal: 20px;
@@ -643,6 +643,7 @@ body.dark {
     /* Scroll Container Utilities */
     --kds-scroll-sm-height: 280px;
     --kds-scroll-md-height: 420px;
+
     --kds-scroll-lg-height: 600px;
 
     /* Stage Layout */
@@ -755,7 +756,7 @@ footer {
    ======================================== */
 :root {
     /* Scroll-linked collapse range (mobile sticky invoice) */
-    --kds-scroll-collapse-end: 150px;
+    --kds-scroll-collapse-end: 60px;
 
     /* Merchant tile: normal and collapsed sizes (from source prototype) */
     --kds-merchant-size: 64px;
@@ -777,6 +778,10 @@ footer {
  * Source: design.khipu.com and Material Design 3 specifications
  */
 
+ * {
+    border-radius: 0;
+ }
+
 
 :has(>main) {
     background-color: transparent !important;
@@ -821,34 +826,37 @@ a.kds-btn {
     justify-content: center;
     gap: 8px;
     text-align: center;
+    width: 100%;
 
     /* Typography - Using design tokens */
     font-family: var(--kds-font-family-secondary);
-    font-weight: var(--kds-font-weight-medium);      /* 500, no 600 */
-    font-size: var(--kds-typography-button-font-size);          /* 0.9375rem = 15px */
-    line-height: var(--kds-typography-button-line-height);      /* 26px, no 1 */
+    font-weight: var(--kds-font-weight-medium);      /* 500 */
+    font-size: var(--kds-typography-button-font-size);          /* 0.875rem = 14px */
+    line-height: var(--kds-typography-button-line-height);      /* 1.5 */
     letter-spacing: var(--kds-typography-button-letter-spacing); /* 0.46px */
     text-transform: uppercase;
 
     /* Spacing - Using design tokens */
-    padding: var(--kds-spacing-button-padding);      /* 8px 22px */
-    min-height: var(--kds-spacing-button-min-height); /* 50px */
-    height: auto;  /* Remove fixed height, let content + padding define it */
+    padding: var(--kds-spacing-button-padding);      /* 0 16px */
+    height: var(--kds-spacing-button-min-height);    /* 44px */
 
     /* Border - Using design token */
-    border-radius: var(--kds-radius-button);  /* 4px */
+    border-radius: var(--kds-radius-button);  /* 10px */
     border: none;
 
     /* Interaction */
     cursor: pointer;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
-                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
-                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
-                color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: background .15s, box-shadow .15s, transform .05s;
     box-sizing: border-box;
     vertical-align: middle;
 }
 
+/* Active state - add subtle press effect */
+button.kds-btn:active:not(:disabled),
+a.kds-btn:active:not(:disabled) {
+    transform: translateY(1px);
+}
+
 /* Disabled state - colores específicos en lugar de opacity */
 button.kds-btn:disabled,
 a.kds-btn:disabled {
@@ -866,18 +874,13 @@ a.kds-btn-primary {
     background: var(--kds-color-primary-main);     /* #8347AD */
     color: white;
     border: none;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-                0px 1px 5px 0px rgba(0, 0, 0, 0.12);  /* elevation/2 */
+    box-shadow: 0 1px 2px rgba(131, 71, 173, .25);
 }
 
-/* Hover State - background más oscuro + elevation/4 */
+/* Hover State - background más oscuro */
 button.kds-btn-primary:hover:not(:disabled),
 a.kds-btn-primary:hover:not(:disabled) {
-    background: var(--kds-color-primary-dark);     /* #6A3A8C */
-    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-                0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-                0px 1px 10px 0px rgba(0, 0, 0, 0.12);  /* elevation/4 */
+    background: var(--kds-color-primary-dark);     /* #5B3179 */
 }
 
 /* Active/Focus State */
@@ -5336,6 +5339,7 @@ dialog#surveyModal button.circle {
     background: var(--kds-color-background-muted);
     border-radius: var(--kds-radius-lg);
     padding: var(--kds-spacing-0-25);
+    margin-bottom: var(--kds-spacing-2);
     display: flex;
     position: relative;
 }
@@ -5602,8 +5606,8 @@ div.kds-invoice-header,
     margin-top: var(--kds-spacing-1);
 }
 
-.kds-invoice-code::first-letter {
-    text-transform: uppercase;
+.kds-invoice-code-value {
+    text-transform: lowercase;
 }
 
 .kds-invoice-merchant {
@@ -5647,7 +5651,7 @@ div.kds-invoice-header,
     line-height: 1.5;
     letter-spacing: -0.31px;
     color: var(--kds-color-text-primary);
-    margin: 0 0 var(--kds-spacing-2);
+    margin-bottom: var(--kds-spacing-2) !important;
 }
 
 /* -- Key-Value Grid -- */
@@ -5670,12 +5674,15 @@ div.kds-invoice-header,
 
 .kds-kv dd {
     margin: 0;
-    font-size: var(--kds-font-size-xs);
+    font-size: var(--kds-font-size-sm);
     line-height: var(--kds-line-height-relaxed);
     font-weight: var(--kds-font-weight-bold);
     letter-spacing: normal;
     color: var(--kds-color-gray-800);
     min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* -- Dividers -- */
@@ -5883,7 +5890,11 @@ button.kds-btn-success::after {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-1);
-    margin-top: var(--kds-spacing-1);
+    margin-bottom: var(--kds-spacing-1);
+}
+
+.kds-bank-list:last-child {
+    margin-bottom: 0;
 }
 
 /* -- Field group spacing -- */

package/dist/beercss/khipu-beercss.js

@@ -1298,7 +1298,7 @@ const ui = _context.ui;
     /**
      * Initialize sticky invoice card progressive collapse on scroll
      * MOBILE ONLY - Desktop mantiene cajitas normales
-     * Uses scroll-linked animation (0-150px) for smooth collapse/expand
+     * Uses scroll-linked animation (0-60px) for smooth collapse/expand
      * Updates CSS custom property --collapse-progress (0 to 1) for GPU-accelerated animations
      * Works with multiple screens - targets sticky element in currently active screen
      * Safari-compatible: uses native CSS custom properties, calc(), and requestAnimationFrame
@@ -1307,9 +1307,9 @@ const ui = _context.ui;
     function initStickyInvoice(root) {
         root = root || document;
 
-        // Progressive collapse range: 0px (expanded) to 150px (collapsed)
+        // Progressive collapse range: 0px (expanded) to 60px (collapsed)
         var COLLAPSE_START = 0;
-        var COLLAPSE_END = 150;
+        var COLLAPSE_END = 60;
 
         var lastScrollY = 0;
         var ticking = false;