atomicuilibrary 0.1.0 → 0.1.3

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

@@ -86,16 +86,16 @@ export const initSnackbarDemo = () => {
   window.showInteractiveSnackbar = () => {
     updateActiveBtn('btnSnackPlayground');
     container.innerHTML = `
-      <div class="demo-block">
+      <div class="demo-block" style="background:var(--bg-primary,white);border-radius:20px;padding:28px;border:1px solid var(--border-default,#e2e8f0);">
         <h3>🎮 Interactive Playground</h3>
-        <p style="margin-bottom: 20px; color: #64748b; font-size: 14px;">Configure every property of the Snackbar system in real-time.</p>
+        <p style="margin-bottom: 20px; color:var(--text-secondary,#64748b); font-size: 14px;">Configure every property of the Snackbar system in real-time.</p>
         
-        <div style="background-color: white; padding: 24px; border-radius: 12px; margin-bottom: 20px; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+        <div style="background-color:var(--bg-secondary,#f8fafc); padding: 24px; border-radius: 12px; margin-bottom: 20px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4);">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;">
             
             <!-- Column 1: Container Props -->
             <div style="display: flex; flex-direction: column; gap: 14px;">
-              <h4 style="margin: 0; font-size: 11px; color: #ec4899; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800;">Container Props</h4>
+              <h4 style="margin: 0; font-size: 11px; color:var(--accent-pink,#ec4899); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800;">Container Props</h4>
               
               <ui-dropdown label="Position" id="pgPosition" value="bottom-right">
                 <option value="bottom-right">Bottom Right</option>
@@ -127,7 +127,7 @@ export const initSnackbarDemo = () => {
 
               <ui-input type="number" label="Global Duration (ms)" id="pgGlobalDuration" value="5000" step="500"></ui-input>
 
-              <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 10px; background: #fff1f2; border-radius: 8px;">
+              <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 10px; background:var(--bg-tertiary,#f1f5f9); border-radius: 8px; border:1px solid var(--border-subtle,#f1f5f9);">
                 <ui-checkbox label="Card Stacking" id="pgCardStack"></ui-checkbox>
                 <ui-checkbox label="Smart Grouping" id="pgCoalesce"></ui-checkbox>
                 <ui-checkbox label="Pause on Focus Loss" id="pgPauseFocus" checked></ui-checkbox>
@@ -203,7 +203,7 @@ export const initSnackbarDemo = () => {
                 <option value="custom">Custom URL</option>
               </ui-dropdown>
 
-              <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 10px; background: #f0fdf4; border-radius: 8px;">
+              <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 10px; background:var(--bg-tertiary,#f1f5f9); border-radius: 8px; border:1px solid var(--border-subtle,#f1f5f9);">
                 <ui-checkbox label="Closable" id="pgClosable" checked></ui-checkbox>
                 <ui-checkbox label="Haptic Feedback" id="pgHaptic"></ui-checkbox>
                 <ui-checkbox label="Slot Support" id="pgEnableSlots"></ui-checkbox>
@@ -216,25 +216,25 @@ export const initSnackbarDemo = () => {
         </div>
 
         <div style="margin-top: 20px; background: #0f172a; padding: 20px; border-radius: 12px; position: relative; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);">
-          <div style="color: #94a3b8; font-size: 11px; position: absolute; top: 12px; left: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;">Usage Code</div>
+          <div style="color:var(--text-secondary,#64748b); font-size: 11px; position: absolute; top: 12px; left: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;">Usage Code</div>
           <ui-button onclick="copyPgCode()" style="position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;">Copy</ui-button>
           <code id="snackbarCodeBlock" style="color: #f8fafc; font-family: 'Fira Code', monospace; font-size: 13px; display: block; overflow-x: auto; white-space: pre-wrap; line-height: 1.6; margin-top: 20px;"></code>
         </div>
 
-        <div id="eventLog" style="margin-top: 24px; padding: 16px; background-color: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;">
-          <h4 style="margin: 0 0 12px; font-size: 14px; color: #1e293b; font-weight: 700;">Event Log:</h4>
-          <div id="eventLogContent" style="font-family: 'Fira Code', monospace; font-size: 12px; color: #64748b; max-height: 120px; overflow-y: auto;">
-            <div style="color: #94a3b8;">Waiting for events...</div>
+        <div id="eventLog" style="margin-top: 24px; padding: 16px; background-color:var(--bg-secondary,#f8fafc); border-radius: 10px; border:1px solid var(--border-default,#e2e8f0);">
+          <h4 style="margin: 0 0 12px; font-size: 14px; color:var(--text-secondary,#64748b); font-weight: 700;">Event Log:</h4>
+          <div id="eventLogContent" style="font-family: 'Fira Code', monospace; font-size: 12px; color:var(--text-secondary,#64748b); max-height: 120px; overflow-y: auto;">
+            <div style="color:var(--text-secondary,#64748b);">Waiting for events...</div>
           </div>
         </div>
       </div>
       
       <style>
-        .pg-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #1e293b; }
-        .pg-select, .pg-input { padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; font-family: inherit; color: #0f172a; outline: none; transition: border-color 0.2s; }
-        .pg-select:focus, .pg-input:focus { border-color: #ec4899; }
-        .pg-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; color: #334155; }
-        .demo-block h3 { margin-bottom: 8px; font-size: 24px; font-weight: 800; color: #0f172a; }
+        .pg-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color:var(--text-secondary,#64748b); }
+        .pg-select, .pg-input { padding: 10px 12px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; font-size: 13px; font-family: inherit; color:var(--text-primary,#1e293b); background:var(--bg-secondary,#f8fafc); outline: none; transition: border-color 0.2s; }
+        .pg-select:focus, .pg-input:focus { border-color:var(--accent-pink,#ec4899); }
+        .pg-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; color:var(--text-secondary,#64748b); }
+        .demo-block h3 { margin-bottom: 8px; font-size: 24px; font-weight: 800; color:var(--text-primary,#1e293b); }
       </style>
     `;
 
@@ -464,7 +464,7 @@ snackbar.add({
         <h3>🎴 Card Stacking Mode</h3>
         <p>Visual stacking engine where notifications occupy less space and expand logically. Highly optimized for mobile and clean dashboards.</p>
         
-        <div style="display: flex; gap: 12px; margin-top: 20px; background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+        <div style="display: flex; gap: 12px; margin-top: 20px; background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
           <div style="flex: 1;">
             <h4 style="margin: 0 0 8px; font-weight: 700;">Global Toggle</h4>
             <div style="display: flex; gap: 10px;">
@@ -476,7 +476,7 @@ snackbar.add({
 
         <div style="margin-top: 30px;">
           <h4 style="margin: 0 0 12px; font-weight: 700;">Orientation Playground</h4>
-          <p style="font-size: 13px; color: #64748b; margin-bottom: 16px;">Test how the Material Tray adapts to different screen anchors.</p>
+          <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 16px;">Test how the Material Tray adapts to different screen anchors.</p>
           
           <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 600px;">
             <ui-button onclick="testStackedPosition('top-left')" >Top Left</ui-button>
@@ -566,19 +566,19 @@ snackbar.add({
       <div class="demo-block">
         <h3>Intelligent Workflows</h3>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px;">
-          <div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
             <h4 style="margin: 0 0 8px; font-weight: 700;">Async Promise</h4>
-            <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Automatic Loading -> Success/Error state.</p>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 12px;">Automatic Loading -> Success/Error state.</p>
             <ui-button onclick="testSnackbarPromise()" >Run Job</ui-button>
           </div>
-          <div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
             <h4 style="margin: 0 0 8px; font-weight: 700;">Undoable Action</h4>
-            <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Archive or Delete with a 6s rollback window.</p>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 12px;">Archive or Delete with a 6s rollback window.</p>
             <ui-button onclick="testSnackbarUndoable()" >Delete Item</ui-button>
           </div>
-          <div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
             <h4 style="margin: 0 0 8px; font-weight: 700;">Quick Input</h4>
-            <p style="font-size: 13px; color: #64748b; margin-bottom: 12px;">Collect data directly within the popup.</p>
+            <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 12px;">Collect data directly within the popup.</p>
             <ui-button onclick="testSnackbarInput()" >Add Tag</ui-button>
           </div>
         </div>
@@ -595,23 +595,23 @@ snackbar.add({
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px;">
           <!-- Smart Coalescing -->
-          <div style="background: #fffbeb; padding: 20px; border-radius: 12px; border: 1px solid #fde68a;">
-            <h4 style="color: #92400e; margin: 0 0 8px;">Smart Coalescing</h4>
-            <p style="font-size: 13px; color: #b45309; margin-bottom: 15px;">Automatically groups identical messages into a single entry with a counter.</p>
+          <div style="background:var(--accent-yellow-soft,#fffbeb); padding: 20px; border-radius: 12px; border: 1px solid #fde68a;">
+            <h4 style="color:var(--accent-yellow,#92400e); margin: 0 0 8px;">Smart Coalescing</h4>
+            <p style="font-size: 13px; color:var(--accent-yellow,#b45309); margin-bottom: 15px;">Automatically groups identical messages into a single entry with a counter.</p>
             <ui-button onclick="testCoalesce()" ">Spam 10 Messages</ui-button>
           </div>
 
           <!-- Priority Reordering -->
-          <div style="background: #f0fdf4; padding: 20px; border-radius: 12px; border: 1px solid #bbf7d0;">
-            <h4 style="color: #166534; margin: 0 0 8px;">Priority Reordering</h4>
-            <p style="font-size: 13px; color: #15803d; margin-bottom: 15px;">Trigger 5 normal messages, then jump the line with a High priority alert.</p>
+          <div style="background:var(--accent-green-soft,#f0fdf4); padding: 20px; border-radius: 12px; border: 1px solid #bbf7d0;">
+            <h4 style="color: var(--accent-green,#166534); margin: 0 0 8px;">Priority Reordering</h4>
+            <p style="font-size: 13px; color:var(--accent-green,#15803d); margin-bottom: 15px;">Trigger 5 normal messages, then jump the line with a High priority alert.</p>
             <ui-button onclick="testPriorityJam()" ">Priority Jam Demo</ui-button>
           </div>
 
           <!-- Animation Lab -->
-          <div style="background: #f5f3ff; padding: 20px; border-radius: 12px; border: 1px solid #ddd6fe;">
+          <div style="background:var(--accent-purple-soft,#f5f3ff); padding: 20px; border-radius: 12px; border: 1px solid #ddd6fe;">
             <h4 style="color: #5b21b6; margin: 0 0 8px;">Animation Lab</h4>
-            <p style="font-size: 13px; color: #6d28d9; margin-bottom: 15px;">Cycle through all entry physics systems sequentially.</p>
+            <p style="font-size: 13px; color:var(--accent-purple,#6d28d9); margin-bottom: 15px;">Cycle through all entry physics systems sequentially.</p>
             <ui-button onclick="testAnimationLab()" ">Run Animation Cycle</ui-button>
           </div>
         </div>
@@ -664,21 +664,21 @@ snackbar.add({
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px;">
           <!-- Light Theme -->
-          <div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
              <h4 style="margin: 0 0 12px;">Adaptive Themes</h4>
              <ui-button onclick="testTheme('light')" -weight: 600; margin-bottom: 8px;">Force Light Mode</ui-button>
              <ui-button onclick="testTheme('dark')" ">Force Dark Mode</ui-button>
           </div>
 
           <!-- Component Sizing -->
-          <div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
              <h4 style="margin: 0 0 12px;">Component Scaling</h4>
              <div style="display: flex; gap: 8px;">
                 <ui-button onclick="testSize('sm')" >Small</ui-button>
                 <ui-button onclick="testSize('md')" >md</ui-button>
                 <ui-button onclick="testSize('lg')" >Large</ui-button>
               </div>
-              <p style="font-size: 11px; color: #94a3b8; margin-top: 10px;">Dynamically rescales padding, fonts, and icon sizes for global parity.</p>
+              <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 10px;">Dynamically rescales padding, fonts, and icon sizes for global parity.</p>
           </div>
         </div>
       </div>
@@ -736,16 +736,16 @@ snackbar.add({
     const slotDiv = document.createElement('div');
     slotDiv.id = slotId;
     slotDiv.innerHTML = `
-      <div style="background: white; padding: 20px; border-radius: 16px; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.2); border: 1px solid #e2e8f0; min-width: 360px; animation: slideUp 0.5s ease; position: relative; pointer-events: auto; margin-bottom: 10px;">
+      <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 16px; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.2); border:1px solid var(--border-default,#e2e8f0); min-width: 360px; animation: slideUp 0.5s ease; position: relative; pointer-events: auto; margin-bottom: 10px;">
         <div style="display: flex; gap: 16px; align-items: start; margin-bottom: 16px;">
           <div style="width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #10b981, #10b981); display: flex; align-items: center; justify-content: center; color: white;">
             <ui-icon library="lucide" name="file-text" size="24px"></ui-icon>
           </div>
           <div style="flex: 1;">
-            <div style="font-weight: 800; color: #0f172a; font-size: 15px;">New Shared Document</div>
-            <div style="font-size: 13px; color: #64748b; margin-top: 2px;">"Q1_Report_Final.pdf" shared by <b>Sarah</b></div>
+            <div style="font-weight: 800; color:var(--text-primary,#0f172a); font-size: 15px;">New Shared Document</div>
+            <div style="font-size: 13px; color:var(--text-secondary,#64748b); margin-top: 2px;">"Q1_Report_Final.pdf" shared by <b>Sarah</b></div>
           </div>
-          <ui-button onclick="this.closest('div[id^=slot-]').remove()" style="border: none; background: #f1f5f9; color: #64748b; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px;">✕</ui-button>
+          <ui-button onclick="this.closest('div[id^=slot-]').remove()" style="border: none; background:var(--bg-tertiary,#f1f5f9); color:var(--text-secondary,#64748b); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px;">✕</ui-button>
         </div>
         <div style="display: flex; gap: 10px;">
           <ui-button onclick="alert('Downloading...')" ; cursor: pointer;">Download</ui-button>
@@ -802,21 +802,21 @@ snackbar.add({
     container.innerHTML = `
       <div class="demo-block">
         <h3>🆕 New Features Showcase</h3>
-        <p style="color:#64748b; font-size:14px; margin-bottom:24px;">All 7 newly implemented capabilities in one place.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size:14px; margin-bottom:24px;">All 7 newly implemented capabilities in one place.</p>
 
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
 
           <!-- Events -->
-          <div style="background:#f0fdf4; padding:20px; border-radius:12px; border:1px solid #bbf7d0;">
-            <h4 style="color:#166534; margin:0 0 6px;">📡 snackbarAdded / Updated Events</h4>
-            <p style="font-size:13px;color:#15803d;margin-bottom:12px;">Fire a notification — both events are logged in the Playground event log.</p>
+          <div style="background:var(--accent-green-soft,#f0fdf4); padding:20px; border-radius:12px; border:1px solid #bbf7d0;">
+            <h4 style="color:var(--accent-green,#166534); margin:0 0 6px;">📡 snackbarAdded / Updated Events</h4>
+            <p style="font-size:13px;color:var(--accent-green,#15803d);margin-bottom:12px;">Fire a notification — both events are logged in the Playground event log.</p>
             <ui-button onclick="testEventsDemo()" >Fire &amp; Observe Events</ui-button>
           </div>
 
           <!-- getAll() -->
-          <div style="background:#eff6ff; padding:20px; border-radius:12px; border:1px solid #bfdbfe;">
-            <h4 style="color:#1e40af; margin:0 0 6px;">📋 getAll()</h4>
-            <p style="font-size:13px;color:#1d4ed8;margin-bottom:12px;">Query all current notifications programmatically.</p>
+          <div style="background:var(--accent-blue-soft,#eff6ff); padding:20px; border-radius:12px; border:1px solid #bfdbfe;">
+            <h4 style="color:var(--accent-blue,#1e40af); margin:0 0 6px;">📋 getAll()</h4>
+            <p style="font-size:13px;color:var(--accent-blue,#1d4ed8);margin-bottom:12px;">Query all current notifications programmatically.</p>
             <ui-button onclick="testGetAll()" >getAll() Snapshot</ui-button>
             <pre id="getAllOutput" style="margin-top:10px;background:#1e3a5f;color:#93c5fd;padding:10px;border-radius:6px;font-size:11px;max-height:100px;overflow-y:auto;display:none;"></pre>
           </div>
@@ -832,15 +832,15 @@ snackbar.add({
           </div>
 
           <!-- replace() -->
-          <div style="background:#fff7ed; padding:20px; border-radius:12px; border:1px solid #fed7aa;">
+          <div style="background:var(--accent-orange-soft,#fff7ed); padding:20px; border-radius:12px; border:1px solid #fed7aa;">
             <h4 style="color:#9a3412; margin:0 0 6px;">🔄 replace(id, newItem)</h4>
-            <p style="font-size:13px;color:#c2410c;margin-bottom:12px;">Completely swap an existing notification with new content.</p>
+            <p style="font-size:13px;color:var(--accent-orange,#c2410c);margin-bottom:12px;">Completely swap an existing notification with new content.</p>
             <ui-button onclick="testReplaceDemo()" >Replace in 2s</ui-button>
           </div>
 
           <!-- closeNext() fix -->
-          <div style="background:#f1f5f9; padding:20px; border-radius:12px; border:1px solid #cbd5e1;">
-            <h4 style="color:#0f172a; margin:0 0 6px;">🗂 closeNext() — Fixed FIFO/LIFO</h4>
+          <div style="background:var(--bg-tertiary,#f1f5f9); padding:20px; border-radius:12px; border:1px solid #cbd5e1;">
+            <h4 style="color:var(--text-primary,#0f172a); margin:0 0 6px;">🗂 closeNext() — Fixed FIFO/LIFO</h4>
             <p style="font-size:13px;color:#475569;margin-bottom:12px;">Queue mode closes oldest first; Stack removes newest.</p>
             <div style="display:flex;gap:8px;">
               <ui-button onclick="testCloseNext('queue')" >Queue FIFO</ui-button>
@@ -851,7 +851,7 @@ snackbar.add({
           <!-- pauseOnHover -->
           <div style="background:#fefce8; padding:20px; border-radius:12px; border:1px solid #fde68a;">
             <h4 style="color:#854d0e; margin:0 0 6px;">🖱️ pauseOnHover Prop</h4>
-            <p style="font-size:13px;color:#92400e;margin-bottom:12px;">Toggle whether hovering pauses auto-dismiss timers.</p>
+            <p style="font-size:13px;color:var(--accent-yellow,#92400e);margin-bottom:12px;">Toggle whether hovering pauses auto-dismiss timers.</p>
             <div style="display:flex;gap:8px;">
               <ui-button onclick="setPauseOnHover(true)" >Pause ON</ui-button>
               <ui-button onclick="setPauseOnHover(false)" >Pause OFF</ui-button>
@@ -1020,9 +1020,9 @@ snackbar.add({
         </div>
 
         <!-- RTL -->
-        <div style="background:#f5f3ff; padding:20px; border-radius:12px; border:1px solid #ddd6fe;">
+        <div style="background:var(--accent-purple-soft,#f5f3ff); padding:20px; border-radius:12px; border:1px solid #ddd6fe;">
           <h4 style="color:#5b21b6; margin:0 0 6px;">🌐 RTL Support</h4>
-          <p style="font-size:13px;color:#6d28d9;margin-bottom:12px;">Auto-detected from <code>dir="rtl"</code>. Positions and slide animations are mirrored.</p>
+          <p style="font-size:13px;color:var(--accent-purple,#6d28d9);margin-bottom:12px;">Auto-detected from <code>dir="rtl"</code>. Positions and slide animations are mirrored.</p>
           <div style="display:flex;gap:8px;">
             <ui-button onclick="testRTL(true)" >Enable RTL</ui-button>
             <ui-button onclick="testRTL(false)" >Back to LTR</ui-button>

package/dist/collection/assets/js/demos/speed-dial-demo.js

@@ -1,4 +1,4 @@
-// Component Demo Functions
+// Component Demo Functions
 export function initSpeedDialDemo() {
   const section = document.getElementById('speed-dial');
   if (!section) return;
@@ -105,10 +105,10 @@ export function initSpeedDialDemo() {
         <h4>Custom Directions</h4>
         <p style="color: #6b7280;">Force specific opening directions</p>
         <div style="margin-top: 20px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
-          <div style="padding: 10px; background: #fef3c7; border-radius: 6px;">Up</div>
-          <div style="padding: 10px; background: #dbeafe; border-radius: 6px;">Down</div>
-          <div style="padding: 10px; background: #fce7f3; border-radius: 6px;">Left</div>
-          <div style="padding: 10px; background: #dcfce7; border-radius: 6px;">Right</div>
+          <div style="padding: 10px; background:var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">Up</div>
+          <div style="padding: 10px; background:var(--accent-blue-soft,#dbeafe); border-radius: 6px;">Down</div>
+          <div style="padding: 10px; background:var(--accent-pink-soft,#fce7f3); border-radius: 6px;">Left</div>
+          <div style="padding: 10px; background:var(--accent-green-soft,#dcfce7); border-radius: 6px;">Right</div>
         </div>
       </div>
     `;
@@ -207,11 +207,11 @@ export function initSpeedDialDemo() {
         <h4>Color Variants</h4>
         <p style="color: #6b7280; margin-bottom: 20px;">All available color schemes</p>
         <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
-          <div style="padding: 10px; background: #dbeafe; border-radius: 6px;">Primary</div>
+          <div style="padding: 10px; background:var(--accent-blue-soft,#dbeafe); border-radius: 6px;">Primary</div>
           <div style="padding: 10px; background: #e5e7eb; border-radius: 6px;">Secondary</div>
-          <div style="padding: 10px; background: #dcfce7; border-radius: 6px;">Success</div>
-          <div style="padding: 10px; background: #fee2e2; border-radius: 6px;">Danger</div>
-          <div style="padding: 10px; background: #fef3c7; border-radius: 6px;">Warning</div>
+          <div style="padding: 10px; background:var(--accent-green-soft,#dcfce7); border-radius: 6px;">Success</div>
+          <div style="padding: 10px; background:var(--accent-red-soft,#fee2e2); border-radius: 6px;">Danger</div>
+          <div style="padding: 10px; background:var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">Warning</div>
           <div style="padding: 10px; background: #cffafe; border-radius: 6px;">Info</div>
         </div>
       </div>
@@ -401,7 +401,7 @@ export function initSpeedDialDemo() {
     if (!container) return;
 
     container.innerHTML = `
-      <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
+      <div style="background-color:var(--bg-primary,white); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
         <div style="display: flex; gap: 30px; flex-wrap: wrap;">
           <div style="flex: 1; min-width: 300px;">
             <h3>🎮 Interactive Playground</h3>
@@ -549,11 +549,11 @@ export function initSpeedDialDemo() {
             </div>
           </div>
           
-          <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; position: relative; min-height: 500px;">
+          <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); position: relative; min-height: 500px;">
             <h4 style="margin-top: 0;">Preview:</h4>
             <p style="color: #6b7280; font-size: 14px;">Click the button to see the speed dial actions</p>
             <div id="interactiveSpeedDialContainer" style="margin-top: 20px;"></div>
-            <div id="speedDialOutput" style="margin-top: 20px; padding: 10px; background-color: white; border-radius: 4px; font-family: monospace; font-size: 12px; display: none;"></div>
+            <div id="speedDialOutput" style="margin-top: 20px; padding: 10px; background-color:var(--bg-primary,white); border-radius: 4px; font-family: monospace; font-size: 12px; display: none;"></div>
             
             <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
               <ui-button onclick="copySpeedDialCode()" id="copySpeedDialBtn" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s;">Copy</ui-button>
@@ -587,11 +587,11 @@ export function initSpeedDialDemo() {
           margin: 0 auto; 
           border: 2px dashed #cbd5e1; 
           border-radius: 8px; 
-          background: #f8fafc;
+          background:var(--bg-secondary,#f8fafc);
           display: flex; 
           align-items: center; 
           justify-content: center;
-          color: #94a3b8;
+          color:var(--text-secondary,#64748b);
         ">
           <p>I am a relative container</p>
           

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

@@ -49,7 +49,7 @@ window.showSpeedometerPlayground = function () {
     <div class="demo-block">
       <h3>Interactive Playground</h3>
       <div style="display: grid; grid-template-columns: 360px 1fr; gap: 32px;">
-        <div class="control-panel" style="padding: 24px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20px;">
+        <div class="control-panel" style="padding: 24px; background:var(--bg-secondary,#f9fafb); border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20px;">
           <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
             <ui-input id="playValue" label="Target Value" type="number" value="65"></ui-input>
             <ui-input id="playSecondaryValue" label="Secondary Value" type="number" value="45"></ui-input>
@@ -74,21 +74,21 @@ window.showSpeedometerPlayground = function () {
             id="playNeedleShape" 
             label="Needle Style" 
             value="triangle" 
-            data='[{"label": "Triangle", "value": "triangle"}, {"label": "Arrow", "value": "arrow"}, {"label": "Line", "value": "line"}]'
+            options='[{"label": "Triangle", "value": "triangle"}, {"label": "Arrow", "value": "arrow"}, {"label": "Line", "value": "line"}]'
           ></ui-dropdown>
 
-          <div style="display: flex; flex-direction: column; gap: 12px; padding: 12px; background: white; border-radius: 8px; border: 1px solid #e2e8f0;">
+          <div style="display: flex; flex-direction: column; gap: 12px; padding: 12px; background:var(--bg-primary,white); border-radius: 8px; border:1px solid var(--border-default,#e2e8f0);">
             <ui-checkbox id="playInteractive" label="Interactive Drag" checked></ui-checkbox>
             <ui-checkbox id="playShowTicks" label="Show Scale Ticks" checked></ui-checkbox>
             <ui-checkbox id="playGradient" label="Enable Premium Gradient"></ui-checkbox>
           </div>
         </div>
 
-        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border: 1px solid #e5e7eb; border-radius: 16px; padding: 48px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); border-radius: 16px; padding: 48px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
           <div id="playgroundPreview"></div>
           
           <div id="speedometerLog" style="margin-top: 40px; width: 100%; padding: 16px; background: #0f172a; color: #38bdf8; border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; height: 120px; overflow-y: auto; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);">
-             <div style="color: #94a3b8; margin-bottom: 8px; font-weight: 600; border-bottom: 1px solid #1e293b; padding-bottom: 4px;">System Event Log</div>
+             <div style="color:var(--text-secondary,#64748b); margin-bottom: 8px; font-weight: 600; border-bottom: 1px solid #1e293b; padding-bottom: 4px;">System Event Log</div>
              <div id="pg-log-content">Ready for interaction...</div>
           </div>
         </div>
@@ -101,7 +101,7 @@ window.showSpeedometerPlayground = function () {
     const inputs = ['playValue', 'playSecondaryValue', 'playMinValue', 'playMaxValue'];
     inputs.forEach(id => document.getElementById(id)?.addEventListener('inputChange', () => window.updatePlayground()));
     
-    document.getElementById('playNeedleShape')?.addEventListener('dropdownChange', () => window.updatePlayground());
+    document.getElementById('playNeedleShape')?.addEventListener('valueChange', () => globalThis.updatePlayground());
     
     const checkboxes = ['playInteractive', 'playShowTicks', 'playGradient'];
     checkboxes.forEach(id => document.getElementById(id)?.addEventListener('checkboxChange', () => window.updatePlayground()));
@@ -155,10 +155,10 @@ window.showDoubleNeedleDemo = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Target vs Actual Analysis</h3>
-      <p style="color: #64748b; margin-bottom: 40px;">Utilize the secondary needle to provide context, such as targets, thresholds, or historical benchmarks.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 40px;">Utilize the secondary needle to provide context, such as targets, thresholds, or historical benchmarks.</p>
       
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; justify-items: center;">
-        <div style="text-align: center; background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+        <div style="text-align: center; background:var(--bg-primary,white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
           <h4 style="margin-bottom: 32px;">Achievement Target</h4>
           <ui-speedometer 
             value="82" 
@@ -169,18 +169,18 @@ window.showDoubleNeedleDemo = function () {
             size="220"
           ></ui-speedometer>
           <div style="margin-top: 24px; font-size: 14px; display: flex; gap: 16px; justify-content: center; font-weight: 600;">
-            <span style="color: #8b5cf6; display: flex; align-items: center; gap: 6px;">
-              <span style="width: 10px; height: 10px; border-radius: 2px; background: #8b5cf6;"></span>
+            <span style="color:var(--accent-purple,#8b5cf6); display: flex; align-items: center; gap: 6px;">
+              <span style="width: 10px; height: 10px; border-radius: 2px; background: var(--accent-purple,#8b5cf6);"></span>
               Actual (82%)
             </span>
-            <span style="color: #94a3b8; display: flex; align-items: center; gap: 6px;">
+            <span style="color:var(--text-secondary,#64748b); display: flex; align-items: center; gap: 6px;">
               <span style="width: 10px; height: 10px; border-radius: 2px; background: #cbd5e1;"></span>
               Target (95%)
             </span>
           </div>
         </div>
 
-        <div style="text-align: center; background: white; padding: 32px; border-radius: 20px; border: 1px solid #f1f5f9; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+        <div style="text-align: center; background:var(--bg-primary,white); padding: 32px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
           <h4 style="margin-bottom: 32px;">Profit Variance</h4>
           <ui-speedometer 
             value="42" 
@@ -195,7 +195,7 @@ window.showDoubleNeedleDemo = function () {
               <span style="width: 10px; height: 10px; border-radius: 2px; background: #10b981;"></span>
               Q2 (42%)
             </span>
-            <span style="color: #94a3b8; display: flex; align-items: center; gap: 6px;">
+            <span style="color:var(--text-secondary,#64748b); display: flex; align-items: center; gap: 6px;">
               <span style="width: 10px; height: 10px; border-radius: 2px; background: #cbd5e1;"></span>
               Q1 (38%)
             </span>
@@ -214,31 +214,31 @@ window.showDynamicAnglesDemo = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Custom Arc Geometry</h3>
-      <p style="color: #64748b; margin-bottom: 40px;">Define precise start and end angles to fit any UI design requirement, from semi-circles to full orbital displays.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 40px;">Define precise start and end angles to fit any UI design requirement, from semi-circles to full orbital displays.</p>
       
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; justify-items: center;">
         <div style="text-align: center;">
           <h4 style="font-size: 14px; color: #475569; margin-bottom: 16px;">180° Semi-circle</h4>
           <ui-speedometer value="50" start-angle="-90" end-angle="90" size="180" label="Semi"></ui-speedometer>
-          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; color: #64748b;">-90° to 90°</div>
+          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background:var(--bg-tertiary,#f1f5f9); padding: 4px 8px; border-radius: 4px; color:var(--text-secondary,#64748b);">-90° to 90°</div>
         </div>
 
         <div style="text-align: center;">
           <h4 style="font-size: 14px; color: #475569; margin-bottom: 16px;">270° Modern Classic</h4>
           <ui-speedometer value="50" start-angle="-135" end-angle="135" size="180" label="Classic"></ui-speedometer>
-          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; color: #64748b;">-135° to 135°</div>
+          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background:var(--bg-tertiary,#f1f5f9); padding: 4px 8px; border-radius: 4px; color:var(--text-secondary,#64748b);">-135° to 135°</div>
         </div>
 
         <div style="text-align: center;">
           <h4 style="font-size: 14px; color: #475569; margin-bottom: 16px;">360° Orbital Circular</h4>
           <ui-speedometer value="75" start-angle="0" end-angle="360" size="180" label="Fuel"></ui-speedometer>
-          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; color: #64748b;">0° to 360°</div>
+          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background:var(--bg-tertiary,#f1f5f9); padding: 4px 8px; border-radius: 4px; color:var(--text-secondary,#64748b);">0° to 360°</div>
         </div>
         
         <div style="text-align: center;">
           <h4 style="font-size: 14px; color: #475569; margin-bottom: 16px;">90° Vertical Sector</h4>
           <ui-speedometer value="30" start-angle="-90" end-angle="0" size="180" label="Sector"></ui-speedometer>
-          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; color: #64748b;">-90° to 0°</div>
+          <div style="margin-top: 12px; font-family: monospace; font-size: 11px; background:var(--bg-tertiary,#f1f5f9); padding: 4px 8px; border-radius: 4px; color:var(--text-secondary,#64748b);">-90° to 0°</div>
         </div>
       </div>
     </div>
@@ -253,7 +253,7 @@ window.showInteractiveDashboard = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Interactive Controller</h3>
-      <p style="color: #64748b; margin-bottom: 48px;">The speedometer can act as a high-fidelity input device. Drag the needle to control other system metrics.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 48px;">The speedometer can act as a high-fidelity input device. Drag the needle to control other system metrics.</p>
       
       <div style="display: flex; gap: 64px; align-items: center; justify-content: center; flex-wrap: wrap;">
         <div style="text-align: center;">
@@ -271,19 +271,19 @@ window.showInteractiveDashboard = function () {
         </div>
 
         <div style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 32px;">
-          <div style="background: white; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
             <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
-              <span style="font-weight: 700; color: #1e293b;">Active Workload</span>
-              <span id="loadVal" style="font-family: monospace; font-weight: 700; color: #059669; background: #ecfdf5; padding: 2px 8px; border-radius: 4px;">45.0%</span>
+              <span style="font-weight: 700; color:var(--text-primary,#1e293b);">Active Workload</span>
+              <span id="loadVal" style="font-family: monospace; font-weight: 700; color:var(--accent-green,#059669); background: #ecfdf5; padding: 2px 8px; border-radius: 4px;">45.0%</span>
             </div>
-            <div style="height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; border: 1px solid #e2e8f0;">
+            <div style="height: 12px; background:var(--bg-tertiary,#f1f5f9); border-radius: 6px; overflow: hidden; border:1px solid var(--border-default,#e2e8f0);">
               <div id="loadBar" style="height: 100%; width: 45%; background: linear-gradient(90deg, #10b981, #34d399); transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1);"></div>
             </div>
           </div>
 
-          <div style="background: white; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
             <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
-              <span style="font-weight: 700; color: #1e293b;">Optimization Intensity</span>
+              <span style="font-weight: 700; color:var(--text-primary,#1e293b);">Optimization Intensity</span>
               <span id="optVal" style="font-family: monospace; font-weight: 700; color: #0284c7; background: #f0f9ff; padding: 2px 8px; border-radius: 4px;">45</span>
             </div>
             <ui-meter-group id="meterEffect" value="45" max="100"></ui-meter-group>
@@ -320,6 +320,14 @@ window.showBasicSpeedometer = function () {
         <ui-speedometer value="45" max-value="100" unit="km/h" label="Current Velocity" size="200"></ui-speedometer>
         <ui-speedometer value="72" show-percentage label="Engine Efficiency" size="200" needle-color="#3b82f6"></ui-speedometer>
         <ui-speedometer value="28" min-value="-20" max-value="50" unit="°C" label="Atmospheric Temp" size="200" needle-color="#f59e0b"></ui-speedometer>
+        <ui-speedometer
+          value="64"
+          max-value="100"
+          label="Single Color"
+          needle-color="#10b981"
+          ranges='[{"min":0,"max":100,"color":"#10b981"}]'
+          size="200"
+        ></ui-speedometer>
       </div>
     </div>
   `;
@@ -331,7 +339,7 @@ window.showCustomLabelsSpeedometer = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Contextual Scale Mapping</h3>
-      <p style="color: #64748b; margin-bottom: 40px;">Replace numeric scale marks with semantic strings for better readability in specialized domains.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 40px;">Replace numeric scale marks with semantic strings for better readability in specialized domains.</p>
       
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; justify-items: center;">
         <div style="text-align: center;">
@@ -357,25 +365,25 @@ window.showSpeedometerGradients = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Premium Chroma Gradients</h3>
-      <p style="color: #64748b; margin-bottom: 40px;">Apply multi-stop gradients across the gauge arc to visualize intensity, health, or progression.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 40px;">Apply multi-stop gradients across the gauge arc to visualize intensity, health, or progression.</p>
       
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; justify-items: center;">
-        <div style="text-align: center; background: white; padding: 24px; border-radius: 20px; border: 1px solid #f1f5f9;">
+        <div style="text-align: center; background:var(--bg-primary,white); padding: 24px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
           <h4 style="margin-bottom: 24px; font-size: 15px;">Network Throughput</h4>
           <ui-speedometer value="65" gradient-colors='["#3b82f6", "#2dd4bf"]' label="Bandwidth" unit="Mbps" size="200"></ui-speedometer>
         </div>
         
-        <div style="text-align: center; background: white; padding: 24px; border-radius: 20px; border: 1px solid #f1f5f9;">
+        <div style="text-align: center; background:var(--bg-primary,white); padding: 24px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
           <h4 style="margin-bottom: 24px; font-size: 15px;">Thermal Load</h4>
           <ui-speedometer value="85" gradient-colors='["#f59e0b", "#ef4444"]' label="CPU Core 0" unit="°C" size="200"></ui-speedometer>
         </div>
 
-        <div style="text-align: center; background: white; padding: 24px; border-radius: 20px; border: 1px solid #f1f5f9;">
+        <div style="text-align: center; background:var(--bg-primary,white); padding: 24px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
           <h4 style="margin-bottom: 24px; font-size: 15px;">System Security</h4>
           <ui-speedometer value="50" gradient-colors='["#8b5cf6", "#ec4899"]' label="Risk Index" size="200"></ui-speedometer>
         </div>
 
-        <div style="text-align: center; background: white; padding: 24px; border-radius: 20px; border: 1px solid #f1f5f9;">
+        <div style="text-align: center; background:var(--bg-primary,white); padding: 24px; border-radius: 20px; border:1px solid var(--border-subtle,#f1f5f9);">
           <h4 style="margin-bottom: 24px; font-size: 15px;">Eco Drive</h4>
           <ui-speedometer value="70" gradient-colors='["#ef4444", "#fbbf24", "#10b981"]' label="Efficiency" size="200"></ui-speedometer>
         </div>
@@ -390,7 +398,7 @@ window.showSpeedometerLive = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Live Telemetry Simulation</h3>
-      <p style="color: #64748b; margin-bottom: 40px;">Simulate real-time data ingestion and observe the component's smooth interpolation and responsive updates.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 40px;">Simulate real-time data ingestion and observe the component's smooth interpolation and responsive updates.</p>
       
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; margin-top: 30px; justify-items: center;">
         <ui-speedometer id="liveS1" value="30" label="Processor Load" unit="%" size="220" needle-color="#3b82f6"></ui-speedometer>

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

@@ -1,4 +1,4 @@
-export function initSplitButtonDemo() {
+export function initSplitButtonDemo() {
   const section = document.getElementById('split-button');
   if (!section) return;
 
@@ -19,7 +19,7 @@ export function initSplitButtonDemo() {
     <style>
       .demo-btn { padding:8px 16px; background:#f3f4f6; color:#374151; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; font-weight:500; transition:all .2s; }
       .demo-btn:hover { background:#e5e7eb; }
-      .demo-block { background:white; padding:24px; border-radius:12px; border:1px solid #e5e7eb; margin-bottom:24px; }
+      .demo-block { background:var(--bg-primary,white); padding:24px; border-radius:12px; border:1px solid var(--border-default,#e5e7eb); margin-bottom:24px; }
       .demo-block h3 { margin-top:0; margin-bottom:8px; font-size:18px; }
       .demo-block p  { color:#6b7280; font-size:14px; margin-bottom:20px; }
       .demo-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }