@khipu/design-system 0.1.0-alpha.55 → 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-05-04T15:34:36.820Z
+ * Generated: 2026-05-04T19:11:26.827Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5234,6 +5234,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
@@ -5698,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

@@ -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 }