atomicuilibrary 0.1.0 → 0.1.3

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

@@ -236,14 +236,14 @@ export function initTabsDemo() {
 
           <!-- Color swatches -->
           <div style="display:flex; flex-direction:column; gap:4px;">
-            <label style="font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.04em;">Active Color</label>
+            <label style="font-size:12px; font-weight:600; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:0.04em;">Active Color</label>
             <div id="colorSwatches" style="display:flex; gap:6px; align-items:center;">
-              <button class="tab-color-swatch" data-color="#ec4899" title="Pink"   style="background:#ec4899;" onclick="setTabActiveColor('#ec4899')"></button>
-              <button class="tab-color-swatch" data-color="#8b5cf6" title="Violet" style="background:#8b5cf6;" onclick="setTabActiveColor('#8b5cf6')"></button>
-              <button class="tab-color-swatch" data-color="#3b82f6" title="Blue"   style="background:#3b82f6;" onclick="setTabActiveColor('#3b82f6')"></button>
+              <button class="tab-color-swatch" data-color="#ec4899" title="Pink"   style="background:var(--accent-pink,#ec4899);" onclick="setTabActiveColor('#ec4899')"></button>
+              <button class="tab-color-swatch" data-color="#8b5cf6" title="Violet" style="background:var(--accent-purple,#8b5cf6);" onclick="setTabActiveColor('#8b5cf6')"></button>
+              <button class="tab-color-swatch" data-color="#3b82f6" title="Blue"   style="background:var(--accent-blue,#3b82f6);" onclick="setTabActiveColor('#3b82f6')"></button>
               <button class="tab-color-swatch" data-color="#10b981" title="Green"  style="background:#10b981;" onclick="setTabActiveColor('#10b981')"></button>
-              <button class="tab-color-swatch" data-color="#f59e0b" title="Amber"  style="background:#f59e0b;" onclick="setTabActiveColor('#f59e0b')"></button>
-              <button class="tab-color-swatch" data-color="#ef4444" title="Red"    style="background:#ef4444;" onclick="setTabActiveColor('#ef4444')"></button>
+              <button class="tab-color-swatch" data-color="#f59e0b" title="Amber"  style="background:var(--accent-yellow,#f59e0b);" onclick="setTabActiveColor('#f59e0b')"></button>
+              <button class="tab-color-swatch" data-color="#ef4444" title="Red"    style="background:var(--accent-red,#ef4444);" onclick="setTabActiveColor('#ef4444')"></button>
               <button class="tab-color-swatch" data-color="#06b6d4" title="Cyan"   style="background:#06b6d4;" onclick="setTabActiveColor('#06b6d4')"></button>
               <!-- Free-form color input -->
               <input type="color" id="tabColorPicker" value="#ec4899" title="Custom color"
@@ -259,11 +259,11 @@ export function initTabsDemo() {
             cursor: pointer; transition: all 0.15s ease; flex-shrink: 0;
           }
           .tab-color-swatch:hover, .tab-color-swatch.active {
-            border-color: #0f172a; transform: scale(1.15);
+            border-color:var(--text-primary,#0f172a); transform: scale(1.15);
           }
         </style>
 
-        <div id="premiumPreview" style="padding: 40px; background: #f8fafc; border-radius: 12px; border: 1px dashed #cbd5e1; transition: background 0.3s ease;">
+        <div id="premiumPreview" style="padding: 40px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border: 1px dashed #cbd5e1; transition: background 0.3s ease;">
           <ui-tabs id="premiumTabs" variant="line" size="md" indicator-style="line" selection-animation="slide" icon-library="lucide"></ui-tabs>
         </div>
       </div>
@@ -363,7 +363,7 @@ export function initTabsDemo() {
       const wrap = document.createElement('div');
       wrap.innerHTML = `
         <h4 style="margin:0 0 4px; font-size:14px; color:#475569;">${label}</h4>
-        <p style="margin:0 0 10px; font-size:12px; color:#94a3b8;">${note}</p>
+        <p style="margin:0 0 10px; font-size:12px; color:var(--text-secondary,#64748b);">${note}</p>
       `;
       const tabEl = document.createElement('ui-tabs');
       tabEl.setAttribute('size', value);
@@ -470,13 +470,13 @@ export function initTabsDemo() {
         <h3>Tabs with Slot Content</h3>
         <p>This example demonstrates projecting content using slots instead of string content.</p>
         <ui-tabs id="slotTabs" icon-library="lucide">
-            <div slot="tab1" style="padding: 20px; background: #f0fdf4; border: 1px dashed #4ade80; border-radius: 8px;">
-                <h4 style="margin-top: 0; color: #166534;">Content via Slot 1</h4>
+            <div slot="tab1" style="padding: 20px; background:var(--accent-green-soft,#f0fdf4); border: 1px dashed #4ade80; border-radius: 8px;">
+                <h4 style="margin-top: 0; color: var(--accent-green,#166534);">Content via Slot 1</h4>
                 <p>This content is projected from the light DOM into the shadow DOM using a named slot.</p>
                 <ui-button label="Interactive Button" variant="outline" color="success" size="md"ui-button>
             </div>
-            <div slot="tab2" style="padding: 20px; background: #eff6ff; border: 1px dashed #60a5fa; border-radius: 8px;">
-                <h4 style="margin-top: 0; color: #1e40af;">Content via Slot 2</h4>
+            <div slot="tab2" style="padding: 20px; background:var(--accent-blue-soft,#eff6ff); border: 1px dashed #60a5fa; border-radius: 8px;">
+                <h4 style="margin-top: 0; color:var(--accent-blue,#1e40af);">Content via Slot 2</h4>
                 <p>Slots allow you to keep your content in the main document structure.</p>
             </div>
         </ui-tabs>
@@ -517,22 +517,22 @@ export function initTabsDemo() {
 
           <!-- show-close-all auto-includes the popup list -->
           <div>
-            <h4 style="margin: 0 0 6px; font-size: 14px; color: #64748b;">Auto popup via <code>show-close-all</code></h4>
-            <p style="margin: 0 0 14px; font-size: 13px; color: #94a3b8;">When <code>show-close-all</code> is true the list button appears automatically — no extra prop needed.</p>
+            <h4 style="margin: 0 0 6px; font-size: 14px; color:var(--text-secondary,#64748b);">Auto popup via <code>show-close-all</code></h4>
+            <p style="margin: 0 0 14px; font-size: 13px; color:var(--text-secondary,#64748b);">When <code>show-close-all</code> is true the list button appears automatically — no extra prop needed.</p>
             <div id="tabListCloseAllContainer"></div>
           </div>
 
           <!-- show-tab-list without close-all -->
           <div>
-            <h4 style="margin: 0 0 6px; font-size: 14px; color: #64748b;">Standalone <code>show-tab-list</code></h4>
-            <p style="margin: 0 0 14px; font-size: 13px; color: #94a3b8;">Use <code>show-tab-list</code> on its own to add the popup without the close-all button.</p>
+            <h4 style="margin: 0 0 6px; font-size: 14px; color:var(--text-secondary,#64748b);">Standalone <code>show-tab-list</code></h4>
+            <p style="margin: 0 0 14px; font-size: 13px; color:var(--text-secondary,#64748b);">Use <code>show-tab-list</code> on its own to add the popup without the close-all button.</p>
             <div id="tabListOnlyContainer"></div>
           </div>
 
           <!-- Both props together -->
           <div>
-            <h4 style="margin: 0 0 6px; font-size: 14px; color: #64748b;">Both props together</h4>
-            <p style="margin: 0 0 14px; font-size: 13px; color: #94a3b8;">Tab list popup + close-all button side by side, with badges visible in the list.</p>
+            <h4 style="margin: 0 0 6px; font-size: 14px; color:var(--text-secondary,#64748b);">Both props together</h4>
+            <p style="margin: 0 0 14px; font-size: 13px; color:var(--text-secondary,#64748b);">Tab list popup + close-all button side by side, with badges visible in the list.</p>
             <div id="tabListBothContainer"></div>
           </div>
 
@@ -585,7 +585,7 @@ export function initTabsDemo() {
         <p style="color: #6b7280; margin-bottom: 16px;">Click the X button on the right to destroy the entire tabs component</p>
         <div id="closeAllTabsContainer"></div>
         <div id="closeAllMessage" style="margin-top: 20px; padding: 16px; background-color: #f3f4f6; border-radius: 8px; display: none;">
-          <p style="color: #059669; font-weight: 600;">✓ Tabs component has been destroyed!</p>
+          <p style="color:var(--accent-green,#059669); font-weight: 600;">✓ Tabs component has been destroyed!</p>
           <ui-button label="Recreate Tabs" color="success" onclick="showCloseAllTabs()"></ui-button>
         </div>
       </div>
@@ -655,7 +655,7 @@ export function initTabsDemo() {
       <div class="demo-block">
         <h3>Vertical Tabs with Scroll Navigation</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Vertical tabs with scroll navigation for many items. Use arrow buttons to scroll.</p>
-        <div style="height: 350px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
+        <div style="height: 350px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; overflow: hidden;">
           <ui-tabs id="verticalTabs" orientation="vertical" scroll-mode="manual" show-tab-list="true" variant="pill" icon-library="lucide"></ui-tabs>
         </div>
       </div>
@@ -936,7 +936,7 @@ export function initTabsDemo() {
       <div class="demo-block">
         <h3>40 Vertical Tabs with Scroll Navigation</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Stress test: 40 vertical tabs with scroll navigation. Use the scroll buttons (▲/▼) to navigate through tabs.</p>
-        <div style="height: 450px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
+        <div style="height: 450px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; overflow: hidden;">
           <ui-tabs id="vertical40Tabs" orientation="vertical" scroll-mode="manual" variant="subtle" style="height: 100%;" icon-library="lucide"></ui-tabs>
         </div>
       </div>

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

@@ -87,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>
@@ -121,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>
@@ -188,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>
@@ -198,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>
@@ -241,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 -->
@@ -249,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>
@@ -269,7 +269,7 @@ export function initTagDemo() {
     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;">
@@ -286,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;">
@@ -298,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>
@@ -310,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>
@@ -346,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>
@@ -403,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>
@@ -422,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 -->
@@ -439,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) -->
@@ -475,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>
@@ -494,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>
@@ -561,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>
@@ -570,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>
@@ -588,12 +588,12 @@ export function initTagDemo() {
     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>
@@ -603,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>
@@ -626,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>
@@ -661,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>
@@ -682,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>