@khipu/design-system 0.1.0-alpha.48 → 0.1.0-alpha.50

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:33:31.235Z
+ * Generated: 2026-04-27T13:24:37.477Z
  *
  * 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;
@@ -5725,3 +5800,125 @@ button.kds-btn-success::after {
 
 .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,8 @@ 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
+ * - Bank modal (search and selection)
+ * - Sticky invoice card (collapse on scroll)
  */
 
 (function() {
@@ -1681,6 +1683,8 @@ 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();
+        initBankModal();
 
         console.log('Material Design initialization complete!');
     }
@@ -1895,6 +1899,143 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
         });
     }
 
+    /**
+     * Initialize bank modal
+     * Handles opening, closing, search, and selection of banks
+     * Delegated events for [data-open-bank-modal], [data-close-bank-modal], and bank selection
+     * @param {Element} root - Root element to scope listeners (default: document)
+     */
+    function initBankModal(root) {
+        root = root || document;
+
+        var modal = root.querySelector('#bankModal');
+        var searchInput = root.querySelector('#bankSearch');
+        var bankList = root.querySelector('#bankModalList');
+        var noResults = root.querySelector('#bankNoResults');
+
+        if (!modal) return;
+
+        /**
+         * Filter banks by search query
+         * @param {string} query - Search term
+         */
+        function filterBanks(query) {
+            if (!bankList) return;
+
+            var q = query.toLowerCase().trim();
+            var rows = bankList.querySelectorAll('.kds-bank-row');
+            var visible = 0;
+
+            rows.forEach(function(row) {
+                var nameEl = row.querySelector('.kds-bank-row-name');
+                if (!nameEl) return;
+
+                var name = nameEl.textContent.toLowerCase();
+                var match = !q || name.indexOf(q) !== -1;
+                row.style.display = match ? '' : 'none';
+                if (match) visible++;
+            });
+
+            if (noResults) {
+                noResults.classList.toggle('visible', visible === 0);
+            }
+        }
+
+        // Open modal
+        root.addEventListener('click', function(e) {
+            var opener = e.target.closest('[data-open-bank-modal]');
+            if (opener) {
+                modal.classList.add('open');
+                if (searchInput) {
+                    searchInput.value = '';
+                    searchInput.focus();
+                }
+                filterBanks('');
+            }
+        });
+
+        // Close modal
+        root.addEventListener('click', function(e) {
+            var closer = e.target.closest('[data-close-bank-modal]');
+            if (closer) {
+                modal.classList.remove('open');
+            }
+        });
+
+        // Select bank (closes modal and dispatches event)
+        if (bankList) {
+            bankList.addEventListener('click', function(e) {
+                var bankRow = e.target.closest('.kds-bank-row');
+                if (bankRow) {
+                    var bankId = bankRow.dataset.bankId || bankRow.dataset.bank || '';
+                    var bankName = bankRow.querySelector('.kds-bank-row-name');
+
+                    // Dispatch custom event with bank data
+                    modal.dispatchEvent(new CustomEvent('kds:bank:selected', {
+                        bubbles: true,
+                        detail: {
+                            id: bankId,
+                            name: bankName ? bankName.textContent : '',
+                            element: bankRow
+                        }
+                    }));
+
+                    // Close modal
+                    modal.classList.remove('open');
+                }
+            });
+        }
+
+        // Search input
+        if (searchInput) {
+            searchInput.addEventListener('input', function(e) {
+                filterBanks(e.target.value);
+            });
+        }
+
+        // Export filterBanks for manual use if needed
+        if (!window.Khipu) window.Khipu = {};
+        window.Khipu.filterBanks = filterBanks;
+    }
+
+    /**
+     * 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 +2090,8 @@ 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.initBankModal = initBankModal;
+    window.Khipu.initStickyInvoice = initStickyInvoice;
 
     // Also export showSnackbar to global scope for backward compatibility
     window.showSnackbar = showSnackbar;