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

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-14T20:37:28.660Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2456,12 +2456,21 @@ a.kds-btn-google:disabled {
     /* Llena y centra dentro de contenedores flex (pantalla de carga); en flujo
        normal (contenedor no-flex) se reduce a su contenido. */
     flex: 1 1 auto;
-    /* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la
-       card queda del alto del spinner y se lee como un recorte. Ocupa el body completo
-       de un telefono para que la pantalla de carga se lea como una pantalla y no como
-       una franja. Va aca y no en la card para que el minimo aplique solo a la carga:
-       el resto de las pantallas crece con su contenido. */
-    min-height: 36rem;
+    /* Alto propio: el loader es contenido minimo por definicion, asi que sin esto la card
+       queda del alto del spinner y se lee como un recorte. Va aca y no en la card para que
+       el minimo aplique solo a la carga: el resto de las pantallas crece con su contenido.
+       El valor de escritorio es moderado a proposito: el minimo de telefono (36rem) dejaba
+       la card de la carga mucho mas alta que cualquier otra pantalla, y al entrar y salir
+       del loader el widget crecia y volvia a encoger. */
+    min-height: 18rem;
+}
+
+/* En telefono la carga si ocupa el alto util de la pantalla: ahi la card va a ancho
+   completo y un loader corto se lee como una franja perdida en el medio. */
+@media (max-width: 767px) {
+    .kds-secure-loader {
+        min-height: 36rem;
+    }
 }
 
 .kds-secure-loader-text {
@@ -7989,6 +7998,36 @@ 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);
+        /* El clip-path del colapso recorta con `round 0 0 R R` y eso PISA al
+           border-radius: aunque la card declare las cuatro esquinas, el recorte las
+           deja rectas arriba. Hay que redondearlas también acá o el fix no se ve. */
+        clip-path: inset(
+            0 0
+            calc(
+                var(--collapse-collapsible-h) * var(--collapse-progress)
+                + var(--kds-spacing-1) * var(--collapse-progress)
+            )
+            0
+            round 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

@@ -899,6 +899,12 @@ const ui = _context.ui;
         console.log('Material Design initialization complete!');
     }
 
+    // El alto de la body card cambia de golpe entre pantallas, sin animar. Hubo una
+    // transición acá (KTUF-239) y se quitó en KTUF-314: ver el comentario en
+    // KdsThemeProvider.tsx — animar el alto obliga a fijar `height` en píxeles, y con el
+    // alto fijado no hay forma de medir el alto natural del contenido para saber cuándo
+    // soltarlo, así que la card quedaba con espacio muerto abajo.
+
     /**
      * Initialize merchant logo backdrop (KTUF-204)
      * Los logos de comercio van sobre el fondo neutro, no sobre el color de marca (los PNG