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

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-07T16:45:16.034Z
+ * Generated: 2026-10-09T13:21:42.374Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5127,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;
 }
 
@@ -6470,18 +6473,21 @@ button.kds-fab:active:not(:disabled) {
 }
 
 .kds-expand-toggle[aria-expanded="true"] i {
-    transform: rotate(180deg);
+    /* The `top` nudge is tuned for the closed chevron (expand_more). Rotated, the up-chevron
+       reads low with the same nudge, so the open state takes it back. It lives in the transform
+       (not `top`) so it animates together with the rotation instead of jumping. */
+    transform: translateY(-0.09em) rotate(180deg);
 }
 
 .kds-expand-panel {
     overflow: hidden;
-    transition: max-height 0.28s ease, margin-top 0.28s ease;
-    max-height: 0;
-}
-
-.kds-expand-panel[hidden] {
-    display: block;
     max-height: 0;
+    /* Collapsed content is out of the accessibility tree and the tab order without the
+       `hidden` attribute: the global `[hidden]` rule (forced, !important) would cut the
+       max-height transition. visibility flips at the end of the close, so the collapse
+       still animates. */
+    visibility: hidden;
+    transition: max-height 0.28s ease, margin-top 0.28s ease, visibility 0s linear 0.28s;
 }
 
 .kds-expand-panel.open {
@@ -6490,6 +6496,8 @@ button.kds-fab:active:not(:disabled) {
        which overrides this and prevents clipping regardless of content length. */
     max-height: 2000px;
     margin-top: 0;
+    visibility: visible;
+    transition-delay: 0s;
 }
 
 /* ========================================
@@ -6796,6 +6804,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
@@ -8230,11 +8275,52 @@ svg[fill='none'] {
    - 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. */
+     con el `margin-top: auto` de .kds-card-version.
+   - En pantallas bajas (iframes chicos de comercios, teléfonos chicos) el mínimo baja por
+     escalones, ver abajo. */
 .kds-screen > .kds-card-elevated.kds-card-elevated--action {
     min-height: calc(36rem + 2 * var(--kds-spacing-3));
 }
 
+/* Mínimo del card en pantallas bajas. Algunos comercios embeben el flujo en iframes de alto
+   fijo y reducido: un mínimo de 624px obligaba a scrollear aunque el contenido del paso
+   cupiera. Regla: un escalón aplica solo si la pantalla completa (header + card con ese
+   mínimo + footer seguro + márgenes del stage) cabe en el alto; si no, baja al siguiente.
+   Medido en khenshin-web con su .kds-secure-footer (80px), el caso más alto:
+   - 624px (36rem + padding): pantalla de ~971px en teléfono y ~999px en desktop.
+   - 400px (22rem + padding): pantalla de ~747px en teléfono y ~775px en desktop.
+   - Debajo de eso, sin mínimo: el card mide lo que su contenido.
+   Los umbrales son exactamente esos altos (como los mide el HeightReporter de khenshin-web:
+   contenido del flow + padding del stage), sin holgura: el mínimo nunca agrega scroll en
+   una pantalla o iframe fijo. Con alto automático (KTUF-239, `autoHeight`) el alto que
+   resulta de un escalón cae justo en su umbral, así que se queda ahí y no oscila. Con un
+   header más bajo (sin fila de detalle), sin footer seguro (`showSecureFooter: false`) o
+   sin header (--flush-top) la pantalla mide menos que su umbral: con alto automático el card
+   termina sin mínimo (vuelve a crecer por paso, sin scroll). */
+@media (max-width: 767px) and (max-height: 970.98px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: calc(22rem + 2 * var(--kds-spacing-3));
+    }
+}
+
+@media (max-width: 767px) and (max-height: 746.98px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: 0;
+    }
+}
+
+@media (min-width: 768px) and (max-height: 998.98px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: calc(22rem + 2 * var(--kds-spacing-3));
+    }
+}
+
+@media (min-width: 768px) and (max-height: 774.98px) {
+    .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: 0;
+    }
+}
+
 .kds-card-elevated--action > form {
     flex-grow: 1;
     display: flex;