atomicuilibrary 0.0.1 → 0.1.3

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

@@ -7,68 +7,65 @@ export function initDividerDemo() {
     <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Enhanced divider with 30+ features: animations, patterns, interactive capabilities, and more!</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 8px; flex-wrap: wrap;">
-       <ui-button id="btnApex" label="✨ Apex Suite"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnApex4" label="🌌 Apex 4.0"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnPlay" label="🎮 Playground"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnBasic" label="📐 Basic"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnSlots" label="🎯 Slots"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnAnim" label="✨ Animations"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnPatt" label="🎨 Patterns"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnInter" label="👆 Interactive"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnEff" label="💫 Effects"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnSpac" label="📏 Spacing"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnBdge" label="🔢 Badges"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnShap" label="🔺 Shapes"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnVert" label="I Vertical"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnResp" label="📱 Responsive"  size="md"riant="outline"></ui-button>
+       <ui-button id="btnApex" label="✨ Apex Suite" size="md" variant="outline"></ui-button>
+       <ui-button id="btnApex4" label="🌌 Apex 4.0" size="md" variant="outline"></ui-button>
+       <ui-button id="btnPlay" label="🎮 Playground" size="md" variant="outline"></ui-button>
+       <ui-button id="btnBasic" label="📐 Basic" size="md" variant="outline"></ui-button>
+       <ui-button id="btnSlots" label="🎯 Slots" size="md" variant="outline"></ui-button>
+       <ui-button id="btnAnim" label="✨ Animations" size="md" variant="outline"></ui-button>
+       <ui-button id="btnPatt" label="🎨 Patterns" size="md" variant="outline"></ui-button>
+       <ui-button id="btnInter" label="👆 Interactive" size="md" variant="outline"></ui-button>
+       <ui-button id="btnEff" label="💫 Effects" size="md" variant="outline"></ui-button>
+       <ui-button id="btnSpac" label="📏 Spacing" size="md" variant="outline"></ui-button>
+       <ui-button id="btnBdge" label="🔢 Badges" size="md" variant="outline"></ui-button>
+       <ui-button id="btnShap" label="🔺 Shapes" size="md" variant="outline"></ui-button>
+       <ui-button id="btnVert" label="I Vertical" size="md" variant="outline"></ui-button>
+       <ui-button id="btnResp" label="📱 Responsive" size="md" variant="outline"></ui-button>
     </div>
 
     <div id="dividerDemoContainer" style="margin-top: 20px;"></div>
   `;
 
   const navMap = {
-    btnApex: 'showDividerLegendary',
-    btnApex4: 'showDividerApex4',
-    btnPlay: 'showDividerPlayground',
-    btnBasic: 'showDividerBasic',
-    btnSlots: 'showDividerSlots',
-    btnAnim: 'showDividerAnimations',
-    btnPatt: 'showDividerPatterns',
-    btnInter: 'showDividerInteractive',
-    btnEff: 'showDividerEffects',
-    btnSpac: 'showDividerSpacing',
-    btnBdge: 'showDividerBadges',
-    btnShap: 'showDividerShapesLines',
-    btnVert: 'showDividerVertical',
-    btnResp: 'showDividerResponsive',
+    btnApex: showDividerLegendary,
+    btnApex4: showDividerApex4,
+    btnPlay: showDividerPlayground,
+    btnBasic: showDividerBasic,
+    btnSlots: showDividerSlots,
+    btnAnim: showDividerAnimations,
+    btnPatt: showDividerPatterns,
+    btnInter: showDividerInteractive,
+    btnEff: showDividerEffects,
+    btnSpac: showDividerSpacing,
+    btnBdge: showDividerBadges,
+    btnShap: showDividerShapesLines,
+    btnVert: showDividerVertical,
+    btnResp: showDividerResponsive,
+  };
+
+  const updateActiveDemoButton = selectedId => {
+    Object.keys(navMap).forEach(id => {
+      const btn = document.getElementById(id);
+      if (btn) {
+        btn.selected = id === selectedId;
+      }
+    });
   };
 
   setTimeout(() => {
-    Object.entries(navMap).forEach(([id, funcName]) => {
+    Object.entries(navMap).forEach(([id, func]) => {
       const btn = document.getElementById(id);
       if (btn) {
         btn.addEventListener('click', () => {
-          const fn = {
-            showDividerLegendary,
-            showDividerApex4,
-            showDividerPlayground,
-            showDividerBasic,
-            showDividerSlots,
-            showDividerAnimations,
-            showDividerPatterns,
-            showDividerInteractive,
-            showDividerEffects,
-            showDividerSpacing,
-            showDividerBadges,
-            showDividerShapesLines,
-            showDividerVertical,
-            showDividerResponsive,
-          }[funcName];
-          if (fn) fn();
+          if (func) {
+            func();
+            updateActiveDemoButton(id);
+          }
         });
       }
     });
 
+    updateActiveDemoButton('btnApex');
     showDividerLegendary();
   }, 100);
 
@@ -80,7 +77,7 @@ export function initDividerDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom: 30px;">Legendary Apex Suite</h3>
-        <div style="background: #0f172a; padding: 60px 40px; border-radius: 24px; color: white;">
+        <div style="background: var(--bg-secondary, #0f172a); border: 1px solid var(--border-default, #334155); padding: 60px 40px; border-radius: 24px; color: var(--text-primary, #ffffff);">
            <h4 style="margin-bottom: 24px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">Aura Dynamic Flow</h4>
            <ui-divider text="SYSTEM STATUS: OPTIMIZED" aura="true" color="#10b981" thickness="2px"></ui-divider>
            <div style="height: 120px;"></div>
@@ -100,7 +97,7 @@ export function initDividerDemo() {
            <ui-divider text="NETWORK GRID 07" subtitle="Verified Quantum Encryption Protocol" color="primary"></ui-divider>
            <div style="height: 120px;"></div>
            <h4 style="margin-bottom: 24px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">Crystal Mode (Glassmorphism)</h4>
-           <div style="position: relative; height: 220px; border-radius: 16px; overflow: hidden; background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=1000') center/cover;">
+           <div style="position: relative; height: 220px; border-radius: 16px; overflow: hidden; background: url('/build/assets/images/nature_desert_3.png') center/cover;">
               <div style="position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: saturate(180%) blur(5px);"></div>
               <div style="position: absolute; width: 100%; top: 50%; transform: translateY(-50%);">
                  <ui-divider text="DEEP SPACE CLUSTER" glass="true" color="white" aura="true"></ui-divider>
@@ -123,7 +120,7 @@ export function initDividerDemo() {
       <div class="demo-block">
         <h3 style="margin-bottom: 30px;">🌌 Apex 4.0: Galactic Interaction Suite</h3>
         
-        <div style="background: #0f172a; padding: 60px 40px; border-radius: 24px; color: white; display: flex; flex-direction: column; gap: 80px;">
+        <div style="background: var(--bg-secondary, #0f172a); border: 1px solid var(--border-default, #334155); padding: 60px 40px; border-radius: 24px; color: var(--text-primary, #ffffff); display: flex; flex-direction: column; gap: 80px;">
            
            <div style="text-align: center;">
               <h4 style="margin-bottom: 24px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">1. Cinematic Reveal (Scroll-Triggered)</h4>
@@ -135,7 +132,7 @@ export function initDividerDemo() {
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px;">
               <div>
                  <h4 style="margin-bottom: 40px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">2. Physical Draggable (Scrubber)</h4>
-                 <div style="padding: 40px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 24px;">
+                 <div style="padding: 40px; background: var(--bg-tertiary, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.05)); border-radius: 24px;">
                     <p style="font-size: 12px; margin-bottom: 20px; opacity: 0.7;">SCRUBBER VALUE: <span id="scrubVal" style="color: #60a5fa; font-weight: 800;">50%</span></p>
                     <ui-divider 
                       draggable="true" 
@@ -157,8 +154,8 @@ export function initDividerDemo() {
               </div>
            </div>
 
-           <div style="background: linear-gradient(135deg, #1e293b, #0f172a); padding: 50px; border-radius: 24px; border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
-              <h4 style="margin-bottom: 30px; opacity: 0.8; font-size: 12px; font-weight: 800; color: #8b5cf6; text-align: center;">THE APEX 4.0 "GALACTIC" FUSION</h4>
+           <div style="background: linear-gradient(135deg, var(--bg-primary, #1e293b), var(--bg-secondary, #0f172a)); padding: 50px; border-radius: 24px; border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
+              <h4 style="margin-bottom: 30px; opacity: 0.8; font-size: 12px; font-weight: 800; color:var(--accent-purple,#8b5cf6); text-align: center;">THE APEX 4.0 "GALACTIC" FUSION</h4>
               <ui-divider 
                 text="SYSTEM IMMORTAL" 
                 subtitle="Apex 4.0 Integration Protocol"
@@ -181,7 +178,7 @@ export function initDividerDemo() {
                 icon="🌌"
                 icon-animation="spin"
               ></ui-divider>
-              <div id="fusionStatus" style="margin-top: 24px; text-align: center; color: #8b5cf6; font-size: 12px; font-family: monospace;">FUSION PERCENT: 62% | CURRENT STEP: 5</div>
+              <div id="fusionStatus" style="margin-top: 24px; text-align: center; color:var(--accent-purple,#8b5cf6); font-size: 12px; font-family: monospace;">FUSION PERCENT: 62% | CURRENT STEP: 5</div>
            </div>
 
            <div style="padding: 40px; background: rgba(0,0,0,0.2); border-radius: 24px; border: 1px dashed rgba(255,255,255,0.1);">
@@ -320,12 +317,12 @@ export function initDividerDemo() {
           </div>
         </div>
         
-        <div class="playground-preview" style="padding: 40px; background: white; border: 1px dashed #d1d5db; border-radius: 8px; min-height: 150px; display: flex; align-items: center; justify-content: center;">
+        <div class="playground-preview" style="padding: 40px; min-height: 150px; display: flex; align-items: center; justify-content: center;">
           <div id="dividerPreview" style="width: 100%;"></div>
         </div>
         
-        <div id="dividerEventLog" style="margin-top: 16px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 100px; overflow-y: auto;">
-          <div style="color: #64748b; margin-bottom: 4px;">Events Log:</div>
+        <div id="dividerEventLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-default, #e2e8f0); border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 100px; overflow-y: auto; color: var(--text-primary);">
+          <div style="color:var(--text-secondary,#64748b); margin-bottom: 4px;">Events Log:</div>
           <div id="pg-log-content"></div>
         </div>
         
@@ -504,7 +501,7 @@ export function initDividerDemo() {
           <div>
             <h4 style="margin-bottom: 12px;">Responsive (md)</h4>
             <p style="font-size: 13px; color: #6b7280; margin-bottom: 12px;">Horizontal on desktop, switches to Vertical on tablet/mobile.</p>
-            <div style="display: flex; align-items: center; border: 1px solid #e5e7eb; padding: 20px; border-radius: 8px; min-height: 60px;">
+            <div style="display: flex; align-items: center; border:1px solid var(--border-default,#e5e7eb); padding: 20px; border-radius: 8px; min-height: 60px;">
               <span>Left Content</span>
               <ui-divider responsive="md" text="OR" color="primary"></ui-divider>
               <span>Right Content</span>
@@ -514,7 +511,7 @@ export function initDividerDemo() {
           <div>
             <h4 style="margin-bottom: 12px;">Responsive (sm)</h4>
             <p style="font-size: 13px; color: #6b7280; margin-bottom: 12px;">Only switches on very small screens.</p>
-            <div style="display: flex; align-items: center; border: 1px solid #e5e7eb; padding: 20px; border-radius: 8px; min-height: 60px;">
+            <div style="display: flex; align-items: center; border:1px solid var(--border-default,#e5e7eb); padding: 20px; border-radius: 8px; min-height: 60px;">
               <span>Feature A</span>
               <ui-divider responsive="sm" icon="⚡" color="success"></ui-divider>
               <span>Feature B</span>
@@ -720,7 +717,7 @@ export function initDividerDemo() {
         <p style="opacity: 0.7; margin-bottom: 20px;">Spacing presets and inset options.</p>
         
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Spacing Presets</h4>
-        <div style="background: #f9fafb; padding: 20px; border-radius: 8px;">
+        <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px;">
           <p>Content before compact divider</p>
           <ui-divider text="Compact" spacing="compact" color="primary"></ui-divider>
           <p>Content after compact divider</p>
@@ -806,7 +803,7 @@ export function initDividerDemo() {
         <p style="opacity: 0.7; margin-bottom: 20px;">Vertical dividers for separating content in flex containers.</p>
         
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Basic Vertical Divider</h4>
-        <div style="display: flex; align-items: center; height: 50px; border: 1px solid #e5e7eb; padding: 0 16px; border-radius: 6px;">
+        <div style="display: flex; align-items: center; height: 50px; border:1px solid var(--border-default,#e5e7eb); padding: 0 16px; border-radius: 6px;">
           <span>Item 1</span>
           <ui-divider orientation="vertical"></ui-divider>
           <span>Item 2</span>
@@ -815,14 +812,14 @@ export function initDividerDemo() {
         </div>
 
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Vertical with Text</h4>
-        <div style="display: flex; align-items: center; height: 100px; border: 1px solid #e5e7eb; padding: 0 16px; border-radius: 6px;">
+        <div style="display: flex; align-items: center; height: 100px; border:1px solid var(--border-default,#e5e7eb); padding: 0 16px; border-radius: 6px;">
           <div style="flex: 1; text-align: center;">Left Content</div>
           <ui-divider orientation="vertical" text="OR" color="primary"></ui-divider>
           <div style="flex: 1; text-align: center;">Right Content</div>
         </div>
 
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Vertical with Custom Height</h4>
-        <div style="display: flex; align-items: center; border: 1px solid #e5e7eb; padding: 16px; border-radius: 6px;">
+        <div style="display: flex; align-items: center; border:1px solid var(--border-default,#e5e7eb); padding: 16px; border-radius: 6px;">
           <span>Auto Height (Parent)</span>
           <ui-divider orientation="vertical" style="height: 40px; margin: 0 16px;"></ui-divider>
           <span>Explicit Prop Height</span>

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

@@ -8,12 +8,12 @@ export function initDockDemo() {
     <p>macOS-style dock with magnification effect and smooth animations.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button id="btnDockPlayground"  label="🎮 Interactive Playground" style="--btn-bg: #8b5cf6;" variant="outline"></ui-button>
+      <ui-button id="btnDockPlayground"  label="🎮 Interactive Playground" style="--btn-bg: var(--accent-purple,#8b5cf6);" variant="outline"></ui-button>
       <ui-button id="btnDockBasic"  label="Basic" variant="outline"></ui-button>
       <ui-button id="btnDockPositions"  label="Positions" variant="outline"></ui-button>
       <ui-button id="btnDockSizes"  label="Sizes" variant="outline"></ui-button>
       <ui-button id="btnDockBadges"  label="With Badges" variant="outline"></ui-button>
-      <ui-button id="btnDockPremium"  label="✨ OS Experience" style="--btn-bg: #ec4899;" variant="outline"></ui-button>
+      <ui-button id="btnDockPremium"  label="✨ OS Experience" style="--btn-bg: var(--accent-pink,#ec4899);" variant="outline"></ui-button>
     </div>
 
     <div id="dockDemoContainer" style="margin-top: 20px;"></div>
@@ -34,28 +34,27 @@ export function initDockDemo() {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: 'finder', label: 'Finder', icon: 'smile' },
-      { id: 'mail', label: 'Mail', icon: 'mail' },
-      { id: 'browser', label: 'Browser', icon: 'globe' },
-      { id: 'music', label: 'Music', icon: 'music' },
-      { id: 'photos', label: 'Photos', icon: 'image' },
-      { id: 'settings', label: 'Settings', icon: 'settings' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Bottom Dock (Default)</h4>
         <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Hover over icons to see magnification effect</p>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="basicDock" icon-library="lucide"></ui-dock>
         </div>
       </div>
     `;
 
     setTimeout(() => {
-      const dock = container.querySelector('ui-dock');
+      const dock = document.getElementById('basicDock');
       if (dock) {
+        dock.items = JSON.stringify([
+          { id: 'finder', label: 'Finder', icon: 'smile' },
+          { id: 'mail', label: 'Mail', icon: 'mail' },
+          { id: 'browser', label: 'Browser', icon: 'globe' },
+          { id: 'music', label: 'Music', icon: 'music' },
+          { id: 'photos', label: 'Photos', icon: 'image' },
+          { id: 'settings', label: 'Settings', icon: 'settings' },
+        ]);
         dock.addEventListener('dockItemClick', e => {
           console.log('Dock item clicked:', e.detail);
         });
@@ -67,26 +66,18 @@ export function initDockDemo() {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: '1', label: 'Home', icon: 'home' },
-      { id: '2', label: 'Search', icon: 'search' },
-      { id: '3', label: 'Heart', icon: 'heart' },
-      { id: '4', label: 'Star', icon: 'star' },
-      { id: '5', label: 'Settings', icon: 'settings' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Bottom Position</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' position="bottom" icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="dockPosBottom" position="bottom" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div style="margin-bottom: 30px;">
         <h4>Top Position</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' position="top" icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="dockPosTop" position="top" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
@@ -94,98 +85,107 @@ export function initDockDemo() {
         <div>
           <h4>Left Position</h4>
           <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-            <ui-dock items='${items}' position="left" icon-library="lucide"></ui-dock>
+            <ui-dock id="dockPosLeft" position="left" icon-library="lucide"></ui-dock>
           </div>
         </div>
 
         <div>
           <h4>Right Position</h4>
           <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-            <ui-dock items='${items}' position="right" icon-library="lucide"></ui-dock>
+            <ui-dock id="dockPosRight" position="right" icon-library="lucide"></ui-dock>
           </div>
         </div>
       </div>
     `;
+
+    setTimeout(() => {
+      const itemsList = JSON.stringify([
+        { id: '1', label: 'Home', icon: 'home' },
+        { id: '2', label: 'Search', icon: 'search' },
+        { id: '3', label: 'Heart', icon: 'heart' },
+        { id: '4', label: 'Star', icon: 'star' },
+        { id: '5', label: 'Settings', icon: 'settings' },
+      ]);
+      ['dockPosBottom', 'dockPosTop', 'dockPosLeft', 'dockPosRight'].forEach(id => {
+        const d = document.getElementById(id);
+        if (d) d.items = itemsList;
+      });
+    }, 100);
   };
 
   window.showDockSizes = function () {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: '1', label: 'File', icon: 'file-text' },
-      { id: '2', label: 'Folder', icon: 'folder' },
-      { id: '3', label: 'Image', icon: 'image' },
-      { id: '4', label: 'Video', icon: 'clapperboard' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Small Size</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' size="md" icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="dockSizeSm" size="sm" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div style="margin-bottom: 30px;">
         <h4>md Size (Default)</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' size="md" icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="dockSizeMd" size="md" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div>
         <h4>Large Size</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' size="lg" icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="dockSizeLg" size="lg" icon-library="lucide"></ui-dock>
         </div>
       </div>
     `;
+
+    setTimeout(() => {
+      const itemsList = JSON.stringify([
+        { id: '1', label: 'File', icon: 'file-text' },
+        { id: '2', label: 'Folder', icon: 'folder' },
+        { id: '3', label: 'Image', icon: 'image' },
+        { id: '4', label: 'Video', icon: 'clapperboard' },
+      ]);
+      ['dockSizeSm', 'dockSizeMd', 'dockSizeLg'].forEach(id => {
+        const d = document.getElementById(id);
+        if (d) d.items = itemsList;
+      });
+    }, 100);
   };
 
   window.showDockWithBadges = function () {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: 'mail', label: 'Mail', icon: 'mail', badge: 12 },
-      { id: 'messages', label: 'Messages', icon: 'message-square', badge: 5 },
-      { id: 'notifications', label: 'Notifications', icon: 'bell', badge: 99 },
-      { id: 'calendar', label: 'Calendar', icon: 'calendar' },
-      { id: 'tasks', label: 'Tasks', icon: 'check-square', badge: 3 },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Dock with Badge Indicators</h4>
         <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Icons can display notification badges</p>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' icon-library="lucide"></ui-dock>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
+          <ui-dock id="dockWithBadges" icon-library="lucide"></ui-dock>
         </div>
       </div>
     `;
+
+    setTimeout(() => {
+      const d = document.getElementById('dockWithBadges');
+      if (d) {
+        d.items = JSON.stringify([
+          { id: 'mail', label: 'Mail', icon: 'mail', badge: 12 },
+          { id: 'messages', label: 'Messages', icon: 'message-square', badge: 5 },
+          { id: 'notifications', label: 'Notifications', icon: 'bell', badge: 99 },
+          { id: 'calendar', label: 'Calendar', icon: 'calendar' },
+          { id: 'tasks', label: 'Tasks', icon: 'check-square', badge: 3 },
+        ]);
+      }
+    }, 100);
   };
 
   window.showPremiumDock = function () {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    // Simulate OS Dock
-    const items = JSON.stringify([
-      { id: 'finder', label: 'Finder', icon: 'smile', active: true },
-      { id: 'launchpad', label: 'Launchpad', icon: 'rocket' },
-      { id: 'browser', label: 'Safari', icon: 'compass', active: true },
-      { id: 'mail', label: 'Mail', icon: 'mail', badge: 3, bounce: true },
-      { id: 'maps', label: 'Maps', icon: 'map' },
-      { id: 'separator1', separator: true },
-      { id: 'music', label: 'Music', icon: 'music', active: true },
-      { id: 'podcasts', label: 'Podcasts', icon: 'mic' },
-      { id: 'tv', label: 'TV', icon: 'tv' },
-      { id: 'separator2', separator: true },
-      { id: 'settings', label: 'System Settings', icon: 'settings' },
-      { id: 'trash', label: 'Trash', icon: 'trash-2' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h3>✨ OS Experience</h3>
@@ -212,7 +212,7 @@ export function initDockDemo() {
 
           <!-- The Dock -->
           <ui-dock 
-            items='${items}' 
+            id="premiumDock" 
             position="bottom" 
             size="md" 
             magnify="true" 
@@ -227,6 +227,26 @@ export function initDockDemo() {
       </div>
     `;
 
+    setTimeout(() => {
+      const d = document.getElementById('premiumDock');
+      if (d) {
+        d.items = JSON.stringify([
+          { id: 'finder', label: 'Finder', icon: 'smile', active: true },
+          { id: 'launchpad', label: 'Launchpad', icon: 'rocket' },
+          { id: 'browser', label: 'Safari', icon: 'compass', active: true },
+          { id: 'mail', label: 'Mail', icon: 'mail', badge: 3, bounce: true },
+          { id: 'maps', label: 'Maps', icon: 'map' },
+          { id: 'separator1', separator: true },
+          { id: 'music', label: 'Music', icon: 'music', active: true },
+          { id: 'podcasts', label: 'Podcasts', icon: 'mic' },
+          { id: 'tv', label: 'TV', icon: 'tv' },
+          { id: 'separator2', separator: true },
+          { id: 'settings', label: 'System Settings', icon: 'settings' },
+          { id: 'trash', label: 'Trash', icon: 'trash-2' },
+        ]);
+      }
+    }, 100);
+
     window.toggleBounce = function () {
       alert("In a real React/Angular app, you'd update the 'items' prop to remove 'bounce: true'.");
     };
@@ -240,7 +260,7 @@ export function initDockDemo() {
       <h3>🎮 Interactive Dock Playground</h3>
       <p style="color: #6b7280; margin-bottom: 20px;">Customize the dock in real-time</p>
 
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; padding: 20px; background-color: white; border-radius: 8px;">
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; padding: 20px; background-color:var(--bg-primary,white); border-radius: 8px;">
         <div>
           <label style="display: block; margin-bottom: 8px; font-weight: 600;">Position:</label>
           <ui-dropdown id="dockPosition" value="bottom" options='[
@@ -305,15 +325,15 @@ export function initDockDemo() {
         </div>
       </div>
 
-      <div id="dockPlaygroundPreview" style="display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 60px; background-color: #f3f4f6; border-radius: 8px;"></div>
+      <div id="dockPlaygroundPreview" style="display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 60px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;"></div>
 
-      <div id="dockClickLog" style="margin-top: 20px; padding: 16px; background-color: white; border-radius: 8px; border: 1px solid #e5e7eb;">
+      <div id="dockClickLog" style="margin-top: 20px; padding: 16px; background-color:var(--bg-primary,white); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
         <h4 style="margin: 0 0 12px;">Click Events Log:</h4>
         <div id="dockLogContent" style="color: #6b7280; font-size: 14px; font-family: monospace;">Click on dock items to see events...</div>
       </div>
       
       <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
-        <ui-button id="btnCopyDockCode" variant="ghost" color="secondary" label="Copy" size="md"yle="position: absolute; top: 10px; right: 10px; --btn-bg: rgba(255,255,255,0.1); --btn-text: white;"></ui-button>
+        <ui-button id="btnCopyDockCode" variant="ghost" color="secondary" label="Copy" size="md" style="position: absolute; top: 10px; right: 10px; --btn-bg: rgba(255,255,255,0.1); --btn-text: white;"></ui-button>
         <code id="dockCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px; white-space: pre-wrap;">
           <ui-dock ...></ui-dock>
         </code>