@khipu/design-system 0.2.0-alpha.13 → 0.2.0-alpha.15

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-18T17:09:39.680Z
+ * Generated: 2026-05-19T17:14:11.113Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -2161,6 +2161,17 @@ body.dark {
   transition: border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
 }
 
+/* === TEXTAREA FIX === */
+/* BeerCSS base sets minimal block padding; add breathing room for textarea */
+.field > textarea {
+  padding-block: 0.75rem;
+  resize: vertical;
+}
+
+.field.label > textarea {
+  padding-block-start: 1.5rem;
+}
+
 /* ==========================================
    NOTCH VISIBILITY (opacity)
    ========================================== */
@@ -5032,7 +5043,6 @@ dialog#surveyModal button.circle {
     color: var(--kds-color-primary-main);
     font-weight: var(--kds-font-weight-medium);
     font-size: var(--kds-font-size-sm);
-    padding-bottom: var(--kds-spacing-1-25);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -5648,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 {
@@ -5655,7 +5672,7 @@ div.kds-invoice-header,
 }
 
 .kds-invoice-amount {
-    font-weight: var(--kds-font-weight-bold);
+    font-weight: var(--kds-font-weight-semibold);
     font-size: var(--kds-font-size-3xl);
     line-height: var(--kds-line-height-tight);
     letter-spacing: var(--kds-letter-spacing-wide);
@@ -5721,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;
@@ -5750,7 +5767,7 @@ div.kds-invoice-header,
     margin: 0;
     font-size: var(--kds-font-size-sm);
     line-height: var(--kds-line-height-relaxed);
-    font-weight: var(--kds-font-weight-bold);
+    font-weight: var(--kds-font-weight-semibold);
     letter-spacing: normal;
     color: var(--kds-color-gray-800);
     min-width: 0;
@@ -5780,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 {
@@ -6043,17 +6066,39 @@ 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;
+    gap: var(--kds-spacing-0-75);
+    color: var(--kds-color-primary-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);
+}
+
 /* -- Share Card (mustContinue) -- */
 .kds-share-card {
     margin-top: var(--kds-spacing-2);
@@ -7002,7 +7047,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');
+                });
             }
         });