atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/assets/js/demos/list-demo.js

@@ -3,6 +3,14 @@
 // Showcases ui-list + ui-list-item + ui-list-group features
 // ============================================================
 
+function updateListActiveBtn(demoName) {
+  const section = document.getElementById('list');
+  if (!section) return;
+  section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+    btn.selected = btn.getAttribute('data-demo') === demoName;
+  });
+}
+
 export function initListDemo() {
   const section = document.getElementById('list');
   if (!section) return;
@@ -10,28 +18,27 @@ export function initListDemo() {
   section.innerHTML = `
     <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
       <h2 style="margin:0;">📋 List Component</h2>
-      <ui-button onclick="showSection('home')" style="background:#6b7280;color:white;border:none;padding:6px 14px;border-radius:4px;font-size:12px;cursor:pointer;">← Back</ui-button>
-    </div>
+         </div>
     <p style="color:#6b7280; margin-bottom:24px;">
       Flexible, feature-rich list component. Supports slotted items, programmatic items, groups, search, drag-and-drop, pagination, virtual scroll and much more.
     </p>
 
     <div class="demo-controls" style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;">
-      <ui-button onclick="window.showListBasic()" style="padding:8px 16px;background:#10b981;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📄 Basic</ui-button>
-      <ui-button onclick="window.showListVariants()" style="padding:8px 16px;background:#10b981;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🎨 Variants</ui-button>
-      <ui-button onclick="window.showListIcons()" style="padding:8px 16px;background:#f59e0b;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🏷️ Icons & Badges</ui-button>
-      <ui-button onclick="window.showListCollapsible()" style="padding:8px 16px;background:#8b5cf6;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📂 Collapsible</ui-button>
-      <ui-button onclick="window.showListSearch()" style="padding:8px 16px;background:#ec4899;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🔍 Search</ui-button>
-      <ui-button onclick="window.showListGrouped()" style="padding:8px 16px;background:#14b8a6;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📁 Grouped</ui-button>
-      <ui-button onclick="window.showListDraggable()" style="padding:8px 16px;background:#f97316;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">↕️ Draggable</ui-button>
-      <ui-button onclick="window.showListPaginated()" style="padding:8px 16px;background:#ef4444;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📑 Paginated</ui-button>
-      <ui-button onclick="window.showListInteractions()" style="padding:8px 16px;background:#9333ea;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">✨ Interactions</ui-button>
-      <ui-button onclick="window.showListMasterpiece()" style="padding:8px 16px;background:linear-gradient(45deg, #f43f5e, #fbbf24);color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">💎 Masterpiece</ui-button>
-      <ui-button onclick="window.showListGrid()" style="padding:8px 16px;background:#0ea5e9;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🔲 Grid</ui-button>
-      <ui-button onclick="window.showListTree()" style="padding:8px 16px;background:#64748b;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🌲 Tree</ui-button>
-      <ui-button onclick="window.showListVirtual()" style="padding:8px 16px;background:#6366f1;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">⚡ Virtual</ui-button>
-      <ui-button onclick="window.showListLarge()" style="padding:8px 16px;background:#44403c;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📦 100+ Items</ui-button>
-      <ui-button onclick="window.showListApex()" style="padding:8px 16px;background:linear-gradient(135deg, #6366f1, #a855f7);color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🚀 Apex Masterclass</ui-button>
+      <ui-button onclick="window.showListBasic()" data-demo="basic" variant="outline">📄 Basic</ui-button>
+      <ui-button onclick="window.showListVariants()" data-demo="variants" variant="outline">🎨 Variants</ui-button>
+      <ui-button onclick="window.showListIcons()" data-demo="icons" variant="outline">🏷️ Icons & Badges</ui-button>
+      <ui-button onclick="window.showListCollapsible()" data-demo="collapsible" variant="outline">📂 Collapsible</ui-button>
+      <ui-button onclick="window.showListSearch()" data-demo="search" variant="outline">🔍 Search</ui-button>
+      <ui-button onclick="window.showListGrouped()" data-demo="grouped" variant="outline">📁 Grouped</ui-button>
+      <ui-button onclick="window.showListDraggable()" data-demo="draggable" variant="outline">↕️ Draggable</ui-button>
+      <ui-button onclick="window.showListPaginated()" data-demo="paginated" variant="outline">📑 Paginated</ui-button>
+      <ui-button onclick="window.showListInteractions()" data-demo="interactions" variant="outline">✨ Interactions</ui-button>
+      <ui-button onclick="window.showListMasterpiece()" data-demo="masterpiece" variant="outline">💎 Masterpiece</ui-button>
+      <ui-button onclick="window.showListGrid()" data-demo="grid" variant="outline">🔲 Grid</ui-button>
+      <ui-button onclick="window.showListTree()" data-demo="tree" variant="outline">🌲 Tree</ui-button>
+      <ui-button onclick="window.showListVirtual()" data-demo="virtual" variant="outline">⚡ Virtual</ui-button>
+      <ui-button onclick="window.showListLarge()" data-demo="large" variant="outline">📦 100+ Items</ui-button>
+      <ui-button onclick="window.showListApex()" data-demo="apex" variant="outline">🚀 Apex Masterclass</ui-button>
     </div>
 
     <div id="listDemoContainer" style="margin-top:8px;"></div>
@@ -44,6 +51,7 @@ export function initListDemo() {
 // 1. Basic List
 // ─────────────────────────────────────────────
 window.showListBasic = function () {
+  updateListActiveBtn('basic');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -51,7 +59,7 @@ window.showListBasic = function () {
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;">
 
       <!-- Simple slotted -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;color:#374151;">Simple List</h3>
         <ui-list id="basicList1">
           <ui-list-item label="Home"         icon="fas fa-home"    value="home"></ui-list-item>
@@ -63,7 +71,7 @@ window.showListBasic = function () {
       </div>
 
       <!-- With dividers -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;color:#374151;">With Dividers</h3>
         <ui-list dividers>
           <ui-list-item label="Inbox"         icon="fas fa-inbox"  value="inbox"  counter="12"></ui-list-item>
@@ -75,7 +83,7 @@ window.showListBasic = function () {
       </div>
 
       <!-- Multi-select -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;color:#374151;">Multi-Select</h3>
         <ui-list multi-select id="multiSelectList">
           <ui-list-item label="JavaScript" icon="fab fa-js"     value="js"></ui-list-item>
@@ -88,7 +96,7 @@ window.showListBasic = function () {
       </div>
 
       <!-- Dense / compact -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;color:#374151;">Dense Mode</h3>
         <ui-list dense dividers>
           <ui-list-item label="Option A" value="a"></ui-list-item>
@@ -102,7 +110,7 @@ window.showListBasic = function () {
       </div>
 
       <!-- Numbered -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;color:#374151;">Numbered List</h3>
         <ui-list numbered id="numberedList" dividers>
           <ui-list-item label="Buy groceries"   value="t1"></ui-list-item>
@@ -114,12 +122,12 @@ window.showListBasic = function () {
       </div>
 
       <!-- Size variants -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;color:#374151;">Sizes</h3>
         <p style="font-size:12px;color:#9ca3af;margin-bottom:8px;">Small</p>
-        <ui-list size="md"
-          <ui-list-item label="Small item A" value="sa" size="md"ui-list-item>
-          <ui-list-item label="Small item B" value="sb" size="md"ui-list-item>
+        <ui-list size="md">
+          <ui-list-item label="Small item A" value="sa" size="md"></ui-list-item>
+          <ui-list-item label="Small item B" value="sb" size="md"></ui-list-item>
         </ui-list>
         <p style="font-size:12px;color:#9ca3af;margin:12px 0 8px;">Large</p>
         <ui-list size="large">
@@ -146,13 +154,14 @@ window.showListBasic = function () {
 // 2. Variants
 // ─────────────────────────────────────────────
 window.showListVariants = function () {
+  updateListActiveBtn('variants');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">variant="text" (default)</h3>
         <ui-list variant="text">
           <ui-list-item label="Text Item 1" value="1" variant="text" color="primary"></ui-list-item>
@@ -161,7 +170,7 @@ window.showListVariants = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">variant="filled"</h3>
         <ui-list variant="filled">
           <ui-list-item label="Filled Item 1" value="1" variant="filled" color="primary"></ui-list-item>
@@ -170,7 +179,7 @@ window.showListVariants = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">variant="outlined"</h3>
         <ui-list variant="outlined" rounded>
           <ui-list-item label="Outlined Item 1" value="1" variant="outlined" color="primary"></ui-list-item>
@@ -179,7 +188,7 @@ window.showListVariants = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">variant="outline"</h3>
         <ui-list variant="outline">
           <ui-list-item label="Soft Primary"   value="1" variant="outline" color="primary"></ui-list-item>
@@ -189,7 +198,7 @@ window.showListVariants = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Elevated + Rounded</h3>
         <ui-list elevated rounded>
           <ui-list-item label="Cloud Storage" icon="fas fa-cloud" value="cloud" sublabel="12.4 GB used"></ui-list-item>
@@ -198,7 +207,7 @@ window.showListVariants = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Flush (no padding)</h3>
         <ui-list flush dividers>
           <ui-list-item label="Flush Item 1" value="1" icon="fas fa-circle"></ui-list-item>
@@ -214,24 +223,25 @@ window.showListVariants = function () {
 // 3. Icons, Badges, Sub-labels, Counters, Pills, Tags
 // ─────────────────────────────────────────────
 window.showListIcons = function () {
+  updateListActiveBtn('icons');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Icons + Badges + Counters</h3>
         <ui-list dividers>
-          <ui-list-item label="Inbox"      icon="fas fa-inbox"  value="inbox"   badge="12" badge-color="primary"  counter="12"></ui-list-item>
+          <ui-list-item label="Inbox"      icon="fas fa-inbox"  value="inbox"   badge="12" badge-color="primary"  counter="12" counter-color="info"></ui-list-item>
           <ui-list-item label="Promotions" icon="fas fa-tag"    value="promo"   badge="New" badge-color="success"></ui-list-item>
-          <ui-list-item label="Updates"    icon="fas fa-refresh" value="updates" counter="3"></ui-list-item>
+          <ui-list-item label="Updates"    icon="fas fa-refresh" value="updates" counter="3" counter-color="warning"></ui-list-item>
           <ui-list-item label="Forums"     icon="fas fa-comments" value="forums"></ui-list-item>
-          <ui-list-item label="Spam"       icon="fas fa-ban"    value="spam"    badge="99+" badge-color="danger" counter="99"></ui-list-item>
+          <ui-list-item label="Spam"       icon="fas fa-ban"    value="spam"    badge="99+" badge-color="danger" counter="99" counter-color="secondary"></ui-list-item>
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Sub-labels (Multiline)</h3>
         <ui-list dividers>
           <ui-list-item
@@ -258,7 +268,7 @@ window.showListIcons = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Pills per Item</h3>
         <ui-list dividers>
           <ui-list-item
@@ -282,7 +292,7 @@ window.showListIcons = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Tags per Item</h3>
         <ui-list dividers>
           <ui-list-item
@@ -306,7 +316,7 @@ window.showListIcons = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Action Icons</h3>
         <ui-list dividers>
           <ui-list-item label="Edit Profile"    icon="fas fa-user"     value="edit"   action-icon="fas fa-pencil-alt"></ui-list-item>
@@ -316,7 +326,7 @@ window.showListIcons = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Checkbox Selection</h3>
         <ui-list dividers id="checkboxList">
           <ui-list-item label="Send email notification"  value="email"   show-checkbox></ui-list-item>
@@ -333,13 +343,14 @@ window.showListIcons = function () {
 // 4. Collapsible Items
 // ─────────────────────────────────────────────
 window.showListCollapsible = function () {
+  updateListActiveBtn('collapsible');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Collapsible Tree</h3>
         <ui-list dividers>
           <ui-list-item label="Documents" icon="fas fa-folder" value="docs" collapsible expanded>
@@ -360,7 +371,7 @@ window.showListCollapsible = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Accordion-style Nav</h3>
         <ui-list dividers rounded>
           <ui-list-item label="Dashboard"  icon="fas fa-th-large" value="dash"></ui-list-item>
@@ -378,19 +389,19 @@ window.showListCollapsible = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Context Menu Items</h3>
         <ui-list dividers>
           <ui-list-item label="Right-click me!" icon="fas fa-file-alt" value="file1" context-menu context-menu-trigger="rightClick">
-            <ui-list-item slot="children" label="Open"     icon="fas fa-folder-open" value="open"></ui-list-item>
-            <ui-list-item slot="children" label="Copy"     icon="fas fa-copy"        value="copy"></ui-list-item>
-            <ui-list-item slot="children" label="Rename"   icon="fas fa-edit"        value="rename"></ui-list-item>
-            <ui-list-item slot="children" label="Delete"   icon="fas fa-trash"       value="delete" color="danger"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Open"     icon="fas fa-folder-open" value="open"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Copy"     icon="fas fa-copy"        value="copy"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Rename"   icon="fas fa-edit"        value="rename"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Delete"   icon="fas fa-trash"       value="delete" color="danger"></ui-list-item>
           </ui-list-item>
           <ui-list-item label="Click ▶ for menu" icon="fas fa-file-code" value="file2" context-menu context-menu-trigger="click">
-            <ui-list-item slot="children" label="Edit"    icon="fas fa-edit"   value="edit"></ui-list-item>
-            <ui-list-item slot="children" label="Preview" icon="fas fa-eye"    value="prev"></ui-list-item>
-            <ui-list-item slot="children" label="Export"  icon="fas fa-upload" value="exp"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Edit"    icon="fas fa-edit"   value="edit"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Preview" icon="fas fa-eye"    value="prev"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Export"  icon="fas fa-upload" value="exp"></ui-list-item>
           </ui-list-item>
         </ui-list>
       </div>
@@ -402,6 +413,7 @@ window.showListCollapsible = function () {
 // 5. Search
 // ─────────────────────────────────────────────
 window.showListSearch = function () {
+  updateListActiveBtn('search');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -423,13 +435,13 @@ window.showListSearch = function () {
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">🔍 Searchable List (programmatic items)</h3>
         <ui-list searchable search-placeholder="Search fruits..." id="searchList" max-height="350px"></ui-list>
         <div id="searchOutput" style="margin-top:12px;font-size:13px;color:#6b7280;">Selected: none</div>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Search + Multi-Select</h3>
         <ui-list searchable multi-select search-placeholder="Type to filter..." id="searchMultiList" max-height="350px" dividers></ui-list>
         <div id="searchMultiOutput" style="margin-top:12px;font-size:13px;color:#6b7280;">Selected: none</div>
@@ -459,23 +471,24 @@ window.showListSearch = function () {
 // 6. Grouped
 // ─────────────────────────────────────────────
 window.showListGrouped = function () {
+  updateListActiveBtn('grouped');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Grouped with Subheaders</h3>
         <ui-list id="groupedList1" max-height="450px" dividers></ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Collapsible Groups</h3>
         <ui-list id="groupedList2" max-height="450px"></ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Group + Search</h3>
         <ui-list id="groupedList3" searchable max-height="400px" dividers></ui-list>
       </div>
@@ -508,20 +521,21 @@ window.showListGrouped = function () {
 // 7. Drag-and-Drop Reorder
 // ─────────────────────────────────────────────
 window.showListDraggable = function () {
+  updateListActiveBtn('draggable');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">↕️ Drag to Reorder</h3>
         <p style="font-size:13px;color:#9ca3af;margin-bottom:12px;">Drag the ≡ handle to reorder</p>
         <ui-list id="draggableList" dividers max-height="360px"></ui-list>
         <div id="reorderOutput" style="margin-top:12px;padding:8px;background:#f3f4f6;border-radius:6px;font-size:12px;color:#374151;">Reorder events will show here</div>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">↕️ Task Priority List</h3>
         <p style="font-size:13px;color:#9ca3af;margin-bottom:12px;">Drag to re-prioritize tasks</p>
         <ui-list id="taskList" dividers max-height="360px"></ui-list>
@@ -566,18 +580,19 @@ window.showListDraggable = function () {
 // 8. Paginated
 // ─────────────────────────────────────────────
 window.showListPaginated = function () {
+  updateListActiveBtn('paginated');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">📑 Paginated (5 per page)</h3>
         <ui-list id="paginatedList5" paginated items-per-page="5" dividers></ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">📑 Search + Paginated</h3>
         <ui-list id="paginatedSearchList" paginated searchable items-per-page="4" dividers></ui-list>
       </div>
@@ -634,20 +649,21 @@ window.showListPaginated = function () {
 // 9. Virtual Scroll
 // ─────────────────────────────────────────────
 window.showListVirtual = function () {
+  updateListActiveBtn('virtual');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">⚡ Virtual Scroll (10,000 items)</h3>
         <p style="font-size:13px;color:#9ca3af;margin-bottom:12px;">Only visible rows are rendered in the DOM</p>
         <ui-list id="virtualList" virtual item-height="48" max-height="400px"></ui-list>
         <div id="virtualOutput" style="margin-top:8px;font-size:12px;color:#6b7280;">Selected: none</div>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">⚡ Virtual + Search</h3>
         <ui-list id="virtualSearchList" virtual searchable item-height="48" max-height="400px" search-placeholder="Search 5000 users..."></ui-list>
       </div>
@@ -682,6 +698,7 @@ window.showListVirtual = function () {
 // 9. Interactions & Custom Colors
 // ─────────────────────────────────────────────
 window.showListInteractions = function () {
+  updateListActiveBtn('interactions');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -689,7 +706,7 @@ window.showListInteractions = function () {
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;">
       
       <!-- Custom Hover & Selection -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Selection & Hover Colors</h3>
         <p style="font-size:12px;color:#9ca3af;margin-bottom:12px;">Items change color on hover or when selected</p>
         <ui-list dividers>
@@ -705,9 +722,6 @@ window.showListInteractions = function () {
             selection-color="success"
             selected
           ></ui-list-item>
-                  <div class="s-row"><kbd>Shift</kbd> + <kbd>J/K</kbd> <span>Select Range</span></div>
-                  <div class="s-row"><kbd>Alt</kbd> <span>(Hold) Ghost Data Layer</span></div>
-                  <div class="s-row"><kbd>X</kbd> <span>Toggle Selection</span></div>
           <ui-list-item 
             label="Danger Zone" 
             sublabel="Red hover and selection"
@@ -718,20 +732,20 @@ window.showListInteractions = function () {
       </div>
 
       <!-- Right-side Avatars -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Right-side Media</h3>
         <p style="font-size:12px;color:#9ca3af;margin-bottom:12px;">Avatars and images on the right</p>
         <ui-list dividers>
           <ui-list-item 
             label="Chat Message" 
             sublabel="Sent from London Office"
-            user-avatar="https://i.pravatar.cc/150?u=a1"
+            user-avatar="./build/assets/images/logo.png"
             avatar-position="right"
           ></ui-list-item>
           <ui-list-item 
             label="Product Status" 
             sublabel="Stock updated 5m ago"
-            image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop"
+            image="./build/assets/images/nature_lake_2.png"
             avatar-position="right"
             counter="ACTIVE"
           ></ui-list-item>
@@ -746,13 +760,13 @@ window.showListInteractions = function () {
       </div>
 
       <!-- Combined Pro features -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Advanced Interaction</h3>
         <ui-list items-per-page="3">
           <ui-list-item 
             label="Alex Smith" 
             sublabel="Full Stack Engineer"
-            user-avatar="https://i.pravatar.cc/150?u=alex2"
+            user-avatar="./build/assets/images/logo.png"
             avatar-position="right"
             hover-color="info"
             selection-color="info"
@@ -763,14 +777,14 @@ window.showListInteractions = function () {
             label="Project Delta" 
             sublabel="Milestone 4 reached"
             avatar-position="right"
-            image="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?w=100&h=100&fit=crop"
+            image="./build/assets/images/nature_ocean_4.png"
             selection-color="warning"
             action-icon="fas fa-external-link-alt"
           ></ui-list-item>
         </ui-list>
       </div>
       <!-- Advanced Status & Actions -->
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Pro Features (Lock & Menu)</h3>
         <p style="font-size:12px;color:#9ca3af;margin-bottom:12px;">Locked items and 3-dot action menus</p>
         <ui-list dividers>
@@ -787,9 +801,9 @@ window.showListInteractions = function () {
             show-menu
             context-menu
           >
-            <ui-list-item slot="children" label="Restart" icon="fas fa-sync" value="restart"></ui-list-item>
-            <ui-list-item slot="children" label="Scale" icon="fas fa-rocket" value="scale"></ui-list-item>
-            <ui-list-item slot="children" label="Terminate" icon="fas fa-power-off" value="term" color="danger"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Restart" icon="fas fa-sync" value="restart"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Scale" icon="fas fa-rocket" value="scale"></ui-list-item>
+            <ui-list-item slot="context-menu" label="Terminate" icon="fas fa-power-off" value="term" color="danger"></ui-list-item>
           </ui-list-item>
           <ui-list-item 
             label="User Accounts" 
@@ -798,8 +812,8 @@ window.showListInteractions = function () {
             show-menu
             context-menu
           >
-             <ui-list-item slot="children" label="View Profile" icon="fas fa-user" value="profile"></ui-list-item>
-             <ui-list-item slot="children" label="Suspend" icon="fas fa-user-slash" value="suspend" color="warning"></ui-list-item>
+             <ui-list-item slot="context-menu" label="View Profile" icon="fas fa-user" value="profile"></ui-list-item>
+             <ui-list-item slot="context-menu" label="Suspend" icon="fas fa-user-slash" value="suspend" color="warning"></ui-list-item>
           </ui-list-item>
         </ui-list>
       </div>
@@ -811,6 +825,7 @@ window.showListInteractions = function () {
 // 10. The God-Tier Masterpiece
 // ─────────────────────────────────────────────
 window.showListMasterpiece = function () {
+  updateListActiveBtn('masterpiece');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -818,7 +833,7 @@ window.showListMasterpiece = function () {
     {
       label: 'Edge Node 01',
       sublabel: 'Uptime: 14 days, 4 hours',
-      userAvatar: 'https://i.pravatar.cc/50?u=kernel',
+      userAvatar: './build/assets/images/logo.png',
       status: 'online',
       group: 'Computing',
       progress: 92,
@@ -833,7 +848,7 @@ window.showListMasterpiece = function () {
       sparkline: [20, 45, 10, 80, 50, 90, 60, 100],
       auraMode: true,
       presenceCursors: [{ name: 'Sarah (CEO)', color: 'purple', x: 450, y: 20 }],
-      avatarGroup: [{ src: 'https://i.pravatar.cc/100?u=1' }, { src: 'https://i.pravatar.cc/100?u=2' }, { src: 'https://i.pravatar.cc/100?u=3' }],
+      avatarGroup: [{ src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }],
       metadata: { ip: '10.0.0.12', version: '2.4.1-LTS', cluster: 'Main-North' },
       leftActions: [
         { icon: 'fas fa-phone', color: 'success', action: 'call' },
@@ -843,7 +858,7 @@ window.showListMasterpiece = function () {
         { icon: 'fas fa-trash', color: 'danger', action: 'delete' },
         { icon: 'fas fa-archive', color: 'warning', action: 'archive' },
       ],
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=a' }, { src: 'https://i.pravatar.cc/50?u=b' }],
+      collaborators: [{ src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }],
       avatarGroupPosition: 'right',
     },
     {
@@ -868,7 +883,7 @@ window.showListMasterpiece = function () {
       status: 'busy',
       expandable: true,
       showStar: true,
-      avatarGroup: [{ src: 'https://i.pravatar.cc/100?u=3' }, { src: 'https://i.pravatar.cc/100?u=4' }, { src: 'https://i.pravatar.cc/100?u=5' }],
+      avatarGroup: [{ src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }],
       avatarGroupPosition: 'content',
     },
     { label: 'Cloud Buffer', sublabel: 'Idle', icon: 'fas fa-cloud', group: 'Storage', status: 'away' },
@@ -896,7 +911,7 @@ window.showListMasterpiece = function () {
 
   c.innerHTML = `
     <div style="max-width:800px;margin:auto;">
-      <div style="background:white;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;">
+      <div style="background:var(--bg-primary,white);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;">
         <div style="padding:24px;background:linear-gradient(135deg, #1e293b, #334155);color:white;">
           <h2 style="margin:0;font-size:20px;">💎 Ultra-Apex Cluster Control</h2>
           <p style="margin:4px 0 0;font-size:13px;opacity:0.8;">Monitoring active global edge nodes</p>
@@ -965,6 +980,7 @@ window.showListMasterpiece = function () {
 // 11. Responsive Grid Mode
 // ─────────────────────────────────────────────
 window.showListGrid = function () {
+  updateListActiveBtn('grid');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -972,38 +988,38 @@ window.showListGrid = function () {
     {
       label: 'Project Alpha',
       sublabel: 'Development Stage',
-      image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=150&fit=crop',
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=1' }, { src: 'https://i.pravatar.cc/50?u=2' }],
+      image: './build/assets/images/slide1.png',
+      collaborators: [{ src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }],
     },
     {
       label: 'Project Beta',
       sublabel: 'Productivity Suite',
-      image: 'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=200&h=150&fit=crop',
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=3' }, { src: 'https://i.pravatar.cc/50?u=4' }],
+      image: './build/assets/images/slide2.png',
+      collaborators: [{ src: './build/assets/images/logo.png' }, { src: './build/assets/images/logo.png' }],
     },
     {
       label: 'Project Gamma',
       sublabel: 'Mobile Expansion',
-      image: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=200&h=150&fit=crop',
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=5' }],
+      image: './build/assets/images/slide3.png',
+      collaborators: [{ src: './build/assets/images/logo.png' }],
     },
     {
       label: 'Project Delta',
       sublabel: 'Legacy Maintenance',
-      image: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=200&h=150&fit=crop',
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=6' }],
+      image: './build/assets/images/nature_desert_3.png',
+      collaborators: [{ src: './build/assets/images/logo.png' }],
     },
     {
       label: 'Project Epsilon',
       sublabel: 'Internal Audit',
-      image: 'https://images.unsplash.com/photo-1454165833767-0274b24f6733?w=200&h=150&fit=crop',
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=7' }],
+      image: './build/assets/images/nature_forest_1.png',
+      collaborators: [{ src: './build/assets/images/logo.png' }],
     },
     {
       label: 'Project Zeta',
       sublabel: 'AI Integration',
-      image: 'https://images.unsplash.com/photo-1555255707-c07966488bd7?w=200&h=150&fit=crop',
-      collaborators: [{ src: 'https://i.pravatar.cc/50?u=8' }],
+      image: './build/assets/images/nature_lake_2.png',
+      collaborators: [{ src: './build/assets/images/logo.png' }],
     },
   ];
 
@@ -1021,12 +1037,13 @@ window.showListGrid = function () {
 // 12. Tree View with Branch Lines
 // ─────────────────────────────────────────────
 window.showListTree = function () {
+  updateListActiveBtn('tree');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
   c.innerHTML = `
     <div style="padding:40px;max-width:600px;margin:auto;">
-      <div style="background:white;border-radius:12px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,0.1);">
+      <div style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,0.1);">
         <h3 style="margin-top:0;">Source Explorer</h3>
         <ui-list>
           <ui-list-item label="src" icon="fas fa-folder-open" collapsible expanded>
@@ -1052,6 +1069,7 @@ window.showListTree = function () {
 // 13. Large List (100+ items)
 // ─────────────────────────────────────────────
 window.showListLarge = function () {
+  updateListActiveBtn('large');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -1068,17 +1086,17 @@ window.showListLarge = function () {
 
   c.innerHTML = `
     <div style="max-width:800px; margin:0 auto;">
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
         <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
-          <h3 style="margin:0;font-size:18px;color:#1e293b;">📦 Large Dataset (${count} items)</h3>
-          <span style="background:#f1f5f9; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; color:#475569;">Non-Virtual</span>
+          <h3 style="margin:0;font-size:18px;color:var(--text-primary,#1e293b);">📦 Large Dataset (${count} items)</h3>
+          <span style="background:var(--bg-tertiary,#f1f5f9); padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; color:#475569;">Non-Virtual</span>
         </div>
-        <p style="font-size:14px; color:#64748b; margin-bottom:20px;">
+        <p style="font-size:14px; color:var(--text-secondary,#64748b); margin-bottom:20px;">
           This list renders all 150 items directly in the DOM. This is useful for testing scrolling smoothness, keyboard navigation latency, and initial data binding performance.
         </p>
         <ui-list id="largeList" max-height="600px" dividers searchable search-placeholder="Filter 150 items..."></ui-list>
-        <div id="largeListOutput" style="margin-top:16px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; color:#1e293b;">
-          Selected: <span style="font-weight:600; color:#2563eb;">none</span>
+        <div id="largeListOutput" style="margin-top:16px; padding:12px; background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e2e8f0); border-radius:8px; font-size:13px; color:var(--text-primary,#1e293b);">
+          Selected: <span style="font-weight:600; color:var(--accent-blue,#2563eb);">none</span>
         </div>
       </div>
     </div>
@@ -1090,7 +1108,7 @@ window.showListLarge = function () {
       el.items = items;
       el.addEventListener('listItemSelect', e => {
         const out = document.getElementById('largeListOutput');
-        if (out) out.innerHTML = `Selected: <span style="font-weight:600; color:#2563eb;">${e.detail.value}</span>`;
+        if (out) out.innerHTML = `Selected: <span style="font-weight:600; color:var(--accent-blue,#2563eb);">${e.detail.value}</span>`;
       });
     }
   }, 200);
@@ -1106,7 +1124,7 @@ window.showListAdvanced = function () {
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;">
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">⏳ Loading State</h3>
         <ui-list loading loading-text="Fetching items..." id="loadingList"></ui-list>
         <ui-button onclick="window.toggleListLoading()" style="margin-top:12px;padding:8px 16px;background:#10b981;color:white;border:none;border-radius:6px;cursor:pointer;font-size:13px;">
@@ -1114,7 +1132,7 @@ window.showListAdvanced = function () {
         </ui-button>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">📭 Empty State</h3>
         <ui-list id="emptyList" empty-text="No results found. Try a different search." show-empty></ui-list>
         <ui-button onclick="window.loadEmptyList()" style="margin-top:12px;padding:8px 16px;background:#10b981;color:white;border:none;border-radius:6px;cursor:pointer;font-size:13px;">
@@ -1122,7 +1140,7 @@ window.showListAdvanced = function () {
         </ui-button>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">🔗 Link Items</h3>
         <ui-list dividers>
           <ui-list-item label="GitHub"    icon="fab fa-github"     value="gh"     href="https://github.com" target="_blank"></ui-list-item>
@@ -1132,7 +1150,7 @@ window.showListAdvanced = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">↔️ Horizontal List</h3>
         <ui-list horizontal>
           <ui-list-item label="Home"     icon="fas fa-home"    value="h"></ui-list-item>
@@ -1142,7 +1160,7 @@ window.showListAdvanced = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">🎛️ Playground</h3>
         <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:12px;">
           <ui-checkbox id="pgDividers" label="Dividers" oncheckboxchange="updateListPlayground()"></ui-checkbox>
@@ -1165,14 +1183,14 @@ window.showListAdvanced = function () {
         </ui-list>
       </div>
 
-      <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">📋 Events Log</h3>
         <ui-list id="eventList" dividers multi-select>
           <ui-list-item label="Click me!" icon="fas fa-hand-pointer" value="v1"></ui-list-item>
           <ui-list-item label="And me!"   icon="fas fa-hand-pointer" value="v2"></ui-list-item>
           <ui-list-item label="Also me!"  icon="fas fa-hand-pointer" value="v3"></ui-list-item>
         </ui-list>
-        <div id="eventLog" style="margin-top:12px;background:#1e293b;border-radius:8px;padding:12px;height:120px;overflow-y:auto;font-family:monospace;font-size:11px;color:#94a3b8;"></div>
+        <div id="eventLog" style="margin-top:12px;background:#1e293b;border-radius:8px;padding:12px;height:120px;overflow-y:auto;font-family:monospace;font-size:11px;color:var(--text-secondary,#64748b);"></div>
       </div>
     </div>
   `;
@@ -1232,22 +1250,41 @@ window.showListAdvanced = function () {
 // 10. Apex List Masterclass
 // ─────────────────────────────────────────────
 window.showListApex = function () {
+  updateListActiveBtn('apex');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
+  const apexCardStyle = [
+    'background:var(--bg-primary,#ffffff)',
+    'color:var(--text-primary,#1e293b)',
+    'border:1px solid var(--border-default,#e2e8f0)',
+    'border-radius:16px',
+    'padding:24px',
+    'box-shadow:0 10px 25px rgba(15,23,42,0.08)'
+  ].join(';');
+
+  const apexHeadingStyle = [
+    'margin:0 0 16px',
+    'font-size:16px',
+    'color:var(--text-primary,#1e293b)',
+    'display:flex',
+    'align-items:center',
+    'gap:8px'
+  ].join(';');
+
   c.innerHTML = `
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;">
 
       <!-- 1. User Directory (Avatars + Tags) -->
-      <div class="demo-block" style="background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,0.05);">
-        <h3 style="margin:0 0 16px;font-size:16px;color:#1e293b;display:flex;align-items:center;gap:8px;">
+      <div class="demo-block" style="${apexCardStyle}">
+        <h3 style="${apexHeadingStyle}">
           <span style="font-size:20px;">👥</span> Smart User Directory
         </h3>
         <ui-list dividers>
           <ui-list-item 
             label="Marcus Rodriguez" 
             sublabel="Principal Engineer — London"
-            user-avatar="https://i.pravatar.cc/150?u=marcus"
+            user-avatar="./build/assets/images/logo.png"
             badge="Admin"
             badge-color="primary"
             tags='[{"label":"AI","color":"indigo","variant":"soft"},{"label":"React","color":"info","variant":"soft"}]'
@@ -1256,7 +1293,7 @@ window.showListApex = function () {
           <ui-list-item 
             label="Sasha Silver" 
             sublabel="Product Designer — Berlin"
-            user-avatar="https://i.pravatar.cc/150?u=sasha"
+            user-avatar="./build/assets/images/logo.png"
             badge="Pro"
             badge-color="success"
             tags='[{"label":"Figma","color":"warning","variant":"soft"},{"label":"UX","color":"danger","variant":"soft"}]'
@@ -1265,14 +1302,14 @@ window.showListApex = function () {
           <ui-list-item 
             label="Priya Sharma" 
             sublabel="Growth Lead — Mumbai"
-            user-avatar="https://i.pravatar.cc/150?u=priya"
+            user-avatar="./build/assets/images/logo.png"
             tags='[{"label":"Marketing","color":"success","variant":"soft"}]'
             multiline
           ></ui-list-item>
           <ui-list-item 
             label="Alex Chen" 
             sublabel="DevOps Engineer — Remote"
-            user-avatar="https://i.pravatar.cc/150?u=alex"
+            user-avatar="./build/assets/images/logo.png"
             badge="External"
             badge-color="secondary"
             multiline
@@ -1281,15 +1318,15 @@ window.showListApex = function () {
       </div>
 
       <!-- 2. Product Catalog (Images + Counters) -->
-      <div class="demo-block" style="background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,0.05);">
-        <h3 style="margin:0 0 16px;font-size:16px;color:#1e293b;display:flex;align-items:center;gap:8px;">
+      <div class="demo-block" style="${apexCardStyle}">
+        <h3 style="${apexHeadingStyle}">
           <span style="font-size:20px;">🛒</span> Store Inventory
         </h3>
         <ui-list dividers variant="outline">
           <ui-list-item 
             label="Premium Headphones" 
             sublabel="Noise Cancelling — Bluetooth 5.0"
-            image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&h=200&fit=crop"
+            image="./build/assets/images/nature_ocean_4.png"
             counter="$299"
             badge="Sale"
             badge-color="danger"
@@ -1298,14 +1335,14 @@ window.showListApex = function () {
           <ui-list-item 
             label="Smart Watch G2" 
             sublabel="Oxygen Sensor — OLED"
-            image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&h=200&fit=crop"
+            image="./build/assets/images/slide1.png"
             counter="$349"
             multiline
           ></ui-list-item>
           <ui-list-item 
             label="Mechanical Keyboard" 
             sublabel="Cherry MX Blue — RGB"
-            image="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?w=200&h=200&fit=crop"
+            image="./build/assets/images/slide2.png"
             counter="$189"
             badge="-15%"
             badge-color="success"
@@ -1323,24 +1360,22 @@ window.showListApex = function () {
 
   c2.innerHTML = `
     <!-- 3. Skeleton Loading Flow -->
-    <div style="background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,0.05); position:relative;">
-      <h3 style="margin:0 0 16px;font-size:16px;color:#1e293b;display:flex;align-items:center;gap:8px;">
+    <div style="${apexCardStyle};position:relative;">
+      <h3 style="${apexHeadingStyle}">
         <span style="font-size:20px;">🪄</span> Loading Experience (Skeletons)
       </h3>
       <ui-list id="skeletonDemoList" dividers></ui-list>
       <ui-button 
-        onclick="window.toggleApexSkeleton()"
-        style="margin-top:20px; width:100%; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; font-weight:600; cursor:pointer; color:#64748b; transition:all 0.2s;"
-        onmouseover="this.style.background='#f1f5f9'"
-        onmouseout="this.style.background='#f8fafc'"
-      >
-        🪄 Toggle Skeleton State
-      </ui-button>
+        onclick="globalThis.toggleApexSkeleton()"
+        variant="outline"
+        style="margin-top:20px;width:100%;"
+        label="🪄 Toggle Skeleton State"
+      ></ui-button>
     </div>
 
     <!-- 4. Real-time Discovery (Highlighting) -->
-    <div style="background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,0.05);">
-      <h3 style="margin:0 0 16px;font-size:16px;color:#1e293b;display:flex;align-items:center;gap:8px;">
+    <div style="${apexCardStyle}">
+      <h3 style="${apexHeadingStyle}">
         <span style="font-size:20px;">🔦</span> Live Discovery (Search Highlighting)
       </h3>
       <ui-list 
@@ -1371,11 +1406,41 @@ window.showListApex = function () {
   const hList = document.getElementById('highlightDemoList');
   if (hList) {
     hList.items = [
-      { label: 'JavaScript Frameworks', sublabel: 'React, Vue, Angular, Node.js', icon: 'fab fa-js' },
-      { label: 'Node.js Runtime', sublabel: 'Built on Chrome V8 engine', icon: 'fab fa-node-js' },
-      { label: 'Python Scripting', sublabel: 'Data analysis and backend', icon: 'fab fa-python' },
-      { label: 'React Native', sublabel: 'Mobile apps with JS', icon: 'fab fa-react' },
-      { label: 'TypeScript', sublabel: 'Typed JavaScript variant', icon: 'fab fa-js-square' },
+      {
+        label: 'JavaScript Frameworks',
+        sublabel: 'React, Vue, Angular, Node.js',
+        icon: 'fab fa-js',
+        showGhostLayer: true,
+        metadata: { ip: '10.30.1.21', version: 'DISC-2.8.4', id: 'DISC-JS-001', scope: 'frontend-cluster' }
+      },
+      {
+        label: 'Node.js Runtime',
+        sublabel: 'Built on Chrome V8 engine',
+        icon: 'fab fa-node-js',
+        showGhostLayer: true,
+        metadata: { ip: '10.30.1.22', version: 'DISC-2.8.5', id: 'DISC-NODE-014', scope: 'runtime-core' }
+      },
+      {
+        label: 'Python Scripting',
+        sublabel: 'Data analysis and backend',
+        icon: 'fab fa-python',
+        showGhostLayer: true,
+        metadata: { ip: '10.30.1.23', version: 'DISC-1.9.7', id: 'DISC-PY-032', scope: 'analytics-lab' }
+      },
+      {
+        label: 'React Native',
+        sublabel: 'Mobile apps with JS',
+        icon: 'fab fa-react',
+        showGhostLayer: true,
+        metadata: { ip: '10.30.1.24', version: 'DISC-3.1.0', id: 'DISC-RN-007', scope: 'mobile-edge' }
+      },
+      {
+        label: 'TypeScript',
+        sublabel: 'Typed JavaScript variant',
+        icon: 'fab fa-js-square',
+        showGhostLayer: true,
+        metadata: { ip: '10.30.1.25', version: 'DISC-5.6.0', id: 'DISC-TS-019', scope: 'typed-core' }
+      },
     ];
   }
 
@@ -1386,9 +1451,30 @@ window.showListApex = function () {
       // When not skeleton, load actual data
       if (!el.skeleton) {
         el.items = [
-          { label: 'Thomas Anderson', sublabel: 'The One — Core Systems', userAvatar: 'https://i.pravatar.cc/150?u=neo', tags: '["Hero","Matrix"]' },
-          { label: 'Trinity Moss', sublabel: 'Tactical Lead', userAvatar: 'https://i.pravatar.cc/150?u=trinity', tags: '["Pilot","Combat"]' },
-          { label: 'Morpheus Dream', sublabel: 'Captain — Nebuchadnezzar', userAvatar: 'https://i.pravatar.cc/150?u=morpheus', tags: '["Leader","Captain"]' },
+          {
+            label: 'Thomas Anderson',
+            sublabel: 'The One — Core Systems',
+            userAvatar: './build/assets/images/logo.png',
+            tags: '["Hero","Matrix"]',
+            showGhostLayer: true,
+            metadata: { ip: '172.16.10.11', version: 'LIVE-4.2.1', id: 'SKEL-TH-001', role: 'system-core' }
+          },
+          {
+            label: 'Trinity Moss',
+            sublabel: 'Tactical Lead',
+            userAvatar: './build/assets/images/logo.png',
+            tags: '["Pilot","Combat"]',
+            showGhostLayer: true,
+            metadata: { ip: '172.16.10.12', version: 'LIVE-4.2.2', id: 'SKEL-TR-002', role: 'ops-lead' }
+          },
+          {
+            label: 'Morpheus Dream',
+            sublabel: 'Captain — Nebuchadnezzar',
+            userAvatar: './build/assets/images/logo.png',
+            tags: '["Leader","Captain"]',
+            showGhostLayer: true,
+            metadata: { ip: '172.16.10.13', version: 'LIVE-4.2.3', id: 'SKEL-MO-003', role: 'fleet-command' }
+          },
         ];
       } else {
         el.items = [