@khipu/design-system 0.1.0-alpha.47 → 0.1.0-alpha.49

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-23T20:14:51.318Z
+ * Generated: 2026-04-27T13:11:56.144Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -642,12 +642,21 @@ body.dark {
     --kds-color-info-soft: #EFF6FF;        /* Alias for info backgrounds */
     --kds-color-success-soft: #ECFDF5;     /* Success mark and borders */
 
+    /* Border colors */
+    --kds-color-border-subtle: #F3F4F6;   /* Very light border for cards/rows (origin --rule) */
+    --kds-color-border-default: #E5E7EB;  /* Standard light border for hover/separators (origin --rule-2) */
+
+    /* Hover background */
+    --kds-color-hover-bg: #FAFAFA;        /* Ultra-subtle hover background for rows */
+
     /* Layout colors */
     --kds-color-shell: #F5F5F5;           /* Neutral page background */
 
     /* Card specific */
     --kds-radius-card: 14px;              /* Payment card radius (between lg and xl) */
+    --kds-radius-row: 10px;               /* Interactive row radius (copy-row, etc.) */
     --kds-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);  /* Subtle card shadow */
+    --kds-shadow-elevated: var(--kds-shadow-8);  /* Elevated surfaces like modals */
 
     /* Extended semantic soft backgrounds */
     --kds-color-warning-soft: var(--kds-alert-warning-bg);  /* #FFFBEB */
@@ -4492,17 +4501,23 @@ dialog#surveyModal button.circle {
 .field.locked > input,
 .field.locked > textarea {
     background: var(--kds-color-shell);
-    color: var(--kds-color-text-primary);
+    color: var(--kds-color-text-secondary);
     cursor: default;
+    border-color: var(--kds-color-divider);
+}
+
+.field.locked > label {
+    color: var(--kds-color-text-hint);
 }
 
 .field.locked > i {
     position: absolute;
-    right: 12px;
+    right: var(--kds-spacing-1-5);
     top: 50%;
     transform: translateY(-50%);
     color: var(--kds-color-text-disabled);
     pointer-events: none;
+    font-size: 18px;
 }
 
 /* Verified variant (green check) */
@@ -4566,12 +4581,11 @@ dialog#surveyModal button.circle {
     display: flex;
     align-items: center;
     gap: var(--kds-spacing-1-5);
-    width: 100%;
-    padding: var(--kds-spacing-1-75);
+    padding: var(--kds-spacing-1-5);
     background: var(--kds-color-surface);
     color: var(--kds-color-text-primary);
-    border: 1px solid var(--kds-color-divider);
-    border-radius: var(--kds-radius-lg);
+    border: 1px solid var(--kds-color-border-subtle);
+    border-radius: var(--kds-radius-card);
     text-align: left;
     cursor: pointer;
     transition: border-color 0.2s, background 0.2s;
@@ -4579,8 +4593,8 @@ dialog#surveyModal button.circle {
 }
 
 .kds-bank-row:hover {
-    border-color: var(--kds-color-primary-main);
-    background: var(--kds-color-primary-faint);
+    border-color: var(--kds-color-border-default);
+    background: var(--kds-color-hover-bg);
 }
 
 .kds-bank-row-logo {
@@ -4602,12 +4616,12 @@ dialog#surveyModal button.circle {
 .kds-bank-row-name {
     flex: 1;
     font-weight: 500;
-    font-size: var(--kds-font-size-base);
+    font-size: var(--kds-font-size-sm);
     color: var(--kds-color-text-primary);
 }
 
 .kds-bank-row > i {
-    color: var(--kds-color-text-secondary);
+    color: var(--kds-color-border-default);
     flex-shrink: 0;
 }
 
@@ -4845,8 +4859,8 @@ dialog#surveyModal button.circle {
     justify-content: flex-start;
     gap: var(--kds-spacing-1-25);
     padding: var(--kds-spacing-1-5) var(--kds-spacing-1-75);
-    border: var(--kds-border-width-sm) solid var(--kds-color-divider);
-    border-radius: var(--kds-radius-md);
+    border: var(--kds-border-width-sm) solid var(--kds-color-border-subtle);
+    border-radius: var(--kds-radius-row);
     background: var(--kds-color-surface, var(--kds-color-background-paper));
     cursor: pointer;
     text-align: left;
@@ -4858,8 +4872,8 @@ dialog#surveyModal button.circle {
 }
 
 .kds-copy-row:hover {
-    background: var(--kds-color-background-muted);
-    border-color: var(--kds-border-light);
+    background: var(--kds-color-hover-bg);
+    border-color: var(--kds-color-border-default);
 }
 
 .kds-copy-row > i {
@@ -5159,6 +5173,67 @@ dialog#surveyModal button.circle {
    amount summary, recap, success button
    ======================================== */
 
+/* -- Sticky Invoice Card (.kds-invoice-sticky) -- */
+/* Collapses detail rows on scroll via .collapsed class (JS toggle) */
+
+.kds-invoice-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    transition: box-shadow 0.25s ease, border-radius 0.25s ease;
+}
+
+.kds-invoice-sticky.collapsed {
+    box-shadow: var(--kds-shadow-2);
+    border-radius: 0 0 var(--kds-radius-card) var(--kds-radius-card);
+}
+
+.kds-invoice-sticky .kds-invoice-collapsible {
+    overflow: hidden;
+    max-height: 300px;
+    opacity: 1;
+    transition: max-height 0.3s ease, opacity 0.2s ease;
+}
+
+.kds-invoice-sticky.collapsed .kds-invoice-collapsible {
+    max-height: 0;
+    opacity: 0;
+}
+
+.kds-invoice-sticky .kds-invoice-amount {
+    transition: font-size 0.25s ease;
+}
+
+.kds-invoice-sticky.collapsed .kds-invoice-amount {
+    font-size: var(--kds-font-size-xl);
+}
+
+.kds-invoice-sticky .kds-invoice-merchant {
+    transition: width 0.25s ease, height 0.25s ease;
+}
+
+.kds-invoice-sticky.collapsed .kds-invoice-merchant {
+    width: var(--kds-status-icon-size-sm);
+    height: var(--kds-status-icon-size-sm);
+}
+
+.kds-invoice-sticky .kds-invoice-merchant i {
+    transition: font-size 0.25s ease;
+}
+
+.kds-invoice-sticky.collapsed .kds-invoice-merchant i {
+    font-size: var(--kds-font-size-xl);
+}
+
+.kds-invoice-sticky .kds-invoice-code {
+    transition: margin-top 0.25s ease, font-size 0.25s ease;
+}
+
+.kds-invoice-sticky.collapsed .kds-invoice-code {
+    margin-top: 0;
+    font-size: var(--kds-font-size-caption);
+}
+
 /* -- Invoice Header (amount + merchant tile) -- */
 .kds-invoice-header {
     display: flex;
@@ -5493,3 +5568,357 @@ button.kds-btn-success::after {
 .kds-copy-header.spaced {
     margin-top: var(--kds-spacing-2-5);
 }
+
+/* ================================================================
+   PAYMENT FLOW LAYOUT
+   Stage, flow container, brand row, screen transitions
+   ================================================================ */
+
+/* Prevent card hover elevation in payment flow */
+.kds-payment-stage .kds-card-elevated:hover {
+    box-shadow: var(--kds-shadow-card);
+}
+
+/* Payment stage — full-viewport centered wrapper */
+.kds-payment-stage {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    padding: var(--kds-spacing-2-5) var(--kds-spacing-2) var(--kds-spacing-8);
+}
+
+/* Payment flow — narrow column */
+.kds-payment-flow {
+    width: 100%;
+    max-width: var(--kds-stage-narrow-max-width, 448px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+}
+
+/* Brand logo row */
+.kds-brand-row {
+    padding: 0 var(--kds-spacing-0-5);
+    display: flex;
+    align-items: center;
+}
+.kds-brand-row svg {
+    height: 22px;
+    display: block;
+}
+
+/* Screen transitions (multi-step flows) */
+.kds-screen {
+    display: none;
+    animation: kds-fadein .22s ease both;
+}
+.kds-screen.active {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+}
+@keyframes kds-fadein {
+    from { opacity: 0; transform: translateY(var(--kds-spacing-0-5)); }
+    to   { opacity: 1; transform: none; }
+}
+
+/* ================================================================
+   PROTOTYPE NAVIGATION & TWEAKS
+   Dev-only components for navigating and tweaking prototypes
+   ================================================================ */
+
+/* Proto nav — floating pill navigation */
+.kds-proto-nav {
+    position: fixed;
+    left: 50%;
+    bottom: var(--kds-spacing-1-75);
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-0-75);
+    background: var(--kds-color-text-primary);
+    color: var(--kds-color-background-paper);
+    padding: var(--kds-spacing-0-75) var(--kds-spacing-1);
+    border-radius: 9999px;
+    box-shadow: var(--kds-shadow-4);
+    z-index: 40;
+    font-size: var(--kds-font-size-xs);
+}
+.kds-proto-nav-label {
+    padding: 0 var(--kds-spacing-0-75);
+    color: var(--kds-color-text-hint);
+}
+.kds-proto-nav-arrow {
+    background: transparent;
+    border: 0;
+    color: var(--kds-color-text-disabled);
+    cursor: pointer;
+    width: var(--kds-spacing-3-5);
+    height: var(--kds-spacing-3-5);
+    border-radius: 9999px;
+    display: grid;
+    place-items: center;
+}
+.kds-proto-nav-arrow:hover {
+    color: var(--kds-color-background-paper);
+    background: rgba(255, 255, 255, .08);
+}
+
+/* Tweaks panel — floating config panel */
+.kds-proto-tweaks {
+    position: fixed;
+    right: var(--kds-spacing-2);
+    bottom: var(--kds-spacing-8);
+    width: 260px;
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-card);
+    box-shadow: var(--kds-shadow-4);
+    border: 1px solid var(--kds-color-divider);
+    padding: var(--kds-spacing-1-75);
+    font-size: var(--kds-font-size-body2);
+    z-index: 45;
+    display: none;
+}
+.kds-proto-tweaks.open { display: block; }
+.kds-proto-tweaks h4 {
+    margin: 0 0 var(--kds-spacing-1);
+    font-size: var(--kds-font-size-body2);
+    font-weight: var(--kds-font-weight-bold);
+}
+.kds-proto-tweak {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kds-spacing-1);
+    margin-bottom: var(--kds-spacing-1);
+}
+.kds-proto-tweak-column {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--kds-spacing-0-75);
+    margin-bottom: var(--kds-spacing-1);
+}
+.kds-proto-chips {
+    display: flex;
+    gap: var(--kds-spacing-0-75);
+    flex-wrap: wrap;
+}
+.kds-proto-chip {
+    border: 1px solid var(--kds-color-divider);
+    background: var(--kds-color-background-paper);
+    color: var(--kds-color-text-primary);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-1);
+    border-radius: 9999px;
+    font-size: var(--kds-font-size-xs);
+    cursor: pointer;
+}
+.kds-proto-chip.active {
+    background: var(--kds-color-primary-faint);
+    border-color: var(--kds-color-primary-main);
+    color: var(--kds-color-primary-main);
+}
+.kds-proto-swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: var(--kds-spacing-0-75);
+    border: 1px solid rgba(0, 0, 0, .08);
+    cursor: pointer;
+}
+.kds-proto-swatch.active {
+    outline: 2px solid var(--kds-color-primary-main);
+    outline-offset: var(--kds-spacing-0-25);
+}
+.kds-proto-input {
+    margin-top: var(--kds-spacing-0-75);
+    padding: var(--kds-spacing-0-75) var(--kds-spacing-1);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-spacing-0-75);
+    font: inherit;
+}
+
+/* ================================================================
+   DEMO PAGE LAYOUT
+   Showcase container, sections, labels for component demo pages
+   ================================================================ */
+
+.kds-demo-container {
+    max-width: 480px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-3);
+    padding: var(--kds-spacing-3) var(--kds-spacing-2);
+}
+
+.kds-demo-hero { text-align: center; }
+.kds-demo-hero h1 { font-size: var(--kds-font-size-xl); margin: 0; }
+.kds-demo-hero p {
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+    margin: var(--kds-spacing-0-5) 0 0;
+}
+
+.kds-demo-section {
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-card);
+    box-shadow: var(--kds-shadow-card);
+    padding: var(--kds-spacing-2);
+}
+.kds-demo-section + .kds-demo-section { margin-top: var(--kds-spacing-1-5); }
+
+.kds-demo-label {
+    font-size: var(--kds-font-size-caption);
+    color: var(--kds-color-text-hint);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.kds-demo-section-title {
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-semibold);
+}
+
+.kds-demo-tab-output {
+    font-size: var(--kds-font-size-xs);
+    color: var(--kds-color-text-hint);
+    text-align: center;
+    margin: 0;
+}
+
+.kds-demo-expand-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.kds-demo-tabs-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-2);
+}
+
+.kds-demo-center { text-align: center; }
+.kds-demo-spacer { height: var(--kds-spacing-3); }
+
+/* ========================================
+   BANK MODAL (.kds-bank-modal)
+   Full-screen overlay with scrollable bank list + search
+   ======================================== */
+
+.kds-bank-modal-scrim {
+    position: fixed;
+    inset: 0;
+    background: var(--kds-modal-backdrop);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--kds-z-index-modal, 50);
+    animation: kds-fade 0.2s ease both;
+    padding: var(--kds-spacing-2);
+}
+
+.kds-bank-modal-scrim.open {
+    display: flex;
+}
+
+.kds-bank-modal {
+    width: 100%;
+    max-width: var(--kds-stage-narrow-max-width, 448px);
+    height: 85vh;
+    background: var(--kds-color-background-paper);
+    border-radius: var(--kds-radius-card);
+    box-shadow: var(--kds-shadow-elevated);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: kds-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.kds-bank-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--kds-spacing-2) var(--kds-spacing-2) var(--kds-spacing-1);
+}
+
+.kds-bank-modal-header h3 {
+    font-size: var(--kds-font-size-lg);
+    font-weight: var(--kds-font-weight-semibold);
+    margin: 0;
+    color: var(--kds-color-text-primary);
+}
+
+.kds-bank-modal-close {
+    background: none;
+    border: 0;
+    padding: var(--kds-spacing-0-5);
+    cursor: pointer;
+    color: var(--kds-color-text-secondary);
+    border-radius: var(--kds-radius-full);
+    display: grid;
+    place-items: center;
+}
+
+.kds-bank-modal-close::after {
+    display: none;
+}
+
+.kds-bank-modal-search {
+    padding: 0 var(--kds-spacing-2) var(--kds-spacing-1-5);
+}
+
+.kds-bank-modal-search input {
+    width: 100%;
+    padding: var(--kds-spacing-1-25) var(--kds-spacing-1-5);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-md);
+    font-size: var(--kds-font-size-sm);
+    font-family: inherit;
+    outline: none;
+    color: var(--kds-color-text-primary);
+    background: var(--kds-color-surface);
+}
+
+.kds-bank-modal-search input::placeholder {
+    color: var(--kds-color-text-hint);
+}
+
+.kds-bank-modal-search input:focus {
+    border-color: var(--kds-color-primary-main);
+    box-shadow: 0 0 0 2px var(--kds-color-primary-faint);
+}
+
+.kds-bank-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 var(--kds-spacing-1) var(--kds-spacing-1);
+}
+
+.kds-bank-modal-body .kds-bank-list {
+    margin-top: 0;
+    gap: var(--kds-spacing-0-5);
+}
+
+.kds-bank-modal-body .kds-bank-row {
+    border: 0;
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-1) var(--kds-spacing-1-25);
+}
+
+.kds-bank-modal-body .kds-bank-row:hover {
+    background: var(--kds-color-primary-faint);
+    border-color: transparent;
+}
+
+.kds-bank-modal-empty {
+    text-align: center;
+    padding: var(--kds-spacing-4) var(--kds-spacing-2);
+    color: var(--kds-color-text-hint);
+    font-size: var(--kds-font-size-sm);
+    display: none;
+}
+
+.kds-bank-modal-empty.visible {
+    display: block;
+}

package/dist/beercss/khipu-beercss.js

@@ -1644,6 +1644,7 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
  * - Clipboard copy rows
  * - Countdown timers
  * - Segmented tabs
+ * - Sticky invoice card (collapse on scroll)
  */
 
 (function() {
@@ -1681,6 +1682,7 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
         initCopyRow();
         initCountdown();
         initSegmentedTabs();
+        initStickyInvoice();
 
         console.log('Material Design initialization complete!');
     }
@@ -1895,6 +1897,44 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
         });
     }
 
+    /**
+     * Initialize sticky invoice card collapse on scroll
+     * Toggles .collapsed class on .kds-invoice-sticky when user scrolls past threshold
+     * Works with multiple screens - targets sticky element in currently active screen
+     * Uses hysteresis (different thresholds for collapse/expand) to prevent oscillation
+     * @param {Element} root - Root element to scope queries (default: document)
+     */
+    function initStickyInvoice(root) {
+        root = root || document;
+
+        var collapseAt = 60;   // px scrolled to collapse
+        var expandAt = 20;     // px scrolled to expand (lower = hysteresis)
+        var collapsedStates = {}; // Track collapsed state per screen
+
+        function onScroll() {
+            // Find sticky element in currently active screen
+            var activeScreen = root.querySelector('.kds-screen.active');
+            if (!activeScreen) return;
+
+            var sticky = activeScreen.querySelector('.kds-invoice-sticky');
+            if (!sticky) return;
+
+            var screenId = activeScreen.id || 'default';
+            var isCollapsed = collapsedStates[screenId] || false;
+            var scrollY = window.scrollY || window.pageYOffset;
+
+            if (!isCollapsed && scrollY > collapseAt) {
+                sticky.classList.add('collapsed');
+                collapsedStates[screenId] = true;
+            } else if (isCollapsed && scrollY < expandAt) {
+                sticky.classList.remove('collapsed');
+                collapsedStates[screenId] = false;
+            }
+        }
+
+        window.addEventListener('scroll', onScroll, { passive: true });
+    }
+
     /**
      * Utility: Show a snackbar programmatically
      * @param {string} message - The message to display
@@ -1949,6 +1989,7 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
     window.Khipu.initCopyRow = initCopyRow;
     window.Khipu.initCountdown = initCountdown;
     window.Khipu.initSegmentedTabs = initSegmentedTabs;
+    window.Khipu.initStickyInvoice = initStickyInvoice;
 
     // Also export showSnackbar to global scope for backward compatibility
     window.showSnackbar = showSnackbar;