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

package/dist/beercss/khipu-beercss.scoped.css

@@ -15,7 +15,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-10-08T13:28:14.131Z
+ * Generated: 2026-10-09T13:21:42.374Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -6473,18 +6473,21 @@
 }
 
 .kds-theme-root .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-theme-root .kds-expand-panel {
     overflow: hidden;
-    transition: max-height 0.28s ease, margin-top 0.28s ease;
-    max-height: 0;
-}
-
-.kds-theme-root .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-theme-root .kds-expand-panel.open {
@@ -6493,6 +6496,8 @@
        which overrides this and prevents clipping regardless of content length. */
     max-height: 2000px;
     margin-top: 0;
+    visibility: visible;
+    transition-delay: 0s;
 }
 
 /* ========================================
@@ -8270,11 +8275,52 @@
    - 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-theme-root .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-theme-root .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-theme-root .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: 0;
+    }
+}
+
+@media (min-width: 768px) and (max-height: 998.98px) {
+    .kds-theme-root .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-theme-root .kds-screen > .kds-card-elevated.kds-card-elevated--action {
+        min-height: 0;
+    }
+}
+
 .kds-theme-root .kds-card-elevated--action > form {
     flex-grow: 1;
     display: flex;