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

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-07T15:44:56.536Z
+ * Generated: 2026-10-08T13:28:14.131Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2526,17 +2526,15 @@ a.kds-btn-google:disabled {
        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.
-       .kds-card-elevated--action espeja este valor (y el de telefono): cambiarlos juntos. */
+       Dentro de .kds-card-elevated--action el loader no usa este minimo: lo da el card. */
     min-height: 18rem;
 }
 
-/* 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). */
+/* 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: 22rem;
+        min-height: 36rem;
     }
 }
 
@@ -5129,7 +5127,10 @@ dialog#surveyModal button.circle {
 }
 
 /* ── Text-transform utilities ── */
+/* Also declares --kds-button-text-transform: .kds-btn reads that variable, so the
+   utility wins on buttons without a specificity fight (button.kds-btn is 0-1-1). */
 .kds-text-transform-none {
+    --kds-button-text-transform: none;
     text-transform: none;
 }
 
@@ -6798,6 +6799,43 @@ button.kds-fab:active:not(:disabled) {
     to { transform: rotate(360deg); }
 }
 
+/* Dots loader: three dots pulsing in sequence, for an in-progress status inline with
+   text. Color follows currentColor so the consumer sets it with a color utility. */
+.kds-dots-loader {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--kds-spacing-0-5);
+    vertical-align: middle;
+}
+
+.kds-dots-loader > span {
+    animation: kds-dots-pulse 1.2s ease-in-out infinite;
+    background: currentColor;
+    border-radius: var(--kds-radius-full);
+    height: var(--kds-spacing-0-75);
+    width: var(--kds-spacing-0-75);
+}
+
+.kds-dots-loader > span:nth-child(2) {
+    animation-delay: 0.15s;
+}
+
+.kds-dots-loader > span:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+@keyframes kds-dots-pulse {
+    0%, 80%, 100% { opacity: 0.25; }
+    40% { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kds-dots-loader > span {
+        animation: none;
+        opacity: 0.6;
+    }
+}
+
 /* ========================================
    14 - BOTTOM SHEET (.kds-bottom-sheet)
    Modal bottom sheet for mobile confirmations
@@ -7254,6 +7292,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;
@@ -8219,24 +8261,18 @@ svg[fill='none'] {
     border-radius: var(--kds-radius-card);
 }
 
-/* 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
+/* 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.
    - 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: 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));
-    }
+    min-height: calc(36rem + 2 * var(--kds-spacing-3));
 }
 
 .kds-card-elevated--action > form {