@khipu/design-system 0.2.0-alpha.43 → 0.2.0-alpha.45

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-06-11T19:44:27.704Z
+ * Generated: 2026-06-12T13:45:42.180Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2141,7 +2141,7 @@ a.kds-btn-google:disabled {
 .kds-secure-loader-text {
     display: flex;
     flex-direction: column;
-    gap: var(--kds-spacing-1);
+    gap: var(--kds-spacing-0-25);
 }
 
 .kds-secure-loader-title {
@@ -2194,14 +2194,87 @@ a.kds-btn-google:disabled {
     }
 }
 
-/* Candado centrado sobre el anillo (0.4 del diámetro ≈ 40px, como el original) */
+/* Candado centrado sobre el anillo (~0.3 del diámetro). Centrado explícito
+   (top/left 50% + translate) para que no dependa del grid ni se recorte. */
 .kds-secure-loader-lock {
     position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     color: var(--kds-color-text-secondary);
-    font-size: calc(var(--kds-secure-loader-size, 6.25rem) * 0.4);
+    font-size: calc(var(--kds-secure-loader-size, 6.25rem) * 0.3);
+    line-height: 1;
     pointer-events: none;
 }
 
+/* ========================================
+   KDS COPY BUTTON
+   Chip compacto que muestra un valor + icono copy y lo copia al click.
+   Acción inline (distinto de KdsCopyRow). Look del copy button de khenshin.
+   ======================================== */
+
+.kds-copy-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
+    border: none;
+    border-radius: var(--kds-radius-button);
+    background: var(--kds-alert-info-bg);
+    color: var(--kds-color-info-dark);
+    font-family: var(--kds-font-family-secondary);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    line-height: var(--kds-line-height-normal);
+    cursor: pointer;
+    transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard),
+                color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-copy-button .material-symbols-outlined {
+    font-size: 1rem;
+    color: var(--kds-color-info-main);
+    flex-shrink: 0;
+}
+
+.kds-copy-button.copied {
+    background: var(--kds-alert-success-bg);
+    color: var(--kds-alert-success-text);
+    animation: kds-copy-button-pulse var(--kds-transition-short) var(--kds-easing-standard);
+}
+
+.kds-copy-button.copied .material-symbols-outlined {
+    color: var(--kds-color-success-main);
+    /* el check entra con un pop al copiar */
+    animation: kds-copy-button-pop var(--kds-transition-short) var(--kds-easing-standard);
+}
+
+@keyframes kds-copy-button-pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.04);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes kds-copy-button-pop {
+    0% {
+        transform: scale(0.3);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(1.25);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
 /* ========================================
    Link Styles
    ======================================== */