@khipu/design-system 0.1.0-alpha.53 → 0.1.0-alpha.55

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-04-30T15:21:29.125Z
+ * Generated: 2026-05-04T15:34:36.820Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5177,15 +5177,35 @@ dialog#surveyModal button.circle {
 
 /* ========================================
    16 - SEGMENTED TABS (.kds-segmented-tabs)
-   Pill-group toggle for tab switching
+   Pill-group toggle with sliding indicator
    ======================================== */
 
 .kds-segmented-tabs {
+    --_tab-count: 2;
+    --_active-idx: 0;
     height: var(--kds-spacing-5);
-    background: var(--kds-color-background-elevated);
+    background: var(--kds-color-background-muted);
     border-radius: var(--kds-radius-lg);
     padding: var(--kds-spacing-0-25);
     display: flex;
+    position: relative;
+}
+
+/* Sliding pill indicator */
+.kds-segmented-tabs::before {
+    content: "";
+    position: absolute;
+    top: var(--kds-spacing-0-25);
+    bottom: var(--kds-spacing-0-25);
+    left: var(--kds-spacing-0-25);
+    width: calc((100% - var(--kds-spacing-0-25) * 2) / var(--_tab-count));
+    border-radius: calc(var(--kds-radius-lg) - var(--kds-spacing-0-25));
+    background: var(--kds-color-background-default);
+    box-shadow: var(--kds-shadow-card);
+    transition: transform var(--kds-transition-standard) var(--kds-easing-standard);
+    transform: translateX(calc(var(--_active-idx) * 100%));
+    z-index: 0;
+    pointer-events: none;
 }
 
 .kds-segmented-tabs.kds-segmented-tabs button {
@@ -5197,14 +5217,21 @@ dialog#surveyModal button.circle {
     font-size: var(--kds-font-size-sm);
     color: var(--kds-color-text-secondary);
     cursor: pointer;
-    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+    transition: color var(--kds-transition-shorter);
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    block-size: auto;
 }
 
 .kds-segmented-tabs.kds-segmented-tabs button.active,
 .kds-segmented-tabs.kds-segmented-tabs button[aria-selected="true"] {
-    background: var(--kds-color-primary-main);
-    color: var(--kds-color-primary-contrast);
-    box-shadow: var(--kds-shadow-card);
+    background: transparent;
+    color: var(--kds-color-text-primary);
+    font-weight: var(--kds-font-weight-semibold);
 }
 
 
@@ -5417,6 +5444,18 @@ dialog#surveyModal button.circle {
     font-size: 30px;
 }
 
+.kds-invoice-merchant-neutral {
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-border-subtle);
+    color: var(--kds-color-text-primary);
+}
+
+.kds-invoice-merchant.initials {
+    font-weight: 700;
+    font-size: 11px;
+    line-height: 1;
+}
+
 /* -- Card Title -- */
 .kds-card-title {
     font-weight: 700;

package/dist/beercss/khipu-beercss.js

@@ -1135,11 +1135,24 @@ 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
      * 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 */
+        root.querySelectorAll('.kds-segmented-tabs').forEach(function(tabs) {
+            var buttons = tabs.querySelectorAll('button');
+            tabs.style.setProperty('--_tab-count', buttons.length);
+            var activeIdx = 0;
+            buttons.forEach(function(b, i) {
+                if (b.classList.contains('active') || b.getAttribute('aria-selected') === 'true') activeIdx = i;
+            });
+            tabs.style.setProperty('--_active-idx', activeIdx);
+        });
+
         root.addEventListener('click', function(e) {
             var btn = e.target.closest('.kds-segmented-tabs button');
             if (!btn) return;
@@ -1156,6 +1169,8 @@ const ui = _context.ui;
             btn.setAttribute('aria-selected', 'true');
 
             var index = Array.prototype.indexOf.call(buttons, btn);
+            tabs.style.setProperty('--_active-idx', index);
+
             tabs.dispatchEvent(new CustomEvent('kds:tab:change', {
                 bubbles: true,
                 detail: { index: index, button: btn }