@khipu/design-system 0.1.0-alpha.54 → 0.1.0-alpha.56

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-30T18:22:01.744Z
+ * Generated: 2026-05-04T19:11:26.827Z
  *
  * 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,26 @@ 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);
+}
+
+/* Auto-managed tab panels: hidden attribute must win over any display rule */
+[data-kds-tab-panel][hidden] {
+    display: none;
 }
 
 
@@ -5671,6 +5703,7 @@ button.kds-btn-success::after {
     margin-top: var(--kds-spacing-1);
 }
 
+
 /* -- Field group spacing -- */
 .kds-field-group {
     margin-top: var(--kds-spacing-1-75);

package/dist/beercss/khipu-beercss.js

@@ -1135,11 +1135,34 @@ 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 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);
+            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);
+
+            /* 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) {
             var btn = e.target.closest('.kds-segmented-tabs button');
             if (!btn) return;
@@ -1156,6 +1179,16 @@ const ui = _context.ui;
             btn.setAttribute('aria-selected', 'true');
 
             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 }