@khipu/design-system 0.2.0-alpha.101 → 0.2.0-alpha.103

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-07-07T13:09:45.086Z
+ * Generated: 2026-07-07T14:02:38.498Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -699,7 +699,8 @@ body.dark {
     --kds-color-danger-soft: var(--kds-alert-error-bg);      /* #FEF2F2 */
 
     /* Bottom Sheet */
-    --kds-bottom-sheet-max-width: 480px;
+    /* Mismo ancho que la card principal del flujo (stage narrow). */
+    --kds-bottom-sheet-max-width: var(--kds-stage-narrow-max-width);
     --kds-bottom-sheet-shadow: 0 -8px var(--kds-spacing-3-5) rgba(0, 0, 0, 0.18);
 
     /* Status Block */
@@ -2168,6 +2169,9 @@ a.kds-btn-google:disabled {
 
 .kds-secure-loader-message {
     margin: 0;
+    /* !important: anula el auto-espaciado de hermanos de BeerCSS (0,5,1);
+       la separación con el título la da el gap del contenedor (spacing-0-25). */
+    margin-top: 0 !important;
     font-family: var(--kds-font-family-secondary);
     font-size: var(--kds-font-size-body1);
     line-height: var(--kds-line-height-normal);
@@ -2184,12 +2188,13 @@ a.kds-btn-google:disabled {
     block-size: var(--kds-secure-loader-size, 6.25rem);
 }
 
-/* Anillo: SVG nativo con arco vía stroke-dasharray, rotando. Replica el
-   CircularProgress original (viewBox 44u, thickness 2, arco ~63%, disableShrink). */
+/* Anillo: SVG nativo con arco vía stroke-dasharray. Replica el CircularProgress
+   original (viewBox 44u, thickness 2, arco ~63%, disableShrink). El giro se anima
+   con stroke-dashoffset (el círculo queda estático y nítido); rotar el SVG con
+   transform rasteriza el anillo y se ve irregular durante el giro. */
 .kds-secure-loader-ring {
     inline-size: var(--kds-secure-loader-size, 6.25rem);
     block-size: var(--kds-secure-loader-size, 6.25rem);
-    animation: kds-secure-loader-spin 1.2s linear infinite;
 }
 
 .kds-secure-loader-ring circle {
@@ -2197,13 +2202,14 @@ a.kds-btn-google:disabled {
     stroke: var(--kds-color-primary-main);
     stroke-width: 2;
     stroke-linecap: round;
-    /* circunferencia ≈ 2π·20.2 ≈ 127; arco visible ≈ 80 (~63%) */
-    stroke-dasharray: 80 127;
+    /* circunferencia = 2π·20.2 ≈ 126.92; arco visible 80 (~63%) + hueco 46.92 */
+    stroke-dasharray: 80 46.92;
+    animation: kds-secure-loader-dash 1.2s linear infinite;
 }
 
-@keyframes kds-secure-loader-spin {
+@keyframes kds-secure-loader-dash {
     to {
-        transform: rotate(360deg);
+        stroke-dashoffset: -126.92;
     }
 }