atomicuilibrary 0.0.1 → 0.1.3

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

@@ -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>
@@ -36,10 +36,11 @@ export function initAccordionDemo() {
         <ui-button id="btnGodTier" label="⚡ God-Tier" size="xs" variant="outline"></ui-button>
         <ui-button id="btnZenith" label="🛠️ Zenith" size="xs" variant="outline"></ui-button>
         <ui-button id="btnVeto" label="🚥 Veto" size="xs" variant="outline"></ui-button>
+        <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
@@ -72,6 +73,7 @@ export function initAccordionDemo() {
     btnGodTier: showGodTierDemo,
     btnZenith: showZenithControls,
     btnVeto: showVetoAccordion,
+    btnPremiumVariants: showPremiumVariants,
   };
 
   const updateActiveDemoButton = selectedId => {
@@ -248,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>
     `;
 
@@ -375,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>
     `;
 
@@ -510,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>
     `;
 
@@ -558,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>
     `;
 
@@ -653,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;">
@@ -670,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>
@@ -790,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>
@@ -969,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>
@@ -982,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>
@@ -1006,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"},
@@ -1025,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"},
@@ -1033,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"},
@@ -1041,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"},
@@ -1056,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>
@@ -1251,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>
@@ -1270,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>
@@ -1312,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>
@@ -1356,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(() => {
@@ -1455,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;">
@@ -1718,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;">
@@ -1756,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>
@@ -1784,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',
@@ -1859,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.
@@ -1951,4 +1953,191 @@ export function initAccordionDemo() {
       }
     }, 50);
   }
+
+  // Premium Visual Variants Showcase (Image 1, 2, 3, 4)
+  function showPremiumVariants() {
+    const container = document.getElementById('accordionDemoContainer');
+    if (!container) return;
+
+    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: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;">
+          
+          <!-- Boxed Style Showcase (Image 1) -->
+          <div style="padding: 24px; background: radial-gradient(circle at top left, #2d3032, #18191a); border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.05);">
+            <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: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: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: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: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: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: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: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>
+
+        </div>
+      </div>
+    `;
+
+    setTimeout(() => {
+      // 1. Boxed Setup
+      const boxedAcc = document.getElementById('premiumBoxed');
+      if (boxedAcc) {
+        boxedAcc.items = [
+          {
+            id: 'bx1',
+            title: 'Accordion',
+            content: 'This is a so-called "accordion" that enables you to expand and collapse its contents.',
+          }
+        ];
+        boxedAcc.defaultOpen = ['bx1'];
+      }
+
+      // 2. Minimal Setup
+      const minimalAcc = document.getElementById('premiumMinimal');
+      if (minimalAcc) {
+        minimalAcc.items = [
+          {
+            id: 'min1',
+            title: 'What is an accordion format?',
+            content: 'An accordion format is a stacked list of headers that users can click to reveal or hide associated content.'
+          },
+          {
+            id: 'min2',
+            title: 'What are accordions?',
+            content: 'It is a vertically stacked list of headers that, when clicked, reveals or hides the content associated within them. Instead of overwhelming consumers with longform content, accordions are employed in designs to deliver content to users in a more progressive manner.'
+          },
+          {
+            id: 'min3',
+            title: 'When are accordions used in designs?',
+            content: 'Accordions are useful when users need a high-level overview of the content hierarchy before diving into specific details.'
+          },
+          {
+            id: 'min4',
+            title: 'Does accordions improve user experience?',
+            content: 'Yes! By chunking content and revealing it progressively, accordions significantly reduce cognitive load and simplify complex page navigation.'
+          }
+        ];
+        minimalAcc.defaultOpen = ['min2'];
+      }
+
+      // 3. Left-Toggle Setup
+      const leftAcc = document.getElementById('premiumLeftToggle');
+      if (leftAcc) {
+        leftAcc.items = [
+          {
+            id: 'lt1',
+            title: 'When and how it should be used?',
+            content: 'Use accordions when users only need select pieces of information, helping keep the page compact and readable.'
+          },
+          {
+            id: 'lt2',
+            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: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: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: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>
+            `
+          },
+          {
+            id: 'lt3',
+            title: 'What if the user clicks on a collapsed card while another card is open?',
+            content: 'Depending on the multi-expand configuration, it either collapses the previously open card or keeps both open simultaneously.'
+          },
+          {
+            id: 'lt4',
+            title: 'How to choose an icon to indicate expansion?',
+            content: 'Chevron symbols are most common, but plus/minus symbols are highly effective for direct FAQs or tab-like action cards.'
+          }
+        ];
+        leftAcc.defaultOpen = ['lt2'];
+      }
+
+      // 4. Iconic & Rich Media Setup
+      const iconicAcc = document.getElementById('premiumIconic');
+      if (iconicAcc) {
+        iconicAcc.items = [
+          {
+            id: 'ic1',
+            title: 'Views',
+            subtitle: 'Save time by creating and saving filtered views',
+            content: 'Create dynamic, custom views that let you filter and organize your log data instantly based on severity, tags, or components.',
+            icon: 'eye'
+          },
+          {
+            id: 'ic2',
+            title: 'Alerts',
+            subtitle: 'Save information about your system\'s activity',
+            content: `
+              <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
+                <div style="flex: 1; min-width: 250px;">
+                  <p style="margin: 0 0 16px 0; color: #475569; font-size: 14px; line-height: 1.6;">
+                    Whether it's a system outage or an increase in activity, you need to know! Leverage LogDNA's alert feature to be informed on your system's activity. LogDNA integrates with many 3rd party solutions, so you can receive alerts with other applications like pagerDuty, slack, or another API.
+                  </p>
+                </div>
+                <div style="width: 240px; height: 135px; border-radius: 12px; background: linear-gradient(135deg, #1e1b4b 0%, #311042 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15); flex-shrink: 0;">
+                  <div style="position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">&#9658;</div>
+                  <div style="color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 60px; font-weight: 500;">Live Video Stream</div>
+                </div>
+              </div>
+            `,
+            icon: 'bell'
+          },
+          {
+            id: 'ic3',
+            title: 'Boards & Graphs',
+            subtitle: 'Identify trends in your system\'s activity',
+            content: 'Visualize real-time trends, query metrics, and configure charts to quickly pinpoint anomalies in performance.',
+            icon: 'bar-chart-2'
+          },
+          {
+            id: 'ic4',
+            title: 'Screen',
+            subtitle: 'Display daily log activity from all your systems',
+            content: 'Centralize log management streams across cloud containers, virtual instances, and local microservices in one clean telemetry board.',
+            icon: 'monitor'
+          }
+        ];
+        iconicAcc.defaultOpen = ['ic2'];
+      }
+
+    }, 50);
+  }
 }