@khipu/design-system 0.1.0-alpha.55 → 0.2.0-alpha.10

package/dist/beercss/khipu-beercss.js

@@ -923,16 +923,34 @@ const ui = _context.ui;
     }
 
     /**
-     * Initialize flash messages with auto-dismiss
+     * Dismiss and remove a snackbar with fade-out
+     */
+    function dismissSnackbar(snackbar) {
+        snackbar.classList.remove('active');
+        setTimeout(function() { snackbar.remove(); }, 300);
+    }
+
+    /**
+     * Initialize flash messages with auto-dismiss and close button
      */
     function initFlashMessages() {
-        const snackbars = document.querySelectorAll('.snackbar[data-auto-dismiss="true"]');
+        var snackbars = document.querySelectorAll('.snackbar[data-auto-dismiss="true"]');
 
         snackbars.forEach(function(snackbar) {
+            // Give text span flex-grow so close button stays right
+            var span = snackbar.querySelector('span');
+            if (span) span.classList.add('max');
+
+            // Inject close button
+            var closeBtn = document.createElement('button');
+            closeBtn.className = 'kds-snackbar-close';
+            closeBtn.setAttribute('aria-label', 'Cerrar');
+            closeBtn.innerHTML = '<i class="material-symbols-outlined">close</i>';
+            closeBtn.onclick = function() { dismissSnackbar(snackbar); };
+            snackbar.appendChild(closeBtn);
+
             // Auto-dismiss after 5 seconds
-            setTimeout(function() {
-                snackbar.classList.remove('active');
-            }, 5000);
+            setTimeout(function() { dismissSnackbar(snackbar); }, 5000);
         });
     }
 
@@ -973,10 +991,15 @@ const ui = _context.ui;
 
             if (!logoSource) return;
 
+            // Insert inside the amount div (first child of .kds-invoice-header)
+            var header = card.querySelector('.kds-invoice-header');
+            var amountDiv = header ? header.firstElementChild : null;
+            if (!amountDiv) return;
+
             var inner = document.createElement('div');
             inner.className = 'kds-brand-inner';
             inner.appendChild(logoSource.cloneNode(true));
-            card.insertBefore(inner, card.firstChild);
+            amountDiv.insertBefore(inner, amountDiv.firstChild);
         });
     }
 
@@ -1136,13 +1159,14 @@ const ui = _context.ui;
      * Initialize segmented tabs
      * Delegated click on .kds-segmented-tabs button toggles .active and aria-selected
      * Sets --_active-idx and --_tab-count CSS custom properties for sliding pill animation
+     * Auto-manages tab panels via data-kds-tab-panel attributes on sibling elements
      * Dispatches kds:tab:change with { index, button }
      * @param {Element} root - Root element to scope listeners (default: document)
      */
     function initSegmentedTabs(root) {
         root = root || document;
 
-        /* Set initial CSS vars on all segmented-tab containers */
+        /* Set initial CSS vars and panel visibility on all segmented-tab containers */
         root.querySelectorAll('.kds-segmented-tabs').forEach(function(tabs) {
             var buttons = tabs.querySelectorAll('button');
             tabs.style.setProperty('--_tab-count', buttons.length);
@@ -1151,6 +1175,15 @@ const ui = _context.ui;
                 if (b.classList.contains('active') || b.getAttribute('aria-selected') === 'true') activeIdx = i;
             });
             tabs.style.setProperty('--_active-idx', activeIdx);
+
+            /* Auto-bind panels: find sibling elements with data-kds-tab-panel */
+            var parent = tabs.parentElement;
+            if (parent) {
+                var panels = parent.querySelectorAll('[data-kds-tab-panel]');
+                panels.forEach(function(panel, i) {
+                    panel.hidden = i !== activeIdx;
+                });
+            }
         });
 
         root.addEventListener('click', function(e) {
@@ -1171,6 +1204,14 @@ const ui = _context.ui;
             var index = Array.prototype.indexOf.call(buttons, btn);
             tabs.style.setProperty('--_active-idx', index);
 
+            /* Auto-toggle panels */
+            var parent = tabs.parentElement;
+            if (parent) {
+                parent.querySelectorAll('[data-kds-tab-panel]').forEach(function(panel, i) {
+                    panel.hidden = i !== index;
+                });
+            }
+
             tabs.dispatchEvent(new CustomEvent('kds:tab:change', {
                 bubbles: true,
                 detail: { index: index, button: btn }
@@ -1280,7 +1321,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
@@ -1289,9 +1330,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 30px (collapsed)
         var COLLAPSE_START = 0;
-        var COLLAPSE_END = 150;
+        var COLLAPSE_END = 30;
 
         var lastScrollY = 0;
         var ticking = false;
@@ -1339,13 +1380,23 @@ const ui = _context.ui;
                 if (!currentScreen.style.getPropertyValue('--collapse-collapsible-h')) {
                     var collapsible = currentSticky.querySelector('.kds-invoice-collapsible');
                     if (collapsible) {
-                        currentScreen.style.setProperty('--collapse-collapsible-h', collapsible.offsetHeight + 'px');
+                        currentScreen.style.setProperty('--collapse-collapsible-h', Math.min(collapsible.offsetHeight, 87) + 'px');
                     }
                 }
 
                 // Single DOM write per frame — set on screen (parent) so it cascades to sticky + siblings
                 currentScreen.style.setProperty('--collapse-progress', progress);
 
+                // Close expand panels as soon as the sticky header starts collapsing
+                if (progress > 0) {
+                    currentSticky.querySelectorAll('[data-expand-toggle][aria-expanded="true"]').forEach(function(toggle) {
+                        toggle.setAttribute('aria-expanded', 'false');
+                        var panelId = toggle.getAttribute('aria-controls');
+                        var panel = panelId ? document.getElementById(panelId) : null;
+                        if (panel) panel.classList.remove('open');
+                    });
+                }
+
                 lastScrollY = scrollY;
             });
         }
@@ -1493,25 +1544,24 @@ const ui = _context.ui;
         type = type || 'info';
         duration = duration || 5000;
 
-        const snackbar = document.createElement('div');
+        var snackbar = document.createElement('div');
         snackbar.className = 'snackbar active ' + type;
+        snackbar.setAttribute('data-auto-dismiss', 'true');
+        snackbar.style.setProperty('--kds-snackbar-duration', duration + 'ms');
 
-        const icon = document.createElement('i');
+        var icon = document.createElement('i');
         icon.className = 'material-symbols-outlined';
         icon.textContent = type === 'success' ? 'check_circle' : (type === 'error' ? 'error' : 'info');
 
-        const span = document.createElement('span');
+        var span = document.createElement('span');
+        span.className = 'max';
         span.textContent = message;
 
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'transparent circle';
+        var closeBtn = document.createElement('button');
+        closeBtn.className = 'kds-snackbar-close';
+        closeBtn.setAttribute('aria-label', 'Cerrar');
         closeBtn.innerHTML = '<i class="material-symbols-outlined">close</i>';
-        closeBtn.onclick = function() {
-            snackbar.classList.remove('active');
-            setTimeout(function() {
-                snackbar.remove();
-            }, 300);
-        };
+        closeBtn.onclick = function() { dismissSnackbar(snackbar); };
 
         snackbar.appendChild(icon);
         snackbar.appendChild(span);
@@ -1519,12 +1569,7 @@ const ui = _context.ui;
 
         document.body.appendChild(snackbar);
 
-        setTimeout(function() {
-            snackbar.classList.remove('active');
-            setTimeout(function() {
-                snackbar.remove();
-            }, 300);
-        }, duration);
+        setTimeout(function() { dismissSnackbar(snackbar); }, duration);
     }
 
     // Export utilities to window for backward compatibility