@khipu/design-system 0.2.0-alpha.132 → 0.2.0-alpha.134

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:35:15.070Z
+ * Generated: 2026-07-21T18:07:09.029Z
  *
  * 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 */
@@ -1134,14 +1136,13 @@ a.kds-btn-outlined-white:hover:not(:disabled) {
     opacity: 0.9;
 }
 
-/* Text button */
+/* Text button — mismo tamaño que el resto de variantes (hereda min-height/padding
+   del base): solo cambia la superficie, no la caja. */
 button.kds-btn-text,
 a.kds-btn-text {
     background: transparent;
     color: var(--kds-color-primary-main);
     border: none;
-    padding: 6px var(--kds-spacing-2);  /* Menor padding para text variant */
-    min-height: 32px;   /* Menor altura para text variant */
     box-shadow: none;
 }
 
@@ -1170,8 +1171,6 @@ a.kds-btn-error-text {
     background: transparent;
     color: var(--kds-color-error-main);
     border: none;
-    padding: 6px var(--kds-spacing-2);
-    min-height: 32px;
     box-shadow: none;
 }
 
@@ -1187,9 +1186,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 +1206,22 @@ a.kds-btn > .kds-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    vertical-align: middle;
+}
+
+/* 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 {
+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);