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

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-05T18:10:35.572Z
+ * Generated: 2026-10-06T20:11:26.407Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -1936,6 +1936,9 @@ a.kds-btn.kds-btn-md {
 .kds-mt-4 { margin-top: var(--kds-spacing-4); }
 .kds-mt-6 { margin-top: var(--kds-spacing-6); }
 .kds-mt-8 { margin-top: var(--kds-spacing-8); }
+/* Absorbe el espacio libre de un contenedor flex-column: ancla el elemento al fondo
+   (p.ej. las acciones de un form dentro de .kds-card-elevated--action). */
+.kds-mt-auto { margin-top: auto; }
 
 .kds-mb-0 { margin-bottom: 0; }
 .kds-mb-0-5 { margin-bottom: var(--kds-spacing-0-5); }
@@ -7478,6 +7481,48 @@ div.kds-invoice-header,
     padding: var(--kds-spacing-0-5);
 }
 
+/* -- Skeleton (KTUF-388) --
+   Gris pulsante que reserva el lugar de un contenido que aún no llega. La base solo pinta:
+   sobre un elemento que ya tiene tamaño (p.ej. .kds-invoice-merchant) conserva sus medidas,
+   radio y colapso, y solo cambia el fondo. */
+.kds-skeleton {
+    background: var(--kds-color-gray-200);
+    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. */
+.kds-skeleton--text {
+    display: inline-block;
+    width: 100%;
+    height: 1em;
+    vertical-align: middle;
+    border-radius: var(--kds-radius-sm);
+}
+
+[data-theme="dark"] .kds-skeleton {
+    background: var(--kds-color-gray-700);
+}
+
+@keyframes kds-skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kds-skeleton {
+        animation: none;
+    }
+}
+
+/* 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%; }
+
 /* 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:
    el centrado se venia pidiendo app por app y el resultado era inconsistente entre
@@ -8162,6 +8207,25 @@ 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
+     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);
+}
+
+.kds-card-elevated--action > form {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 /* 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. */