@khipu/design-system 0.2.0-alpha.47 → 0.2.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,7 +13,7 @@
13
13
  *
14
14
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
15
15
  * Source: design-system/src/tokens/tokens.json
16
- * Generated: 2026-06-12T20:54:46.291Z
16
+ * Generated: 2026-06-16T20:10:13.474Z
17
17
  *
18
18
  * To regenerate:
19
19
  * cd design-system && npm run tokens:generate
@@ -2233,6 +2233,33 @@
2233
2233
  color var(--kds-transition-shorter) var(--kds-easing-standard);
2234
2234
  }
2235
2235
 
2236
+ /* value y copiedText se apilan en la MISMA celda de grid: la celda toma el
2237
+ ancho del texto más largo, por lo que el botón conserva su ancho al alternar
2238
+ entre "valor" y "copiado" (sin reflow). */
2239
+ .kds-theme-root .kds-copy-button-label {
2240
+ display: inline-grid;
2241
+ }
2242
+
2243
+ .kds-theme-root .kds-copy-button-value,
2244
+ .kds-theme-root .kds-copy-button-copied {
2245
+ grid-area: 1 / 1;
2246
+ white-space: nowrap;
2247
+ }
2248
+
2249
+ /* Estado por defecto: visible el valor, oculto (pero ocupando espacio) el copiado */
2250
+ .kds-theme-root .kds-copy-button-copied {
2251
+ visibility: hidden;
2252
+ }
2253
+
2254
+ /* Al copiar se invierte la visibilidad; el ancho no cambia */
2255
+ .kds-theme-root .kds-copy-button.copied .kds-copy-button-value {
2256
+ visibility: hidden;
2257
+ }
2258
+
2259
+ .kds-theme-root .kds-copy-button.copied .kds-copy-button-copied {
2260
+ visibility: visible;
2261
+ }
2262
+
2236
2263
  .kds-theme-root .kds-copy-button .material-symbols-outlined {
2237
2264
  font-size: 1rem;
2238
2265
  color: var(--kds-color-info-main);
@@ -2541,6 +2568,23 @@
2541
2568
  color: var(--error); /* Rojo error */
2542
2569
  }
2543
2570
 
2571
+ /* ==========================================
2572
+ PASSWORD REVEAL TOGGLE (KdsTextField `revealable`)
2573
+ El <a role="button"> reusa el posicionamiento de icono de BeerCSS
2574
+ (.field > a, pointer-events: all). Aquí solo: color del icono
2575
+ (on-surface-variant) y un focus ring accesible para el toggle
2576
+ navegable por teclado (BeerCSS hace `outline: inherit` en <a>).
2577
+ ========================================== */
2578
+ .kds-theme-root .field > a.kds-field-reveal {
2579
+ color: var(--on-surface-variant);
2580
+ }
2581
+
2582
+ .kds-theme-root .field > a.kds-field-reveal:focus-visible {
2583
+ outline: 2px solid var(--primary);
2584
+ outline-offset: 2px;
2585
+ border-radius: 50%;
2586
+ }
2587
+
2544
2588
  /* ==========================================
2545
2589
  LABEL COLOR
2546
2590
  Mantener sincronizado con border