slicejs-web-framework 2.4.4 → 2.4.5

package/Slice/Slice.js

@@ -254,30 +254,20 @@ async function init() {
       return;
    }
 
-    // 1. Resolve runtime mode via dev server endpoint.
-    // In production the endpoint returns 404 (not registered), so catch/non-ok is expected.
-    let envMode = null;
-    try {
-      const envRes = await fetch('/slice-env.json', { cache: 'no-store' });
-      if (envRes.ok) {
-        const env = await envRes.json();
-        envMode = env.mode; // 'development' | 'production'
-      }
-    } catch (error) {
-      // Endpoint not available — normal in production
-    }
-
-    // 2. Fetch bundle config (existing logic, unchanged)
+    // 1+2. Fetch mode endpoint and bundle config in parallel — both are independent.
+    // In production, /slice-env.json returns 404 (catch is expected and normal).
+    // bundleConfigJson.production serves as a mode fallback when env endpoint is absent.
     let frameworkClasses = null;
-    let bundleConfigJson = null;
-    try {
-      const response = await fetch('/bundles/bundle.config.json', { cache: 'no-store' });
-      if (response.ok) {
-        bundleConfigJson = await response.json();
-      }
-    } catch (error) {
-      // ignore
-    }
+    const [envResult, configResult] = await Promise.all([
+      fetch('/slice-env.json', { cache: 'no-store' })
+        .then(r => r.ok ? r.json() : null)
+        .catch(() => null),
+      fetch('/bundles/bundle.config.json', { cache: 'no-store' })
+        .then(r => r.ok ? r.json() : null)
+        .catch(() => null)
+    ]);
+    const envMode = envResult?.mode ?? null;
+    const bundleConfigJson = configResult;
 
     // 3. Determine canonical mode: env endpoint takes precedence, then bundle config
     let resolvedMode;
@@ -289,6 +279,17 @@ async function init() {
       resolvedMode = 'development';
     }
 
+     // Pre-fetch critical bundle to warm the browser HTTP cache while the framework
+     // bundle is downloading and executing. fetch() downloads bytes without evaluating
+     // the module, so the auto-registration block runs safely later when window.slice
+     // already exists. Errors are silently ignored — import() will retry if needed.
+     const criticalBundleUrl = (resolvedMode === 'production' && bundleConfigJson?.bundles?.critical?.file)
+       ? `/bundles/${bundleConfigJson.bundles.critical.file}`
+       : null;
+     if (criticalBundleUrl) {
+       fetch(criticalBundleUrl).catch(() => {});
+     }
+
      // 4. Load framework classes.
      // In production the bundler generates slice-bundle.framework.js which
      // sets window.SLICE_FRAMEWORK_CLASSES. In dev mode always use individual
@@ -336,12 +337,18 @@ async function init() {
        if (window.slice.controller.bundleConfig) {
           const config = window.slice.controller.bundleConfig;
 
-          const criticalFile = config?.bundles?.critical?.file;
-          if (criticalFile) {
-             // Bundle auto-registers itself on import via its own registration block.
-             // No explicit registerBundle() call needed — flags are set inside registerBundle().
-             await import(`/bundles/${criticalFile}`);
-          }
+           const criticalFile = config?.bundles?.critical?.file;
+            if (criticalFile) {
+               // Bundle auto-registers itself on import via its own registration block.
+               // The block pushes its registerBundle() Promise to window.__slicePendingRegistrations
+               // so we can await full chunk processing before continuing to build('Loading').
+               // criticalBundleUrl was pre-fetched above — import() reuses the cached bytes.
+               await import(criticalBundleUrl);
+              if (window.__slicePendingRegistrations?.length) {
+                 await Promise.all(window.__slicePendingRegistrations);
+                 window.__slicePendingRegistrations = [];
+              }
+           }
 
           const routeBundles = config?.routeBundles || {};
           const initialPath = window.location.pathname || '/';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/AppComponents/HomePage/HomePage.css

@@ -6,200 +6,196 @@ slice-home-page {
   color: var(--font-primary-color);
 }
 
-/* Hero section styles */
+/* ── HERO ── */
 .hero-section {
-  position: relative;
   min-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 2rem;
+  padding: 7rem 2rem 5rem;
   background-color: var(--primary-background-color);
+  position: relative;
   overflow: hidden;
 }
 
+.hero-section::before {
+  content: '';
+  position: absolute;
+  top: -150px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 700px;
+  height: 700px;
+  background: radial-gradient(
+    circle,
+    rgba(var(--primary-color-rgb), 0.07) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
 .hero-content {
-  max-width: 800px;
+  max-width: 640px;
+  position: relative;
   z-index: 1;
 }
 
-.hero-logo-container {
+.hero-badge {
+  display: inline-block;
+  background: rgba(var(--primary-color-rgb), 0.1);
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 0.3rem 0.85rem;
+  border-radius: 20px;
   margin-bottom: 1.5rem;
 }
 
-.hero-logo {
-  max-width: 150px;
-  height: auto;
-  /* Convertir el logo a una silueta */
-  filter: brightness(0) drop-shadow(0 0 8px var(--primary-color));
-}
-
 .hero-title {
   font-size: 3rem;
-  margin-bottom: 1rem;
+  font-weight: 800;
   color: var(--font-primary-color);
+  line-height: 1.1;
+  margin-bottom: 1rem;
+  letter-spacing: -0.03em;
 }
 
 .hero-title .highlight {
   color: var(--primary-color);
 }
 
-.hero-subtitle {
-  font-size: 1.5rem;
-  margin-bottom: 1.5rem;
+.hero-sub {
+  font-size: 1.05rem;
   color: var(--font-secondary-color);
-}
-
-.hero-description {
-  font-size: 1.1rem;
   margin-bottom: 2rem;
   line-height: 1.6;
 }
 
-.cta-buttons {
+.hero-cta {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-bottom: 2.5rem;
 }
 
-/* Features section styles */
+.hero-chips {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.hero-chip {
+  background: white;
+  border: 1px solid var(--disabled-color);
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.3rem 0.75rem;
+  border-radius: 20px;
+  box-shadow: var(--box-shadow-primary);
+}
+
+/* ── FEATURES ── */
 .features-section {
   padding: 5rem 2rem;
-  background-color: var(--secondary-background-color);
+  background: white;
+  border-top: 1px solid var(--disabled-color);
 }
 
-.section-title {
+.section-header {
   text-align: center;
-  font-size: 2.5rem;
-  margin-bottom: 3rem;
-  color: var(--primary-color);
+  margin-bottom: 2.5rem;
+}
+
+.section-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--accent-color);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.4rem;
+}
+
+.section-title {
+  font-size: 1.9rem;
+  font-weight: 800;
+  color: var(--font-primary-color);
+  letter-spacing: -0.02em;
 }
 
 .feature-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
-  max-width: 1200px;
+  gap: 1.2rem;
+  max-width: 820px;
   margin: 0 auto;
 }
 
 .feature-item {
-  padding: 2rem;
-  background-color: var(--primary-background-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  background: var(--primary-background-color);
+  border-radius: 10px;
+  padding: 1.4rem 1.2rem;
+  border: 1px solid var(--disabled-color);
+  transition: box-shadow 0.2s, transform 0.15s;
 }
 
 .feature-item:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--box-shadow-primary);
+  transform: translateY(-2px);
 }
 
 .feature-title {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  color: var(--primary-color);
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--font-primary-color);
+  margin-bottom: 0.35rem;
 }
 
 .feature-description {
-  color: var(--font-secondary-color);
-  line-height: 1.6;
+  font-size: 0.78rem;
+  color: var(--medium-color);
+  line-height: 1.5;
 }
 
-/* Example section styles */
-.example-section {
+/* ── SHOWCASE ── */
+.showcase-section {
   padding: 5rem 2rem;
-  background-color: var(--primary-background-color);
+  background: var(--primary-background-color);
+  border-top: 1px solid var(--disabled-color);
 }
 
-.section-description {
-  text-align: center;
-  max-width: 800px;
-  margin: 0 auto 3rem auto;
-  color: var(--font-secondary-color);
-  font-size: 1.2rem;
-}
-
-.examples-container {
+.showcase-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 3rem;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.example-item {
-  display: flex;
-  flex-direction: column;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
-  padding: 2rem;
-  background-color: var(--secondary-background-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.example-item h3 {
-  margin: 0;
-  font-size: 1.3rem;
-  color: var(--primary-color);
+  max-width: 860px;
+  margin: 0 auto;
 }
 
-/* Getting started section styles */
-.getting-started-section {
-  padding: 5rem 2rem;
-  background-color: var(--secondary-background-color);
-  text-align: center;
+.comp-card {
+  background: white;
+  border-radius: 10px;
+  padding: 1.3rem 1.2rem;
+  border: 1px solid var(--disabled-color);
+  box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.06);
 }
 
-.code-sample {
-  max-width: 800px;
-  margin: 0 auto;
-  text-align: left;
+.comp-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--medium-color);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.75rem;
 }
 
-/* Footer styles */
-.home-footer {
-  padding: 3rem 2rem;
-  text-align: center;
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
+.comp-demo {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
 }
-
-.copyright {
-  margin-top: 1rem;
-  font-size: 0.9rem;
-  opacity: 0.8;
-}
-
-/* Responsive styles */
-@media (max-width: 992px) {
-  .feature-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .examples-container {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.5rem;
-  }
-  
-  .hero-subtitle {
-    font-size: 1.3rem;
-  }
-  
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .cta-buttons {
-    flex-direction: column;
-    align-items: center;
-  }
-}

package/src/Components/AppComponents/HomePage/HomePage.html

@@ -1,49 +1,37 @@
 <div class="home-page-container">
-  <div class="hero-section">
+
+  <section class="hero-section">
     <div class="hero-content">
-      <div class="hero-logo-container">
-        <img src="/images/Slice.js-logo.png" alt="Slice.js Logo" class="hero-logo" />
+      <div class="hero-badge">v2.4 · Vanilla JS Framework</div>
+      <h1 class="hero-title">Build your web app<br>one <span class="highlight">Slice</span> at a time</h1>
+      <p class="hero-sub">A lightweight, component-based framework for building web applications with vanilla JavaScript and web standards.</p>
+      <div class="hero-cta"></div>
+      <div class="hero-chips">
+        <span class="hero-chip">Button</span>
+        <span class="hero-chip">Input</span>
+        <span class="hero-chip">Switch</span>
+        <span class="hero-chip">Navbar</span>
+        <span class="hero-chip">Grid</span>
+        <span class="hero-chip">Card</span>
+        <span class="hero-chip">+ more</span>
       </div>
-      <h1 class="hero-title">Welcome to <span class="highlight">Slice.js</span></h1>
-      <p class="hero-subtitle">Build Your Web App One Slice at a Time</p>
-      <p class="hero-description">
-        A modern, lightweight component-based framework for building web applications using vanilla JavaScript and web standards.
-      </p>
-      <div class="cta-buttons"></div>
     </div>
-  </div>
+  </section>
 
   <section class="features-section">
-    <h2 class="section-title">Why Choose Slice.js?</h2>
+    <div class="section-header">
+      <p class="section-label">Why Slice.js</p>
+      <h2 class="section-title">Everything you need, nothing you don't</h2>
+    </div>
     <div class="feature-grid"></div>
   </section>
 
-  <section class="example-section">
-    <h2 class="section-title">Component Showcase</h2>
-    <p class="section-description">
-      Explore some of the ready-to-use components that come with Slice.js
-    </p>
-    <div class="examples-container"></div>
-  </section>
-
-  <section class="getting-started-section">
-    <h2 class="section-title">Get Started Now</h2>
-    <div class="code-sample">
-      <pre><code>
-// Initialize a new Slice.js project
-npm run slice:init
-
-// Create a new component
-npm run slice:create
-
-// Start your application
-npm run slice:start
-      </code></pre>
+  <section class="showcase-section">
+    <div class="section-header">
+      <p class="section-label">Component Showcase</p>
+      <h2 class="section-title">Ready-to-use components</h2>
     </div>
+    <div class="showcase-grid"></div>
   </section>
 
-  <footer class="home-footer">
-    <p>Made with ❤️ using Slice.js</p>
-    <p class="copyright">© 2025 Slice.js Framework</p>
-  </footer>
-</div>
+</div>

package/src/Components/AppComponents/HomePage/HomePage.js

@@ -2,15 +2,20 @@ export default class HomePage extends HTMLElement {
    constructor(props) {
       super();
       slice.attachTemplate(this);
-      
-      this.$examplesContainer = this.querySelector('.examples-container');
-      
       slice.controller.setComponentProps(this, props);
       this.debuggerProps = [];
    }
 
    async init() {
-      // Crear la barra de navegación
+      await Promise.all([
+         this._buildNavbar(),
+         this._buildHeroCta(),
+         this._buildFeatures(),
+         this._buildShowcase(),
+      ]);
+   }
+
+   async _buildNavbar() {
       const navbar = await slice.build('Navbar', {
          position: 'fixed',
          logo: {
@@ -20,177 +25,186 @@ export default class HomePage extends HTMLElement {
          items: [
             { text: 'Home', path: '/' },
             { text: 'Playground', path: '/Playground' },
-
          ],
          buttons: [
             {
                value: 'Change Theme',
                onClickCallback: async () => {
-                  const currentTheme = slice.stylesManager.themeManager.currentTheme;
-                  if (currentTheme === 'Slice') {
-                     await slice.setTheme('Light');
-                  } else if (currentTheme === 'Light') {
-                     await slice.setTheme('Dark');
-                  } else {
-                     await slice.setTheme('Slice');
-                  }
+                  const current = slice.stylesManager.themeManager.currentTheme;
+                  const next = current === 'Slice' ? 'Light'
+                             : current === 'Light' ? 'Dark'
+                             : 'Slice';
+                  await slice.setTheme(next);
                },
             },
          ],
       });
-      
-      // Crear botones para la sección de llamada a la acción
-      const docsButton = await slice.build('Button', {
+      this.insertBefore(navbar, this.firstChild);
+   }
+
+   async _buildHeroCta() {
+      const docsBtn = await slice.build('Button', {
          value: 'Documentation',
-         onClickCallback: () => //redirect to https://slice-js-docs.vercel.app/Documentation
-         window.open('https://slice-js-docs.vercel.app/Documentation', '_blank'),
+         onClickCallback: () =>
+            window.open('https://slice-js-docs.vercel.app/Documentation', '_blank'),
          customColor: {
             button: 'var(--primary-color)',
-            label: 'var(--primary-color-contrast)'
-         }
+            label: 'var(--primary-color-contrast)',
+         },
       });
-      
-      const componentsButton = await slice.build('Button', {
+
+      const componentsBtn = await slice.build('Button', {
          value: 'Components Library',
-         onClickCallback: () => window.open('https://slice-js-docs.vercel.app/Documentation/Visual', '_blank'),
+         onClickCallback: () =>
+            window.open('https://slice-js-docs.vercel.app/Documentation/Visual', '_blank'),
          customColor: {
-            button: 'var(--secondary-color)',
-            label: 'var(--secondary-color-contrast)'
-         }
+            button: 'var(--secondary-background-color)',
+            label: 'var(--primary-color)',
+         },
       });
-      
-      // Añadir botones a la sección CTA
-      this.querySelector('.cta-buttons').appendChild(docsButton);
-      this.querySelector('.cta-buttons').appendChild(componentsButton);
-      
-      // Crear features section con un enfoque diferente (sin usar Cards)
-      await this.createFeatures();
-      
-      // Crear ejemplos de componentes
-      await this.createComponentExamples();
-      
-      // Configurar la sección de código de inicio
-      await this.setupGettingStartedSection();
-      
-      // Añadir la barra de navegación al inicio del componente
-      this.insertBefore(navbar, this.firstChild);
+
+      const cta = this.querySelector('.hero-cta');
+      cta.appendChild(docsBtn);
+      cta.appendChild(componentsBtn);
    }
-   
-   async createFeatures() {
-      // Definir características
+
+   async _buildFeatures() {
       const features = [
          {
             title: 'Component-Based',
-            description: 'Build your app using modular, reusable components following web standards.'
+            description: 'Build your app using modular, reusable components following web standards.',
          },
          {
-            title: 'Zero Dependencies',
-            description: 'Built with vanilla JavaScript. No external libraries required.'
+            title: 'Themeable',
+            description: 'Swap themes at runtime. Ships with Slice, Light, Dark and more.',
          },
          {
-            title: 'Easy Routing',
-            description: 'Simple and powerful routing system for single page applications.'
+            title: 'Lightweight',
+            description: 'No heavy runtime. Just vanilla JavaScript and web standards.',
          },
          {
-            title: 'Theme System',
-            description: 'Built-in theme support with easy customization through CSS variables.'
+            title: 'Built-in Router',
+            description: 'Client-side routing with MultiRoute — no extra libraries needed.',
          },
          {
-            title: 'Developer Tools',
-            description: 'Integrated debugging and logging for faster development.'
+            title: 'CLI Tools',
+            description: 'Scaffold projects, create components and build bundles from the command line.',
          },
          {
-            title: 'Performance Focused',
-            description: 'Lightweight and optimized for fast loading and execution.'
-         }
+            title: 'Services',
+            description: 'Built-in FetchManager, LocalStorage and IndexedDB integrations.',
+         },
       ];
-      
-      const featureGrid = this.querySelector('.feature-grid');
-      
-      // Crear y añadir cada feature como un elemento HTML simple
-      for (const feature of features) {
-         const featureElement = document.createElement('div');
-         featureElement.classList.add('feature-item');
-         
-         const featureTitle = document.createElement('h3');
-         featureTitle.textContent = feature.title;
-         featureTitle.classList.add('feature-title');
-         
-         const featureDescription = document.createElement('p');
-         featureDescription.textContent = feature.description;
-         featureDescription.classList.add('feature-description');
-         
-         featureElement.appendChild(featureTitle);
-         featureElement.appendChild(featureDescription);
-         
-         featureGrid.appendChild(featureElement);
+
+      const grid = this.querySelector('.feature-grid');
+      for (const { title, description } of features) {
+         const item = document.createElement('div');
+         item.classList.add('feature-item');
+
+         const h3 = document.createElement('h3');
+         h3.classList.add('feature-title');
+         h3.textContent = title;
+
+         const p = document.createElement('p');
+         p.classList.add('feature-description');
+         p.textContent = description;
+
+         item.appendChild(h3);
+         item.appendChild(p);
+         grid.appendChild(item);
       }
    }
-   
-   async createComponentExamples() {
-      // Crear ejemplos para demostrar componentes
-      const inputExample = await slice.build('Input', {
-         placeholder: 'Try typing here...',
-         type: 'text'
+
+   async _buildShowcase() {
+      const grid = this.querySelector('.showcase-grid');
+
+      // Helper: wrap built components in a labeled card and append to grid
+      const addCard = (label, ...components) => {
+         const card = document.createElement('div');
+         card.classList.add('comp-card');
+
+         const labelEl = document.createElement('p');
+         labelEl.classList.add('comp-label');
+         labelEl.textContent = label;
+
+         const demo = document.createElement('div');
+         demo.classList.add('comp-demo');
+         components.forEach(c => demo.appendChild(c));
+
+         card.appendChild(labelEl);
+         card.appendChild(demo);
+         grid.appendChild(card);
+      };
+
+      // Button — primary + secondary variants
+      const [btnPrimary, btnSecondary] = await Promise.all([
+         slice.build('Button', {
+            value: 'Primary',
+            onClickCallback: () => {},
+            customColor: {
+               button: 'var(--primary-color)',
+               label: 'var(--primary-color-contrast)',
+            },
+         }),
+         slice.build('Button', {
+            value: 'Secondary',
+            onClickCallback: () => {},
+            customColor: {
+               button: 'var(--secondary-background-color)',
+               label: 'var(--primary-color)',
+            },
+         }),
+      ]);
+      addCard('Button', btnPrimary, btnSecondary);
+
+      // Input
+      const input = await slice.build('Input', {
+         placeholder: 'Type something...',
+         type: 'text',
       });
-      
-      const switchExample = await slice.build('Switch', {
+      addCard('Input', input);
+
+      // Switch
+      const sw = await slice.build('Switch', {
          label: 'Toggle me',
-         checked: true
-      });
-      
-      const checkboxExample = await slice.build('Checkbox', {
-         label: 'Check me',
-         labelPlacement: 'right'
+         checked: true,
       });
-      
-      const detailsExample = await slice.build('Details', {
-         title: 'Click to expand',
-         text: 'This is a collapsible details component that can contain any content.'
-      });
-      
-      // Crear sección para cada ejemplo
-      const exampleSections = [
-         { title: 'Input Component', component: inputExample },
-         { title: 'Switch Component', component: switchExample },
-         { title: 'Checkbox Component', component: checkboxExample },
-         { title: 'Details Component', component: detailsExample }
+      addCard('Switch', sw);
+
+      // Select — theme chooser
+      const themeOptions = [
+         { name: 'Slice Theme' },
+         { name: 'Light Theme' },
+         { name: 'Dark Theme' },
+         { name: 'Purple Theme' },
       ];
-      
-      // Añadir cada ejemplo a la sección de ejemplos
-      for (const section of exampleSections) {
-         const container = document.createElement('div');
-         container.classList.add('example-item');
-         
-         const title = document.createElement('h3');
-         title.textContent = section.title;
-         
-         container.appendChild(title);
-         container.appendChild(section.component);
-         
-         this.$examplesContainer.appendChild(container);
-      }
-   }
-   
-   async setupGettingStartedSection() {
-      // Opcionalmente podríamos mejorar esta sección usando el CodeVisualizer component
-      // en lugar del código HTML estático en el template
-      const codeVisualizer = await slice.build('CodeVisualizer', {
-         value: `// Initialize a new Slice.js project
-npm run slice:init
-
-// Create a new component
-npm run slice:create
-
-// Start your application
-npm run slice:start`,
-         language: 'bash'
+      const select = await slice.build('Select', {
+         label: 'Pick a theme',
+         options: themeOptions,
+         visibleProp: 'name',
+         onOptionSelect: async (option) => {
+            if (!option) return;
+            const themeName = option.name.replace(' Theme', '');
+            await slice.setTheme(themeName);
+         },
+      });
+      addCard('Select', select);
+
+      // Loading — triggered by a demo button (Loading appends to document.body)
+      const loading = await slice.build('Loading', {});
+      const demoBtn = await slice.build('Button', {
+         value: 'Demo Loading',
+         onClickCallback: () => {
+            loading.start();
+            setTimeout(() => loading.stop(), 1500);
+         },
+         customColor: {
+            button: 'var(--primary-color)',
+            label: 'var(--primary-color-contrast)',
+         },
       });
-      
-      const codeSample = this.querySelector('.code-sample');
-      codeSample.innerHTML = ''; // Clear the static code sample
-      codeSample.appendChild(codeVisualizer);
+      addCard('Loading', demoBtn);
    }
 }
 
-customElements.define('slice-home-page', HomePage);
+customElements.define('slice-home-page', HomePage);