@khipu/design-system 0.1.0-alpha.55 → 0.2.0-alpha.2

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-05-04T15:34:36.820Z
+ * Generated: 2026-05-05T20:41:24.239Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -133,16 +133,7 @@
   --kds-font-weight-semibold: 600;
   --kds-font-weight-bold: 700;
 
-  /* Font sizes */
-  --kds-font-size-xs: 0.75rem;
-  --kds-font-size-sm: 0.875rem;
-  --kds-font-size-base: 1rem;
-  --kds-font-size-lg: 1.125rem;
-  --kds-font-size-xl: 1.25rem;
-  --kds-font-size-2xl: 1.5rem;
-  --kds-font-size-3xl: 1.875rem;
-  --kds-font-size-4xl: 2.25rem;
-
+  /* Font sizes (base scale xs–4xl: see responsive section below) */
   /* Line heights */
   --kds-line-height-tight: 1.2;
   --kds-line-height-snug: 1.375;
@@ -365,6 +356,16 @@
      ========================================================================== */
 
 
+  /* Base font-size scale */
+  --kds-font-size-xs: 0.6875rem;
+  --kds-font-size-sm: 0.8125rem;
+  --kds-font-size-base: 0.875rem;
+  --kds-font-size-lg: 1rem;
+  --kds-font-size-xl: 1.125rem;
+  --kds-font-size-2xl: 1.25rem;
+  --kds-font-size-3xl: 1.5rem;
+  --kds-font-size-4xl: 1.875rem;
+
   /* Headings */
   --kds-font-size-h1: 1.75rem;
   --kds-font-size-h2: 1.5rem;
@@ -401,6 +402,16 @@
 /* Tablet (600px+) - Typography */
 @media (min-width: 600px) {
   :root {
+
+    /* Base font-size scale */
+    --kds-font-size-xs: 0.75rem;
+    --kds-font-size-sm: 0.875rem;
+    --kds-font-size-base: 1rem;
+    --kds-font-size-lg: 1.125rem;
+    --kds-font-size-xl: 1.25rem;
+    --kds-font-size-2xl: 1.5rem;
+    --kds-font-size-3xl: 1.875rem;
+    --kds-font-size-4xl: 2.25rem;
     --kds-font-size-h1: 2rem;
     --kds-font-size-h2: 1.75rem;
     --kds-font-size-h3: 1.5rem;
@@ -428,6 +439,16 @@
 /* Desktop (840px+) - Typography */
 @media (min-width: 840px) {
   :root {
+
+    /* Base font-size scale */
+    --kds-font-size-xs: 0.75rem;
+    --kds-font-size-sm: 0.875rem;
+    --kds-font-size-base: 1rem;
+    --kds-font-size-lg: 1.125rem;
+    --kds-font-size-xl: 1.25rem;
+    --kds-font-size-2xl: 1.5rem;
+    --kds-font-size-3xl: 1.875rem;
+    --kds-font-size-4xl: 2.25rem;
     --kds-font-size-h1: 2.5rem;
     --kds-font-size-h2: 2rem;
     --kds-font-size-h3: 1.75rem;
@@ -799,6 +820,7 @@ a.kds-btn {
     align-items: center;
     justify-content: center;
     gap: 8px;
+    text-align: center;
 
     /* Typography - Using design tokens */
     font-family: var(--kds-font-family-secondary);
@@ -984,7 +1006,12 @@ a.kds-btn > .kds-icon > i {
     min-width: var(--kds-spacing-button-icon-size);
     min-height: var(--kds-spacing-button-icon-size);
     line-height: 1;
-    top: 1px;
+}
+
+/* Full-width button */
+button.kds-btn.kds-btn-block,
+a.kds-btn.kds-btn-block {
+    width: 100%;
 }
 
 /* ========================================
@@ -1008,12 +1035,6 @@ a.kds-btn.kds-btn-md {
 
 /* Default .kds-btn uses --kds-spacing-button-min-height (50px) from base styles */
 
-/* Full-width button */
-button.kds-btn.kds-btn-block,
-a.kds-btn.kds-btn-block {
-    width: 100%;
-}
-
 /* ========================================
    Card Components (Material Design 3)
    ======================================== */
@@ -4032,6 +4053,96 @@ dialog#surveyModal button.circle {
     font-size: var(--kds-font-size-sm);
 }
 
+/* ── Typography variants ── */
+.kds-text-display1 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-4xl, 36px);
+    font-weight: var(--kds-font-weight-bold, 700);
+    line-height: var(--kds-line-height-tight, 1.2);
+    letter-spacing: var(--kds-letter-spacing-tight, -0.025em);
+}
+
+.kds-text-display2 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-3xl, 30px);
+    font-weight: var(--kds-font-weight-bold, 700);
+    line-height: var(--kds-line-height-tight, 1.2);
+    letter-spacing: var(--kds-letter-spacing-tight, -0.025em);
+}
+
+.kds-text-heading1 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-2xl, 24px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-snug, 1.375);
+}
+
+.kds-text-heading2 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-xl, 20px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-snug, 1.375);
+}
+
+.kds-text-heading3 {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-lg, 18px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-normal, 1.5);
+}
+
+.kds-text-body-large {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-base, 16px);
+    font-weight: var(--kds-font-weight-regular, 400);
+    line-height: var(--kds-line-height-relaxed, 1.66);
+}
+
+.kds-text-body {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm, 14px);
+    font-weight: var(--kds-font-weight-regular, 400);
+    line-height: var(--kds-line-height-normal, 1.5);
+}
+
+.kds-text-body-small {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm, 12px);
+    font-weight: var(--kds-font-weight-regular, 400);
+    line-height: var(--kds-line-height-normal, 1.5);
+}
+
+.kds-text-label {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-sm, 12px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-normal, 1.5);
+    letter-spacing: var(--kds-letter-spacing-widest, 1px);
+    text-transform: uppercase;
+}
+
+.kds-text-label-small {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: var(--kds-font-size-xs, 10px);
+    font-weight: var(--kds-font-weight-semibold, 600);
+    line-height: var(--kds-line-height-normal, 1.5);
+    letter-spacing: var(--kds-letter-spacing-widest, 1px);
+    text-transform: uppercase;
+}
+
+.kds-text-link {
+    font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
+    font-size: inherit;
+    font-weight: var(--kds-font-weight-medium, 500);
+    color: var(--kds-color-primary-main, #8347AD);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.kds-text-link:hover {
+    color: var(--kds-color-primary-dark, #5B3179);
+}
+
 /* Display utilities */
 .kds-hidden {
     display: none;
@@ -4535,14 +4646,26 @@ dialog#surveyModal button.circle {
 
 .field.locked > input,
 .field.locked > textarea {
-    background: var(--kds-color-shell);
-    color: var(--kds-color-text-secondary);
+    color: var(--kds-color-text-disabled);
     cursor: default;
-    border-color: var(--kds-color-divider);
+    pointer-events: none;
 }
 
 .field.locked > label {
-    color: var(--kds-color-text-hint);
+    color: var(--kds-color-text-disabled);
+}
+
+/* Locked: suppress all hover/focus visual changes */
+.field.label.border:not(.fill).locked:hover:not(:focus-within) > label::after,
+.field.label.border:not(.fill).locked:focus-within > label::after {
+    border-block-start-color: var(--outline);
+}
+.field.label.border:not(.fill).locked:hover:not(:focus-within) > :is(input, textarea, select),
+.field.label.border:not(.fill).locked:focus-within > :is(input, textarea, select) {
+    border-color: var(--outline);
+}
+.field.label.locked:hover:not(:focus-within) > label {
+    color: var(--kds-color-text-disabled);
 }
 
 .field.locked > i {
@@ -5234,6 +5357,11 @@ dialog#surveyModal button.circle {
     font-weight: var(--kds-font-weight-semibold);
 }
 
+/* Auto-managed tab panels: hidden attribute must win over any display rule */
+[data-kds-tab-panel][hidden] {
+    display: none;
+}
+
 
 /* ========================================
    PAYMENT FLOW — DOMAIN COMPONENTS
@@ -5279,8 +5407,8 @@ dialog#surveyModal button.circle {
         /* Symmetric padding */
         padding: var(--kds-spacing-2);
 
-        /* Static border-radius on all corners */
-        border-radius: var(--kds-radius-card);
+        /* Bottom-only border-radius — top is flush so the brand-inner logo isn't clipped */
+        border-radius: 0 0 var(--kds-radius-card) var(--kds-radius-card);
 
         /* Override .kds-card-elevated transition — scroll drives the animation, not CSS transitions */
         transition: none;
@@ -5292,10 +5420,8 @@ dialog#surveyModal button.circle {
         /* clip-path clips the card from the bottom to hide the collapsible space.
            This is VISUAL ONLY — no layout change — prevents scroll feedback loop.
            Safari 13.1+ compatible (inset + round)
-           When collapsed (progress=1): bottom corners get border-radius,
-           top stays flush with screen edge. */
-        /* Bottom inset = collapsible height + half the card padding to tighten
-           the gap between "Código" and the visible bottom edge when collapsed. */
+           round uses bottom-only radii (0 top, card-radius bottom) to match
+           border-radius and avoid clipping the brand logo at the top corners. */
         clip-path: inset(
             0 0
             calc(
@@ -5303,7 +5429,7 @@ dialog#surveyModal button.circle {
                 + var(--kds-spacing-1) * var(--collapse-progress)
             )
             0
-            round var(--kds-radius-card)
+            round 0 0 var(--kds-radius-card) var(--kds-radius-card)
         );
 
         /* Suppress card's own shadow — wrapper handles it */
@@ -5314,7 +5440,8 @@ dialog#surveyModal button.circle {
     .kds-invoice-sticky .kds-brand-inner {
         margin-bottom: calc(var(--kds-spacing-1) * (1 - var(--collapse-progress)) + var(--kds-spacing-0-5) * var(--collapse-progress));
     }
-    .kds-invoice-sticky .kds-brand-inner svg {
+    .kds-invoice-sticky .kds-brand-inner svg,
+    .kds-invoice-sticky .kds-brand-inner img {
         height: calc(22px - 5px * var(--collapse-progress));
     }
 
@@ -5375,6 +5502,12 @@ dialog#surveyModal button.circle {
     }
 }
 
+/* Invoice sticky: mobile-first — bottom-only border-radius to prevent clipping the brand logo.
+   Desktop restores full border-radius (see min-width:768px block below). */
+.kds-card-elevated.kds-invoice-sticky {
+    border-radius: 0 0 var(--kds-radius-card) var(--kds-radius-card);
+}
+
 /* -- Invoice Collapsible (kv rows below header) -- */
 .kds-invoice-collapsible {
     margin-top: var(--kds-spacing-1-5);
@@ -5396,11 +5529,17 @@ dialog#surveyModal button.circle {
 }
 
 /* -- Invoice Header (amount + merchant tile) -- */
+/* Compound selector overrides BeerCSS `header { padding:0 1rem; display:grid; align-content:center }` */
+header.kds-invoice-header,
+div.kds-invoice-header,
 .kds-invoice-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--kds-spacing-2);
+    padding: 0;
+    border-radius: 0;
+    align-content: initial;
 }
 
 /* Reset BeerCSS sibling margin on <p> inside invoice header — specificity (0,4,1) ties BeerCSS, wins by source order */
@@ -5759,6 +5898,18 @@ button.kds-btn-success::after {
     box-shadow: var(--kds-shadow-card);
 }
 
+/* Payment flow cards — mobile-first: no vertical padding.
+   Desktop (min-width: 768px) restores padding + full border-radius. */
+.kds-payment-flow .kds-card-elevated {
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
+    padding-top: var(--kds-spacing-1);
+    padding-bottom: 0;
+}
+
 /* Payment stage — full-viewport centered wrapper */
 .kds-payment-stage {
     min-height: 100vh;
@@ -5799,13 +5950,26 @@ button.kds-btn-success::after {
 
 }
 
+/* Desktop: restore card padding and full border-radius on invoice sticky */
+@media (min-width: 768px) {
+    .kds-payment-flow .kds-card-elevated,
+    .kds-payment-flow .kds-card-elevated.kds-invoice-sticky {
+        padding-top: var(--kds-spacing-2);
+        padding-bottom: var(--kds-spacing-2);
+    }
+    .kds-card-elevated.kds-invoice-sticky {
+        border-radius: var(--kds-radius-card);
+    }
+}
+
 /* Brand logo row (external, outside cards) */
 .kds-brand-row {
     padding: 0 var(--kds-spacing-0-5);
     display: flex;
     align-items: center;
 }
-.kds-brand-row svg {
+.kds-brand-row svg,
+.kds-brand-row img {
     height: 22px;
     display: block;
 }
@@ -5815,8 +5979,10 @@ button.kds-btn-success::after {
     display: none;
     align-items: center;
     margin-bottom: var(--kds-spacing-1);
+    border-radius: 0;
 }
-.kds-brand-inner svg {
+.kds-brand-inner svg,
+.kds-brand-inner img {
     height: 22px;
     display: block;
 }

package/dist/beercss/khipu-beercss.js

@@ -1136,13 +1136,14 @@ const ui = _context.ui;
      * Initialize segmented tabs
      * Delegated click on .kds-segmented-tabs button toggles .active and aria-selected
      * Sets --_active-idx and --_tab-count CSS custom properties for sliding pill animation
+     * Auto-manages tab panels via data-kds-tab-panel attributes on sibling elements
      * Dispatches kds:tab:change with { index, button }
      * @param {Element} root - Root element to scope listeners (default: document)
      */
     function initSegmentedTabs(root) {
         root = root || document;
 
-        /* Set initial CSS vars on all segmented-tab containers */
+        /* Set initial CSS vars and panel visibility on all segmented-tab containers */
         root.querySelectorAll('.kds-segmented-tabs').forEach(function(tabs) {
             var buttons = tabs.querySelectorAll('button');
             tabs.style.setProperty('--_tab-count', buttons.length);
@@ -1151,6 +1152,15 @@ const ui = _context.ui;
                 if (b.classList.contains('active') || b.getAttribute('aria-selected') === 'true') activeIdx = i;
             });
             tabs.style.setProperty('--_active-idx', activeIdx);
+
+            /* Auto-bind panels: find sibling elements with data-kds-tab-panel */
+            var parent = tabs.parentElement;
+            if (parent) {
+                var panels = parent.querySelectorAll('[data-kds-tab-panel]');
+                panels.forEach(function(panel, i) {
+                    panel.hidden = i !== activeIdx;
+                });
+            }
         });
 
         root.addEventListener('click', function(e) {
@@ -1171,6 +1181,14 @@ const ui = _context.ui;
             var index = Array.prototype.indexOf.call(buttons, btn);
             tabs.style.setProperty('--_active-idx', index);
 
+            /* Auto-toggle panels */
+            var parent = tabs.parentElement;
+            if (parent) {
+                parent.querySelectorAll('[data-kds-tab-panel]').forEach(function(panel, i) {
+                    panel.hidden = i !== index;
+                });
+            }
+
             tabs.dispatchEvent(new CustomEvent('kds:tab:change', {
                 bubbles: true,
                 detail: { index: index, button: btn }