atomicuilibrary 0.0.1 → 0.1.3

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

@@ -7,29 +7,36 @@ export function initTagDemo() {
     <p>Flexible tags for labels, categories, and status indicators.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 12px; flex-wrap: wrap;">
-      <ui-button label="Variants"  onclick="showTagVariants()" variant="outline"></ui-button>
-      <ui-button label="Interactive"  onclick="showCheckableTags()" variant="outline"></ui-button>
-      <ui-button label="Media & Icons"  onclick="showMediaTags()" variant="outline"></ui-button>
-      <ui-button label="Removable"  onclick="showRemovableTags()" variant="outline"></ui-button>
-      <ui-button label="Badges"  onclick="showTagBadges()" variant="outline"></ui-button>
-      <ui-button label="Premium Features"  onclick="showPremiumTags()" variant="outline"></ui-button>
-      <ui-button label="Advanced (Chip/Pill Mode)"  onclick="showTagAdvancedFeatures()" variant="outline"></ui-button>
-      <ui-button label="Design Guide (32px)"  onclick="showDesignGuide()" variant="outline"></ui-button>
-      <ui-button label="Shape Showcase"  onclick="showShapeShowcase()" variant="outline"></ui-button>
-      <ui-button label="Ticket Shapes"  onclick="showTicketDemo()" variant="outline"></ui-button>
-      <ui-button label="Auto Coloring"  onclick="showAutoColorTags()" variant="outline"></ui-button>
-      <ui-button label="Tag Groups"  onclick="showTagGroups()" variant="outline"></ui-button>
-      <ui-button label="Selection (Premium)"  onclick="showSelectionGroups()" variant="outline"></ui-button>
-      <ui-button label="Interactive (Premium)"  onclick="showPremiumGroups()" variant="outline"></ui-button>
-      <ui-button label="Input Validation"  onclick="showTagsInputValidation()" variant="outline"></ui-button>
-      <ui-button label="Rich Gradients"  onclick="showRichGradients()" variant="outline"></ui-button>
-      <ui-button label="Playground"  onclick="showTagPlayground()" variant="outline"></ui-button>
+      <ui-button label="Variants" data-demo="variants" onclick="showTagVariants()" variant="outline"></ui-button>
+      <ui-button label="Interactive" data-demo="interactive" onclick="showCheckableTags()" variant="outline"></ui-button>
+      <ui-button label="Media & Icons" data-demo="media" onclick="showMediaTags()" variant="outline"></ui-button>
+      <ui-button label="Removable" data-demo="removable" onclick="showRemovableTags()" variant="outline"></ui-button>
+      <ui-button label="Badges" data-demo="badges" onclick="showTagBadges()" variant="outline"></ui-button>
+      <ui-button label="Premium Features" data-demo="premium" onclick="showPremiumTags()" variant="outline"></ui-button>
+      <ui-button label="Advanced (Chip/Pill Mode)" data-demo="advanced" onclick="showTagAdvancedFeatures()" variant="outline"></ui-button>
+      <ui-button label="Design Guide (32px)" data-demo="design" onclick="showDesignGuide()" variant="outline"></ui-button>
+      <ui-button label="Shape Showcase" data-demo="shapes" onclick="showShapeShowcase()" variant="outline"></ui-button>
+      <ui-button label="Ticket Shapes" data-demo="ticket" onclick="showTicketDemo()" variant="outline"></ui-button>
+      <ui-button label="Auto Coloring" data-demo="autocolor" onclick="showAutoColorTags()" variant="outline"></ui-button>
+      <ui-button label="Tag Groups" data-demo="groups" onclick="showTagGroups()" variant="outline"></ui-button>
+      <ui-button label="Selection (Premium)" data-demo="selection" onclick="showSelectionGroups()" variant="outline"></ui-button>
+      <ui-button label="Interactive (Premium)" data-demo="premiumgroups" onclick="showPremiumGroups()" variant="outline"></ui-button>
+      <ui-button label="Input Validation" data-demo="validation" onclick="showTagsInputValidation()" variant="outline"></ui-button>
+      <ui-button label="Rich Gradients" data-demo="gradients" onclick="showRichGradients()" variant="outline"></ui-button>
+      <ui-button label="Playground" data-demo="playground" onclick="showTagPlayground()" variant="outline"></ui-button>
     </div>
 
     <div id="tagDemoContainer" style="margin-top: 20px;"></div>
   `;
 
+  const updateTagActiveBtn = demoName => {
+    section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+      btn.selected = btn.getAttribute('data-demo') === demoName;
+    });
+  };
+
   window.showTagVariants = () => {
+    updateTagActiveBtn('variants');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -47,6 +54,7 @@ export function initTagDemo() {
   };
 
   window.showCheckableTags = () => {
+    updateTagActiveBtn('interactive');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -62,6 +70,7 @@ export function initTagDemo() {
   };
 
   window.showMediaTags = () => {
+    updateTagActiveBtn('media');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -78,9 +87,9 @@ export function initTagDemo() {
         <h3>Images & Avatars (Start)</h3>
         <p style="color: #6b7280; margin-bottom: 20px;">Use <code>image</code> for logos and <code>user-avatar</code> for circular profile shots.</p>
         <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px;">
-          <ui-tag label="Antigravity" image="https://stenciljs.com/assets/img/logo.png" color="primary" variant="light"></ui-tag>
-          <ui-tag label="John Doe" user-avatar="https://i.pravatar.cc/150?u=1" variant="light" rounded="true"></ui-tag>
-          <ui-tag label="Alice Smith" user-avatar="https://i.pravatar.cc/150?u=2" color="info" variant="outlined" rounded="true"></ui-tag>
+          <ui-tag label="Antigravity" image="/build/assets/images/logo.png" color="primary" variant="light"></ui-tag>
+          <ui-tag label="John Doe" user-avatar="/build/assets/images/logo.png" variant="light" rounded="true"></ui-tag>
+          <ui-tag label="Alice Smith" user-avatar="/build/assets/images/logo.png" color="info" variant="outlined" rounded="true"></ui-tag>
         </div>
 
         <h3>Position Switching</h3>
@@ -94,6 +103,7 @@ export function initTagDemo() {
   };
 
   window.showRemovableTags = () => {
+    updateTagActiveBtn('removable');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -111,25 +121,25 @@ export function initTagDemo() {
         <h3>Exit Animations</h3>
         <div style="display: flex; gap: 20px; flex-wrap: wrap;">
           <div>
-            <span style="font-size: 12px; color: #94a3b8; display: block; margin-bottom: 8px;">Scale (Default)</span>
+            <span style="font-size: 12px; color:var(--text-secondary,#64748b); display: block; margin-bottom: 8px;">Scale (Default)</span>
             <ui-tag label="Scale Out" removable="true" animation="scale"></ui-tag>
           </div>
           <div>
-            <span style="font-size: 12px; color: #94a3b8; display: block; margin-bottom: 8px;">Fade</span>
+            <span style="font-size: 12px; color:var(--text-secondary,#64748b); display: block; margin-bottom: 8px;">Fade</span>
             <ui-tag label="Fade Out" removable="true" animation="fade"></ui-tag>
           </div>
           <div>
-            <span style="font-size: 12px; color: #94a3b8; display: block; margin-bottom: 8px;">Slide</span>
+            <span style="font-size: 12px; color:var(--text-secondary,#64748b); display: block; margin-bottom: 8px;">Slide</span>
             <ui-tag label="Slide Out" removable="true" animation="slide"></ui-tag>
           </div>
           <div>
-            <span style="font-size: 12px; color: #94a3b8; display: block; margin-bottom: 8px;">Rotate</span>
+            <span style="font-size: 12px; color:var(--text-secondary,#64748b); display: block; margin-bottom: 8px;">Rotate</span>
             <ui-tag label="Rotate Out" removable="true" animation="rotate"></ui-tag>
           </div>
         </div>
         
-        <div style="margin-top: 30px; padding: 15px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
-          <p style="margin: 0; font-size: 13px; color: #64748b;">
+        <div style="margin-top: 30px; padding: 15px; background:var(--bg-secondary,#f8fafc); border-radius: 8px; border:1px solid var(--border-default,#e2e8f0);">
+          <p style="margin: 0; font-size: 13px; color:var(--text-secondary,#64748b);">
             💡 <strong>Pro Tip:</strong> Listen to the <code>tagRemove</code> event to perform cleanup or sync with your backend.
           </p>
         </div>
@@ -138,6 +148,7 @@ export function initTagDemo() {
   };
 
   window.showTagBadges = () => {
+    updateTagActiveBtn('badges');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -151,16 +162,24 @@ export function initTagDemo() {
         </div>
 
         <h3>Counters & Metadata</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px;">
           <ui-tag label="Comments" counter="24" color="secondary" variant="light"></ui-tag>
           <ui-tag label="Likes" counter="1.2k" color="primary" variant="outlined"></ui-tag>
           <ui-tag label="Shared" counter="8" color="success" variant="light"></ui-tag>
         </div>
+
+        <h3>Both Badge & Counter</h3>
+        <p style="color: #6b7280; margin-bottom: 20px;">Tags can display both an overlay badge (e.g. Danger/Red, Success/Green) and an inline counter (default gray) with distinct, different colors.</p>
+        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+          <ui-tag label="Inbox Messages" badge="5" badge-color="danger" counter="12" color="primary" variant="light"></ui-tag>
+          <ui-tag label="System Health" badge="Critical" badge-color="warning" counter="99.9%" color="success" variant="outlined"></ui-tag>
+        </div>
       </div>
     `;
   };
 
   window.showTagAdvancedFeatures = () => {
+    updateTagActiveBtn('advanced');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -169,7 +188,7 @@ export function initTagDemo() {
         <p style="color: #6b7280; margin-bottom: 24px;">Native support for features previously only available in Chip and Pill components.</p>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Orientations (High-Density Layouts)</h4>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Orientations (High-Density Layouts)</h4>
           <div style="display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;">
             <ui-tag label="Horizontal Default" color="primary"></ui-tag>
             <ui-tag label="Vertical Style" orientation="vertical" icon="info" color="success" variant="light"></ui-tag>
@@ -179,19 +198,19 @@ export function initTagDemo() {
         </div>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Comprehensive Shape Comparison</h4>
-          <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: #f1f5f9; padding: 20px; border-radius: 12px;">
-            <div style="text-align: center;"><ui-tag label="Pill" shape="pill" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color: #94a3b8;">PILL</div></div>
-            <div style="text-align: center;"><ui-tag label="Rounded" shape="rounded" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color: #94a3b8;">ROUNDED</div></div>
-            <div style="text-align: center;"><ui-tag label="Square" shape="square" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color: #94a3b8;">SQUARE</div></div>
-            <div style="text-align: center;"><ui-tag label="Circle" shape="circle" icon="star" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color: #94a3b8;">CIRCLE</div></div>
-            <div style="text-align: center;"><ui-tag label="Ribbon" shape="ribbon" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color: #94a3b8;">RIBBON</div></div>
-            <div style="text-align: center;"><ui-tag label="Ticket" shape="ticket" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color: #94a3b8;">TICKET</div></div>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Comprehensive Shape Comparison</h4>
+          <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background:var(--bg-tertiary,#f1f5f9); padding: 20px; border-radius: 12px;">
+            <div style="text-align: center;"><ui-tag label="Pill" shape="pill" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color:var(--text-secondary,#64748b);">PILL</div></div>
+            <div style="text-align: center;"><ui-tag label="Rounded" shape="rounded" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color:var(--text-secondary,#64748b);">ROUNDED</div></div>
+            <div style="text-align: center;"><ui-tag label="Square" shape="square" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color:var(--text-secondary,#64748b);">SQUARE</div></div>
+            <div style="text-align: center;"><ui-tag label="Circle" shape="circle" icon="star" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color:var(--text-secondary,#64748b);">CIRCLE</div></div>
+            <div style="text-align: center;"><ui-tag label="Ribbon" shape="ribbon" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color:var(--text-secondary,#64748b);">RIBBON</div></div>
+            <div style="text-align: center;"><ui-tag label="Ticket" shape="ticket" color="primary"></ui-tag><div style="font-size: 10px; margin-top: 4px; color:var(--text-secondary,#64748b);">TICKET</div></div>
           </div>
         </div>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Custom Overrides & States</h4>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Custom Overrides & States</h4>
           <div style="display: flex; gap: 12px; flex-wrap: wrap;">
             <ui-tag label="Custom Hex" custom-color="#6366f1" custom-text-color="#ffffff"></ui-tag>
             <ui-tag label="Disabled State" disabled="true" color="primary" removable="true"></ui-tag>
@@ -205,6 +224,7 @@ export function initTagDemo() {
   };
 
   window.showDesignGuide = () => {
+    updateTagActiveBtn('design');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -221,7 +241,7 @@ export function initTagDemo() {
             </div>
             <ui-tag label="Tag label" shape="rounded" icon="checkmark-circle" icon-library="ionicons" color="success" variant="light"></ui-tag>
             <ui-tag label="Tag label" shape="rounded" removable="true"></ui-tag>
-            <ui-tag label="Tag label" shape="rounded" user-avatar="https://i.pravatar.cc/150?u=12" removable="true" variant="outlined"></ui-tag>
+            <ui-tag label="Tag label" shape="rounded" user-avatar="/build/assets/images/logo.png" removable="true" variant="outlined"></ui-tag>
           </div>
 
           <!-- Pill Variants -->
@@ -229,12 +249,12 @@ export function initTagDemo() {
             <ui-tag label="Tag label" shape="pill" variant="outlined" color="primary"></ui-tag>
             <ui-tag label="Tag label" shape="pill" icon="checkmark-circle" color="success" variant="filled"></ui-tag>
             <ui-tag label="Tag label" shape="pill" removable="true" color="secondary" variant="light"></ui-tag>
-            <ui-tag label="Tag label" shape="pill" user-avatar="https://i.pravatar.cc/150?u=15" removable="true" variant="outlined"></ui-tag>
+            <ui-tag label="Tag label" shape="pill" user-avatar="/build/assets/images/logo.png" removable="true" variant="outlined"></ui-tag>
           </div>
 
           <!-- Calculation Notes -->
           <div style="background: #e2e8f0; padding: 16px; border-radius: 8px; border-left: 4px solid #334155;">
-             <p style="color: #0f172a; font-size: 13px; margin:0;">
+             <p style="color:var(--text-primary,#0f172a); font-size: 13px; margin:0;">
                 📊 <strong>Gutter Calculation:</strong> Label end margin is negated to create 8px space: <code style="background: #fff; padding: 2px 4px; border-radius: 4px;">Gap(8px) - EndPadding(12px) = -4px offset</code>
              </p>
           </div>
@@ -244,11 +264,12 @@ export function initTagDemo() {
   };
 
   window.showShapeShowcase = () => {
+    updateTagActiveBtn('shapes');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
       <div class="demo-block">
-        <h3 style="color: #059669;">🎨 Comprehensive Shape Showcase</h3>
+        <h3 style="color:var(--accent-green,#059669);">🎨 Comprehensive Shape Showcase</h3>
         <p style="color: #6b7280; margin-bottom: 24px;">Explore our unique geometries for specialized UI patterns.</p>
 
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
@@ -265,7 +286,7 @@ export function initTagDemo() {
           </div>
 
           <!-- Ticket Column -->
-          <div style="background: #eef2ff; padding: 20px; border-radius: 12px; border: 1px solid #e0e7ff;">
+          <div style="background:var(--accent-indigo-soft,#eef2ff); padding: 20px; border-radius: 12px; border: 1px solid #e0e7ff;">
             <h4 style="color: #3730a3; margin-top: 0; display: flex; align-items: center; gap: 8px;">🎟️ Ecommerce Tickets</h4>
             <p style="font-size: 13px; color: #3730a3; margin-bottom: 20px;">E-commerce price-tag aesthetics for product categories and downloads.</p>
             <div style="display: flex; flex-direction: column; gap: 12px; align-items: flex-start;">
@@ -277,9 +298,9 @@ export function initTagDemo() {
           </div>
 
           <!-- Pill & Minimal Column -->
-          <div style="background: #f0fdf4; padding: 20px; border-radius: 12px; border: 1px solid #dcfce7;">
-            <h4 style="color: #166534; margin-top: 0; display: flex; align-items: center; gap: 8px;">💊 Modern & Minimal</h4>
-            <p style="font-size: 13px; color: #166534; margin-bottom: 20px;">Highly accessible, clean shapes for tagging systems and status info.</p>
+          <div style="background:var(--accent-green-soft,#f0fdf4); padding: 20px; border-radius: 12px; border: 1px solid #dcfce7;">
+            <h4 style="color: var(--accent-green,#166534); margin-top: 0; display: flex; align-items: center; gap: 8px;">💊 Modern & Minimal</h4>
+            <p style="font-size: 13px; color: var(--accent-green,#166534); margin-bottom: 20px;">Highly accessible, clean shapes for tagging systems and status info.</p>
             <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
               <ui-tag label="Classic Pill" shape="pill" color="success" size="md"></ui-tag>
               <ui-tag shape="circle" icon="heart" iconLibrary="lucide" color="danger" size="md"></ui-tag>
@@ -289,8 +310,8 @@ export function initTagDemo() {
           </div>
         </div>
 
-        <div style="margin-top: 30px; padding: 15px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;">
-          <p style="margin: 0; font-size: 13px; color: #92400e;">
+        <div style="margin-top: 30px; padding: 15px; background:var(--accent-yellow-soft,#fffbeb); border: 1px solid #fde68a; border-radius: 8px;">
+          <p style="margin: 0; font-size: 13px; color:var(--accent-yellow,#92400e);">
              💡 <strong>Context Matters:</strong> Use <strong>Ribbons</strong> for attention-grabbing edge banners, <strong>Tickets</strong> for e-commerce categorization, and <strong>Pills</strong> for standard status labels.
           </p>
         </div>
@@ -299,6 +320,7 @@ export function initTagDemo() {
   };
 
   window.showTicketDemo = () => {
+    updateTagActiveBtn('ticket');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -324,7 +346,7 @@ export function initTagDemo() {
              <ui-tag label="wordpress" shape="ticket" color="primary"></ui-tag>
           </div>
 
-          <div style="margin-top: 20px; color: #64748b; font-size: 13px;">
+          <div style="margin-top: 20px; color:var(--text-secondary,#64748b); font-size: 13px;">
              💡 <strong>Note:</strong> These tags use lowercase text and a subtle 3D drop shadow to match the classic blog tag aesthetics.
           </div>
         </div>
@@ -333,6 +355,7 @@ export function initTagDemo() {
   };
 
   window.showAutoColorTags = () => {
+    updateTagActiveBtn('autocolor');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -352,6 +375,7 @@ export function initTagDemo() {
   };
 
   window.showPremiumTags = () => {
+    updateTagActiveBtn('premium');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -379,14 +403,14 @@ export function initTagDemo() {
           <ui-tag label="Rotating Star" icon="star" icon-spin="true" color="warning" variant="light"></ui-tag>
         </div>
 
-        <div style="background: #f1f5f9; padding: 24px; border-radius: 12px; margin: 32px 0;">
-          <h2 style="margin-top: 0; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 12px;">Tag Group Masterclass</h2>
+        <div style="background:var(--bg-tertiary,#f1f5f9); padding: 24px; border-radius: 12px; margin: 32px 0;">
+          <h2 style="margin-top: 0; color:var(--text-primary,#1e293b); border-bottom: 2px solid #e2e8f0; padding-bottom: 12px;">Tag Group Masterclass</h2>
           
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
             <!-- Group 1: Inline Smart Editor (The Star Attraction) -->
-            <div style="grid-column: 1 / -1; background: white; padding: 20px; border-radius: 10px; border: 1.5px solid #e2e8f0;">
+            <div style="grid-column: 1 / -1; background:var(--bg-primary,white); padding: 20px; border-radius: 10px; border: 1.5px solid #e2e8f0;">
               <h4 style="margin-top: 0; margin-bottom: 8px;">Smart Inline Editor (Gmail Style)</h4>
-              <p style="font-size: 12px; color: #64748b; margin-bottom: 16px;">Type to search, Enter to create, <b>Backspace</b> once to highlight, twice to delete.</p>
+              <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin-bottom: 16px;">Type to search, Enter to create, <b>Backspace</b> once to highlight, twice to delete.</p>
               <ui-tag-group searchable="true" creatable="true" color="primary" variant="light" shape="pill" placeholder="Add category...">
                 <ui-tag label="React"></ui-tag>
                 <ui-tag label="Sass"></ui-tag>
@@ -398,13 +422,13 @@ export function initTagDemo() {
             <div>
               <h4 style="margin-bottom: 12px;">Project Team (Avatar Stack)</h4>
               <ui-tag-group overlap="true" spacing="-10px">
-                <ui-tag user-avatar="https://i.pravatar.cc/150?u=1" label="Alex"></ui-tag>
-                <ui-tag user-avatar="https://i.pravatar.cc/150?u=2" label="Jordan"></ui-tag>
-                <ui-tag user-avatar="https://i.pravatar.cc/150?u=3" label="Taylor"></ui-tag>
-                <ui-tag user-avatar="https://i.pravatar.cc/150?u=4" label="Morgan"></ui-tag>
-                <ui-tag user-avatar="https://i.pravatar.cc/150?u=5" label="Casey"></ui-tag>
+                <ui-tag user-avatar="/build/assets/images/logo.png" label="Alex"></ui-tag>
+                <ui-tag user-avatar="/build/assets/images/logo.png" label="Jordan"></ui-tag>
+                <ui-tag user-avatar="/build/assets/images/logo.png" label="Taylor"></ui-tag>
+                <ui-tag user-avatar="/build/assets/images/logo.png" label="Morgan"></ui-tag>
+                <ui-tag user-avatar="/build/assets/images/logo.png" label="Casey"></ui-tag>
               </ui-tag-group>
-              <p style="font-size: 11px; color: #64748b; margin-top: 8px;">Interactive stack with automatic white collision borders.</p>
+              <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 8px;">Interactive stack with automatic white collision borders.</p>
             </div>
 
             <!-- Group 3: Read-Only Display -->
@@ -415,7 +439,7 @@ export function initTagDemo() {
                 <ui-tag label="Locked" color="secondary"></ui-tag>
                 <ui-tag label="Frozen" color="info"></ui-tag>
               </ui-tag-group>
-              <p style="font-size: 11px; color: #64748b; margin-top: 8px;">All interactive inputs are hidden in Read-Only mode.</p>
+              <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 8px;">All interactive inputs are hidden in Read-Only mode.</p>
             </div>
 
             <!-- Group 4: Bulk Loading (Skeleton) -->
@@ -442,6 +466,7 @@ export function initTagDemo() {
   };
 
   window.showTagGroups = () => {
+    updateTagActiveBtn('groups');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -450,17 +475,17 @@ export function initTagDemo() {
         <p style="color: #6b7280; margin-bottom: 24px;">Manage collections of tags with bulk styling and layout control.</p>
         
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">User Assignments (Overlapping)</h4>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">User Assignments (Overlapping)</h4>
           <ui-tag-group overlap="true" spacing="-12px">
-            <ui-tag label="Alice" rounded="true" color="primary" image="https://i.pravatar.cc/150?u=1"></ui-tag>
-            <ui-tag label="Bob" rounded="true" color="success" image="https://i.pravatar.cc/150?u=2"></ui-tag>
-            <ui-tag label="Charlie" rounded="true" color="warning" image="https://i.pravatar.cc/150?u=3"></ui-tag>
-            <ui-tag label="Diana" rounded="true" color="danger" image="https://i.pravatar.cc/150?u=4"></ui-tag>
+            <ui-tag label="Alice" rounded="true" color="primary" image="/build/assets/images/logo.png"></ui-tag>
+            <ui-tag label="Bob" rounded="true" color="success" image="/build/assets/images/logo.png"></ui-tag>
+            <ui-tag label="Charlie" rounded="true" color="warning" image="/build/assets/images/logo.png"></ui-tag>
+            <ui-tag label="Diana" rounded="true" color="danger" image="/build/assets/images/logo.png"></ui-tag>
           </ui-tag-group>
         </div>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Bulk Styling (Primary Outlined)</h4>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Bulk Styling (Primary Outlined)</h4>
           <ui-tag-group color="primary" variant="outlined" rounded="true">
             <ui-tag label="Frontend"></ui-tag>
             <ui-tag label="Backend"></ui-tag>
@@ -469,8 +494,8 @@ export function initTagDemo() {
         </div>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Interactive Playground</h4>
-          <div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Interactive Playground</h4>
+          <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
             <div id="tagGroupPlayground" style="margin-bottom: 20px;">
               <ui-tag-group id="interactiveTagGroup">
                 <ui-tag label="Label 1"></ui-tag>
@@ -527,6 +552,7 @@ export function initTagDemo() {
   };
 
   window.showSelectionGroups = () => {
+    updateTagActiveBtn('selection');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -535,7 +561,7 @@ export function initTagDemo() {
         <p style="color: #6b7280; margin-bottom: 24px;">Manage multiple tags as a selection group (Filter Chips).</p>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Single Selection</h4>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Single Selection</h4>
           <ui-tag-group selection-mode="single" color="primary" variant="outlined" rounded="true">
             <ui-tag label="Low"></ui-tag>
             <ui-tag label="md"></ui-tag>
@@ -544,7 +570,7 @@ export function initTagDemo() {
         </div>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Multiple Selection</h4>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Multiple Selection</h4>
           <ui-tag-group selection-mode="multiple" color="info" variant="light">
             <ui-tag label="React"></ui-tag>
             <ui-tag label="Vue"></ui-tag>
@@ -557,16 +583,17 @@ export function initTagDemo() {
   };
 
   window.showPremiumGroups = () => {
+    updateTagActiveBtn('premiumgroups');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
       <div class="demo-block">
-        <h3 style="color: #7c3aed;">🧪 Premium Interactive Features</h3>
+        <h3 style="color:var(--accent-purple,#7c3aed);">🧪 Premium Interactive Features</h3>
         <p style="color: #6b7280; margin-bottom: 24px;">Advanced features for search-heavy or dynamic tagging UI.</p>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Searchable & Creatable Group</h4>
-          <p style="color: #64748b; font-size: 13px; margin-bottom: 16px;">Search existing tags or press the "+" button to add new ones. Press Enter to confirm.</p>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Searchable & Creatable Group</h4>
+          <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-bottom: 16px;">Search existing tags or press the "+" button to add new ones. Press Enter to confirm.</p>
           <ui-tag-group searchable="true" creatable="true" removable="true" color="secondary" variant="light">
             <ui-tag label="Engineering"></ui-tag>
             <ui-tag label="Design"></ui-tag>
@@ -576,8 +603,8 @@ export function initTagDemo() {
         </div>
 
         <div style="margin-bottom: 40px;">
-          <h4 style="margin-bottom: 12px; color: #94a3b8; font-size: 14px;">Collapsible Overflow</h4>
-          <p style="color: #64748b; font-size: 13px; margin-bottom: 16px;">Showing only 2 items initially. Click "View all" to expand.</p>
+          <h4 style="margin-bottom: 12px; color:var(--text-secondary,#64748b); font-size: 14px;">Collapsible Overflow</h4>
+          <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-bottom: 16px;">Showing only 2 items initially. Click "View all" to expand.</p>
           <ui-tag-group max="2" collapsible="true" color="primary" variant="outlined">
             <ui-tag label="Item 1"></ui-tag>
             <ui-tag label="Item 2"></ui-tag>
@@ -591,6 +618,7 @@ export function initTagDemo() {
   };
 
   window.showTagsInputValidation = () => {
+    updateTagActiveBtn('validation');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -598,7 +626,7 @@ export function initTagDemo() {
         <h3>Tags Input Feature Validation</h3>
         <p style="color: #6b7280; mb-4">Validate the missing "Tags Input" features identified in analysis.</p>
 
-        <div style="background: white; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
           <h4 style="margin-top:0">Current Implementation (Creatable Group)</h4>
           <ui-tag-group creatable="true" removable="true" color="primary" variant="light">
             <ui-tag label="Existing"></ui-tag>
@@ -618,6 +646,7 @@ export function initTagDemo() {
   };
 
   window.showRichGradients = () => {
+    updateTagActiveBtn('gradients');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -632,8 +661,8 @@ export function initTagDemo() {
           <ui-tag label="Cosmic Radial" gradient="radial-gradient(circle at center, #8b5cf6, #d946ef)" size="lg" shape="pill"></ui-tag>
         </div>
 
-        <div style="margin-top: 30px; background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
-          <h4 style="margin-top: 0; color: #1e293b;">Code Snippet</h4>
+        <div style="margin-top: 30px; background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
+          <h4 style="margin-top: 0; color:var(--text-primary,#1e293b);">Code Snippet</h4>
           <code style="display: block; background: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 6px; font-size: 13px;">
             &lt;ui-tag label="Sunset" gradient="linear-gradient(135deg, #f43f5e 0%, #fb923c 100%)" /&gt;
           </code>
@@ -643,6 +672,7 @@ export function initTagDemo() {
   };
 
   window.showTagPlayground = () => {
+    updateTagActiveBtn('playground');
     const container = document.getElementById('tagDemoContainer');
     if (!container) return;
     container.innerHTML = `
@@ -652,13 +682,13 @@ export function initTagDemo() {
 
         <div style="display: flex; gap: 40px; flex-wrap: wrap;">
           <!-- Preview Section -->
-          <div style="flex: 1; min-width: 300px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 40px;">
+          <div style="flex: 1; min-width: 300px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f8fafc); border: 1px dashed #cbd5e1; border-radius: 12px; padding: 40px;">
             <ui-tag id="demoTag" label="Playground Tag" color="primary"></ui-tag>
           </div>
 
           <!-- Controls Section -->
-          <div style="flex: 0 0 300px; padding: 24px; background: white; border-radius: 12px; border: 1px solid #e2e8f0;">
-            <h4 style="margin-top: 0; margin-bottom: 20px; color: #0f172a;">Configuration</h4>
+          <div style="flex: 0 0 300px; padding: 24px; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
+            <h4 style="margin-top: 0; margin-bottom: 20px; color:var(--text-primary,#0f172a);">Configuration</h4>
             
             <div style="display: flex; flex-direction: column; gap: 16px;">
               <ui-input id="playTagLabel" label="Label" value="Playground Tag"></ui-input>