@khipu/design-system 0.3.5-alpha.1 → 0.3.5-alpha.3

package/dist/beercss/khipu-beercss.css

@@ -13,7 +13,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-08-12T21:54:49.906Z
+ * Generated: 2026-08-13T16:19:44.738Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -7989,6 +7989,24 @@ svg[fill='none'] {
     }
 }
 
+/* Widget embebido: dentro de un iframe los media queries de ancho evalúan el viewport
+   DEL IFRAME (~420px), no la pantalla, así que el flujo se ve siempre como mobile
+   aunque el usuario esté en desktop — y el tope plano, pensado para cuando la card se
+   pega al borde del teléfono, queda cortando una card que en realidad flota centrada.
+   `hover`/`pointer` describen el dispositivo de entrada y no el viewport, así que
+   sobreviven al iframe: con mouse las cards conservan las esquinas superiores. */
+@media (hover: hover) and (pointer: fine) {
+    .kds-card-elevated.kds-invoice-sticky {
+        border-radius: var(--kds-radius-card);
+    }
+
+    .kds-screen > .kds-card-elevated.kds-card-elevated--flush-top,
+    .kds-card-elevated.kds-card-elevated--flush-top {
+        border-top-left-radius: var(--kds-radius-card);
+        border-top-right-radius: var(--kds-radius-card);
+    }
+}
+
 /* Brand logo row (external, outside cards) */
 .kds-brand-row {
     padding: 0 var(--kds-spacing-0-5);

package/dist/beercss/khipu-beercss.js

@@ -895,10 +895,71 @@ const ui = _context.ui;
         initHideOnScroll();
         initBankModal();
         initMerchantLogoBackdrop();
+        initCardHeightTransition();
 
         console.log('Material Design initialization complete!');
     }
 
+    /**
+     * Initialize body card height transition (KTUF-239)
+     * La body card cambia de alto al pasar de una pantalla a otra (loader ↔ formulario)
+     * y el salto se nota, sobre todo desde que la card ya no lleva un alto mínimo fijo.
+     * No se puede resolver con CSS: un cambio de altura provocado por contenido no
+     * dispara transiciones, porque el valor declarado sigue siendo `auto` antes y
+     * después (ni `interpolate-size` lo cubre — ese habilita animar hacia `auto` cuando
+     * el valor declarado cambia, que no es el caso). Por eso se mide y se anima acá.
+     * @param {Element} root - Root element to scope the query (default: document)
+     */
+    function initCardHeightTransition(root) {
+        root = root || document;
+        var MIN_DELTA_PX = 8;
+        var DURATION_MS = 280;
+
+        if (typeof ResizeObserver === 'undefined' || typeof Element.prototype.animate !== 'function') {
+            return;
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+
+        var cards = root.querySelectorAll('.kds-screen > .kds-card-elevated');
+        Array.prototype.forEach.call(cards, function(card) {
+            if (card.getAttribute('data-kds-height-transition') === 'on') {
+                return;
+            }
+            card.setAttribute('data-kds-height-transition', 'on');
+
+            var previous = card.offsetHeight;
+            var animating = false;
+
+            var observer = new ResizeObserver(function() {
+                // La animación cambia el alto y volveria a disparar el observer.
+                if (animating) {
+                    return;
+                }
+                var next = card.offsetHeight;
+                // Umbral: ignora reflows menores (fuentes que cargan, scrollbars).
+                if (Math.abs(next - previous) < MIN_DELTA_PX) {
+                    previous = next;
+                    return;
+                }
+                animating = true;
+                var animation = card.animate(
+                    [{ height: previous + 'px' }, { height: next + 'px' }],
+                    { duration: DURATION_MS, easing: 'ease-out' }
+                );
+                previous = next;
+                animation.finished.then(function() {
+                    animating = false;
+                    previous = card.offsetHeight;
+                }).catch(function() {
+                    animating = false;
+                });
+            });
+            observer.observe(card);
+        });
+    }
+
     /**
      * Initialize merchant logo backdrop (KTUF-204)
      * Los logos de comercio van sobre el fondo neutro, no sobre el color de marca (los PNG
@@ -1737,6 +1798,7 @@ const ui = _context.ui;
     window.Khipu.initBankModal = initBankModal;
     window.Khipu.initStickyInvoice = initStickyInvoice;
     window.Khipu.initHideOnScroll = initHideOnScroll;
+    window.Khipu.initCardHeightTransition = initCardHeightTransition;
 
     // Also export showSnackbar to global scope for backward compatibility
     window.showSnackbar = showSnackbar;