@khipu/design-system 0.3.5-alpha.30 → 0.3.5-alpha.31

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-10-06T20:11:26.407Z
+ * Generated: 2026-10-07T15:44:56.536Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2525,15 +2525,18 @@ a.kds-btn-google:disabled {
        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. */
+       del loader el widget crecia y volvia a encoger.
+       .kds-card-elevated--action espeja este valor (y el de telefono): cambiarlos juntos. */
     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. */
+/* En telefono la carga es mas alta: ahi la card va a ancho completo y un loader corto se
+   lee como una franja perdida en el medio. 22rem (card de 400px con su padding) en vez de
+   los 36rem de antes (624px): con el header arriba, la pantalla entera cabe en el alto util
+   de la mayoria de los telefonos (KTUF-388). */
 @media (max-width: 767px) {
     .kds-secure-loader {
-        min-height: 36rem;
+        min-height: 22rem;
     }
 }
 
@@ -7490,15 +7493,22 @@ div.kds-invoice-header,
     animation: kds-skeleton-pulse 1.4s ease-in-out infinite;
 }
 
-/* Línea de texto: inline-block de 1em puesto DENTRO del elemento real (p.kds-invoice-amount,
-   dd, ...), hereda su font-size y line-height, así la caja mide lo mismo que con texto y el
-   reemplazo no desplaza el layout. */
+/* Texto: un texto de relleno con la tinta transparente, puesto DENTRO del elemento real
+   (p.kds-invoice-amount, dd, ...). Usa la fuente, el tamaño y el alto de línea del slot, así
+   que ancho y alto calzan con el contenido que reemplaza (también dentro de contenedores
+   flex, donde una caja de alto fijo perdía el alto de línea) y el cambio no desplaza nada. */
 .kds-skeleton--text {
-    display: inline-block;
-    width: 100%;
-    height: 1em;
-    vertical-align: middle;
+    color: transparent;
     border-radius: var(--kds-radius-sm);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    user-select: none;
+    /* Inline, el gris cubre la altura de la letra; se recorta arriba y abajo para que las
+       barras de líneas vecinas no se toquen. Solo visual: el layout no cambia. Va inline
+       también dentro de un flex (envuelto en un span): como item de flex cubriría todo el
+       alto de línea y quedaría más grueso que el resto. */
+    -webkit-clip-path: inset(0.2em 0 round var(--kds-radius-sm));
+    clip-path: inset(0.2em 0 round var(--kds-radius-sm));
 }
 
 [data-theme="dark"] .kds-skeleton {
@@ -7517,11 +7527,13 @@ div.kds-invoice-header,
 }
 
 /* Header de la factura mientras carga (KdsInvoiceHeaderSkeleton): mismo markup que el
-   header real, con anchos fijos por slot. */
-.kds-invoice-skeleton .kds-invoice-amount .kds-skeleton--text { width: 7.5em; }
-.kds-invoice-skeleton .kds-invoice-code .kds-skeleton--text { width: 13em; }
-.kds-invoice-skeleton .kds-kv dt .kds-skeleton--text { width: 4.5em; }
-.kds-invoice-skeleton .kds-kv dd .kds-skeleton--text { width: 65%; }
+   header real. El "Detalle del cobro" es decorativo, no un botón: replica lo que da el alto
+   al toggle real (line-height normal de button + caret de 1.25em de font-size-base). */
+.kds-invoice-skeleton .kds-expand-toggle {
+    cursor: default;
+    line-height: normal;
+    min-height: calc(var(--kds-font-size-base) * 1.25);
+}
 
 /* Titulo del body de la card: alineado a la izquierda, sin importar que el consumidor
    traiga .kds-text-center. Va con especificidad de contexto (screen + card) a proposito:
@@ -8207,17 +8219,24 @@ svg[fill='none'] {
     border-radius: var(--kds-radius-card);
 }
 
-/* Body card con acción (opt-in, KTUF-388): alto mínimo acotado para que el card no salte de
-   alto entre pasos y la acción (submit) quede anclada al fondo con `.kds-mt-auto`. No cambia
-   el default de arriba: lo pide cada app.
-   - Valor fijo, sin vh/dvh: en un iframe (KTUF-239) el viewport es el propio iframe, cuyo
+/* Body card con acción (opt-in, KTUF-388): mismo alto mínimo que el card de carga, para que
+   el card no salte de alto entre el loader, los pasos de progreso y los formularios, y la
+   acción (submit) quede anclada al fondo con `.kds-mt-auto`. No cambia el default de arriba:
+   solo lo toma quien pone el modificador (khenshin-web).
+   - Espeja el min-height de .kds-secure-loader (18rem / 22rem en teléfono) más el padding
+     vertical del card en el flujo (spacing-3 x2). Si cambia el del loader, cambia acá.
+   - Valores fijos, sin vh/dvh: en un iframe (KTUF-239) el viewport es el propio iframe, cuyo
      alto lo da el RESIZE del contenido; un mínimo relativo al viewport se realimenta.
-   - 21rem = alto del card de carga en desktop (loader 18rem + padding spacing-3 x2), así el
-     paso loader -> formulario no cambia de alto. Ajustable con el token.
    - El contenido directo (form) crece para que la acción baje dentro de él y no compita
      con el `margin-top: auto` de .kds-card-version. */
 .kds-screen > .kds-card-elevated.kds-card-elevated--action {
-    min-height: var(--kds-card-action-min-height, 21rem);
+    min-height: calc(18rem + 2 * var(--kds-spacing-3));
+}
+
+@media (max-width: 767px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: calc(22rem + 2 * var(--kds-spacing-3));
+    }
 }
 
 .kds-card-elevated--action > form {
@@ -8226,6 +8245,27 @@ svg[fill='none'] {
     flex-direction: column;
 }
 
+/* Pantallas cuyas acciones van en un .kds-btn-stack hijo directo del card (resultados:
+   éxito, fallo, timeout, pago manual): el stack se ancla al fondo como el submit de un form.
+   Su margen de siempre (spacing-2) pasa a padding para conservar el respiro mínimo, y la
+   versión que le sigue deja de absorber espacio; si no, el libre se repartía entre los dos
+   márgenes automáticos y el botón quedaba a media altura. */
+.kds-card-elevated--action > .kds-btn-stack {
+    margin-top: auto;
+    padding-top: var(--kds-spacing-2);
+}
+
+.kds-card-elevated--action > .kds-btn-stack ~ .kds-card-version {
+    margin-top: 0;
+}
+
+/* Un loader dentro del card (pasos de progreso) no suma su propio mínimo: ya lo da el card.
+   Si no, el card crecía el alto de la línea de versión en cada paso de carga y volvía a
+   encoger al llegar el formulario. El loader se centra en el alto que el card le deja. */
+.kds-card-elevated--action .kds-secure-loader {
+    min-height: 0;
+}
+
 /* Variante sin radio superior: pantallas de resultado (éxito/fallo/timeout) que van
    SIN header arriba — la body card va sola y su tope queda plano (flush) en vez de
    con esquinas redondeadas sueltas. El padding del card sigue manejando el inset. */