@khipu/design-system 0.2.0-alpha.14 → 0.2.0-alpha.16

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-18T19:35:17.082Z
+ * Generated: 2026-05-19T17:37:03.421Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5658,6 +5658,13 @@ div.kds-invoice-header,
     align-content: initial;
 }
 
+/* Mobile collapsed state: center-align so merchant tile aligns with the smaller amount */
+@media (max-width: 767px) {
+    .kds-invoice-sticky.is-collapsed .kds-invoice-header {
+        align-items: center;
+    }
+}
+
 /* Reset BeerCSS sibling margin on <p> inside invoice header — specificity (0,4,1) ties BeerCSS, wins by source order */
 .kds-card-elevated.kds-invoice-sticky .kds-invoice-header p.kds-invoice-amount,
 .kds-card-elevated.kds-invoice-sticky .kds-invoice-header p.kds-invoice-code {
@@ -5684,7 +5691,7 @@ div.kds-invoice-header,
     letter-spacing: var(--kds-letter-spacing-wider);
     font-variant-numeric: tabular-nums;
     color: var(--kds-color-gray-400);
-    text-transform: none;
+    text-transform: uppercase;
     margin: 0;
     margin-block: unset;
     margin: var(--kds-spacing-1) 0;
@@ -5731,7 +5738,7 @@ div.kds-invoice-header,
 
 /* -- Card Title -- */
 .kds-card-title {
-    font-weight: 700;
+    font-weight: var(--kds-font-weight-semibold);
     font-size: var(--kds-font-size-base);
     line-height: 1.5;
     letter-spacing: -0.31px;
@@ -5752,7 +5759,7 @@ div.kds-invoice-header,
     line-height: var(--kds-line-height-relaxed);
     letter-spacing: normal;
     color: var(--kds-color-text-secondary);
-    text-transform: none;
+    text-transform: uppercase;
     margin: 0;
 }
 
@@ -5790,7 +5797,13 @@ div.kds-invoice-header,
     flex-direction: column;
     gap: var(--kds-spacing-1-5);
     margin: 0;
-    padding: 0 0 var(--kds-spacing-2);
+    padding: 0;
+}
+
+@media (max-width: 767px) {
+    .kds-detail-list {
+        padding-bottom: var(--kds-spacing-2);
+    }
 }
 
 .kds-detail-group {
@@ -5805,7 +5818,7 @@ div.kds-invoice-header,
     font-size: var(--kds-font-size-xs);
     letter-spacing: var(--kds-letter-spacing-wide);
     color: var(--kds-color-text-hint);
-    text-transform: none;
+    text-transform: uppercase;
 }
 
 .kds-detail-group dd {
@@ -6053,17 +6066,42 @@ button.kds-btn-success::after {
 }
 
 .kds-bill-description-picture {
-    width: 120px;
-    height: 120px;
+    max-width: 100px;
     object-fit: contain;
     background: var(--kds-color-background-paper);
-    padding: var(--kds-spacing-1-25);
-    border-radius: var(--kds-radius-md);
-    margin-top: var(--kds-spacing-1);
+    margin-top: var(--kds-spacing-1-25);
     display: block;
     box-sizing: content-box;
 }
 
+/* -- Bill Attachments -- */
+.kds-bill-attachments {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-0-75);
+}
+
+.kds-bill-attachment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+    color: var(--kds-color-info-main);
+    font-size: var(--kds-font-size-sm);
+    font-weight: var(--kds-font-weight-medium);
+    text-decoration: none;
+}
+
+.kds-bill-attachment:hover span {
+    text-decoration: underline;
+}
+
+.kds-bill-attachment i {
+    font-size: var(--kds-font-size-lg);
+    min-width: unset;
+    justify-content: flex-start;
+}
+
 /* -- Share Card (mustContinue) -- */
 .kds-share-card {
     margin-top: var(--kds-spacing-2);
@@ -7012,7 +7050,7 @@ a.kds-copy-all-btn.copied:hover {
 .kds-monto-row {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: flex-start;
     padding: var(--kds-spacing-1-75) 0 var(--kds-spacing-1);
     border-top: 1px dashed var(--kds-color-divider);
     margin-top: var(--kds-spacing-1-75);

package/dist/beercss/khipu-beercss.js

@@ -1330,9 +1330,9 @@ const ui = _context.ui;
     function initStickyInvoice(root) {
         root = root || document;
 
-        // Progressive collapse range: 0px (expanded) to 30px (collapsed)
+        // Progressive collapse range: 0px (expanded) to 20px (collapsed)
         var COLLAPSE_START = 0;
-        var COLLAPSE_END = 30;
+        var COLLAPSE_END = 20;
 
         var lastScrollY = 0;
         var ticking = false;
@@ -1380,13 +1380,16 @@ const ui = _context.ui;
                 if (!currentScreen.style.getPropertyValue('--collapse-collapsible-h')) {
                     var collapsible = currentSticky.querySelector('.kds-invoice-collapsible');
                     if (collapsible) {
-                        currentScreen.style.setProperty('--collapse-collapsible-h', Math.min(collapsible.offsetHeight, 87) + 'px');
+                        currentScreen.style.setProperty('--collapse-collapsible-h', collapsible.offsetHeight + 'px');
                     }
                 }
 
                 // Single DOM write per frame — set on screen (parent) so it cascades to sticky + siblings
                 currentScreen.style.setProperty('--collapse-progress', progress);
 
+                // Toggle collapsed state class for discrete styling that can't interpolate (e.g. align-items)
+                currentSticky.classList.toggle('is-collapsed', progress >= 1);
+
                 // Close expand panels as soon as the sticky header starts collapsing
                 if (progress > 0) {
                     currentSticky.querySelectorAll('[data-expand-toggle][aria-expanded="true"]').forEach(function(toggle) {
@@ -1410,6 +1413,9 @@ const ui = _context.ui;
                     screen.style.removeProperty('--collapse-progress');
                     screen.style.removeProperty('--collapse-collapsible-h');
                 });
+                root.querySelectorAll('.kds-invoice-sticky.is-collapsed').forEach(function(el) {
+                    el.classList.remove('is-collapsed');
+                });
             }
         });