npm - atomicuilibrary - Versions diffs - 0.1.0 → 0.1.3 - Mend

atomicuilibrary 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/collection/assets/js/demos/about-demo.js CHANGED Viewed

@@ -1,13 +1,13 @@
-// About Demo / Info Page
+// About Demo / Info Page
 export function initAboutDemo() {
   const section = document.getElementById('about');
   if (!section) return;
   section.innerHTML = `
-    <div style="background-color: white; border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto;">
+    <div style="background-color:var(--bg-primary,white); border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto;">
       <div style="text-align: center; margin-bottom: 40px;">
-        <h1 style="font-size: 2.5rem; color: #1e293b; margin-bottom: 10px;">Modern UI Kit</h1>
-        <p style="font-size: 1.1rem; color: #64748b;">A comprehensive library of high-performance Stencil.js components.</p>
+        <h1 style="font-size: 2.5rem; color:var(--text-primary,#1e293b); margin-bottom: 10px;">Modern UI Kit</h1>
+        <p style="font-size: 1.1rem; color:var(--text-secondary,#64748b);">A comprehensive library of high-performance Stencil.js components.</p>
         <div style="display: flex; justify-content: center; gap: 15px; margin-top: 20px;">
           <ui-pill label="v2.4.0" color="info" variant="outline"></ui-pill>
           <ui-pill label="Production Ready" color="success" variant="outline"></ui-pill>
@@ -16,24 +16,24 @@ export function initAboutDemo() {
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px;">
-        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <div style="padding: 20px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px;">
            <div style="font-size: 24px; margin-bottom: 10px;">⚡</div>
            <h3 style="margin-bottom: 8px;">High Performance</h3>
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Built with Stencil.js for near-native performance and tiny bundle sizes.</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">Built with Stencil.js for near-native performance and tiny bundle sizes.</p>
         </div>
-        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <div style="padding: 20px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px;">
            <div style="font-size: 24px; margin-bottom: 10px;">🎨</div>
            <h3 style="margin-bottom: 8px;">Themeable</h3>
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Full CSS Variable support for deep customization and dark mode out of the box.</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">Full CSS Variable support for deep customization and dark mode out of the box.</p>
         </div>
-        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <div style="padding: 20px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px;">
            <div style="font-size: 24px; margin-bottom: 10px;">🧩</div>
            <h3 style="margin-bottom: 8px;">Framework Agnostic</h3>
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Works with React, Vue, Angular, or plain HTML/JS without overhead.</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">Works with React, Vue, Angular, or plain HTML/JS without overhead.</p>
         </div>
       </div>
-      <div style="background-color: #f8fafc; border-radius: 8px; padding: 30px; border-left: 4px solid #10b981;">
+      <div style="background-color:var(--bg-secondary,#f8fafc); border-radius: 8px; padding: 30px; border-left: 4px solid #10b981;">
         <h4 style="margin-bottom: 15px;">Quick Start Guide</h4>
         <div style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 20px;">
           npm install @company/ui-kit<br><br>
@@ -43,8 +43,8 @@ export function initAboutDemo() {
         <ui-button id="exploreBtn" label="Start Exploring Components" color="success" variant="outline"></ui-button>
       </div>
-      <footer style="margin-top: 50px; text-align: center; border-top: 1px solid #e2e8f0; padding-top: 20px;">
-        <p style="color: #94a3b8; font-size: 12px;">© 2024 Modern UI Systems. All rights reserved.</p>
+      <footer style="margin-top: 50px; text-align: center; border-top:1px solid var(--border-default,#e2e8f0); padding-top: 20px;">
+        <p style="color:var(--text-secondary,#64748b); font-size: 12px;">© 2024 Modern UI Systems. All rights reserved.</p>
       </footer>
     </div>
   `;

package/dist/collection/assets/js/demos/accordion-demo.js CHANGED Viewed

@@ -6,7 +6,7 @@ export function initAccordionDemo() {
   section.innerHTML = `
     <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Collapsible content sections with 15+ powerful features including search, drag & drop, nested items, and more.</p>
-    <div class="demo-controls-wrapper" style="max-height: 250px; overflow-y: auto; padding: 20px; border-radius: 16px; background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.5); border: 1px solid rgba(128, 128, 128, 0.1);">
+    <div class="demo-controls-wrapper" style="max-height: 250px; overflow-y: auto;">
       <div class="demo-grid-wrapper">
         <ui-button id="btnInteractive" label="🎮 Interactive" size="xs" variant="outline"></ui-button>
         <ui-button id="btnBasic" label="Basic" size="xs" variant="outline"></ui-button>
@@ -39,8 +39,8 @@ export function initAccordionDemo() {
         <ui-button id="btnPremiumVariants" label="🎨 Premium Styles" size="xs" variant="outline"></ui-button>
       </div>
     </div>
-    <div id="accordionDemoContainer" style="margin-top: 32px; padding: 32px; background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border-radius: 24px; border: 1px solid #dcfce7; box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.05);"></div>
+    <div id="accordionDemoContainer" style="margin-top: 32px; padding: 32px; background: var(--bg-secondary, #f8fafc); border-radius: 24px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);"></div>
   `;
   // Map of buttons to functions
@@ -250,7 +250,7 @@ export function initAccordionDemo() {
         <h3>⚡ Accordion with Action Buttons</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Add interactive buttons to accordion headers.</p>
         <ui-accordion id="actionsAccordion" icon-library="lucide"></ui-accordion>
-        <div id="actionLog" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px; font-size: 13px; max-height: 150px; overflow-y: auto;"></div>
+        <div id="actionLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f3f4f6); border-radius: 6px; font-size: 13px; max-height: 150px; overflow-y: auto; border: 1px solid var(--border-default, transparent);"></div>
       </div>
     `;
@@ -377,7 +377,7 @@ export function initAccordionDemo() {
         <h3>🎯 Drag & Drop Reordering</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Drag items to reorder them.</p>
         <ui-accordion id="dragDropAccordion" enable-drag-drop="true" icon-library="lucide"></ui-accordion>
-        <div id="reorderLog" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px; font-size: 13px;"></div>
+        <div id="reorderLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f3f4f6); border-radius: 6px; font-size: 13px; border: 1px solid var(--border-default, transparent);"></div>
       </div>
     `;
@@ -512,7 +512,7 @@ export function initAccordionDemo() {
         <h3>📡 Animation Lifecycle Events</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Listen to beforeOpen, afterOpen, beforeClose, afterClose events.</p>
         <ui-accordion id="eventsAccordion" icon-library="lucide"></ui-accordion>
-        <div id="eventLog" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px; font-size: 13px; max-height: 200px; overflow-y: auto;"></div>
+        <div id="eventLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f3f4f6); border-radius: 6px; font-size: 13px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border-default, transparent);"></div>
       </div>
     `;
@@ -560,7 +560,7 @@ export function initAccordionDemo() {
         </div>
         <ui-accordion id="controlledAccordion" multiple="true" icon-library="lucide"></ui-accordion>
-        <div id="controlledLog" style="margin-top: 10px; font-size: 13px; color: #6b7280; padding: 10px; background: #f9fafb; border-radius: 6px;">Current External State: []</div>
+        <div id="controlledLog" style="margin-top: 10px; font-size: 13px; color: #6b7280; padding: 10px; background:var(--bg-secondary,#f9fafb); border-radius: 6px;">Current External State: []</div>
       </div>
     `;
@@ -655,9 +655,9 @@ export function initAccordionDemo() {
         <ui-accordion id="slotAccordion" icon-library="lucide" multiple="true">
           <!-- Custom Content for Item 1 -->
-          <div slot="content-slot1" style="padding: 16px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;">
+          <div slot="content-slot1" style="padding: 16px; background: color-mix(in srgb, var(--color-primary, #10b981) 8%, var(--bg-secondary, #f8fafc)); border: 1px solid var(--border-default, #e2e8f0); border-radius: 8px;">
             <div style="display: flex; gap: 16px; align-items: flex-start;">
-              <div style="width: 48px; height: 48px; background: #0ea5e9; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;">🌟</div>
+              <div style="width: 48px; height: 48px; background: var(--accent-cyan,#0ea5e9); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;">🌟</div>
               <div>
                 <h4 style="margin: 0 0 8px 0; color: #0369a1;">Rich HTML Content</h4>
                 <p style="margin: 0 0 12px 0; font-size: 0.9em; color: #334155; line-height: 1.5;">
@@ -672,14 +672,14 @@ export function initAccordionDemo() {
           </div>
           <!-- Custom Content for Item 2 -->
-          <div slot="content-slot2" style="background: #f8fafc; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0;">
-             <div style="padding: 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 0.9em;">
+          <div slot="content-slot2" style="background:var(--bg-secondary,#f8fafc); border-radius: 8px; overflow: hidden; border:1px solid var(--border-default,#e2e8f0);">
+             <div style="padding: 12px; background:var(--bg-tertiary,#f1f5f9); border-bottom:1px solid var(--border-default,#e2e8f0); font-weight: 600; font-size: 0.9em;">
                User Details
              </div>
              <table style="width: 100%; border-collapse: collapse; font-size: 0.9em;">
-               <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding: 8px 12px; color: #64748b;">Name</td><td style="padding: 8px 12px; font-weight: 500;">John Doe</td></tr>
-               <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding: 8px 12px; color: #64748b;">Email</td><td style="padding: 8px 12px; font-weight: 500;">john@example.com</td></tr>
-               <tr><td style="padding: 8px 12px; color: #64748b;">Status</td><td style="padding: 8px 12px;"><span style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: 12px; font-size: 0.8em;">Active</span></td></tr>
+               <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding: 8px 12px; color:var(--text-secondary,#64748b);">Name</td><td style="padding: 8px 12px; font-weight: 500;">John Doe</td></tr>
+               <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding: 8px 12px; color:var(--text-secondary,#64748b);">Email</td><td style="padding: 8px 12px; font-weight: 500;">john@example.com</td></tr>
+               <tr><td style="padding: 8px 12px; color:var(--text-secondary,#64748b);">Status</td><td style="padding: 8px 12px;"><span style="padding: 2px 8px; background:var(--accent-green-soft,#dcfce7); color: var(--accent-green,#166534); border-radius: 12px; font-size: 0.8em;">Active</span></td></tr>
              </table>
           </div>
         </ui-accordion>
@@ -792,12 +792,12 @@ export function initAccordionDemo() {
       <div class="demo-block">
         <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
           <div>
-            <h3 style="margin: 0; font-size: 1.5rem; font-weight: 800; color: #111827;">📇 Card List Variant</h3>
+            <h3 style="margin: 0; font-size: 1.5rem; font-weight: 800; color:var(--text-primary,#111827);">📇 Card List Variant</h3>
             <p style="color: #6b7280; margin-top: 4px;">Premium navigation-style accordion with tinted icon pills and separated cards.</p>
           </div>
           <div style="display: flex; gap: 8px;">
             <ui-button id="swatchGreen" icon-only shape="circle" size="xxs" style="background: #10b981; --color-solid: #10b981;"></ui-button>
-            <ui-button id="swatchBlue" icon-only shape="circle" size="xxs" style="background: #6366f1; --color-solid: #6366f1;"></ui-button>
+            <ui-button id="swatchBlue" icon-only shape="circle" size="xxs" style="background: var(--accent-indigo,#6366f1); --color-solid: var(--accent-indigo,#6366f1);"></ui-button>
             <ui-button id="swatchRed" icon-only shape="circle" size="xxs" style="background: #f43f5e; --color-solid: #f43f5e;"></ui-button>
           </div>
         </div>
@@ -971,8 +971,8 @@ export function initAccordionDemo() {
         <p style="opacity: 0.7; margin-bottom: 24px;">Try all features and see changes in real-time!</p>
         <div class="playground-settings">
-          <div style="background: #f8fafc; padding: 24px; border-radius: 12px; margin-bottom: 32px; border: 1px solid #e2e8f0;">
-            <h4 style="margin: 0 0 16px 0; color: #1e293b; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">🏗️ Layout & Core</h4>
+          <div class="controls-panel" style="padding: 24px; border-radius: 12px; margin-bottom: 32px;">
+            <h4 style="margin: 0 0 16px 0; color: var(--text-primary, #1e293b); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">🏗️ Layout & Core</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
               <ui-checkbox id="accordionMultiple" label="Multiple Open"></ui-checkbox>
               <ui-checkbox id="accordionShowNumbers" label="Show Numbers"></ui-checkbox>
@@ -984,23 +984,23 @@ export function initAccordionDemo() {
               <ui-checkbox id="accordionLazy" label="Lazy Render"></ui-checkbox>
             </div>
-            <h4 style="margin: 24px 0 16px 0; color: #1e293b; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">🎨 Visuals & Sensory</h4>
+            <h4 style="margin: 24px 0 16px 0; color: var(--text-primary, #1e293b); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">🎨 Visuals & Sensory</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
               <ui-checkbox id="accordionParallax" label="🌌 3D Parallax"></ui-checkbox>
               <ui-checkbox id="accordionHaptics" label="🔊 Audio Haptics"></ui-checkbox>
               <ui-checkbox id="accordionHolographic" label="🔳 3D Depth"></ui-checkbox>
               <ui-checkbox id="accordionSparklines" label="📉 Sparklines"></ui-checkbox>
               <div style="display: flex; align-items: center; gap: 8px;">
-                <label style="font-size: 13px; color: #4b5563;">Header Color</label>
+                <label style="font-size: 13px; color: var(--text-secondary, #4b5563);">Header Color</label>
                 <ui-color-picker id="accordionColor" value="#10b981"></ui-color-picker>
               </div>
               <div style="display: flex; align-items: center; gap: 8px;">
-                <label style="font-size: 13px; color: #4b5563;">Background</label>
+                <label style="font-size: 13px; color: var(--text-secondary, #4b5563);">Background</label>
                 <ui-color-picker id="accordionBgColor" value="#ffffff"></ui-color-picker>
               </div>
             </div>
-            <h4 style="margin: 24px 0 16px 0; color: #1e293b; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">🏛️ Industrial Sovereign</h4>
+            <h4 style="margin: 24px 0 16px 0; color: var(--text-primary, #1e293b); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">🏛️ Industrial Sovereign</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
               <ui-checkbox id="accordionSearch" label="🔍 Search" checked="true"></ui-checkbox>
               <ui-checkbox id="accordionHeatmap" label="🗺️ Heatmap"></ui-checkbox>
@@ -1008,15 +1008,15 @@ export function initAccordionDemo() {
               <ui-checkbox id="accordionQuick" label="🛸 Quick Actions"></ui-checkbox>
               <ui-checkbox id="accordionVoice" label="🎙️ Voice Control"></ui-checkbox>
               <ui-checkbox id="accordionStream" label="📟 Streaming"></ui-checkbox>
-              <ui-checkbox id="accordionBreadcrumbs" label="📂 Breadcrumbs"></ui-checkbox>
+              <ui-checkbox id="accordionBreadcrumbs" label="📂 Breadcrumbs"></ui-spacing>
               <ui-checkbox id="accordionPresence" label="👥 Presence"></ui-checkbox>
               <ui-checkbox id="accordionAI" label="🤖 AI Briefing"></ui-checkbox>
             </div>
-            <h4 style="margin: 24px 0 16px 0; color: #1e293b; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">⚙️ Configuration</h4>
+            <h4 style="margin: 24px 0 16px 0; color: var(--text-primary, #1e293b); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;">⚙️ Configuration</h4>
             <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;">
                <div style="width: 150px;">
-                 <label style="display:block; font-size:12px; margin-bottom:4px;">Variant</label>
+                 <label style="display:block; font-size:12px; margin-bottom:4px; color: var(--text-secondary, inherit);">Variant</label>
                  <ui-dropdown id="accordionVariant" value="default" options='[
                    {"label": "Default", "value": "default"},
                    {"label": "Splitted", "value": "splitted"},
@@ -1027,7 +1027,7 @@ export function initAccordionDemo() {
                  ]'></ui-dropdown>
                </div>
                <div style="width: 120px;">
-                 <label style="display:block; font-size:12px; margin-bottom:4px;">Size</label>
+                 <label style="display:block; font-size:12px; margin-bottom:4px; color: var(--text-secondary, inherit);">Size</label>
                  <ui-dropdown id="accordionSize" value="md" options='[
                    {"label": "Small", "value": "sm"},
                    {"label": "Medium", "value": "md"},
@@ -1035,7 +1035,7 @@ export function initAccordionDemo() {
                  ]'></ui-dropdown>
                </div>
                <div style="width: 120px;">
-                 <label style="display:block; font-size:12px; margin-bottom:4px;">Theme</label>
+                 <label style="display:block; font-size:12px; margin-bottom:4px; color: var(--text-secondary, inherit);">Theme</label>
                  <ui-dropdown id="accordionTheme" value="default" options='[
                    {"label": "Default", "value": "default"},
                    {"label": "Glass", "value": "glass"},
@@ -1043,14 +1043,14 @@ export function initAccordionDemo() {
                  ]'></ui-dropdown>
                </div>
                <div style="width: 120px;">
-                 <label style="display:block; font-size:12px; margin-bottom:4px;">Icon Pos</label>
+                 <label style="display:block; font-size:12px; margin-bottom:4px; color: var(--text-secondary, inherit);">Icon Pos</label>
                  <ui-dropdown id="accordionIconPos" value="end" options='[
                    {"label": "End", "value": "end"},
                    {"label": "Start", "value": "start"}
                  ]'></ui-dropdown>
                </div>
                <div style="width: 120px;">
-                 <label style="display:block; font-size:12px; margin-bottom:4px;">Physics</label>
+                 <label style="display:block; font-size:12px; margin-bottom:4px; color: var(--text-secondary, inherit);">Physics</label>
                  <ui-dropdown id="accordionPhysics" value="stiff" options='[
                    {"label": "Stiff", "value": "stiff"},
                    {"label": "Bouncy", "value": "bouncy"},
@@ -1058,7 +1058,7 @@ export function initAccordionDemo() {
                  ]'></ui-dropdown>
                </div>
                <div style="width: 100px;">
-                 <label style="display:block; font-size:12px; margin-bottom:4px;">Columns</label>
+                 <label style="display:block; font-size:12px; margin-bottom:4px; color: var(--text-secondary, inherit);">Columns</label>
                  <ui-number-input id="accordionCols" value="1" min="1" max="4"></ui-number-input>
                </div>
             </div>
@@ -1253,7 +1253,7 @@ export function initAccordionDemo() {
           Enable <b>autoScroll</b> to automatically scroll the page when an item is expanded off-screen.
           Perfect for long lists or when content is very tall.
         </p>
-        <div style="background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 24px; border: 1px solid #e2e8f0;">
+        <div style="background:var(--bg-secondary,#f8fafc); padding: 20px; border-radius: 8px; margin-bottom: 24px; border:1px solid var(--border-default,#e2e8f0);">
           <p style="margin-top: 0;">Try opening items at the <b>bottom</b> of this list:</p>
           <ui-accordion id="autoScrollAccordion" auto-scroll="true" icon-library="lucide" variant="bordered"></ui-accordion>
         </div>
@@ -1272,7 +1272,7 @@ export function initAccordionDemo() {
             content: `
               <div style="padding: 10px 0;">
                 <p>Detailed content for section ${i}. This is a demonstration of the auto-scroll capabilities.</p>
-                <div style="height: 150px; background: #eaeff2; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-style: italic;">
+                <div style="height: 150px; background: var(--bg-tertiary, #eaeff2); border-radius: 4px; display: flex; align-items: center; justify-content: center; color:var(--text-secondary,#64748b); font-style: italic;">
                   Tall content box (200px)
                 </div>
                 <p style="margin-top: 15px;">When auto-scroll is on, opening this will ensure it's fully visible in your browser window.</p>
@@ -1314,24 +1314,24 @@ export function initAccordionDemo() {
     container.innerHTML = `
       <div class="demo-block">
-        <h3 style="text-align: center; font-weight: 800; letter-spacing: 0.1em; color: #111827; margin-bottom: 8px;">🧬 SEGMENTED KINETIC SYSTEM</h3>
-        <p style="text-align: center; color: #6b7280; margin-bottom: 32px; font-size: 14px;">Apex Tier expansion physics including Bouncy (Spring-like) and Liquid (High viscosity).</p>
+        <h3 style="text-align: center; font-weight: 800; letter-spacing: 0.1em; color: var(--text-primary, #111827); margin-bottom: 8px;">🧬 SEGMENTED KINETIC SYSTEM</h3>
+        <p style="text-align: center; color: var(--text-secondary, #6b7280); margin-bottom: 32px; font-size: 14px;">Apex Tier expansion physics including Bouncy (Spring-like) and Liquid (High viscosity).</p>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 900px; margin: 0 auto;">
-          <div style="background: white; padding: 20px; border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+          <div class="controls-panel" style="padding: 20px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
             <h4 style="margin-bottom: 16px; color: #f43f5e; display: flex; align-items: center; gap: 8px;">
               <span style="width: 8px; height: 8px; border-radius: 50%; background: #f43f5e;"></span>
               Bouncy Physics (Stiff Spring)
             </h4>
-            <p style="font-size: 11px; color: #94a3b8; margin-top: -8px; margin-bottom: 16px;">Uses 1.05x elastic vertical stretch on expansion.</p>
+            <p style="font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: -8px; margin-bottom: 16px;">Uses 1.05x elastic vertical stretch on expansion.</p>
             <ui-accordion id="bouncyAcc" physics="bouncy" selected-header-color="#f43f5e" multiple="true" icon-library="lucide"></ui-accordion>
           </div>
-          <div style="background: white; padding: 20px; border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
-            <h4 style="margin-bottom: 16px; color: #0ea5e9; display: flex; align-items: center; gap: 8px;">
-              <span style="width: 8px; height: 8px; border-radius: 50%; background: #0ea5e9;"></span>
+          <div class="controls-panel" style="padding: 20px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+            <h4 style="margin-bottom: 16px; color:var(--accent-cyan,#0ea5e9); display: flex; align-items: center; gap: 8px;">
+              <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cyan,#0ea5e9);"></span>
               Liquid Physics (High Viscosity)
             </h4>
-            <p style="font-size: 11px; color: #94a3b8; margin-top: -8px; margin-bottom: 16px;">Uses viscous 0.8x-to-1.02x stretch with skew distortion.</p>
+            <p style="font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: -8px; margin-bottom: 16px;">Uses viscous 0.8x-to-1.02x stretch with skew distortion.</p>
             <ui-accordion id="liquidAcc" physics="liquid" selected-header-color="#0ea5e9" animation-duration="600" multiple="true" icon-library="lucide"></ui-accordion>
           </div>
         </div>
@@ -1358,7 +1358,7 @@ export function initAccordionDemo() {
         <h3>🚥 Veto Rejection & Kinetic Shake</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Prevent expansion based on logic and provide kinetic "shake" feedback.</p>
         <ui-accordion id="vetoAcc" variant="card-list" icon-library="lucide"></ui-accordion>
-        <div id="vetoStatus" style="margin-top: 12px; height: 20px; color: #ef4444; font-weight: 600; font-size: 14px; text-align: center;"></div>
+        <div id="vetoStatus" style="margin-top: 12px; height: 20px; color:var(--accent-red,#ef4444); font-weight: 600; font-size: 14px; text-align: center;"></div>
       </div>
     `;
     setTimeout(() => {
@@ -1457,7 +1457,7 @@ export function initAccordionDemo() {
     ];
     container.innerHTML = `
-      <div style="background:#fff; padding: 40px 0;">
+      <div style="background: var(--bg-primary, #ffffff); padding: 40px 0;">
         <!-- Header tag picker -->
         <div style="display:flex; align-items:center; gap:12px; margin-bottom:40px; flex-wrap:wrap;">
@@ -1720,11 +1720,11 @@ export function initAccordionDemo() {
     if (!container) return;
     container.innerHTML = `
-      <div style="background: #0f172a; padding: 60px; border-radius: 24px; color: white; min-height: 800px;">
+      <div style="background: var(--bg-secondary, #f8fafc); padding: 60px; border-radius: 24px; color: var(--text-primary); min-height: 800px; border: 1px solid var(--border-default);">
         <div style="max-width: 1000px; margin: 0 auto;">
           <header style="margin-bottom: 60px; text-align: center;">
              <h2 style="font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #38bdf8, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px;">The Apex God-Tier</h2>
-             <p style="color: #94a3b8; font-size: 1.1rem;">Wizard Mode • Persistence • Glassmorphism • Multi-Column Grid • Lazy Rendering</p>
+             <p style="color:var(--text-secondary,#64748b); font-size: 1.1rem;">Wizard Mode • Persistence • Glassmorphism • Multi-Column Grid • Lazy Rendering</p>
           </header>
           <section style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
@@ -1758,8 +1758,8 @@ export function initAccordionDemo() {
             </div>
           </section>
-          <footer style="margin-top: 60px; border-top: 1px solid #1e293b; padding-top: 30px; display: flex; justify-content: space-between; align-items: center;">
-             <div style="color: #64748b; font-size: 0.9rem;">State automatically saved to localStorage</div>
+          <footer style="margin-top: 60px; border-top: 1px solid var(--border-default); padding-top: 30px; display: flex; justify-content: space-between; align-items: center;">
+             <div style="color:var(--text-secondary,#64748b); font-size: 0.9rem;">State automatically saved to localStorage</div>
              <ui-button id="btnResetGod" variant="ghost" color="secondary" label="Reset state"></ui-button>
           </footer>
         </div>
@@ -1786,7 +1786,7 @@ export function initAccordionDemo() {
           subtitle: 'Identity and Access Management',
           peek: '❌ Token rotation failed for regional subgroup B.',
           content:
-            '<div style="background: rgba(239, 68, 68, 0.05); border: 1px solid #ef4444; padding: 16px; border-radius: 12px; color: #ef4444;">❌ Token rotation failed for regional subgroup B. Permission denied by root-authority.</div>',
+            '<div style="background: rgba(239, 68, 68, 0.05); border: 1px solid #ef4444; padding: 16px; border-radius: 12px; color:var(--accent-red,#ef4444);">❌ Token rotation failed for regional subgroup B. Permission denied by root-authority.</div>',
           status: 'error',
           progress: 12,
           icon: 'lock',
@@ -1861,8 +1861,8 @@ export function initAccordionDemo() {
         <h3>🤖 Industrial Sovereignty: AI & Real-time Collaboration</h3>
         <p style="color: #6b7280; margin-bottom: 24px;">Features: Self-generating AI briefings on hover and cross-tab presence indicators via BroadcastChannel.</p>
-        <div style="margin-bottom: 20px; padding: 12px; background: #f0f9ff; border: 1px dashed #10b981; border-radius: 8px;">
-           <p style="margin: 0; font-size: 13px; color: #1e40af;">
+        <div style="margin-bottom: 20px; padding: 12px; background: color-mix(in srgb, var(--color-primary, #10b981) 8%, var(--bg-secondary, #f8fafc)); border: 1px dashed var(--color-primary, #10b981); border-radius: 8px;">
+           <p style="margin: 0; font-size: 13px;">
              <strong>💡 Verification Steps:</strong>
              <br/>1. <strong>AI Briefings:</strong> Hover over the titles like "System Architecture" — notice the AI-generated bullet points.
              <br/>2. <strong>Collaboration:</strong> Open this page in <strong>two different tabs</strong>. Open/Close items in one tab and watch the presence avatars update in the other.
@@ -1962,8 +1962,8 @@ export function initAccordionDemo() {
     container.innerHTML = `
       <div class="demo-block" style="padding: 0;">
         <div style="margin-bottom: 32px; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 20px;">
-          <h2 style="margin: 0; font-size: 24px; font-weight: 800; color: #0f172a;">🎨 Premium Visual Styles</h2>
-          <p style="color: #64748b; margin: 6px 0 0 0; font-size: 14px;">High-fidelity accordion presets designed to elevate user interfaces.</p>
+          <h2 style="margin: 0; font-size: 24px; font-weight: 800; color:var(--text-primary,#0f172a);">🎨 Premium Visual Styles</h2>
+          <p style="color:var(--text-secondary,#64748b); margin: 6px 0 0 0; font-size: 14px;">High-fidelity accordion presets designed to elevate user interfaces.</p>
         </div>
         <div style="display: flex; flex-direction: column; gap: 48px;">
@@ -1973,37 +1973,37 @@ export function initAccordionDemo() {
             <div style="margin-bottom: 20px;">
               <span style="font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: #ebff00; text-transform: uppercase;">Variant 1 &bull; Dark Mode</span>
               <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: #ffffff;">Boxed / Card Style</h3>
-              <p style="color: #94a3b8; font-size: 13px; margin: 4px 0 0 0;">Stand-alone glassmorphic panels featuring neon-yellow glowing action chevrons.</p>
+              <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin: 4px 0 0 0;">Stand-alone glassmorphic panels featuring neon-yellow glowing action chevrons.</p>
             </div>
             <ui-accordion id="premiumBoxed" variant="boxed" icon-library="lucide"></ui-accordion>
           </div>
           <!-- Minimal Style Showcase (Image 2) -->
-          <div style="padding: 24px; background: #ffffff; border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #e2e8f0;">
+          <div style="padding: 24px; background:var(--bg-primary,#ffffff); border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border:1px solid var(--border-default,#e2e8f0);">
             <div style="margin-bottom: 20px;">
               <span style="font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: #10b981; text-transform: uppercase;">Variant 2 &bull; Typography First</span>
-              <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: #0f172a;">Minimal FAQ Style</h3>
-              <p style="color: #64748b; font-size: 13px; margin: 4px 0 0 0;">Ultra-clean typography with discrete lower-borders and high padding breathability.</p>
+              <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color:var(--text-primary,#0f172a);">Minimal FAQ Style</h3>
+              <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin: 4px 0 0 0;">Ultra-clean typography with discrete lower-borders and high padding breathability.</p>
             </div>
             <ui-accordion id="premiumMinimal" variant="minimal" icon-library="lucide"></ui-accordion>
           </div>
           <!-- Left-Toggle FAQ Style Showcase (Image 3) -->
-          <div style="padding: 24px; background: #ffffff; border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #e2e8f0;">
+          <div style="padding: 24px; background:var(--bg-primary,#ffffff); border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border:1px solid var(--border-default,#e2e8f0);">
             <div style="margin-bottom: 20px;">
-              <span style="font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: #0f172a; text-transform: uppercase;">Variant 3 &bull; Plus/Minus Navigation</span>
-              <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: #0f172a;">Left-Toggle Plus/Minus FAQ</h3>
-              <p style="color: #64748b; font-size: 13px; margin: 4px 0 0 0;">Flat minimal items featuring solid circular dark plus/minus toggle buttons on the left.</p>
+              <span style="font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color:var(--text-primary,#0f172a); text-transform: uppercase;">Variant 3 &bull; Plus/Minus Navigation</span>
+              <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color:var(--text-primary,#0f172a);">Left-Toggle Plus/Minus FAQ</h3>
+              <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin: 4px 0 0 0;">Flat minimal items featuring solid circular dark plus/minus toggle buttons on the left.</p>
             </div>
             <ui-accordion id="premiumLeftToggle" variant="left-toggle" toggle-style="plus-minus" icon-position="start" icon-library="lucide"></ui-accordion>
           </div>
           <!-- Iconic & Rich Media Style Showcase (Image 4) -->
-          <div style="padding: 24px; background: #ffffff; border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #e2e8f0;">
+          <div style="padding: 24px; background:var(--bg-primary,#ffffff); border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border:1px solid var(--border-default,#e2e8f0);">
             <div style="margin-bottom: 20px;">
-              <span style="font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: #6366f1; text-transform: uppercase;">Variant 4 &bull; Rich Experience</span>
-              <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: #0f172a;">Iconic & Rich Media Style</h3>
-              <p style="color: #64748b; font-size: 13px; margin: 4px 0 0 0;">Large prominent left-aligned brand/feature icons, clean toggles, and rich columns layout inside.</p>
+              <span style="font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color:var(--accent-indigo,#6366f1); text-transform: uppercase;">Variant 4 &bull; Rich Experience</span>
+              <h3 style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color:var(--text-primary,#0f172a);">Iconic & Rich Media Style</h3>
+              <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin: 4px 0 0 0;">Large prominent left-aligned brand/feature icons, clean toggles, and rich columns layout inside.</p>
             </div>
             <ui-accordion id="premiumIconic" variant="iconic" toggle-style="plus-minus" icon-library="lucide"></ui-accordion>
           </div>
@@ -2068,11 +2068,11 @@ export function initAccordionDemo() {
             title: 'What\'s an accordion?',
             content: `
               <div style="margin-bottom:4px;">
-                <h4 style="margin: 0 0 4px 0; font-size: 13px; font-weight: 700; color: #1e293b;">Show/Hide operation</h4>
+                <h4 style="margin: 0 0 4px 0; font-size: 13px; font-weight: 700; color:var(--text-primary,#1e293b);">Show/Hide operation</h4>
                 <p style="margin:0 0 16px 0; font-size: 13px; color: #475569;">An accordion always contains the category title, an expanded and a collapsed state, an icon indicating expansion, and the spacing between them.</p>
-                <h4 style="margin: 0 0 4px 0; font-size: 13px; font-weight: 700; color: #1e293b;">Tabbed interface</h4>
+                <h4 style="margin: 0 0 4px 0; font-size: 13px; font-weight: 700; color:var(--text-primary,#1e293b);">Tabbed interface</h4>
                 <p style="margin:0 0 16px 0; font-size: 13px; color: #475569;">A list of items where exactly one item is expanded into a panel.</p>
-                <button style="padding: 6px 12px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.2s ease;">Read more</button>
+                <button style="padding: 6px 12px; background:var(--bg-primary,#ffffff); border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.2s ease;">Read more</button>
               </div>
             `
           },