atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/assets/js/demos/command-palette-demo.js

@@ -19,87 +19,204 @@ const DEMO_COMMANDS = [
 ];
 
 export function initCommandPaletteDemo() {
-  const container = document.getElementById('command-palette');
-  if (!container) return;
+  const section = document.getElementById('command-palette');
+  if (!section) return;
+
+  section.innerHTML = `
+    <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Fuzzy-search powered control center. Press <kbd style="background:var(--bg-secondary,#f1f5f9);border:1px solid var(--border-default,#e2e8f0);border-radius:4px;padding:1px 6px;font-size:12px;font-weight:700;">⌘K</kbd> or click Open to activate.</p>
+    <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
+      <ui-button data-demo="showcase" variant="outline">Showcase</ui-button>
+      <ui-button data-demo="groups" variant="outline">Groups &amp; Shortcuts</ui-button>
+      <ui-button data-demo="config" variant="outline">Configuration</ui-button>
+      <ui-button data-demo="activitylog" variant="outline">Activity Log</ui-button>
+    </div>
+    <div id="cpContainer" style="margin-top: 20px;"></div>
+  `;
+
+  const container = section.querySelector('#cpContainer');
   const commandsJson = JSON.stringify(DEMO_COMMANDS);
+  const escapedCommands = commandsJson.replace(/'/g, '&#39;');
+
+  const showShowcase = () => {
+    container.innerHTML = `
+      <div class="demo-block">
+        <h3>Command Palette</h3>
+        <p style="font-size:13px;color:var(--text-secondary,#64748b);margin-bottom:24px;">A global search-driven command launcher. Supports fuzzy matching, keyboard navigation, grouped commands, shortcuts display, and recent command history.</p>
+
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">Try It</h4>
+        <div style="display:flex;justify-content:center;padding:32px 0;">
+          <ui-button id="cp-showcase-open" variant="solid" color="primary" size="large">Open Command Palette</ui-button>
+        </div>
+
+        <ui-command-palette id="cp-showcase-palette" commands='${escapedCommands}' shortcut="k" show-recent="true" max-visible="8"></ui-command-palette>
+
+        <h4 style="margin:24px 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">Features</h4>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;">
+          ${['🔍 Fuzzy search algorithm', '⌨️ Full keyboard navigation', '📁 Command group headers', '⚡ Shortcut badges', '🕐 Recent command history', '🔲 Focus trap &amp; ARIA'].map(f => `
+            <div style="padding:10px 14px;background:var(--bg-secondary,#f8fafc);border-radius:8px;font-size:13px;color:var(--text-secondary,#64748b);">${f}</div>
+          `).join('')}
+        </div>
+      </div>
+    `;
+    const btn = container.querySelector('#cp-showcase-open');
+    const palette = container.querySelector('#cp-showcase-palette');
+    if (btn && palette) btn.addEventListener('click', () => palette.show());
+  };
+
+  const showGroups = () => {
+    const fileCommands = JSON.stringify(DEMO_COMMANDS.filter(c => c.group === 'File'));
+    const editCommands = JSON.stringify(DEMO_COMMANDS.filter(c => c.group === 'Edit'));
+    const gitCommands = JSON.stringify(DEMO_COMMANDS.filter(c => c.group === 'Git'));
+
+    container.innerHTML = `
+      <div class="demo-block">
+        <h3>Groups &amp; Shortcuts</h3>
+        <p style="font-size:13px;color:var(--text-secondary,#64748b);margin-bottom:24px;">Commands are organized into named groups. Each command can carry a <code>shortcut</code> string that is displayed alongside its label in the list.</p>
+
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">File Commands</h4>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;">
+          <ui-button id="cp-file-open" variant="outline" size="small">Open File Palette</ui-button>
+          <ui-command-palette id="cp-file-palette" commands='${fileCommands.replace(/'/g, '&#39;')}'></ui-command-palette>
+        </div>
 
-  container.innerHTML = `
-    <div class="demo-wrapper">
-      <div class="demo-header-section" style="margin-bottom: 24px;">
-        <h2 class="demo-section-title">Command Palette</h2>
-        <p class="demo-section-subtitle">Fuzzy-search enabled control center for complex applications.</p>
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">Edit Commands</h4>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;">
+          <ui-button id="cp-edit-open" variant="outline" size="small">Open Edit Palette</ui-button>
+          <ui-command-palette id="cp-edit-palette" commands='${editCommands.replace(/'/g, '&#39;')}'></ui-command-palette>
+        </div>
+
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">Git Commands</h4>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;">
+          <ui-button id="cp-git-open" variant="outline" size="small">Open Git Palette</ui-button>
+          <ui-command-palette id="cp-git-palette" commands='${gitCommands.replace(/'/g, '&#39;')}'></ui-command-palette>
+        </div>
       </div>
+    `;
+    const pairs = [
+      ['#cp-file-open', '#cp-file-palette'],
+      ['#cp-edit-open', '#cp-edit-palette'],
+      ['#cp-git-open', '#cp-git-palette'],
+    ];
+    pairs.forEach(([btnSel, palSel]) => {
+      const btn = container.querySelector(btnSel);
+      const pal = container.querySelector(palSel);
+      if (btn && pal) btn.addEventListener('click', () => pal.show());
+    });
+  };
 
-      <div class="demo-block" style="text-align: center; padding: 60px 40px;">
-        <div style="max-width: 600px; margin: 0 auto;">
-          <p style="font-size: 16px; color: var(--text-secondary); margin-bottom: 32px;">
-            Press <kbd style="background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 6px; padding: 4px 10px; font-size: 14px; font-family: inherit; font-weight: 700; color: var(--text-primary);">Ctrl/⌘ + K</kbd>
-            to activate the command palette globally.
-          </p>
+  const showConfig = () => {
+    container.innerHTML = `
+      <div class="demo-block">
+        <h3>Configuration</h3>
+        <p style="font-size:13px;color:var(--text-secondary,#64748b);margin-bottom:24px;">Tune the palette behavior with <code>placeholder</code>, <code>max-visible</code>, <code>show-recent</code>, and <code>shortcut</code> props.</p>
+
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">Custom Placeholder</h4>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px;">
+          <ui-button id="cp-ph-open" variant="outline" size="small">Open</ui-button>
+          <span style="font-size:12px;color:var(--text-secondary,#64748b);">placeholder="Search actions…"</span>
+          <ui-command-palette id="cp-ph-palette" commands='${escapedCommands}' placeholder="Search actions…"></ui-command-palette>
+        </div>
+
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">Limited Visible Items</h4>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px;">
+          <ui-button id="cp-mv-open" variant="outline" size="small">Open</ui-button>
+          <span style="font-size:12px;color:var(--text-secondary,#64748b);">max-visible="3"</span>
+          <ui-command-palette id="cp-mv-palette" commands='${escapedCommands}' max-visible="3"></ui-command-palette>
+        </div>
 
-          <ui-button id="cp-open-btn" variant="outline" color="primary" label="Open Palette (⌘K)" size="large" style="min-width: 240px;"></ui-button>
+        <h4 style="margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:0.05em;">No Recent History</h4>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;">
+          <ui-button id="cp-nr-open" variant="outline" size="small">Open</ui-button>
+          <span style="font-size:12px;color:var(--text-secondary,#64748b);">show-recent="false"</span>
+          <ui-command-palette id="cp-nr-palette" commands='${escapedCommands}' show-recent="false"></ui-command-palette>
         </div>
       </div>
+    `;
+    const pairs = [
+      ['#cp-ph-open', '#cp-ph-palette'],
+      ['#cp-mv-open', '#cp-mv-palette'],
+      ['#cp-nr-open', '#cp-nr-palette'],
+    ];
+    pairs.forEach(([btnSel, palSel]) => {
+      const btn = container.querySelector(btnSel);
+      const pal = container.querySelector(palSel);
+      if (btn && pal) btn.addEventListener('click', () => pal.show());
+    });
+  };
+
+  const showActivityLog = () => {
+    container.innerHTML = `
+      <div class="demo-block">
+        <h3>Activity Log</h3>
+        <p style="font-size:13px;color:var(--text-secondary,#64748b);margin-bottom:24px;">Listen to the <code>commandSelect</code> event to react when a command is chosen. Each selection is logged below in real time.</p>
 
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px;">
-        <div class="demo-block" style="margin-bottom: 0;">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px;">Premium Features</h4>
-          <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px;">
-            ${['🔍 Fuzzy search algorithm', '⌨ Advanced keyboard logic', '📁 Category grouping', '⚡ Shortcut visualization', '🕐 Execution history', '🔲 Focus management'].map(f => `
-              <li style="display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary);">
-                <span style="color: var(--success-color); font-size: 18px;">•</span> ${f}
-              </li>
-            `).join('')}
-          </ul>
+        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:center;">
+          <ui-button id="cp-log-open" variant="solid" color="primary" size="small">Open Palette</ui-button>
+          <ui-button id="cp-log-clear" variant="outline" size="small">Clear Log</ui-button>
         </div>
 
-        <div class="demo-block" style="margin-bottom: 0;">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px;">Activity Stream</h4>
-          <div id="cp-log" style="font-family: inherit; font-size: 13px; color: var(--text-secondary); max-height: 200px; overflow-y: auto;">
-            <div style="color: var(--text-tertiary); font-style: italic;">No commands executed yet...</div>
-          </div>
+        <ui-command-palette id="cp-log-palette" commands='${escapedCommands}' show-recent="true"></ui-command-palette>
+
+        <div id="cp-log" style="padding:16px;background:var(--bg-secondary,#f8fafc);border-radius:12px;border:1px solid var(--border-default,#e2e8f0);min-height:160px;max-height:280px;overflow-y:auto;font-size:13px;">
+          <div id="cp-log-empty" style="color:var(--text-secondary,#64748b);font-style:italic;">No commands selected yet…</div>
         </div>
       </div>
-    </div>
+    `;
+    const openBtn = container.querySelector('#cp-log-open');
+    const clearBtn = container.querySelector('#cp-log-clear');
+    const palette = container.querySelector('#cp-log-palette');
+    const log = container.querySelector('#cp-log');
 
-    <ui-command-palette id="demo-palette" commands='${commandsJson.replace(/'/g, '&#39;')}'></ui-command-palette>
-
-    <style>
-      .demo-block {
-        background: var(--bg-primary);
-        padding: 32px;
-        border-radius: 20px;
-        border: 1px solid var(--border-default);
-        box-shadow: var(--shadow-sm);
-        margin-bottom: 24px;
-      }
-      .demo-section-title { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin: 0; }
-      .demo-section-subtitle { font-size: 1rem; color: var(--text-secondary); margin-top: 4px; }
-    </style>
-  `;
+    if (openBtn && palette) openBtn.addEventListener('click', () => palette.show());
+    if (clearBtn && log) {
+      clearBtn.addEventListener('click', () => {
+        log.innerHTML = '<div id="cp-log-empty" style="color:var(--text-secondary,#64748b);font-style:italic;">No commands selected yet…</div>';
+      });
+    }
+    if (palette && log) {
+      palette.addEventListener('commandSelect', e => {
+        const cmd = e.detail;
+        const emptyMsg = log.querySelector('#cp-log-empty');
+        if (emptyMsg) emptyMsg.remove();
+        const entry = document.createElement('div');
+        entry.style.cssText = 'padding:8px 12px;margin-bottom:8px;background:var(--bg-primary,#fff);border-radius:8px;border-left:3px solid var(--primary-color,#6366f1);display:flex;align-items:center;gap:10px;';
+        entry.innerHTML = `
+          <span style="font-size:16px;">${cmd.icon || '▶'}</span>
+          <span style="font-weight:600;color:var(--text-primary,#111827);flex:1;">${cmd.label}</span>
+          ${cmd.group ? `<span style="color:var(--text-secondary,#64748b);font-size:11px;background:var(--bg-secondary,#f1f5f9);padding:2px 8px;border-radius:4px;">${cmd.group}</span>` : ''}
+          ${cmd.shortcut ? `<kbd style="font-size:11px;background:var(--bg-secondary,#f1f5f9);border:1px solid var(--border-default,#e2e8f0);border-radius:4px;padding:1px 6px;">${cmd.shortcut}</kbd>` : ''}
+        `;
+        log.prepend(entry);
+      });
+    }
+  };
 
-  const palette = container.querySelector('#demo-palette');
-  const openBtn = container.querySelector('#cp-open-btn');
-  const log = container.querySelector('#cp-log');
+  const demoMap = {
+    showcase: showShowcase,
+    groups: showGroups,
+    config: showConfig,
+    activitylog: showActivityLog,
+  };
 
-  if (openBtn && palette) {
-    openBtn.addEventListener('click', () => palette.show());
+  const nav = section.querySelector('.demo-controls');
+  if (nav) {
+    nav.querySelectorAll('ui-button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const demo = btn.getAttribute('data-demo');
+        if (demoMap[demo]) demoMap[demo]();
+        nav.querySelectorAll('ui-button').forEach(b => {
+          b.variant = b.getAttribute('data-demo') === demo ? 'solid' : 'outline';
+          b.color = b.getAttribute('data-demo') === demo ? 'primary' : 'none';
+        });
+      });
+    });
   }
 
-  if (palette && log) {
-    palette.addEventListener('commandSelect', e => {
-      const cmd = e.detail;
-      const entry = document.createElement('div');
-      entry.style.cssText = 'padding: 8px 12px; margin-bottom: 8px; background: var(--bg-secondary); border-radius: 8px; border-left: 3px solid var(--primary-color); display: flex; align-items: center; gap: 8px;';
-      entry.innerHTML = `
-        <span style="font-size: 16px;">${cmd.icon || '▶'}</span>
-        <span style="font-weight: 600; color: var(--text-primary);">${cmd.label}</span>
-        ${cmd.group ? `<span style="color: var(--text-tertiary); font-size: 11px; margin-left: auto;">${cmd.group}</span>` : ''}
-      `;
-      
-      const emptyMsg = log.querySelector('div[style*="italic"]');
-      if (emptyMsg) emptyMsg.remove();
-      log.prepend(entry);
+  setTimeout(() => {
+    showShowcase();
+    nav?.querySelectorAll('ui-button').forEach(b => {
+      b.variant = b.getAttribute('data-demo') === 'showcase' ? 'solid' : 'outline';
+      b.color = b.getAttribute('data-demo') === 'showcase' ? 'primary' : 'none';
     });
-  }
+  }, 50);
 }

package/dist/collection/assets/js/demos/complex-form-demo.js

@@ -1,15 +1,15 @@
-export function initComplexFormDemo() {
+export function initComplexFormDemo() {
   const section = document.getElementById('complex-form');
   if (!section) return;
   section.innerHTML = `
     <div style="padding: 40px; max-width: 900px; margin: 0 auto;">
       <h2 style="margin-bottom: 8px;">Complex Data Entry Form</h2>
-      <p style="color: #64748b; margin-bottom: 32px;">This demo showcases a multi-section form using various input components natively inlined.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 32px;">This demo showcases a multi-section form using various input components natively inlined.</p>
       
-      <div style="display: grid; gap: 32px; background: white; padding: 40px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+      <div style="display: grid; gap: 32px; background:var(--bg-primary,white); padding: 40px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
         
         <section>
-          <h4 style="margin-bottom: 20px; color: #1e293b; border-bottom: 2px solid #f1f5f9; padding-bottom: 8px;">Project Details</h4>
+          <h4 style="margin-bottom: 20px; color:var(--text-primary,#1e293b); border-bottom: 2px solid #f1f5f9; padding-bottom: 8px;">Project Details</h4>
           <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
             <ui-input label="Project Name" placeholder="My Enterprise App"></ui-input>
             <ui-input label="Repository URL" value="https://github.com/org/repo"></ui-input>
@@ -18,7 +18,7 @@ export function initComplexFormDemo() {
         </section>
 
         <section>
-          <h4 style="margin-bottom: 20px; color: #1e293b; border-bottom: 2px solid #f1f5f9; padding-bottom: 8px;">Configuration</h4>
+          <h4 style="margin-bottom: 20px; color:var(--text-primary,#1e293b); border-bottom: 2px solid #f1f5f9; padding-bottom: 8px;">Configuration</h4>
           <div style="display: flex; flex-direction: column; gap: 20px;">
             <div style="display: flex; justify-content: space-between; align-items: center;">
               <span>Enable Advanced Telemetry</span>

package/dist/collection/assets/js/demos/context-menu-demo.js

@@ -1,4 +1,4 @@
-// Component Demo Functions
+// Component Demo Functions
 const basicMenuItems = [
   { id: 'cut', label: 'Cut', icon: 'scissors' },
   { id: 'copy', label: 'Copy', icon: 'copy' },
@@ -457,18 +457,18 @@ export function initContextMenuDemo() {
 
   setTimeout(() => {
     const btnMap = {
-      btnBasicMenu: window.showBasicContextMenu,
-      btnIconMenu: window.showIconContextMenu,
-      btnDisabledItems: window.showDisabledItems,
-      btnFourLevelMenu: window.showFourLevelContextMenu,
-      btnPremiumMenu: window.showPremiumContextMenu,
-      btnSlotVirtualMenu: window.showSlotVirtualContextMenu,
-      btnInteractiveMenu: window.showInteractiveContextMenu,
-      btnValidationMenu: window.showMissingFeaturesValidation,
+      btnBasicMenu: 'showBasicContextMenu',
+      btnIconMenu: 'showIconContextMenu',
+      btnDisabledItems: 'showDisabledItems',
+      btnFourLevelMenu: 'showFourLevelContextMenu',
+      btnPremiumMenu: 'showPremiumContextMenu',
+      btnSlotVirtualMenu: 'showSlotVirtualContextMenu',
+      btnInteractiveMenu: 'showInteractiveContextMenu',
+      btnValidationMenu: 'showMissingFeaturesValidation',
     };
 
-    Object.entries(btnMap).forEach(([id, func]) => {
-      document.getElementById(id)?.addEventListener('click', () => func());
+    Object.entries(btnMap).forEach(([id, funcName]) => {
+      document.getElementById(id)?.addEventListener('click', () => window[funcName]?.());
     });
 
     // Context Menu Demo Functions
@@ -479,10 +479,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>Basic Context Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">Right-click on the area below</p>
-        <div id="basicTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="basicTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="mouse-pointer-2" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="mouse-pointer-2" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click here to open menu</div>
           </div>
@@ -501,7 +501,7 @@ export function initContextMenuDemo() {
           function logAction(action) {
             const log = document.querySelector('#menuLog div');
             if (log) {
-              log.innerHTML = `<div style="color: #1e40af;"><strong>${action}</strong> clicked at ${new Date().toLocaleTimeString()}</div>`;
+              log.innerHTML = `<div style="color:var(--accent-blue,#1e40af);"><strong>${action}</strong> clicked at ${new Date().toLocaleTimeString()}</div>`;
             }
           }
           // Add event listener for menu item clicks
@@ -529,10 +529,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>Nested Submenus</h4>
         <p style="color: #6b7280; font-size: 13px;">Multi-level cascading menu</p>
-        <div id="nestedTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="nestedTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="folder" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="folder" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for file operations</div>
           </div>
@@ -562,10 +562,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>Context Menu with Rich Icons</h4>
         <p style="color: #6b7280; font-size: 13px;">Emoji icons with visual hierarchy</p>
-        <div id="iconTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="iconTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="palette" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="palette" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for formatting options</div>
           </div>
@@ -595,10 +595,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>4-Level Submenu Example</h4>
         <p style="color: #6b7280; font-size: 13px;">Demonstrates a deep submenu structure with 4 levels</p>
-        <div id="fourLevelTarget" style="min-height: 220px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="fourLevelTarget" style="min-height: 220px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="compass" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="compass" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click to explore submenus</div>
           </div>
@@ -629,7 +629,7 @@ export function initContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>Rich Text Editor Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">Complete editor context menu with nested options</p>
-        <div id="editorTarget" style="min-height: 250px; border: 2px solid #cbd5e1; border-radius: 8px; padding: 20px; background: white; cursor: text; margin: 20px 0; font-family: monospace; font-size: 14px;">
+        <div id="editorTarget" style="min-height: 250px; border: 2px solid #cbd5e1; border-radius: 8px; padding: 20px; background:var(--bg-primary,white); cursor: text; margin: 20px 0; font-family: monospace; font-size: 14px;">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
           <br><br>
           <strong>Right-click anywhere</strong> in this text area to access formatting and editing options.
@@ -659,10 +659,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>File Explorer Context Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">File system operations with nested actions</p>
-        <div id="fileTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="fileTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="folder-open" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="folder-open" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px; font-weight: 600;">Project Files</div>
             <div style="color: #9ca3af; font-size: 12px; margin-top: 4px;">Right-click for file operations</div>
@@ -693,10 +693,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>Context Menu with Actions</h4>
         <p style="color: #6b7280; font-size: 13px;">Interactive menu with live action feedback</p>
-        <div id="actionTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="actionTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="zap" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="zap" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click to execute actions</div>
           </div>
@@ -765,10 +765,10 @@ export function initContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>Context Menu with Disabled Items</h4>
         <p style="color: #6b7280; font-size: 13px;">Some menu items are disabled and cannot be clicked</p>
-        <div id="disabledTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="disabledTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
            <div style="margin-bottom: 10px;">
-              <ui-icon name="ban" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="ban" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click to see disabled items</div>
           </div>
@@ -867,7 +867,7 @@ export function initContextMenuDemo() {
         <h4 style="margin-top:0;">Slot + Virtual Menu</h4>
         <p style="color:#6b7280; font-size:13px;">Custom item templates, lazy loading, virtualization, and beforeClose hooks combine for high-velocity actions.</p>
         <div id="slotVirtualLog" style="margin-top:12px; padding:12px; border-radius:8px; background:#f4f5ff; border:1px solid #c7d2fe; font-family:monospace; font-size:12px; height:180px; overflow-y:auto;">
-          <div style="color:#4338ca;">Log ready...</div>
+          <div style="color:var(--accent-indigo,#4338ca);">Log ready...</div>
         </div>
       </div>
       <div style="flex:1; min-width:260px;">
@@ -899,23 +899,23 @@ export function initContextMenuDemo() {
         gap:2px;
         padding:6px 12px;
         border-radius:8px;
-        background:#f8fafc;
+        background:var(--bg-secondary,#f8fafc);
         border:1px solid transparent;
       }
       .slot-template:hover {
         border-color:#a5b4fc;
-        background:#eef2ff;
+        background:var(--accent-indigo-soft,#eef2ff);
       }
       .slot-label {
         font-size:14px;
-        color:#111827;
+        color:var(--text-primary,#111827);
       }
       .slot-description {
         color:#475569;
         font-size:11px;
       }
       .slot-meta {
-        color:#2563eb;
+        color:var(--accent-blue,#2563eb);
         font-size:11px;
         display:flex;
         justify-content:space-between;
@@ -923,7 +923,7 @@ export function initContextMenuDemo() {
       }
       .slot-index {
         font-size:10px;
-        color:#8b5cf6;
+        color:var(--accent-purple,#8b5cf6);
         margin-right:6px;
       }
       .slot-state {
@@ -1022,7 +1022,7 @@ window.showInteractiveContextMenu = function () {
   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: 250px;">
           <h3 style="margin-top: 0;">🎮 Interactive Playground</h3>
@@ -1043,17 +1043,17 @@ window.showInteractiveContextMenu = function () {
           </div>
         </div>
         
-        <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
           <h4 style="margin-top: 0;">Preview:</h4>
-          <div id="interactiveContextMenuTarget" style="margin-top: 20px; min-height: 300px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: white; cursor: context-menu;">
+          <div id="interactiveContextMenuTarget" style="margin-top: 20px; min-height: 300px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-primary,white); cursor: context-menu;">
             <div style="text-align: center;">
               <div style="margin-bottom: 10px;">
-                <ui-icon name="mouse-pointer-2" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+                <ui-icon name="mouse-pointer-2" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
               </div>
               <div style="color: #6b7280; font-size: 14px;">Right-click here</div>
             </div>
           </div>
-          <div id="contextMenuOutput" style="margin-top: 20px; padding: 10px; background-color: white; border-radius: 4px; font-family: monospace; font-size: 12px; display: none;"></div>
+          <div id="contextMenuOutput" 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 id="copyContextMenuBtn" variant="outline" color="secondary" label="Copy" size="md"yle="position: absolute; top: 10px; right: 10px;"></ui-button>
@@ -1172,13 +1172,13 @@ window.showMissingFeaturesValidation = () => {
         <p style="color: #6b7280; margin-bottom: 20px;">Use this area to validate gaps identified in the analysis.</p>
 
         <div style="max-width: 600px; margin: 0 auto;">
-          <div id="validationTarget" style="min-height: 200px; border: 2px dashed #f59e0b; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fffbeb; cursor: context-menu;">
+          <div id="validationTarget" style="min-height: 200px; border: 2px dashed #f59e0b; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--accent-yellow-soft,#fffbeb); cursor: context-menu;">
             <div style="text-align: center;">
               <div style="margin-bottom: 10px;">
-                <ui-icon name="flask-conical" library="lucide" size="48px" style="color: #92400e;"></ui-icon>
+                <ui-icon name="flask-conical" library="lucide" size="48px" style="color:var(--accent-yellow,#92400e);"></ui-icon>
               </div>
-              <div style="color: #92400e; font-size: 14px; font-weight: 600;">Right-Click for Test Menu</div>
-              <div style="color: #b45309; font-size: 12px; margin-top: 4px;">Test checkboxes & mobile trigger</div>
+              <div style="color:var(--accent-yellow,#92400e); font-size: 14px; font-weight: 600;">Right-Click for Test Menu</div>
+              <div style="color:var(--accent-yellow,#b45309); font-size: 12px; margin-top: 4px;">Test checkboxes & mobile trigger</div>
             </div>
           </div>
           
@@ -1204,7 +1204,7 @@ window.showMissingFeaturesValidation = () => {
             </ul>
           </div>
         </div>
-        <div id="contextMenuLog" style="margin-top: 12px; padding: 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e5e7eb; font-size: 13px; max-height: 160px; overflow-y: auto;"></div>
+        <div id="contextMenuLog" style="margin-top: 12px; padding: 12px; border-radius: 8px; background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e5e7eb); font-size: 13px; max-height: 160px; overflow-y: auto;"></div>
         <ui-context-menu id="validationMenu" icon-library="lucide" persist-state="true" long-press-duration="600"></ui-context-menu>
     `;
 

package/dist/collection/assets/js/demos/dialog-demo-temp.js

@@ -1,4 +1,4 @@
-// Dialog Demo
+// Dialog Demo
 export function initDialogDemo() {
   const section = document.getElementById('dialog');
   if (!section) return;
@@ -52,7 +52,7 @@ export function initDialogDemo() {
           </ui-dialog-box>
           
           <div style="margin-top: 16px; padding: 12px; background-color: #f0f9ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               💡 Dialogs can contain any content and are fully customizable.
             </p>
           </div>
@@ -271,7 +271,7 @@ export function initDialogDemo() {
           <h3>🎮 Interactive Playground</h3>
           <p style="color: #6b7280; margin-bottom: 16px;">Customize the dialog properties and see changes in real-time!</p>
           
-          <div style="background-color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e5e7eb;">
+          <div style="background-color:var(--bg-primary,white); padding: 20px; border-radius: 8px; margin-bottom: 20px; border:1px solid var(--border-default,#e5e7eb);">
             <h4 style="margin: 0 0 16px;">Settings</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
               <ui-dropdown id="dialogSize" label="Size" value="md" onValueChange="window.updatePlayground()">