@khipu/design-system 0.1.0-alpha.29 → 0.1.0-alpha.30

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-03-26T19:18:15.487Z
+ * Generated: 2026-03-27T13:16:02.917Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -267,13 +267,115 @@
 
 
   /* Breakpoints */
-  --kds-breakpoint-mobile: 768px;
-  --kds-breakpoint-tablet: 1024px;
-  --kds-breakpoint-desktop: 1025px;
+  --kds-breakpoint-mobile: 600px;
+  --kds-breakpoint-tablet: 840px;
+  --kds-breakpoint-desktop: 1280px;
+  --kds-breakpoint-legacyMobile: 768px;
+  --kds-breakpoint-legacyTablet: 1024px;
 
+  /* ==========================================================================
+     RESPONSIVE SPACING (MOBILE BASE)
+     ========================================================================== */
+
+
+  /* Container */
+  --kds-container-padding: 16px;
+
+  /* Cards */
+  --kds-card-padding: 16px;
+
+  /* Sections */
+  --kds-section-gap: 24px;
+
+  /* Elements */
+  --kds-element-gap: 12px;
+
+  /* Margins */
+  --kds-section-margin: 16px;
+
+  /* ==========================================================================
+     RESPONSIVE TYPOGRAPHY (MOBILE BASE)
+     ========================================================================== */
+
+
+  /* Headings */
+  --kds-font-size-h1: 1.75rem;
+  --kds-font-size-h2: 1.5rem;
+  --kds-font-size-h3: 1.25rem;
+  --kds-font-size-h4: 1.125rem;
+  --kds-font-size-h5: 1rem;
+  --kds-font-size-h6: 1rem;
+
+  /* Body */
+  --kds-font-size-body1: 0.875rem;
+  --kds-font-size-body2: 0.8125rem;
+
+  /* Components */
+  --kds-font-size-button: 0.875rem;
+  --kds-font-size-caption: 0.6875rem;
+
+}
+
+/* ============================================================================
+   RESPONSIVE TOKENS (Mobile-First)
+   ============================================================================ */
+
+/* Tablet (600px+) - Spacing */
+@media (min-width: 600px) {
+  :root {
+    --kds-container-padding: 24px;
+    --kds-card-padding: 20px;
+    --kds-section-gap: 32px;
+    --kds-element-gap: 16px;
+    --kds-section-margin: 24px;
+  }
+}
+
+/* Tablet (600px+) - Typography */
+@media (min-width: 600px) {
+  :root {
+    --kds-font-size-h1: 2rem;
+    --kds-font-size-h2: 1.75rem;
+    --kds-font-size-h3: 1.5rem;
+    --kds-font-size-h4: 1.25rem;
+    --kds-font-size-h5: 1.125rem;
+    --kds-font-size-h6: 1rem;
+    --kds-font-size-body1: 0.9375rem;
+    --kds-font-size-body2: 0.875rem;
+    --kds-font-size-button: 0.9375rem;
+    --kds-font-size-caption: 0.75rem;
+  }
+}
+
+/* Desktop (840px+) - Spacing */
+@media (min-width: 840px) {
+  :root {
+    --kds-container-padding: 32px;
+    --kds-card-padding: 24px;
+    --kds-section-gap: 48px;
+    --kds-element-gap: 24px;
+    --kds-section-margin: 32px;
+  }
+}
+
+/* Desktop (840px+) - Typography */
+@media (min-width: 840px) {
+  :root {
+    --kds-font-size-h1: 2.5rem;
+    --kds-font-size-h2: 2rem;
+    --kds-font-size-h3: 1.75rem;
+    --kds-font-size-h4: 1.5rem;
+    --kds-font-size-h5: 1.25rem;
+    --kds-font-size-h6: 1.25rem;
+    --kds-font-size-body1: 1rem;
+    --kds-font-size-body2: 0.875rem;
+    --kds-font-size-button: 0.9375rem;
+    --kds-font-size-caption: 0.75rem;
+  }
 }
 
 
+
 /* Khipu BeerCSS Variable Mappings */
 /* Khipu Material Design 3 Brand Tokens for BeerCSS
  * Imports core tokens from css-variables.css (auto-generated from src/tokens/index.ts)
@@ -700,8 +802,7 @@ a.kds-btn > .kds-icon > i {
     .kds-card-elevated,
     .khipu-card-elevated,
     .kds-card-main {
-        padding: 20px;
-        margin: 16px;
+        padding: 12px;
     }
 }
 
@@ -3418,6 +3519,13 @@ dialog.modal::backdrop {
     overflow-y: auto;
 }
 
+@media (max-width: 768px) {
+
+    .kds-main-content {
+        padding: var(--kds-spacing-4)
+    }
+}
+
 /* ============================================
    MOBILE RESPONSIVE SIDEBAR
    ============================================ */
@@ -3536,7 +3644,39 @@ dialog.modal::backdrop {
 }
 
 /* ============================================
-   DEMO PAGE STYLES
+   LIST UTILITIES
+   ============================================ */
+
+/* Standard list with compact spacing */
+.kds-list {
+    margin: 0;
+    padding-left: var(--kds-spacing-2);
+    list-style-position: outside;
+    line-height: var(--kds-line-height-relaxed);
+}
+
+.kds-list > li {
+    margin-bottom: var(--kds-spacing-2);
+}
+
+.kds-list > li:last-child {
+    margin-bottom: 0;
+}
+
+/* Code block for displaying code snippets */
+.kds-code-block {
+    background: var(--kds-color-background-elevated);
+    padding: var(--kds-spacing-4);
+    border-radius: var(--kds-radius-md);
+    overflow-x: auto;
+    font-family: 'Courier New', monospace;
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-relaxed);
+    color: var(--kds-color-text-primary);
+}
+
+/* ============================================
+   DEMO PAGE STYLES (DEPRECATED - Use kds-card-* instead)
    ============================================ */
 
 .demo-card {

package/dist/beercss/khipu-beercss.js

@@ -656,156 +656,6 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
 
 
 
-/* Khipu Initialization */
-/**
- * Khipu Material Design 3 Initialization
- * Vanilla JavaScript initialization for BeerCSS components
- *
- * Provides initialization for:
- * - Mobile sidenav toggle
- * - Flash messages auto-dismiss
- * - Modal dialogs
- * - Programmatic snackbar API
- */
-
-(function() {
-    'use strict';
-
-    // Wait for DOM to be ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initKhipuMaterial);
-    } else {
-        initKhipuMaterial();
-    }
-
-    /**
-     * Main initialization function
-     */
-    function initKhipuMaterial() {
-        console.log('Initializing Khipu Material Design components...');
-
-        // Initialize sidenav toggle
-        initSidenav();
-
-        // Initialize flash messages auto-dismiss
-        initFlashMessages();
-
-        // Initialize modals
-        initModals();
-
-        console.log('Material Design initialization complete!');
-    }
-
-    /**
-     * Initialize sidenav for mobile navigation
-     */
-    function initSidenav() {
-        const menuToggle = document.getElementById('menu-toggle');
-        const sidenav = document.getElementById('material-sidenav');
-
-        if (menuToggle && sidenav) {
-            menuToggle.addEventListener('click', function() {
-                // Beer CSS uses 'active' class to show/hide drawer
-                sidenav.classList.toggle('active');
-            });
-
-            // Close sidenav when clicking outside
-            document.addEventListener('click', function(event) {
-                if (sidenav.classList.contains('active')) {
-                    const isClickInside = sidenav.contains(event.target) || menuToggle.contains(event.target);
-                    if (!isClickInside) {
-                        sidenav.classList.remove('active');
-                    }
-                }
-            });
-        }
-    }
-
-    /**
-     * Initialize flash messages with auto-dismiss
-     */
-    function initFlashMessages() {
-        const snackbars = document.querySelectorAll('.snackbar[data-auto-dismiss="true"]');
-
-        snackbars.forEach(function(snackbar) {
-            // Auto-dismiss after 5 seconds
-            setTimeout(function() {
-                snackbar.classList.remove('active');
-            }, 5000);
-        });
-    }
-
-    /**
-     * Initialize modal dialogs
-     */
-    function initModals() {
-        // Beer CSS modals are activated via onclick="ui('#modal-id')"
-        // Additional custom initialization can go here if needed
-        window.closeModal = function(modalId) {
-            const modal = document.getElementById(modalId);
-            if (modal) {
-                modal.classList.remove('active');
-            }
-        };
-    }
-
-    /**
-     * Utility: Show a snackbar programmatically
-     * @param {string} message - The message to display
-     * @param {string} type - The type: 'info', 'success', 'error'
-     * @param {number} duration - Duration in milliseconds (default: 5000)
-     */
-    function showSnackbar(message, type, duration) {
-        type = type || 'info';
-        duration = duration || 5000;
-
-        const snackbar = document.createElement('div');
-        snackbar.className = 'snackbar active ' + type;
-
-        const icon = document.createElement('i');
-        icon.className = 'material-symbols-outlined';
-        icon.textContent = type === 'success' ? 'check_circle' : (type === 'error' ? 'error' : 'info');
-
-        const span = document.createElement('span');
-        span.textContent = message;
-
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'transparent circle';
-        closeBtn.innerHTML = '<i class="material-symbols-outlined">close</i>';
-        closeBtn.onclick = function() {
-            snackbar.classList.remove('active');
-            setTimeout(function() {
-                snackbar.remove();
-            }, 300);
-        };
-
-        snackbar.appendChild(icon);
-        snackbar.appendChild(span);
-        snackbar.appendChild(closeBtn);
-
-        document.body.appendChild(snackbar);
-
-        setTimeout(function() {
-            snackbar.classList.remove('active');
-            setTimeout(function() {
-                snackbar.remove();
-            }, 300);
-        }, duration);
-    }
-
-    // Export utilities to window for backward compatibility
-    if (!window.Khipu) {
-        window.Khipu = {};
-    }
-    window.Khipu.showSnackbar = showSnackbar;
-    window.Khipu.closeModal = window.closeModal;
-
-    // Also export showSnackbar to global scope for backward compatibility
-    window.showSnackbar = showSnackbar;
-
-})();
-
-
 /* Khipu Sidebar Navigation */
 /**
  * Khipu Sidebar Navigation - Internal Interactions
@@ -1779,3 +1629,158 @@ function H(e){return e<0?-1:e===0?0:1}function nt(e,t,r){return(1-r)*e+r*t}funct
 
 })(window);
 
+
+/* Khipu Initialization (must be last to initialize all components) */
+/**
+ * Khipu Material Design 3 Initialization
+ * Vanilla JavaScript initialization for BeerCSS components
+ *
+ * Provides initialization for:
+ * - Mobile sidenav toggle
+ * - Flash messages auto-dismiss
+ * - Modal dialogs
+ * - Programmatic snackbar API
+ */
+
+(function() {
+    'use strict';
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initKhipuMaterial);
+    } else {
+        initKhipuMaterial();
+    }
+
+    /**
+     * Main initialization function
+     */
+    function initKhipuMaterial() {
+        console.log('Initializing Khipu Material Design components...');
+
+        // Initialize new Khipu Sidebar (if available)
+        if (typeof window.KhipuSidebar !== 'undefined') {
+            window.KhipuSidebar.init();
+        }
+
+        // Initialize sidenav toggle (legacy support)
+        initSidenav();
+
+        // Initialize flash messages auto-dismiss
+        initFlashMessages();
+
+        // Initialize modals
+        initModals();
+
+        console.log('Material Design initialization complete!');
+    }
+
+    /**
+     * Initialize sidenav for mobile navigation
+     */
+    function initSidenav() {
+        const menuToggle = document.getElementById('menu-toggle');
+        const sidenav = document.getElementById('material-sidenav');
+
+        if (menuToggle && sidenav) {
+            menuToggle.addEventListener('click', function() {
+                // Beer CSS uses 'active' class to show/hide drawer
+                sidenav.classList.toggle('active');
+            });
+
+            // Close sidenav when clicking outside
+            document.addEventListener('click', function(event) {
+                if (sidenav.classList.contains('active')) {
+                    const isClickInside = sidenav.contains(event.target) || menuToggle.contains(event.target);
+                    if (!isClickInside) {
+                        sidenav.classList.remove('active');
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * Initialize flash messages with auto-dismiss
+     */
+    function initFlashMessages() {
+        const snackbars = document.querySelectorAll('.snackbar[data-auto-dismiss="true"]');
+
+        snackbars.forEach(function(snackbar) {
+            // Auto-dismiss after 5 seconds
+            setTimeout(function() {
+                snackbar.classList.remove('active');
+            }, 5000);
+        });
+    }
+
+    /**
+     * Initialize modal dialogs
+     */
+    function initModals() {
+        // Beer CSS modals are activated via onclick="ui('#modal-id')"
+        // Additional custom initialization can go here if needed
+        window.closeModal = function(modalId) {
+            const modal = document.getElementById(modalId);
+            if (modal) {
+                modal.classList.remove('active');
+            }
+        };
+    }
+
+    /**
+     * Utility: Show a snackbar programmatically
+     * @param {string} message - The message to display
+     * @param {string} type - The type: 'info', 'success', 'error'
+     * @param {number} duration - Duration in milliseconds (default: 5000)
+     */
+    function showSnackbar(message, type, duration) {
+        type = type || 'info';
+        duration = duration || 5000;
+
+        const snackbar = document.createElement('div');
+        snackbar.className = 'snackbar active ' + type;
+
+        const icon = document.createElement('i');
+        icon.className = 'material-symbols-outlined';
+        icon.textContent = type === 'success' ? 'check_circle' : (type === 'error' ? 'error' : 'info');
+
+        const span = document.createElement('span');
+        span.textContent = message;
+
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'transparent circle';
+        closeBtn.innerHTML = '<i class="material-symbols-outlined">close</i>';
+        closeBtn.onclick = function() {
+            snackbar.classList.remove('active');
+            setTimeout(function() {
+                snackbar.remove();
+            }, 300);
+        };
+
+        snackbar.appendChild(icon);
+        snackbar.appendChild(span);
+        snackbar.appendChild(closeBtn);
+
+        document.body.appendChild(snackbar);
+
+        setTimeout(function() {
+            snackbar.classList.remove('active');
+            setTimeout(function() {
+                snackbar.remove();
+            }, 300);
+        }, duration);
+    }
+
+    // Export utilities to window for backward compatibility
+    if (!window.Khipu) {
+        window.Khipu = {};
+    }
+    window.Khipu.showSnackbar = showSnackbar;
+    window.Khipu.closeModal = window.closeModal;
+
+    // Also export showSnackbar to global scope for backward compatibility
+    window.showSnackbar = showSnackbar;
+
+})();
+