atomicuilibrary 0.0.1 → 0.1.3

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

@@ -24,7 +24,7 @@ export function initButtonDemo() {
       </div>
     </div>
 
-    <div id="buttonDemoContainer" style="margin-top: 32px; padding: 32px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);"></div>
+    <div id="buttonDemoContainer" style="margin-top: 32px; padding: 24px; background: var(--bg-primary); border-radius: 24px; border: 1px solid var(--border-default); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);"></div>
   `;
 
   const updateActiveBtn = id => {
@@ -51,15 +51,26 @@ export function initButtonDemo() {
     btnToggleGroups: () => showButtonToggleGroups(),
   };
 
+  const wireDemoButton = (btn, id, func) => {
+    let lastHandledAt = 0;
+    const runDemo = () => {
+      const now = Date.now();
+      if (now - lastHandledAt < 50) return;
+      lastHandledAt = now;
+      updateActiveBtn(id);
+      func();
+    };
+
+    btn.onclick = null;
+    btn.addEventListener('click', runDemo);
+    btn.addEventListener('buttonClick', runDemo);
+  };
+
   setTimeout(() => {
     Object.entries(demoMap).forEach(([id, func]) => {
       const btn = document.getElementById(id);
       if (btn) {
-        btn.onclick = null; // Remove any inline onclick
-        btn.addEventListener('click', () => {
-          updateActiveBtn(id);
-          func();
-        });
+        wireDemoButton(btn, id, func);
       }
     });
 
@@ -77,29 +88,29 @@ function showFormButtons() {
   container.innerHTML = `
       <div class="demo-block">
         <h3>Form Actions & Native Integration</h3>
-        <p style="color: #6b7280; margin-bottom: 24px;">Buttons can act as native form submitters, resets, or triggers for custom validation logic. They also support image and avatar modes for profile interactions.</p>
+        <p style="color: var(--text-secondary); margin-bottom: 24px;">Buttons can act as native form submitters, resets, or triggers for custom validation logic. They also support image and avatar modes for profile interactions.</p>
         
-        <div style="background: white; padding: 32px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.05); max-width: 500px; margin: 0 auto;">
+        <div style="background: var(--bg-secondary); padding: 32px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid var(--border-default); max-width: 500px; margin: 0 auto;">
           <form id="demoForm" style="display: flex; flex-direction: column; gap: 20px;">
             <div style="display: flex; flex-direction: column; gap: 8px;">
-               <label style="font-size: 13px; font-weight: 600; color: #475569;">Profile Picture</label>
+               <label style="font-size: 13px; font-weight: 600; color: var(--text-primary);">Profile Picture</label>
                <div style="display: flex; align-items: center; gap: 16px;">
-                  <ui-button type="avatar" avatar-src="https://i.pravatar.cc/150?u=antigravity" avatar-alt="User" size="xl" status="online"></ui-button>
+                  <ui-button type="avatar" avatar-src="/build/assets/images/logo.png" avatar-alt="User" size="xl" status="online"></ui-button>
                   <ui-button variant="soft" size="md" icon="camera" label="Change Photo"></ui-button>
                </div>
             </div>
 
             <div style="display: flex; flex-direction: column; gap: 8px;">
-              <label style="font-size: 13px; font-weight: 600; color: #475569;">Username</label>
+              <label style="font-size: 13px; font-weight: 600; color: var(--text-primary);">Username</label>
               <ui-input placeholder="Enter username" value="antigravity_user" variant="filled"></ui-input>
             </div>
 
             <div style="display: flex; flex-direction: column; gap: 8px;">
-              <label style="font-size: 13px; font-weight: 600; color: #475569;">Bio</label>
+              <label style="font-size: 13px; font-weight: 600; color: var(--text-primary);">Bio</label>
               <ui-input type="textarea" placeholder="Tell us about yourself..." variant="filled"></ui-input>
             </div>
 
-            <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
+            <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--border-default);">
               <ui-button type="reset" variant="ghost" label="Reset"></ui-button>
               <ui-button type="submit" variant="primary" label="Save Changes" icon="check" icon-library="lucide"></ui-button>
             </div>
@@ -110,18 +121,18 @@ function showFormButtons() {
       <div class="demo-block" style="margin-top: 40px;">
         <h3>Specialized Form Buttons</h3>
         <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;">
-           <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px dashed rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 10px; align-items: center;">
-              <span style="font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Image Button</span>
-              <ui-button type="image" img-src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=200&h=100&fit=crop" img-alt="Banner" style="width: 200px; height: 100px;"></ui-button>
+           <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px dashed var(--border-default); display: flex; flex-direction: column; gap: 10px; align-items: center;">
+              <span style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Image Button</span>
+              <ui-button type="image" img-src="/build/assets/images/nature_forest_1.png" img-alt="Banner" style="width: 200px; height: 100px;"></ui-button>
            </div>
            
-           <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px dashed rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 10px; align-items: center;">
-              <span style="font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">File Upload Trigger</span>
+           <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px dashed var(--border-default); display: flex; flex-direction: column; gap: 10px; align-items: center;">
+              <span style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">File Upload Trigger</span>
               <ui-button variant="outline" icon="upload-cloud" label="Upload Document" dashed></ui-button>
            </div>
 
-           <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px dashed rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 10px; align-items: center;">
-              <span style="font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Destructive Action</span>
+           <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px dashed var(--border-default); display: flex; flex-direction: column; gap: 10px; align-items: center;">
+              <span style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Destructive Action</span>
               <ui-button variant="soft" color="danger" icon="trash-2" label="Delete Account"></ui-button>
            </div>
         </div>
@@ -174,7 +185,9 @@ function showButtonSizes() {
               
               <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" label="With Icon"></ui-button>
               
-              <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" label="With Badge" badge="8"></ui-button>
+              <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" label="With Badge" badge="8" badge-color="danger"></ui-button>
+
+              <ui-button size="${s.id}" variant="${s.variant}" label="With Counter" counter="5" counter-color="info"></ui-button>
               
               <ui-button size="${s.id}" variant="${s.variant}" icon="${s.icon}" icon-library="lucide" icon-only shape="circle"></ui-button>
 
@@ -223,32 +236,32 @@ function showButtonIcons() {
 
       <div class="demo-block" style="margin-top: 24px;">
         <h3>Icon Only Shape Masterclass</h3>
-        <p style="color: #6b7280; margin-bottom: 12px;">The <code>icon-only</code> prop now defaults to a <strong>Rounded Square</strong> (8px) for consistent branding. Use the <code>shape="circle"</code> or <code>circle</code> prop to achieve the classic circular look.</p>
-        <div style="display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: #f8fafc; padding: 20px; border-radius: 12px;">
+        <p style="color: var(--text-secondary); margin-bottom: 12px;">The <code>icon-only</code> prop now defaults to a <strong>Rounded Square</strong> (8px) for consistent branding. Use the <code>shape="circle"</code> or <code>circle</code> prop to achieve the classic circular look.</p>
+        <div style="display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: var(--bg-secondary); border: 1px solid var(--border-default); padding: 20px; border-radius: 12px;">
           
           <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
             <ui-button icon="settings" icon-library="lucide" icon-only variant="primary" size="lg" shape="circle"></ui-button>
-            <span style="font-size: 11px; font-weight: 700; color: #64748b;">SHAPE="CIRCLE"</span>
+            <span style="font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">SHAPE="CIRCLE"</span>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
             <ui-button icon="bell" icon-library="lucide" icon-only variant="success" size="lg"></ui-button>
-            <span style="font-size: 11px; font-weight: 700; color: #64748b;">DEFAULT (ROUNDED)</span>
+            <span style="font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">DEFAULT (ROUNDED)</span>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
             <ui-button icon="share-2" icon-library="lucide" icon-only variant="warning" size="lg" shape="square"></ui-button>
-            <span style="font-size: 11px; font-weight: 700; color: #64748b;">SQUARE (SHARP)</span>
+            <span style="font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">SQUARE (SHARP)</span>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
             <ui-button icon="mail" icon-library="lucide" icon-only variant="danger" size="lg" pill></ui-button>
-            <span style="font-size: 11px; font-weight: 700; color: #64748b;">PILL EXTENDED</span>
+            <span style="font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">PILL EXTENDED</span>
           </div>
 
           <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
             <ui-button icon="plus" icon-library="lucide" variant="primary" shape="circle" size="lg" elevation="3" glow></ui-button>
-            <span style="font-size: 11px; font-weight: 700; color: #64748b;">FAB MODE</span>
+            <span style="font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">FAB MODE</span>
           </div>
 
         </div>
@@ -261,7 +274,7 @@ function showButtonIcons() {
         <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;">
           
           <!-- FontAwesome & Bootstrap -->
-          <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05);">
+          <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-default);">
             <h4 style="margin: 0 0 12px 0;">Classic Font Libraries</h4>
             <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;">
               <ui-button label="FontAwesome" icon="fa-solid fa-flag" icon-library="fontawesome" variant="primary" size="md"></ui-button>
@@ -274,7 +287,7 @@ function showButtonIcons() {
           </div>
 
           <!-- Lucide & Ionicons -->
-          <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05);">
+          <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-default);">
             <h4 style="margin: 0 0 12px 0;">Modern SVG Libraries</h4>
             <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;">
               <ui-button label="Lucide" icon="zap" icon-library="lucide" variant="info" size="md"></ui-button>
@@ -287,7 +300,7 @@ function showButtonIcons() {
           </div>
 
           <!-- Iconoir & LineAwesome -->
-          <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05);">
+          <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-default);">
             <h4 style="margin: 0 0 12px 0;">Designer Libraries</h4>
             <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;">
               <ui-button label="Iconoir" icon="iconoir-bright-star" icon-library="iconoir" variant="success" size="md"></ui-button>
@@ -300,7 +313,7 @@ function showButtonIcons() {
           </div>
 
           <!-- Custom: URL, SVG, Emoji -->
-          <div style="background: rgba(0,0,0,0.02); padding: 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05);">
+          <div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-default);">
             <h4 style="margin: 0 0 12px 0;">Custom Assets</h4>
             <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;">
               <ui-button label="URL Image" icon="https://raw.githubusercontent.com/lucide-icons/lucide/main/icons/heart.svg" variant="outline" size="md"></ui-button>
@@ -317,13 +330,13 @@ function showButtonIcons() {
 
       <div class="demo-block" style="margin-top: 24px;">
          <h3>Badge Masterclass</h3>
-         <p style="color: #6b7280; margin-bottom: 24px;">Badges now correctly overflow the button corners. Demonstrate different shapes, positions, and color variants.</p>
+         <p style="color: var(--text-secondary); margin-bottom: 24px;">Badges now correctly overflow the button corners. Demonstrate different shapes, positions, and color variants.</p>
          
-         <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; background: #f8fafc; padding: 24px; border-radius: 16px;">
+         <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; background: var(--bg-secondary); border: 1px solid var(--border-default); padding: 24px; border-radius: 16px;">
             
             <!-- Shapes & Badges -->
             <div style="display: flex; flex-direction: column; gap: 12px;">
-               <h4 style="margin: 0; font-size: 13px; color: #64748b;">SHAPES & CORNERS</h4>
+               <h4 style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b);">SHAPES & CORNERS</h4>
                <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                   <ui-button icon="bell" icon-library="lucide" icon-only badge="9+" variant="primary"></ui-button>
                   <ui-button icon="mail" icon-library="lucide" icon-only badge="3" variant="success" shape="circle"></ui-button>
@@ -333,7 +346,7 @@ function showButtonIcons() {
 
             <!-- Variants & Colors -->
             <div style="display: flex; flex-direction: column; gap: 12px;">
-               <h4 style="margin: 0; font-size: 13px; color: #64748b;">BADGE VARIANTS</h4>
+               <h4 style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b);">BADGE VARIANTS</h4>
                <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                   <ui-button label="Alert" badge="!" variant="outline" badge-color="warning"></ui-button>
                   <ui-button label="Done" badge="✓" variant="outline" badge-color="success"></ui-button>
@@ -343,7 +356,7 @@ function showButtonIcons() {
 
             <!-- Positions -->
             <div style="display: flex; flex-direction: column; gap: 12px;">
-               <h4 style="margin: 0; font-size: 13px; color: #64748b;">POSITIONS</h4>
+               <h4 style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b);">POSITIONS</h4>
                <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                   <ui-button icon="bell" icon-library="lucide" icon-only badge="TR" badge-position="top-right" variant="secondary"></ui-button>
                   <ui-button icon="bell" icon-library="lucide" icon-only badge="TL" badge-position="top-left" variant="secondary"></ui-button>
@@ -352,13 +365,34 @@ function showButtonIcons() {
                </div>
             </div>
 
+            <!-- Inline Counters (Inside Button on Right Side) -->
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+               <h4 style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b);">INLINE COUNTERS</h4>
+               <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+                  <ui-button label="Inbox" counter="12" variant="outline" counter-color="primary"></ui-button>
+                  <ui-button label="Alerts" counter="!" variant="outline" counter-color="danger"></ui-button>
+                  <ui-button label="Done" counter="✓" variant="outline" counter-color="success"></ui-button>
+                  <ui-button label="Custom" counter="Premium" variant="outline" counter-custom-color="#8b5cf6" counter-custom-text-color="#ffffff"></ui-button>
+               </div>
+            </div>
+
+            <!-- Both Overlay Badge and Inline Counter together with different colors -->
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+               <h4 style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b);">BOTH BADGE (OVERLAY) & COUNTER (INLINE)</h4>
+               <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+                  <ui-button label="Inbox" badge="9+" badge-color="danger" counter="12" variant="outline" counter-color="primary"></ui-button>
+                  <ui-button label="Notifications" badge="New" badge-color="success" counter="5" variant="outline" counter-color="info"></ui-button>
+                  <ui-button label="Custom Styles" badge="PRO" badge-custom-color="#8b5cf6" badge-custom-text-color="#ffffff" counter="Hot" variant="outline" counter-color="warning"></ui-button>
+               </div>
+            </div>
+
          </div>
       </div>
 
       <div class="demo-block" style="margin-top: 24px;">
          <h3>Interactive Counter</h3>
-         <p style="color: #6b7280; margin-bottom: 24px;">Click the button below to see the counter increment dynamically. This demonstrates real-time badge updates.</p>
-         <div style="display: flex; gap: 20px; align-items: center; background: #f8fafc; padding: 24px; border-radius: 16px;">
+         <p style="color: var(--text-secondary); margin-bottom: 24px;">Click the button below to see the counter increment dynamically. This demonstrates real-time badge updates.</p>
+         <div style="display: flex; gap: 20px; align-items: center; background: var(--bg-secondary); border: 1px solid var(--border-default); padding: 24px; border-radius: 16px;">
             <ui-button id="counterBtn" icon="shopping-cart" icon-library="lucide" label="Add to Cart" badge="0" variant="primary"></ui-button>
             <ui-button id="resetCounterBtn" label="Reset Counter" variant="ghost" size="sm" color="danger"></ui-button>
          </div>
@@ -395,7 +429,7 @@ function showPremiumButtons() {
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
           
           <!-- Soft Variants -->
-          <div class="demo-card-inner" style="padding: 20px; background: #fff; border: 1px solid #eef2f6; border-radius: 12px;">
+          <div class="demo-card-inner" style="padding: 20px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius: 12px;">
             <h4 style="margin: 0 0 16px 0;">☁️ Soft Variants</h4>
             <div style="display: flex; gap: 10px; flex-wrap: wrap;">
               <ui-button label="Primary" variant="outline" color="primary"></ui-button>
@@ -406,7 +440,7 @@ function showPremiumButtons() {
           </div>
 
           <!-- Gradients -->
-          <div class="demo-card-inner" style="padding: 20px; background: #fff; border: 1px solid #eef2f6; border-radius: 12px;">
+          <div class="demo-card-inner" style="padding: 20px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius: 12px;">
             <h4 style="margin: 0 0 16px 0;">🌈 Gradient Variants</h4>
             <div style="display: flex; gap: 10px; flex-wrap: wrap;">
               <ui-button label="Brand" variant="gradient"></ui-button>
@@ -421,7 +455,7 @@ function showPremiumButtons() {
           </div>
 
           <!-- Shortcuts & Copy -->
-          <div class="demo-card-inner" style="padding: 20px; background: #fff; border: 1px solid #eef2f6; border-radius: 12px;">
+          <div class="demo-card-inner" style="padding: 20px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius: 12px;">
             <h4 style="margin: 0 0 16px 0;">📋 Utilities</h4>
             <div style="display: grid; gap: 12px;">
               <ui-button label="Copy API ID" icon="copy" icon-library="lucide" copy-value="ID_45920-X" variant="outline" full-width></ui-button>
@@ -431,7 +465,7 @@ function showPremiumButtons() {
           </div>
 
           <!-- States -->
-          <div class="demo-card-inner" style="padding: 20px; background: #fff; border: 1px solid #eef2f6; border-radius: 12px;">
+          <div class="demo-card-inner" style="padding: 20px; background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 12px;">
             <h4 style="margin: 0 0 16px 0;">🦾 Advanced States</h4>
             <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
               <ui-button label="Skeleton" skeleton variant="primary" width="120px"></ui-button>
@@ -442,7 +476,7 @@ function showPremiumButtons() {
 
         </div>
 
-        <div class="demo-block" style="margin-top: 32px; background: #f8fafc; padding: 24px; border-radius: 16px;">
+        <div class="demo-block" style="margin-top: 32px; background: var(--bg-secondary); border: 1px solid var(--border-default); padding: 24px; border-radius: 16px;">
           <h3>📱 Responsive Labels</h3>
           <p style="margin-bottom: 20px; opacity: 0.8;">Resize your browser below 640px. The label "Edit Profile" will automatically hide and the button will collapse to its icon.</p>
           <ui-button label="Edit Profile" icon="user" icon-library="lucide" hide-label-on-mobile variant="primary" size="lg" shape="pill"></ui-button>
@@ -462,8 +496,8 @@ function showGodModeButtons() {
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px;">
           
           <!-- Safety & Critical Flows -->
-          <div class="demo-card-inner" style="padding: 24px; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
-            <h4 style="margin: 0 0 20px 0; color: #ef4444;">🛡️ High-Stakes Safety</h4>
+          <div class="demo-card-inner" style="padding: 24px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
+            <h4 style="margin: 0 0 20px 0; color:var(--accent-red,#ef4444);">🛡️ High-Stakes Safety</h4>
             <div style="display: flex; flex-direction: column; gap: 16px;">
               <ui-button label="Purge Memory" variant="danger" hold-time="2000" shake audio="error" haptic full-width></ui-button>
               <ui-button label="Delete Cloud" variant="outline" color="danger" confirm-bubble confirm-label="Permanent Delete?" audio="error" full-width></ui-button>
@@ -472,8 +506,8 @@ function showGodModeButtons() {
           </div>
 
           <!-- Hyper-Premium Aesthetics -->
-          <div class="demo-card-inner" style="padding: 24px; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
-            <h4 style="margin: 0 0 20px 0; color: #8b5cf6;">🕹️ Hyper-Aesthetics</h4>
+          <div class="demo-card-inner" style="padding: 24px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
+            <h4 style="margin: 0 0 20px 0; color:var(--accent-purple,#8b5cf6);">🕹️ Hyper-Aesthetics</h4>
             <div style="display: flex; flex-direction: column; gap: 16px;">
               <ui-button label="VIP Rainbow Glow" variant="dark" glow rainbow glossy audio="click" full-width></ui-button>
               <ui-button label="Liquid Wave Progress" variant="primary" progress="45" liquid audio="click" full-width></ui-button>
@@ -482,8 +516,8 @@ function showGodModeButtons() {
           </div>
 
           <!-- Smart Branding & Toggling -->
-          <div class="demo-card-inner" style="padding: 24px; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
-            <h4 style="margin: 0 0 20px 0; color: #f59e0b;">🏗️ Orchestrated Motion</h4>
+          <div class="demo-card-inner" style="padding: 24px; background: var(--bg-secondary); border:1px solid var(--border-default); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
+            <h4 style="margin: 0 0 20px 0; color:var(--accent-yellow,#f59e0b);">🏗️ Orchestrated Motion</h4>
             <div style="display: flex; flex-direction: column; gap: 16px;">
               <div style="display: flex; gap: 10px;">
                  <ui-button label="1" variant="outline" reveal="slide-up" reveal-delay="0"></ui-button>
@@ -515,8 +549,6 @@ function showGodModeButtons() {
                 glow 
                 haptic 
                 celebrate 
-                shatter spin-on-click
-                audio-src="https://www.soundjay.com/buttons/sounds/button-10.mp3"
               ></ui-button>
            </div>
         </div>
@@ -525,15 +557,14 @@ function showGodModeButtons() {
 }
 
 function showInteractiveButton() {
-  const container = document.getElementById('buttonDemoContainer');
+  const container = document.querySelector('.section-active #buttonDemoContainer') || document.getElementById('buttonDemoContainer');
   if (!container) return;
-
   container.innerHTML = `
-    <div class="playground-wrapper" style="display: flex; height: 800px; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05);">
+    <div class="playground-wrapper" style="display: flex; height: 800px; background: var(--bg-secondary); border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); border: 1px solid var(--border-default);">
       <!-- Left Sidebar: Component Workbench -->
-      <div class="playground-sidebar" style="width: 400px; flex-shrink: 0; border-right: 1px solid rgba(0,0,0,0.05); background: #fff; display: flex; flex-direction: column;">
-        <div style="padding: 28px; border-bottom: 1px solid rgba(0,0,0,0.05); flex-shrink: 0;">
-          <h3 style="margin: 0; font-size: 1.2rem; background: linear-gradient(to right, #1e293b, #64748b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.02em;">
+      <div class="playground-sidebar" style="width: 400px; flex-shrink: 0; border-right: 1px solid var(--border-default); background: var(--bg-secondary); display: flex; flex-direction: column;">
+        <div style="padding: 28px; border-bottom: 1px solid var(--border-default); flex-shrink: 0;">
+          <h3 style="margin: 0; font-size: 1.2rem; background: linear-gradient(to right, var(--text-primary), var(--text-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.02em;">
             <ui-icon name="tool" library="lucide" color="primary"></ui-icon>
             Component Workbench
           </h3>
@@ -543,8 +574,8 @@ function showInteractiveButton() {
           <!-- Section: Aesthetics -->
           <div class="setting-card">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-              <div style="width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center;"><ui-icon name="palette" size="16px" color="primary"></ui-icon></div>
-              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #475569; font-weight: 700;">Aesthetics & Branding</h4>
+              <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--bg-primary); display: flex; align-items: center; justify-content: center;"><ui-icon name="palette" size="16px" color="primary"></ui-icon></div>
+              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 700;">Aesthetics & Branding</h4>
             </div>
             <div style="display: flex; flex-direction: column; gap: 16px;">
               <ui-input id="btnLabel" label="Visual Label" value="Click Me!" size="md" variant="outlined"></ui-input>
@@ -556,7 +587,7 @@ function showInteractiveButton() {
                 {"label": "Glass", "value": "glass"}, {"label": "Raised", "value": "raised"},
                 {"label": "Dark", "value": "dark"}, {"label": "Gradient (Brand)", "value": "gradient"}
               ]' size="md" variant="outlined"></ui-dropdown>
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+      
                 <ui-dropdown id="btnSize" label="Scale" value="md" options='[
                   {"label": "XS", "value": "xs"}, {"label": "Small", "value": "sm"},
                   {"label": "Medium", "value": "md"}, {"label": "Large", "value": "lg"},
@@ -567,15 +598,15 @@ function showInteractiveButton() {
                   {"label": "Pill", "value": "pill"}, {"label": "Chip", "value": "chip"},
                   {"label": "Circle", "value": "circle"}
                 ]' size="md" variant="outlined"></ui-dropdown>
-              </div>
+            
             </div>
           </div>
 
           <!-- Section: Icons -->
           <div class="setting-card">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-              <div style="width: 32px; height: 32px; border-radius: 8px; background: #fdf2f8; display: flex; align-items: center; justify-content: center;"><ui-icon name="image" size="16px" color="danger"></ui-icon></div>
-              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #be185d; font-weight: 700;">Icons & Adornments</h4>
+              <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--bg-primary); display: flex; align-items: center; justify-content: center;"><ui-icon name="image" size="16px" color="danger"></ui-icon></div>
+              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 700;">Icons & Adornments</h4>
             </div>
             <div style="display: flex; flex-direction: column; gap: 16px;">
               <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
@@ -593,14 +624,40 @@ function showInteractiveButton() {
                 ]' size="md" variant="outlined"></ui-dropdown>
                 <ui-input id="btnBadge" label="Overlay Badge" value="" size="md" variant="outlined" placeholder="e.g. 9+"></ui-input>
               </div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <ui-dropdown id="btnBadgeColor" label="Badge Color" value="danger" options='[
+                  {"label": "Primary", "value": "primary"},
+                  {"label": "Secondary", "value": "secondary"},
+                  {"label": "Success", "value": "success"},
+                  {"label": "Danger", "value": "danger"},
+                  {"label": "Warning", "value": "warning"},
+                  {"label": "Info", "value": "info"}
+                ]' size="md" variant="outlined"></ui-dropdown>
+                <ui-input id="btnCounter" label="Inline Counter" value="" size="md" variant="outlined" placeholder="e.g. 5"></ui-input>
+              </div>
+              <div style="display: grid; grid-template-columns: 1fr; gap: 12px;">
+                <ui-dropdown id="btnCounterColor" label="Counter Color" value="" options='[
+                  {"label": "Default", "value": ""},
+                  {"label": "Primary", "value": "primary"},
+                  {"label": "Secondary", "value": "secondary"},
+                  {"label": "Success", "value": "success"},
+                  {"label": "Danger", "value": "danger"},
+                  {"label": "Warning", "value": "warning"},
+                  {"label": "Info", "value": "info"}
+                ]' size="md" variant="outlined"></ui-dropdown>
+              </div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <ui-input id="btnCounterCustomColor" label="Custom Bg" value="" size="md" variant="outlined" placeholder="e.g. #8b5cf6"></ui-input>
+                <ui-input id="btnCounterCustomTextColor" label="Custom Text" value="" size="md" variant="outlined" placeholder="e.g. #ffffff"></ui-input>
+              </div>
             </div>
           </div>
 
           <!-- Section: Advanced Behaviors -->
           <div class="setting-card">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-              <div style="width: 32px; height: 32px; border-radius: 8px; background: #f0f9ff; display: flex; align-items: center; justify-content: center;"><ui-icon name="zap" size="16px" color="info"></ui-icon></div>
-              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #0369a1; font-weight: 700;">Operational States</h4>
+              <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--bg-primary); display: flex; align-items: center; justify-content: center;"><ui-icon name="zap" size="16px" color="info"></ui-icon></div>
+              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 700;">Operational States</h4>
             </div>
             <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
               <ui-checkbox id="btnLoading" label="Loading Mode" size="md"></ui-checkbox>
@@ -613,10 +670,10 @@ function showInteractiveButton() {
           </div>
 
           <!-- Section: God Mode -->
-          <div class="setting-card" style="border-left: 4px solid #8b5cf6;">
+          <div class="setting-card" style="border-left: 4px solid var(--color-primary, #8b5cf6);">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
-              <div style="width: 32px; height: 32px; border-radius: 8px; background: #f5f3ff; display: flex; align-items: center; justify-content: center;"><ui-icon name="sparkles" size="16px" color="primary"></ui-icon></div>
-              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #7c3aed; font-weight: 700;">Zenith Features</h4>
+              <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--bg-primary); display: flex; align-items: center; justify-content: center;"><ui-icon name="sparkles" size="16px" color="primary"></ui-icon></div>
+              <h4 style="margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 700;">Zenith Features</h4>
             </div>
             <div style="display: flex; flex-direction: column; gap: 16px;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
@@ -634,10 +691,10 @@ function showInteractiveButton() {
       </div>
 
       <!-- Main Preview Area -->
-      <div class="playground-main" style="flex: 1; display: flex; flex-direction: column; background: #f8fafc;">
-        <div style="padding: 20px 32px; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; background: #fff;">
+      <div class="playground-main" style="flex: 1; display: flex; flex-direction: column; background: var(--bg-primary);">
+        <div style="padding: 20px 32px; border-bottom: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; background: var(--bg-secondary);">
           <div style="display: flex; gap: 12px; align-items: center;">
-            <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; font-weight: 700;">Synthesis Visualizer</span>
+            <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700;">Synthesis Visualizer</span>
           </div>
         </div>
 
@@ -646,7 +703,7 @@ function showInteractiveButton() {
         </div>
 
         <!-- Code Artifact -->
-        <div style="padding: 32px; background: #fff; border-top: 1px solid rgba(0,0,0,0.05);">
+        <div style="padding: 32px; background: var(--bg-secondary); border-top: 1px solid var(--border-default);">
            <ui-code-preview id="buttonCodePreview" label="Snippet" language="html"></ui-code-preview>
         </div>
       </div>
@@ -687,6 +744,11 @@ function updateInteractiveButton() {
   const iconLib = document.getElementById('btnIconLibrary')?.value || 'lucide';
   const iconPos = document.getElementById('btnIconPosition')?.value || 'left';
   const badge = document.getElementById('btnBadge')?.value || '';
+  const badgeColor = document.getElementById('btnBadgeColor')?.value || '';
+  const counter = document.getElementById('btnCounter')?.value || '';
+  const counterColor = document.getElementById('btnCounterColor')?.value || '';
+  const counterCustomColor = document.getElementById('btnCounterCustomColor')?.value || '';
+  const counterCustomTextColor = document.getElementById('btnCounterCustomTextColor')?.value || '';
 
   const loading = document.getElementById('btnLoading')?.checked;
   const disabled = document.getElementById('btnDisabled')?.checked;
@@ -705,6 +767,11 @@ function updateInteractiveButton() {
   if (iconLib !== 'lucide') props += ` icon-library="${iconLib}"`;
   if (iconPos !== 'left') props += ` icon-position="${iconPos}"`;
   if (badge) props += ` badge="${badge}"`;
+  if (badgeColor && badgeColor !== 'danger') props += ` badge-color="${badgeColor}"`;
+  if (counter) props += ` counter="${counter}"`;
+  if (counterColor) props += ` counter-color="${counterColor}"`;
+  if (counterCustomColor) props += ` counter-custom-color="${counterCustomColor}"`;
+  if (counterCustomTextColor) props += ` counter-custom-text-color="${counterCustomTextColor}"`;
   if (loading) props += ' loading';
   if (disabled) props += ' disabled';
   if (iconOnly) props += ' icon-only';
@@ -866,6 +933,8 @@ function showBasicButtons() {
     `;
 }
 
+globalThis.showBasicButtons = showBasicButtons;
+
 function showImageButtons() {
   const container = document.querySelector('.section-active #buttonDemoContainer') || document.getElementById('buttonDemoContainer');
   if (!container) return;
@@ -900,29 +969,29 @@ function showAvatarButtons() {
           <div>
             <h4 style="margin-bottom: 12px; font-size: 14px; opacity: 0.8;">User Profile Button</h4>
             <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
-              <ui-button label="Praveen" avatar-src="https://i.pravatar.cc/100?u=praveen" avatar-status="online" variant="outline" shape="pill"></ui-button>
-              <ui-button label="Sarah Chen" avatar-src="https://i.pravatar.cc/100?u=sarah" avatar-status="busy" variant="outline" shape="rounded"></ui-button>
-              <ui-button label="System Admin" avatar-src="https://i.pravatar.cc/100?u=admin" avatar-status="offline" variant="dark" shape="pill"></ui-button>
+              <ui-button label="Praveen" avatar-src="/build/assets/images/logo.png" avatar-status="online" variant="outline" shape="pill"></ui-button>
+              <ui-button label="Sarah Chen" avatar-src="/build/assets/images/logo.png" avatar-status="busy" variant="outline" shape="rounded"></ui-button>
+              <ui-button label="System Admin" avatar-src="/build/assets/images/logo.png" avatar-status="offline" variant="dark" shape="pill"></ui-button>
             </div>
           </div>
 
           <div>
             <h4 style="margin-bottom: 12px; font-size: 14px; opacity: 0.8;">Various Sizes (Profile Card Concept)</h4>
             <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;">
-              <ui-button size="md" label="Small" avatar-src="https://i.pravatar.cc/100?u=sm" avatar-status="away" variant="outline"></ui-button>
-              <ui-button size="md" label="md" avatar-src="https://i.pravatar.cc/100?u=md" avatar-status="online" variant="outline"></ui-button>
-              <ui-button size="lg" label="Large" avatar-src="https://i.pravatar.cc/100?u=lg" avatar-status="busy" variant="outline"></ui-button>
-              <ui-button size="xl" label="X-Large" avatar-src="https://i.pravatar.cc/100?u=xl" avatar-status="online" variant="outline"></ui-button>
+              <ui-button size="md" label="Small" avatar-src="/build/assets/images/logo.png" avatar-status="away" variant="outline"></ui-button>
+              <ui-button size="md" label="md" avatar-src="/build/assets/images/logo.png" avatar-status="online" variant="outline"></ui-button>
+              <ui-button size="lg" label="Large" avatar-src="/build/assets/images/logo.png" avatar-status="busy" variant="outline"></ui-button>
+              <ui-button size="xl" label="X-Large" avatar-src="/build/assets/images/logo.png" avatar-status="online" variant="outline"></ui-button>
             </div>
           </div>
 
           <div>
             <h4 style="margin-bottom: 12px; font-size: 14px; opacity: 0.8;">Avatar Only (Quick Select)</h4>
             <div style="display: flex; gap: 16px; flex-wrap: wrap;">
-              <ui-button avatar-src="https://i.pravatar.cc/100?u=1" avatar-status="online" variant="ghost" title="User 1"></ui-button>
-              <ui-button avatar-src="https://i.pravatar.cc/100?u=2" avatar-status="away" variant="ghost" title="User 2"></ui-button>
-              <ui-button avatar-src="https://i.pravatar.cc/100?u=3" avatar-status="busy" variant="ghost" title="User 3"></ui-button>
-              <ui-button avatar-src="https://i.pravatar.cc/100?u=4" avatar-status="online" variant="ghost" title="User 4"></ui-button>
+              <ui-button avatar-src="/build/assets/images/logo.png" avatar-status="online" variant="ghost" title="User 1"></ui-button>
+              <ui-button avatar-src="/build/assets/images/logo.png" avatar-status="away" variant="ghost" title="User 2"></ui-button>
+              <ui-button avatar-src="/build/assets/images/logo.png" avatar-status="busy" variant="ghost" title="User 3"></ui-button>
+              <ui-button avatar-src="/build/assets/images/logo.png" avatar-status="online" variant="ghost" title="User 4"></ui-button>
               <ui-button variant="outline" shape="circle" icon="plus" icon-library="lucide" title="Add User"></ui-button>
             </div>
           </div>
@@ -930,9 +999,9 @@ function showAvatarButtons() {
           <div>
             <h4 style="margin-bottom: 12px; font-size: 14px; opacity: 0.8;">Explicitly Circle Shorthand</h4>
             <div style="display: flex; gap: 16px; flex-wrap: wrap;">
-               <ui-button avatar-src="https://i.pravatar.cc/100?u=a1" circle variant="primary"></ui-button>
-               <ui-button avatar-src="https://i.pravatar.cc/100?u=a2" avatar-status="online" circle variant="secondary"></ui-button>
-               <ui-button avatar-src="https://i.pravatar.cc/100?u=a3" label="Circle with Label" circle variant="outline"></ui-button>
+               <ui-button avatar-src="/build/assets/images/logo.png" circle variant="primary"></ui-button>
+               <ui-button avatar-src="/build/assets/images/logo.png" avatar-status="online" circle variant="secondary"></ui-button>
+               <ui-button avatar-src="/build/assets/images/logo.png" label="Circle with Label" circle variant="outline"></ui-button>
             </div>
           </div>
         </div>
@@ -985,40 +1054,40 @@ function showRichLayoutButtons() {
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
           
-          <div class="demo-card-inner" style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px;">
-            <h4 style="margin-bottom: 16px; font-size: 14px; color: #64748b;">POSITION: BELOW (DEFAULT)</h4>
+          <div class="demo-card-inner" style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px;">
+            <h4 style="margin-bottom: 16px; font-size: 14px; color:var(--text-secondary,#64748b);">POSITION: BELOW (DEFAULT)</h4>
             <div style="display: flex; flex-direction: column; gap:12px;">
               <ui-button label="Network Status" description="Connected to Enterprise-WiFi" icon="wifi" icon-library="lucide" variant="outline" full-width></ui-button>
               <ui-button label="Save Changes" subtitle="Updating 12 parameters..." icon="save" icon-library="lucide" variant="success" full-width></ui-button>
             </div>
           </div>
 
-          <div class="demo-card-inner" style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px;">
-            <h4 style="margin-bottom: 16px; font-size: 14px; color: #64748b;">POSITION: ABOVE</h4>
+          <div class="demo-card-inner" style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px;">
+            <h4 style="margin-bottom: 16px; font-size: 14px; color:var(--text-secondary,#64748b);">POSITION: ABOVE</h4>
             <div style="display: flex; flex-direction: column; gap:12px;">
               <ui-button description="SYSTEM CRITICAL" label="Shutdown Server" description-position="above" icon="power" icon-library="lucide" variant="danger" full-width></ui-button>
               <ui-button description="BETA FEATURE" label="Explore Labs" description-position="above" variant="outline" color="primary" full-width></ui-button>
             </div>
           </div>
 
-          <div class="demo-card-inner" style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px;">
-            <h4 style="margin-bottom: 16px; font-size: 14px; color: #64748b;">POSITION: LEFT (SIDE-BY-SIDE)</h4>
+          <div class="demo-card-inner" style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px;">
+            <h4 style="margin-bottom: 16px; font-size: 14px; color:var(--text-secondary,#64748b);">POSITION: LEFT (SIDE-BY-SIDE)</h4>
             <div style="display: flex; flex-direction: column; gap:12px;">
               <ui-button description="5.2GB" label="Download Data" description-position="left" icon="download" icon-library="lucide" variant="outline" full-width></ui-button>
               <ui-button description="v2.4.0" label="Deploy Model" description-position="left" icon="zap" icon-library="lucide" variant="outline" color="success" full-width></ui-button>
             </div>
           </div>
 
-          <div class="demo-card-inner" style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px;">
-            <h4 style="margin-bottom: 16px; font-size: 14px; color: #64748b;">POSITION: RIGHT (METADATA)</h4>
+          <div class="demo-card-inner" style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px;">
+            <h4 style="margin-bottom: 16px; font-size: 14px; color:var(--text-secondary,#64748b);">POSITION: RIGHT (METADATA)</h4>
             <div style="display: flex; flex-direction: column; gap:12px;">
               <ui-button description="Locked" label="Admin Panel" description-position="right" icon="lock" icon-library="lucide" variant="outline" color="warning" full-width></ui-button>
               <ui-button description="2 min ago" label="Last Updated" description-position="right" icon="clock" icon-library="lucide" variant="ghost" full-width></ui-button>
             </div>
           </div>
 
-          <div class="demo-card-inner" style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; grid-column: span 2;">
-            <h4 style="margin-bottom: 16px; font-size: 14px; color: #64748b;">PERFECTLY CENTERED (DEFAULT)</h4>
+          <div class="demo-card-inner" style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px; grid-column: span 2;">
+            <h4 style="margin-bottom: 16px; font-size: 14px; color:var(--text-secondary,#64748b);">PERFECTLY CENTERED (DEFAULT)</h4>
             <div style="display: flex; flex-direction: column; gap:12px;">
               <ui-button label="System Maintenance" subtitle="Scheduled for 2:00 AM UTC" icon="settings" variant="glass" full-width></ui-button>
               <ui-button label="Cloud Sync" description="All files are up to date" icon="cloud-check" color="success" shape="pill" full-width></ui-button>
@@ -1035,7 +1104,7 @@ function showRichLayoutButtons() {
            <ui-button 
              label="Praveen Kumar" 
              description="Product Engineer • Seattle" 
-             avatar-src="https://i.pravatar.cc/100?u=p1" 
+             avatar-src="/build/assets/images/logo.png" 
              avatar-status="online" 
              variant="outline" 
              shape="rounded"
@@ -1070,7 +1139,7 @@ function showButtonToggleGroups() {
           
           <!-- Staggered Entrance Reveal -->
           <div>
-            <h4 style="margin-bottom:16px; font-size:14px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Staggered Entrance Reveal</h4>
+            <h4 style="margin-bottom:16px; font-size:14px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Staggered Entrance Reveal</h4>
             <div style="display: flex; gap: 24px; flex-wrap: wrap;">
                <ui-button-toggle-group value="r1" reveal="slide-up" reveal-delay="300" reveal-stagger="100">
                   <ui-button value="r1" label="Development" icon="code" icon-library="lucide"></ui-button>
@@ -1087,7 +1156,7 @@ function showButtonToggleGroups() {
 
           <!-- Gradient Groups -->
           <div>
-            <h4 style="margin-bottom:16px; font-size:14px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">✨ High-Fidelity Gradients</h4>
+            <h4 style="margin-bottom:16px; font-size:14px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">✨ High-Fidelity Gradients</h4>
             <div style="display: flex; flex-direction: column; gap: 24px;">
                <ui-button-toggle-group color='{"from": "#6366f1", "to": "#ec4899"}' value="opt1" shape="rounded">
                   <ui-button value="opt1" label="Launch" icon="rocket" icon-library="lucide"></ui-button>
@@ -1104,17 +1173,17 @@ function showButtonToggleGroups() {
 
           <!-- Avatar Groups -->
           <div>
-            <h4 style="margin-bottom:16px; font-size:14px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Premium Avatar Status Select</h4>
+            <h4 style="margin-bottom:16px; font-size:14px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Premium Avatar Status Select</h4>
             <ui-button-toggle-group value="online" color="info">
-              <ui-button value="online" label="Online" avatar-src="https://i.pravatar.cc/150?u=1" avatar-status="online" icon="user-check" icon-library="lucide"></ui-button>
-              <ui-button value="away" label="Away" avatar-src="https://i.pravatar.cc/150?u=2" avatar-status="away" icon="clock" icon-library="lucide"></ui-button>
-              <ui-button value="busy" label="Do Not Disturb" avatar-src="https://i.pravatar.cc/150?u=3" avatar-status="busy" icon="minus-circle" icon-library="lucide"></ui-button>
+              <ui-button value="online" label="Online" avatar-src="/build/assets/images/logo.png" avatar-status="online" icon="user-check" icon-library="lucide"></ui-button>
+              <ui-button value="away" label="Away" avatar-src="/build/assets/images/logo.png" avatar-status="away" icon="clock" icon-library="lucide"></ui-button>
+              <ui-button value="busy" label="Do Not Disturb" avatar-src="/build/assets/images/logo.png" avatar-status="busy" icon="minus-circle" icon-library="lucide"></ui-button>
             </ui-button-toggle-group>
           </div>
 
           <!-- Multi-Select Description Side -->
           <div>
-            <h4 style="margin-bottom:16px; font-size:14px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Rich Multi-Select (Side Descriptions)</h4>
+            <h4 style="margin-bottom:16px; font-size:14px; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em;">Rich Multi-Select (Side Descriptions)</h4>
             <ui-button-toggle-group multi-select value='["opt1"]' orientation="vertical" color="primary" style="max-width: 450px;">
               <ui-button value="opt1" label="Standard License" description="Personal projects only" description-position="right" variant="outline"></ui-button>
               <ui-button value="opt2" label="Commercial Pro" description="Corporate & Production use" description-position="right" variant="outline"></ui-button>
@@ -1187,7 +1256,7 @@ function showButtonGroupAuto() {
           <div>
             <h4 style="margin-bottom: 12px; font-size: 14px; opacity: 0.8;">Vertical Toggle Group (Consistent Length)</h4>
             <p style="color: #6b7280; margin-bottom: 12px; font-size: 13px;">Buttons in vertical mode now automatically have uniform width regardless of label content.</p>
-            <div style="max-width: 280px; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb;">
+            <div style="max-width: 280px; background: var(--bg-secondary); padding: 20px; border-radius: 12px; border: 1px solid var(--border-default);">
                <ui-button-toggle-group label="Select View Mode" orientation="vertical" required value="grid" color="success">
                  <ui-button-toggle value="list" label="List View" icon="fas fa-list"></ui-button-toggle>
                  <ui-button-toggle value="grid" label="Grid View" icon="fas fa-th-large"></ui-button-toggle>