atomicuilibrary 0.1.0 → 0.1.3

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

@@ -8,7 +8,7 @@ export const initTooltipDemo = () => {
         <ui-icon name="message-square" library="lucide" size="24px" style="color: #10b981;"></ui-icon>
         <h2 style="margin: 0;">Tooltip Component</h2>
       </div>
-      <p style="color: #64748b; font-size: 15px; margin-bottom: 30px;">
+      <p style="color:var(--text-secondary,#64748b); font-size: 15px; margin-bottom: 30px;">
         High-performance, accessible contextual overlays with advanced portaling, mouse tracking, and elite aesthetics.
       </p>
     </div>
@@ -117,13 +117,13 @@ export const initTooltipDemo = () => {
         <div class="demo-grid-3">
           <div class="demo-item">
             <ui-tooltip content="Vibrant pink background" custom-color="#ec4899" text-color="#ffffff">
-              <ui-button slot="target" style="background:#ec4899; color:white; border:none">Vibrant Pink</ui-button>
+              <ui-button slot="target" style="background:var(--accent-pink,#ec4899); color:white; border:none">Vibrant Pink</ui-button>
             </ui-tooltip>
             <span>Custom BG Color</span>
           </div>
           <div class="demo-item">
             <ui-tooltip content="Custom text color override" custom-color="#f1f5f9" text-color="#6366f1">
-              <ui-button slot="target" variant="outline" style="color:#6366f1">Indigo Text</ui-button>
+              <ui-button slot="target" variant="outline" style="color:var(--accent-indigo,#6366f1)">Indigo Text</ui-button>
             </ui-tooltip>
             <span>Custom Text Color</span>
           </div>
@@ -157,40 +157,40 @@ export const initTooltipDemo = () => {
         <p>Advanced interactions including cursor following, open at mouse position, and proximity tracking.</p>
         
         <div class="demo-grid-2">
-           <div class="demo-box" style="background:#f1f5f9; padding:40px; border-radius:16px; border:2px dashed #cbd5e1; text-align:center;">
-             <ui-tooltip content="Tracks mouse movement dynamically!" trackMouse="true" variant="primary">
-               <div slot="target" style="height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: crosshair; color: #64748b; font-weight:700;">
-                 <ui-icon name="move" library="lucide" size="32px" style="margin-bottom:12px"></ui-icon>
-                 <span>Dynamic Mouse Tracking</span>
-               </div>
-             </ui-tooltip>
-           </div>
-           
-           <div class="demo-box" style="background:#f8fafc; padding:30px; border-radius:16px; border:1px solid #e2e8f0;">
-             <div style="display: flex; flex-direction: column; gap: 16px;">
-                <ui-tooltip content="Opens at exact click position" trigger="click" open-at-mouse-position="true" variant="info">
-                  <ui-button slot="target" variant="info" style="width: 100%;">Open at Click Position</ui-button>
-                </ui-tooltip>
-                
-                <ui-tooltip content="High-frequency track (8ms)" track-mouse="true" track-interval="8" variant="success">
-                  <ui-button slot="target" variant="success" style="width: 100%;">Fast Track (8ms)</ui-button>
-                </ui-tooltip>
-                
-                <ui-tooltip content="Follows cursor smoothly" follow-cursor="true" variant="error">
-                  <ui-button slot="target" variant="danger" style="width: 100%;">Smooth Follow Cursor</ui-button>
-                </ui-tooltip>
-
-                <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px">
-                   <ui-tooltip content="Wait for 1.2 seconds..." show-delay="1200" variant="dark">
-                      <ui-button slot="target" variant="outline" size="md">Slow Delay (1.2s)</ui-button>
-                   </ui-tooltip>
-                   <ui-tooltip content="Hidden after 2 seconds..." hide-delay="2000" variant="dark">
-                      <ui-button slot="target" variant="outline" size="md">Hide Delay (2s)</ui-button>
-                   </ui-tooltip>
+           <div class="demo-box" style="background: var(--bg-secondary); padding:40px; border-radius:16px; border:2px dashed var(--border-default); text-align:center;">
+              <ui-tooltip content="Tracks mouse movement dynamically!" trackMouse="true" variant="primary">
+                <div slot="target" style="height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: crosshair; color: var(--text-secondary); font-weight:700;">
+                  <ui-icon name="move" library="lucide" size="32px" style="margin-bottom:12px"></ui-icon>
+                  <span>Dynamic Mouse Tracking</span>
                 </div>
-             </div>
-           </div>
-        </div>
+              </ui-tooltip>
+            </div>
+            
+            <div class="demo-box" style="background: var(--bg-secondary); padding:30px; border-radius:16px; border:1px solid var(--border-default);">
+              <div style="display: flex; flex-direction: column; gap: 16px;">
+                 <ui-tooltip content="Opens at exact click position" trigger="click" open-at-mouse-position="true" variant="info">
+                   <ui-button slot="target" variant="info" style="width: 100%;">Open at Click Position</ui-button>
+                 </ui-tooltip>
+                 
+                 <ui-tooltip content="High-frequency track (8ms)" track-mouse="true" track-interval="8" variant="success">
+                   <ui-button slot="target" variant="success" style="width: 100%;">Fast Track (8ms)</ui-button>
+                 </ui-tooltip>
+                 
+                 <ui-tooltip content="Follows cursor smoothly" follow-cursor="true" variant="error">
+                   <ui-button slot="target" variant="danger" style="width: 100%;">Smooth Follow Cursor</ui-button>
+                 </ui-tooltip>
+
+                 <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px">
+                    <ui-tooltip content="Wait for 1.2 seconds..." show-delay="1200" variant="dark">
+                       <ui-button slot="target" variant="outline" size="md">Slow Delay (1.2s)</ui-button>
+                    </ui-tooltip>
+                    <ui-tooltip content="Hidden after 2 seconds..." hide-delay="2000" variant="dark">
+                       <ui-button slot="target" variant="outline" size="md">Hide Delay (2s)</ui-button>
+                    </ui-tooltip>
+                 </div>
+              </div>
+            </div>
+         </div>
       </section>
 
       <!-- Section: Auto-Shift & Auto-Flip -->
@@ -198,7 +198,7 @@ export const initTooltipDemo = () => {
         <div class="card-header-icon"><ui-icon name="maximize" library="lucide" size="18px"></ui-icon> Auto-Shift & Auto-Flip</div>
         <p>Intelligent positioning system that adapts to viewport constraints and handles portal rendering fixes.</p>
         
-        <div style="padding: 40px; background: #f1f5f9; border-radius: 20px; position: relative; height: 350px; border:1px solid #e2e8f0">
+        <div style="padding: 40px; background: var(--bg-secondary); border-radius: 20px; position: relative; height: 350px; border:1px solid var(--border-default)">
            <!-- Corners -->
            <div style="position: absolute; top: 20px; left: 20px;">
               <ui-tooltip content="Auto-shifts horizontally to stay in view" position="top-left" auto-shift="true" variant="primary">
@@ -225,11 +225,11 @@ export const initTooltipDemo = () => {
            </div>
            
            <!-- Portal Fix Demonstration -->
-           <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; border: 2px dashed #cbd5e1; border-radius: 16px; background: white; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);">
+           <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; border: 2px dashed var(--border-default); border-radius: 16px; background: var(--bg-primary); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);">
               <ui-tooltip content="Correctly positioned via document body portal!" position="top" auto-shift="true" auto-flip="true" variant="error" show-glow="true" portal="true">
                  <ui-button slot="target" variant="danger">Portal Fix Demonstration</ui-button>
               </ui-tooltip>
-              <div style="margin-top:12px; font-size:11px; color:#94a3b8; font-weight:700">TRANSFORMED CONTAINER</div>
+              <div style="margin-top:12px; font-size:11px; color: var(--text-muted); font-weight:700">TRANSFORMED CONTAINER</div>
            </div>
         </div>
       </section>
@@ -241,18 +241,18 @@ export const initTooltipDemo = () => {
         
         <div class="demo-grid-3">
            <!-- Alex Horizon -->
-           <div class="demo-item" style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 16px; background: #fafafa;">
+           <div class="demo-item" style="border: 1px solid var(--border-default); padding: 24px; border-radius: 16px; background: var(--bg-secondary);">
              <ui-tooltip interactive="true" variant="light" max-width="320" show-header="true" show-footer="true" elevation="3">
                <ui-button slot="target" variant="primary">👤 User Profile Slot</ui-button>
                <div slot="header">Identity Management</div>
                <div style="display: flex; gap: 14px; align-items: center;">
-                 <ui-avatar src="https://i.pravatar.cc/150?u=tooltip" shape="circle" size="md"></ui-avatar>
+                 <ui-avatar src="/build/assets/images/logo.png" shape="circle" size="md"></ui-avatar>
                  <div style="text-align:left">
-                   <div style="font-weight: 800; color: #1e293b; font-size:15px; margin-bottom:2px">Alex Horizon</div>
-                   <div style="display:inline-block; padding:2px 6px; background:#f1f5f9; border-radius:4px; font-size:10px; color:#64748b; font-weight:700">SENIOR ARCHITECT</div>
+                   <div style="font-weight: 800; color: var(--text-primary); font-size:15px; margin-bottom:2px">Alex Horizon</div>
+                   <div style="display:inline-block; padding:2px 6px; background: var(--bg-primary); border-radius:4px; font-size:10px; color: var(--text-secondary); font-weight:700">SENIOR ARCHITECT</div>
                  </div>
                </div>
-               <div style="margin-top: 14px; font-size: 13px; color: #475569; text-align:left; line-height:1.5">
+               <div style="margin-top: 14px; font-size: 13px; color: var(--text-secondary); text-align:left; line-height:1.5">
                  Managing <b>Elite Tier</b> infrastructure across 12 availability zones.
                </div>
                <div slot="footer" style="display: flex; gap: 8px; justify-content: flex-end; width: 100%;">
@@ -264,7 +264,7 @@ export const initTooltipDemo = () => {
            </div>
 
            <!-- Special Offer -->
-           <div class="demo-item" style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 16px; background: #fafafa;">
+           <div class="demo-item" style="border: 1px solid var(--border-default); padding: 24px; border-radius: 16px; background: var(--bg-secondary);">
               <ui-tooltip variant="dark" interactive="true" show-glow="true" max-width="240">
                  <ui-button slot="target" variant="warning">
                     <ui-icon name="award" library="lucide" style="margin-right:8px"></ui-icon> Special Offer
@@ -272,7 +272,7 @@ export const initTooltipDemo = () => {
                  <div style="text-align:center;">
                     <div style="font-size: 24px; margin-bottom: 8px;">🔥</div>
                     <div style="font-weight:800; color:#fbbf24; font-size:16px; margin-bottom:4px">EXCLUSIVE DEAL</div>
-                    <p style="font-size:12px; color:#94a3b8; margin-bottom:12px">Unlock the full API suite with <b>50% OFF</b> for the first 3 months.</p>
+                    <p style="font-size:12px; color: var(--text-muted); margin-bottom:12px">Unlock the full API suite with <b>50% OFF</b> for the first 3 months.</p>
                     <ui-button size="xsmall" variant="warning" style="width:100%">Claim Upgrade</ui-button>
                  </div>
               </ui-tooltip>
@@ -280,21 +280,21 @@ export const initTooltipDemo = () => {
            </div>
 
            <!-- Multi-Step List -->
-           <div class="demo-item" style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 16px; background: #fafafa;">
+           <div class="demo-item" style="border: 1px solid var(--border-default); padding: 24px; border-radius: 16px; background: var(--bg-secondary);">
               <ui-tooltip variant="light" interactive="true" max-width="260">
                  <ui-button slot="target" variant="outline">
                     <ui-icon name="list-checks" library="lucide" style="margin-right:8px"></ui-icon> Project Roadmap
                  </ui-button>
                  <div style="text-align:left">
-                    <strong style="display:block; margin-bottom:10px; color:#1e293b; border-bottom:1px solid #e2e8f0; padding-bottom:6px">Current Milestone</strong>
+                    <strong style="display:block; margin-bottom:10px; color: var(--text-primary); border-bottom:1px solid var(--border-default); padding-bottom:6px">Current Milestone</strong>
                     <ul style="margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px">
-                       <li style="display:flex; align-items:center; gap:8px; font-size:12px; color:#64748b">
+                       <li style="display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-secondary)">
                           <ui-icon name="check-circle" library="lucide" size="14px" style="color:#10b981"></ui-icon> Core Component Logic
                        </li>
                        <li style="display:flex; align-items:center; gap:8px; font-size:12px; color:#10b981">
                           <ui-icon name="refresh-cw" library="lucide" size="14px" style="color:#10b981"></ui-icon> Accessibility Audit
                        </li>
-                       <li style="display:flex; align-items:center; gap:8px; font-size:12px; color:#d1d5db">
+                       <li style="display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-muted)">
                           <ui-icon name="circle" library="lucide" size="14px"></ui-icon> Production Deployment
                        </li>
                     </ul>
@@ -309,10 +309,10 @@ export const initTooltipDemo = () => {
       <section id="demo-cases" class="demo-card-elite">
         <div class="card-header-icon"><ui-icon name="check-square" library="lucide" size="18px"></ui-icon> Practical Use Cases</div>
         <p>Real-world integration patterns for everyday UI challenges.</p>
-        <div style="background: #f8fafc; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0;">
+        <div style="background: var(--bg-secondary); padding: 24px; border-radius: 16px; border: 1px solid var(--border-default);">
            <div style="display: flex; flex-direction: column; gap: 16px;">
              <!-- Glossary -->
-             <div style="display: flex; align-items: center; gap: 8px; color: #334151; font-size:14px">
+             <div style="display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size:14px">
                Understanding 
                <ui-tooltip content="A statistical measure of the dispersion of returns for a given security." variant="dark" max-width="220">
                  <span style="border-bottom: 2px dotted #6366f1; cursor: help; font-weight:700" slot="target">Market Volatility</span>
@@ -358,7 +358,7 @@ export const initTooltipDemo = () => {
               <span>Disabled State</span>
            </div>
            <div class="demo-item">
-              <div id="boundaryContainer" style="width:100%; height:80px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden">
+              <div id="boundaryContainer" style="width:100%; height:80px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden">
                  <ui-tooltip content="I am constrained to this box!" boundary="#boundaryContainer" position="top">
                     <ui-button slot="target" size="xsmall" variant="secondary">Boundary Control</ui-button>
                  </ui-tooltip>
@@ -367,11 +367,11 @@ export const initTooltipDemo = () => {
            </div>
         </div>
 
-        <div style="margin-top:40px; background:#f8fafc; padding:32px; border-radius:20px; border:1px solid #e2e8f0;">
+        <div style="margin-top:40px; background: var(--bg-secondary); padding:32px; border-radius:20px; border:1px solid var(--border-default);">
            <div style="display:flex; align-items:center; justify-content:space-between">
               <div style="text-align:left">
-                 <h4 style="margin:0; font-weight:800; color:#1e293b">Manual Life-cycle Control</h4>
-                 <p style="margin:4px 0 0; font-size:13px; color:#64748b">Programmatically toggle visibility regardless of mouse state.</p>
+                 <h4 style="margin:0; font-weight:800; color: var(--text-primary)">Manual Life-cycle Control</h4>
+                 <p style="margin:4px 0 0; font-size:13px; color: var(--text-secondary)">Programmatically toggle visibility regardless of mouse state.</p>
               </div>
               <div style="display:flex; gap:12px">
                  <ui-tooltip id="manualTooltip" content="Mastered by user logic" trigger="manual" variant="error">
@@ -380,19 +380,19 @@ export const initTooltipDemo = () => {
                  <ui-button id="manualToggleBtn" variant="primary" onclick="toggleManualTooltip()">Show Tooltip</ui-button>
               </div>
            </div>
-        </div>
+        </div>   </div>
       </section>
 
       <!-- Section: Playground -->
-      <section id="demo-playground" class="demo-card-elite" style="background: #0f172a; color: white;">
+      <section id="demo-playground" class="demo-card-elite" style="background: var(--bg-secondary); color: var(--text-primary);">
         <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px;">
-           <h3 style="color: white; margin: 0;">🎮 Elite Interactive Playground</h3>
+           <h3 style="color: var(--text-primary); margin: 0;">🎮 Elite Interactive Playground</h3>
            <ui-button onclick="copyTooltipCode()" variant="outline" color="success" label="Copy Implementation"></ui-button>
         </div>
         
         <div style="display: grid; grid-template-columns: 1fr 340px; gap: 32px;">
            <!-- Area 1: Trigger -->
-           <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border: 2px dashed rgba(255,255,255,0.1); border-radius: 16px; padding: 60px;">
+           <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-primary); border: 2px dashed var(--border-default); border-radius: 16px; padding: 60px;">
               <ui-tooltip 
                  id="pgTooltip"
                  content="Configurable Playground Tooltip" 
@@ -404,8 +404,8 @@ export const initTooltipDemo = () => {
               </ui-tooltip>
               
               <div style="margin-top: 48px; width: 100%;">
-                 <div style="color: #475569; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;">Implementation Code:</div>
-                 <div id="pgCodeBlock" style="background: #020617; padding: 20px; border-radius: 12px; font-family: 'Fira Code', monospace; font-size: 13px; color: #22d3ee; border: 1px solid #1e293b; overflow-x: auto; white-space: pre;">
+                 <div style="color: var(--text-secondary,#64748b); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;">Implementation Code:</div>
+                 <div id="pgCodeBlock" style="background: var(--bg-code,#020617); padding: 20px; border-radius: 12px; font-family: 'Fira Code', monospace; font-size: 13px; color: #22d3ee; border: 1px solid var(--border-default); overflow-x: auto; white-space: pre;">
                  </div>
               </div>
            </div>
@@ -482,21 +482,21 @@ export const initTooltipDemo = () => {
                   <div style="display:flex; flex-direction:column; gap:12px;">
                     <ui-checkbox id="pgUseColor" label="Enable Custom Styling"></ui-checkbox>
                     <div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px;">
-                        <div style="display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.05)">
-                           <span style="font-size:10px; color:#94a3b8; width:20px">BG</span>
+                        <div style="display:flex; align-items:center; gap:8px; background:var(--bg-primary); padding:6px 10px; border-radius:8px; border:1px solid var(--border-default)">
+                           <span style="font-size:10px; color:var(--text-secondary,#64748b); width:20px">BG</span>
                            <ui-color-picker id="pgColor" value="#6366f1" style="--picker-width: 24px; --picker-height: 24px;"></ui-color-picker>
-                           <ui-input id="pgColorHex" value="#6366f1" style="width:70px; --input-background: transparent; --input-border: none; color:white; font-family:monospace; font-size:11px;"></ui-input>
+                           <ui-input id="pgColorHex" value="#6366f1" style="width:70px; --input-background: transparent; --input-border: none; color:var(--text-primary); font-family:monospace; font-size:11px;"></ui-input>
                         </div>
-                        <div style="display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.05)">
-                           <span style="font-size:10px; color:#94a3b8; width:24px">TXT</span>
+                        <div style="display:flex; align-items:center; gap:8px; background:var(--bg-primary); padding:6px 10px; border-radius:8px; border:1px solid var(--border-default)">
+                           <span style="font-size:10px; color:var(--text-secondary,#64748b); width:24px">TXT</span>
                            <ui-color-picker id="pgTextColor" value="#ffffff" style="--picker-width: 24px; --picker-height: 24px;"></ui-color-picker>
-                           <ui-input id="pgTextColorHex" value="#ffffff" style="width:70px; --input-background: transparent; --input-border: none; color:white; font-family:monospace; font-size:11px;"></ui-input>
+                           <ui-input id="pgTextColorHex" value="#ffffff" style="width:70px; --input-background: transparent; --input-border: none; color:var(--text-primary); font-family:monospace; font-size:11px;"></ui-input>
                         </div>
                     </div>
                   </div>
                </div>
 
-              <div class="pg-options-card" style="grid-column: span 2; background: rgba(255,255,255,0.05); padding: 12px; border-radius: 8px; margin-top: 8px;">
+              <div class="pg-options-card" style="grid-column: span 2; background: var(--bg-primary); padding: 12px; border-radius: 8px; margin-top: 8px; border: 1px solid var(--border-default);">
                  <div class="pg-check-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                     <ui-checkbox id="pgGlow" checked="true" label="Pulsing Glow"></ui-checkbox>
                     <ui-checkbox id="pgArrow" checked="true" label="Show Arrow"></ui-checkbox>
@@ -520,23 +520,23 @@ export const initTooltipDemo = () => {
         to { opacity: 1; transform: translateY(0); }
       }
       
-      .demo-section-header { margin-bottom: 32px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 24px; }
-      .demo-section-header h2 { font-size: 28px; font-weight: 800; color: #1e293b; margin: 0; }
-      .demo-section-header p { color: #64748b; font-size: 15px; margin: 8px 0 0; }
+      .demo-section-header { margin-bottom: 32px; border-bottom: 1px solid var(--border-default); padding-bottom: 24px; }
+      .demo-section-header h2 { font-size: 28px; font-weight: 800; color: var(--text-primary); margin: 0; }
+      .demo-section-header p { color: var(--text-secondary); font-size: 15px; margin: 8px 0 0; }
   
-      .pill-btn { padding: 8px 18px; background: white; border: 1px solid #e2e8f0; border-radius: 24px; font-size: 13px; font-weight: 700; color: #334155; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+      .pill-btn { padding: 8px 18px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 24px; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
       .pill-btn:hover { border-color: #10b981; color: #10b981; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
       .pill-btn.primary { background: #10b981; color: white; border: none; }
-      .pill-btn.secondary { background: #f8fafc; color: #1e293b; }
+      .pill-btn.secondary { background: var(--bg-primary); color: var(--text-primary); }
       .pill-btn.info { background: #10b981; color: white; border: none; }
       .pill-btn.success { background: #10b981; color: white; border: none; }
-      .pill-btn.warning { background: #f59e0b; color: white; border: none; }
-      .pill-btn.error { background: #ef4444; color: white; border: none; }
+      .pill-btn.warning { background: var(--accent-yellow,#f59e0b); color: white; border: none; }
+      .pill-btn.error { background: var(--accent-red,#ef4444); color: white; border: none; }
 
       
-      .demo-card-elite { background: white; padding: 40px; border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02); }
-      .demo-card-elite h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: #0f172a; }
-      .demo-card-elite p { margin: 0 0 40px; font-size: 15px; color: #64748b; line-height: 1.6; }
+      .demo-card-elite { background: var(--bg-secondary); padding: 40px; border-radius: 24px; border: 1px solid var(--border-default); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); color: var(--text-primary); }
+      .demo-card-elite h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--text-emphasized); }
+      .demo-card-elite p { margin: 0 0 40px; font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
       
       .card-header-icon { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; color: #10b981; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
 
@@ -544,22 +544,22 @@ export const initTooltipDemo = () => {
       .demo-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
       .demo-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
       
-      .demo-flex-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; background: #fafafa; padding: 24px; border-radius: 16px; border: 1px dashed #e2e8f0; }
+      .demo-flex-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; background: var(--bg-primary); padding: 24px; border-radius: 16px; border: 1px dashed var(--border-default); }
       
       .demo-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
-      .demo-item span { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+      .demo-item span { font-size: 11px; color:var(--text-secondary,#64748b); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
       
       .demo-item-glass { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); padding: 48px; border-radius: 20px; display: flex; justify-content: center; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
       
-      .pg-field label { display: block; margin-bottom: 6px; font-weight: 800; color: #94a3b8; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
-      .pg-field select, .pg-field input:not([type="checkbox"]) { width: 100%; background: #1e293b; border: 1px solid #334155; color: white; padding: 10px; border-radius: 8px; font-size: 13px; outline:none; transition: border-color 0.2s; }
+      .pg-field label { display: block; margin-bottom: 6px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
+      .pg-field select, .pg-field input:not([type="checkbox"]) { width: 100%; background: var(--bg-primary); border: 1px solid var(--border-default); color: var(--text-primary); padding: 10px; border-radius: 8px; font-size: 13px; outline:none; transition: border-color 0.2s; }
       .pg-field select:focus, .pg-field input:focus { border-color: #06b6d4; }
       
       .pg-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-      .pg-check-grid label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #cbd5e1; font-weight: 600; }
+      .pg-check-grid label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-primary); font-weight: 600; }
       
       .pg-copy-btn { background: #10b981; border: none; color: white; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
-      .pg-copy-btn:hover { background: #059669; transform: translateY(-1px); }
+      .pg-copy-btn:hover { background: var(--accent-green,#059669); transform: translateY(-1px); }
     </style>
   `;
 
@@ -572,8 +572,10 @@ export const initTooltipDemo = () => {
     sections.forEach(s => {
       if (s.id === `demo-${id}`) {
         s.classList.add('active-section');
+        s.style.display = 'block';
       } else {
         s.classList.remove('active-section');
+        s.style.display = 'none';
       }
     });
 
@@ -681,8 +683,8 @@ export const initTooltipDemo = () => {
 
   // Initial render
   setTimeout(() => {
-    window.updatePg();
     window.scrollToDemo('basic');
+    window.updatePg();
 
     // Setup listeners
     const pgContent = document.getElementById('pgContent');
@@ -706,10 +708,10 @@ export const initTooltipDemo = () => {
     const pgShift = document.getElementById('pgShift');
 
     if (pgContent) pgContent.addEventListener('inputChange', updatePg);
-    if (pgPos) pgPos.addEventListener('dropdownChange', updatePg);
-    if (pgVariant) pgVariant.addEventListener('dropdownChange', updatePg);
-    if (pgAnim) pgAnim.addEventListener('dropdownChange', updatePg);
-    if (pgShape) pgShape.addEventListener('dropdownChange', updatePg);
+    if (pgPos) pgPos.addEventListener('valueChange', updatePg);
+    if (pgVariant) pgVariant.addEventListener('valueChange', updatePg);
+    if (pgAnim) pgAnim.addEventListener('valueChange', updatePg);
+    if (pgShape) pgShape.addEventListener('valueChange', updatePg);
     if (pgElevation) pgElevation.addEventListener('numberInputChange', updatePg);
     if (pgOffset) pgOffset.addEventListener('numberInputChange', updatePg);
     if (pgShowDelay) pgShowDelay.addEventListener('numberInputChange', updatePg);

package/dist/collection/assets/js/demos/top-bar-demo.js

@@ -1,4 +1,4 @@
-// Top Bar Demo
+// Top Bar Demo
 export function initTopBarDemo() {
   const section = document.getElementById('top-bar');
   if (!section) return;
@@ -8,10 +8,10 @@ export function initTopBarDemo() {
     <p>Sticky top navigation bar with company branding, action icons, and user profile menu.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button onclick="showTopBarPlayground()"  label="🎮 Playground" style="background-color: #8b5cf6;" variant="outline"></ui-button>
+      <ui-button onclick="showTopBarPlayground()"  label="🎮 Playground" style="background-color:var(--accent-purple,#8b5cf6);" variant="outline"></ui-button>
       <ui-button onclick="showBasicTopBar()"  label="Basic" style="background-color: #10b981;" variant="outline"></ui-button>
       <ui-button onclick="showTopBarWithActions()"  label="With Actions" style="background-color: #10b981;" variant="outline"></ui-button>
-      <ui-button onclick="showTopBarThemes()"  label="Themes" style="background-color: #f59e0b;" variant="outline"></ui-button>
+      <ui-button onclick="showTopBarThemes()"  label="Themes" style="background-color:var(--accent-yellow,#f59e0b);" variant="outline"></ui-button>
     </div>
 
     <div id="topBarDemoContainer" style="margin-top: 20px;"></div>
@@ -34,7 +34,7 @@ export function initTopBarDemo() {
           <h3>Basic Top Bar</h3>
           <p>A sticky top bar with company branding and user profile menu.</p>
           
-          <div style="position: relative; background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
+          <div style="position: relative; background:var(--bg-secondary,#f9fafb); border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
             <ui-top-bar id="basicTopBar" 
               company-name="Acme Corp" 
               company-logo="🏢"
@@ -85,7 +85,7 @@ export function initTopBarDemo() {
           <h3>Top Bar with Action Icons</h3>
           <p>Includes action buttons with badges and a comprehensive user menu.</p>
           
-          <div style="position: relative; background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
+          <div style="position: relative; background:var(--bg-secondary,#f9fafb); border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
             <ui-top-bar id="actionsTopBar" 
               company-name="TechFlow" 
               company-logo="⚡"
@@ -97,7 +97,7 @@ export function initTopBarDemo() {
             <div style="padding: 40px 24px; min-height: 200px;">
               <h4 style="margin: 0 0 12px;">Application Dashboard</h4>
               <p style="color: #6b7280; margin: 0 0 16px;">Click on notification or message icons to see badges. Hover over user profile for menu.</p>
-              <div id="actionLog" style="background: white; padding: 12px; border-radius: 6px; border: 1px solid #e5e7eb; font-family: monospace; font-size: 12px; color: #6b7280; min-height: 60px;">
+              <div id="actionLog" style="background:var(--bg-primary,white); padding: 12px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb); font-family: monospace; font-size: 12px; color: #6b7280; min-height: 60px;">
                 <div style="color: #9ca3af;">Click on action icons or menu items...</div>
               </div>
             </div>

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

@@ -42,8 +42,8 @@ export function initTransferListDemo() {
     <p>Efficiently move and reorder items between lists with advanced modes and premium features.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button onclick="window.showGodTierDemo()"  label="🌌 God Tier" style="background: linear-gradient(45deg, #f59e0b, #ef4444);" variant="outline"></ui-button>
-      <ui-button onclick="showTransferPlayground()"  label="🎮 Playground" class="playground-btn" variant="outline"></ui-button>
+      <ui-button onclick="window.showGodTierDemo()"  label="🌌 God Tier"  variant="outline"></ui-button>
+      <ui-button onclick="showTransferPlayground()"  label="🎮 Playground" variant="outline"></ui-button>
       <ui-button onclick="showDragDemo()"  label="Drag & Drop" variant="outline"></ui-button>
       <ui-button onclick="showTreeDemo()"  label="Tree Mode" variant="outline"></ui-button>
       <ui-button onclick="showTableDemo()"  label="Table Mode" variant="outline"></ui-button>
@@ -72,27 +72,25 @@ export function initTransferListDemo() {
             border-color: #9ca3af;
         }
         .playground-btn {
-            background-color: #8b5cf6;
+            background-color:var(--accent-purple,#8b5cf6);
             color: white;
-            border-color: #7c3aed;
+            border-color:var(--accent-purple,#7c3aed);
         }
         .playground-btn:hover {
-            background-color: #7c3aed;
+            background-color:var(--accent-purple,#7c3aed);
         }
         .premium-btn {
             background-color: #ecfdf5;
-            color: #047857;
+            color:var(--accent-green,#047857);
             border-color: #a7f3d0;
         }
         .premium-btn:hover {
-            background-color: #d1fae5;
+            background-color: var(--accent-green-soft,#d1fae5);
             border-color: #34d399;
         }
         .playground-settings {
-            background: #f9fafb;
             padding: 20px;
             border-radius: 8px;
-            border: 1px solid #e5e7eb;
             margin-bottom: 20px;
         }
         .settings-grid {
@@ -108,13 +106,15 @@ export function initTransferListDemo() {
         .setting-item label {
             font-size: 13px;
             font-weight: 600;
-            color: #374151;
+            color: var(--text-secondary, #374151);
         }
         .setting-item select, .setting-item input[type="text"], .setting-item input[type="number"] {
             padding: 6px 10px;
-            border: 1px solid #d1d5db;
+            border: 1px solid var(--border-default, #d1d5db);
             border-radius: 4px;
             font-size: 14px;
+            background-color: var(--bg-primary, white);
+            color: var(--text-primary, black);
         }
         .setting-row {
             display: flex;
@@ -135,7 +135,7 @@ export function initTransferListDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>🎮 Interactive Playground</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;">Toggle props and see the Transfer List in action.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;">Toggle props and see the Transfer List in action.</p>
         
         <div class="playground-settings" style="background: var(--bg-secondary); border: 1px solid var(--border-default);">
           <div class="settings-grid">
@@ -168,12 +168,12 @@ export function initTransferListDemo() {
           </div>
         </div>
 
-        <div id="playgroundPreview" style="background: white; padding: 20px; border: 1px dashed #d1d5db; border-radius: 8px;">
+        <div id="playgroundPreview" class="playground-preview" style="padding: 20px;">
           <ui-transfer-list id="playground-component" icon-library="lucide"></ui-transfer-list>
         </div>
         
-        <div id="pg-events" style="margin-top: 20px; padding: 15px; background: #f8fafc; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 150px; overflow: auto; border: 1px solid #e2e8f0;">
-          <div style="color: #64748b; margin-bottom: 5px;">Events Log:</div>
+        <div id="pg-events" style="margin-top: 20px; padding: 15px; background: var(--bg-secondary, #f8fafc); border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 150px; overflow: auto; border: 1px solid var(--border-default, #e2e8f0); color: var(--text-primary);">
+          <div style="color: var(--text-secondary, #64748b); margin-bottom: 5px;">Events Log:</div>
           <div id="pg-log-content"></div>
         </div>
 
@@ -271,10 +271,10 @@ export function initTransferListDemo() {
       } else {
         el.sourceItems = pagination
           ? Array.from({ length: 30 }, (_, i) => ({
-              key: i,
-              label: `Item ${i + 1}`,
-              description: `Pageable item ${i + 1}`,
-            }))
+            key: i,
+            label: `Item ${i + 1}`,
+            description: `Pageable item ${i + 1}`,
+          }))
           : sourceItems;
         el.targetItems = [];
       }
@@ -479,7 +479,7 @@ export function initTransferListDemo() {
           <div style="display: flex; align-items: center; width: 100%;">
             <span style="font-size: 20px; margin-right: 8px;">${item.icon || 'file'}</span>
             <div style="display: flex; flex-direction: column;">
-              <span style="font-weight: bold; color: #111827;">${item.label}</span>
+              <span style="font-weight: bold; color:var(--text-primary,#111827);">${item.label}</span>
               <span style="font-size: 11px; color: #6b7280; font-style: italic;">${item.description} (Key: ${item.key})</span>
             </div>
           </div>