@khipu/design-system 0.2.0-alpha.131 → 0.2.0-alpha.133

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-21T15:13:12.103Z
+ * Generated: 2026-07-21T17:45:24.815Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -988,10 +988,12 @@ a.kds-btn {
 
     /* Spacing - Using design tokens */
     padding: var(--kds-spacing-button-padding);      /* 0 16px */
-    height: var(--kds-spacing-button-min-height);    /* 44px */
-    /* min-height además de height: en contenedores flex-column (p.ej. pantallas de
-       resultado/timeout) el botón es flex-item y, con solo `height`, flex-shrink lo
-       colapsaba a la altura del texto (~21px). min-height impide que se encoja. */
+    /* Respiro vertical solo relevante con label multilinea; en una linea manda min-height. */
+    padding-block: var(--kds-spacing-1);
+    /* height:auto + min-height (no height fija): si el label envuelve en pantallas
+       angostas el botón crece en vez de recortar el texto; min-height ademas impide
+       que flex-shrink lo colapse como flex-item en contenedores flex-column. */
+    height: auto;
     min-height: var(--kds-spacing-button-min-height);    /* 44px */
 
     /* Border - Using design token */
@@ -1187,9 +1189,16 @@ a.kds-btn-error-text:disabled {
     box-shadow: none;
 }
 
+/* Label: al envolver en pantallas angostas las lineas quedan parejas y el icono
+   (inline, dentro del label) fluye con el texto en vez de anclarse al borde. */
+button.kds-btn .kds-btn-label,
+a.kds-btn .kds-btn-label {
+    text-wrap: balance;
+}
+
 /* Icon wrapper - control size via span container */
-button.kds-btn > .kds-icon,
-a.kds-btn > .kds-icon {
+button.kds-btn .kds-icon,
+a.kds-btn .kds-icon {
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
     width: var(--kds-spacing-button-icon-size);
@@ -1200,10 +1209,22 @@ a.kds-btn > .kds-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    vertical-align: middle;
 }
 
-button.kds-btn > .kds-icon > i,
-a.kds-btn > .kds-icon > i {
+/* El gap del boton no aplica al icono inline: el respiro icono-texto sale del margen. */
+button.kds-btn .kds-icon-start,
+a.kds-btn .kds-icon-start {
+    margin-inline-end: var(--kds-spacing-1);
+}
+
+button.kds-btn .kds-icon-end,
+a.kds-btn .kds-icon-end {
+    margin-inline-start: var(--kds-spacing-1);
+}
+
+button.kds-btn .kds-icon > i,
+a.kds-btn .kds-icon > i {
     font-size: var(--kds-spacing-button-icon-size);
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
@@ -6236,6 +6257,11 @@ button.kds-fab:focus-visible {
     height: 1.25em;
     min-width: 0;
     min-height: 0;
+    /* Correccion optica: la tinta de expand_more vive en la zona alta del em, asi que
+       centrado geometrico contra el label (con ascendentes) se percibe montado; este
+       nudge lo baja al centro de las minusculas. No usar transform: lo pisa el rotate. */
+    position: relative;
+    top: 0.09em;
     transition: transform var(--kds-transition-shorter, 0.2s);
 }