atomicuilibrary 0.0.1 → 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>
@@ -60,17 +60,17 @@ export const initTooltipDemo = () => {
         <p>9 directional points + smart <code>auto</code> positioning with flip & shift logic.</p>
         <div style="display: flex; justify-content: center; padding: 40px 20px;">
           <div style="display: grid; grid-template-columns: repeat(3, 120px); gap: 20px; justify-items: center;">
-            <ui-tooltip content="Top-Left" position="top-left"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
-            <ui-tooltip content="Top Center" position="top"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
-            <ui-tooltip content="Top-Right" position="top-right"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
+            <ui-tooltip content="Top-Left" position="top-left"><ui-button slot="target" variant="outline" size="md">Top-Left</ui-button></ui-tooltip>
+            <ui-tooltip content="Top Center" position="top"><ui-button slot="target" variant="outline" size="md">Top Center</ui-button></ui-tooltip>
+            <ui-tooltip content="Top-Right" position="top-right"><ui-button slot="target" variant="outline" size="md">Top-Right</ui-button></ui-tooltip>
             
-            <ui-tooltip content="Left Center" position="left"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
-            <ui-tooltip content="Auto Position (Flipped)" position="auto" variant="error"><ui-button slot="target" variant="danger" size="md"TO</ui-button></ui-tooltip>
-            <ui-tooltip content="Right Center" position="right"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
+            <ui-tooltip content="Left Center" position="left"><ui-button slot="target" variant="outline" size="md">Left Center</ui-button></ui-tooltip>
+            <ui-tooltip content="Auto Position (Flipped)" position="auto" variant="error"><ui-button slot="target" variant="danger" size="md">Auto</ui-button></ui-tooltip>
+            <ui-tooltip content="Right Center" position="right"><ui-button slot="target" variant="outline" size="md">Right Center</ui-button></ui-tooltip>
             
-            <ui-tooltip content="Bottom-Left" position="bottom-left"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
-            <ui-tooltip content="Bottom Center" position="bottom"><ui-button slot="target" variant="outline" size="md"/ui-button></ui-tooltip>
-            <ui-tooltip content="Bottom-Right" position="bottom-right"><ui-button slot="target" variant="outline" size="md"</ui-button></ui-tooltip>
+            <ui-tooltip content="Bottom-Left" position="bottom-left"><ui-button slot="target" variant="outline" size="md">Bottom-Left</ui-button></ui-tooltip>
+            <ui-tooltip content="Bottom Center" position="bottom"><ui-button slot="target" variant="outline" size="md">Bottom Center</ui-button></ui-tooltip>
+            <ui-tooltip content="Bottom-Right" position="bottom-right"><ui-button slot="target" variant="outline" size="md">Bottom-Right</ui-button></ui-tooltip>
           </div>
         </div>
       </section>
@@ -80,13 +80,13 @@ export const initTooltipDemo = () => {
         <div class="card-header-icon"><ui-icon name="palette" library="lucide" size="18px"></ui-icon> Variants & Glassmorphism</div>
         <p>Semantic themes and modern visual effects for elite-tier interfaces.</p>
         <div class="demo-flex-wrap">
-          <ui-tooltip content="Dark theme (Default)" variant="dark"><ui-button slot="target" size="md"rk</ui-button></ui-tooltip>
-          <ui-tooltip content="Light theme" variant="light"><ui-button slot="target" size="md"riant="outline">Light</ui-button></ui-tooltip>
-          <ui-tooltip content="Primary theme" variant="primary"><ui-button slot="target" size="md"imary</ui-button></ui-tooltip>
-          <ui-tooltip content="Info theme" variant="info"><ui-button slot="target" size="md"riant="info">Info</ui-button></ui-tooltip>
-          <ui-tooltip content="Success theme" variant="success"><ui-button slot="target" size="md"riant="success">Success</ui-button></ui-tooltip>
-          <ui-tooltip content="Warning theme" variant="warning"><ui-button slot="target" size="md"riant="warning">Warning</ui-button></ui-tooltip>
-          <ui-tooltip content="Error theme" variant="error"><ui-button slot="target" size="md"riant="danger">Error</ui-button></ui-tooltip>
+          <ui-tooltip content="Dark theme (Default)" variant="dark"><ui-button slot="target" size="md" variant="outline">Dark</ui-button></ui-tooltip>
+          <ui-tooltip content="Light theme" variant="light"><ui-button slot="target" size="md" variant="outline">Light</ui-button></ui-tooltip>
+          <ui-tooltip content="Primary theme" variant="primary"><ui-button slot="target" size="md" variant="primary">Primary</ui-button></ui-tooltip>
+          <ui-tooltip content="Info theme" variant="info"><ui-button slot="target" size="md" variant="info">Info</ui-button></ui-tooltip>
+          <ui-tooltip content="Success theme" variant="success"><ui-button slot="target" size="md" variant="success">Success</ui-button></ui-tooltip>
+          <ui-tooltip content="Warning theme" variant="warning"><ui-button slot="target" size="md" variant="warning">Warning</ui-button></ui-tooltip>
+          <ui-tooltip content="Error theme" variant="error"><ui-button slot="target" size="md" variant="danger">Error</ui-button></ui-tooltip>
         </div>
 
         <div class="demo-grid-3" style="margin-top: 32px;">
@@ -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>
@@ -137,16 +137,16 @@ export const initTooltipDemo = () => {
 
         <div class="demo-grid-4" style="margin-top: 32px;">
            <ui-tooltip content="Linear timing (300ms)" transition-timing="linear" transition-duration="300" variant="error">
-             <ui-button slot="target" variant="danger" size="md"near Timing</ui-button>
+             <ui-button slot="target" variant="danger" size="md">Linear Timing</ui-button>
            </ui-tooltip>
            <ui-tooltip content="Ease-in timing" transition-timing="ease-in" variant="success">
-             <ui-button slot="target" variant="success" size="md"se-In</ui-button>
+             <ui-button slot="target" variant="success" size="md">Ease-In</ui-button>
            </ui-tooltip>
            <ui-tooltip content="Scale animation (500ms)" animation="scale" transition-duration="500" variant="primary">
-             <ui-button slot="target" variant="primary" size="md"ow Scale</ui-button>
+             <ui-button slot="target" variant="primary" size="md">Scale Timing</ui-button>
            </ui-tooltip>
            <ui-tooltip content="Bounce effect" animation="bounce" variant="warning">
-             <ui-button slot="target" variant="warning" size="md"unce Effect</ui-button>
+             <ui-button slot="target" variant="warning" size="md">Bounce Effect</ui-button>
            </ui-tooltip>
         </div>
       </section>
@@ -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"ow 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"de 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,38 +198,38 @@ 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">
-                 <ui-button slot="target" size="md"p Left Corner</ui-button>
+                 <ui-button slot="target" size="md">Top Left Corner</ui-button>
               </ui-tooltip>
            </div>
            
            <div style="position: absolute; top: 20px; right: 20px;">
               <ui-tooltip content="Automatically flips to bottom if no space" position="top-right" auto-flip="true" variant="info">
-                 <ui-button slot="target" size="md"riant="info">Top Right Corner</ui-button>
+                 <ui-button slot="target" size="md" variant="info">Top Right Corner</ui-button>
               </ui-tooltip>
            </div>
            
            <div style="position: absolute; bottom: 20px; left: 20px;">
               <ui-tooltip content="Shifts and flips as needed dynamically" position="bottom-left" auto-shift="true" auto-flip="true" variant="success">
-                 <ui-button slot="target" size="md"riant="success">Bottom Left</ui-button>
+                 <ui-button slot="target" size="md" variant="success">Bottom Left</ui-button>
               </ui-tooltip>
            </div>
            
            <div style="position: absolute; bottom: 20px; right: 20px;">
               <ui-tooltip content="Smart positioning with viewport bounds" position="bottom-right" auto-shift="true" auto-flip="true" variant="warning">
-                 <ui-button slot="target" size="md"riant="warning">Bottom Right</ui-button>
+                 <ui-button slot="target" size="md" variant="warning">Bottom Right</ui-button>
               </ui-tooltip>
            </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>