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

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-07T16:45:16.034Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2525,7 +2525,8 @@ 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.
+       Dentro de .kds-card-elevated--action el loader no usa este minimo: lo da el card. */
     min-height: 18rem;
 }
 
@@ -7251,6 +7252,10 @@ button.kds-fab:active:not(:disabled) {
         max-height: calc(100vh - var(--kds-spacing-12) - var(--kds-spacing-4));
         max-height: calc(100dvh - var(--kds-spacing-12) - var(--kds-spacing-4));
         overflow-y: auto;
+        /* El caret de "Detalle del cobro" baja 0.09em (corrección óptica de .kds-expand-toggle i)
+           y asomaba ~1.3px bajo el borde: con overflow auto eso bastaba para mostrar una barra
+           de scroll con el detalle cerrado. 2px de aire lo dejan dentro (KTUF-388). */
+        padding-bottom: 2px;
         overflow-x: hidden;
         overscroll-behavior-y: auto;
         scrollbar-width: thin;
@@ -7490,15 +7495,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 +7529,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 +8221,18 @@ 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.
+/* Body card con acción (opt-in, KTUF-388): un mismo alto mínimo para el loader, los pasos de
+   progreso, los formularios y los resultados, así el card no salta de alto entre pasos, y la
+   acción (submit) queda anclada al fondo con `.kds-mt-auto`. No cambia el default de arriba:
+   solo lo toma quien pone el modificador (khenshin-web, también en su card de carga).
+   - 36rem + el padding del card (624px): el alto del formulario de login de un banco, la
+     pantalla más alta del flujo, en teléfono y en desktop.
    - 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);
+    min-height: calc(36rem + 2 * var(--kds-spacing-3));
 }
 
 .kds-card-elevated--action > form {
@@ -8226,6 +8241,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. */