atomicuilibrary 0.0.1 → 0.1.3

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

@@ -1,16 +1,437 @@
-// Component Demo Functions
-import {
-  basicMenuItems,
-  nestedMenuItems,
-  iconMenuItems,
-  fourLevelMenuItems,
-  editorMenuItems,
-  fileMenuItems,
-  actionMenuItems,
-  homeContextMenuItems,
-  interactiveDefaultItems,
-  disabledItemsMenu,
-} from './context-menu-data.js';
+// Component Demo Functions
+const basicMenuItems = [
+  { id: 'cut', label: 'Cut', icon: 'scissors' },
+  { id: 'copy', label: 'Copy', icon: 'copy' },
+  { id: 'paste', label: 'Paste', icon: 'clipboard' },
+  { id: 'sep1', separator: true },
+  {
+    id: 'more',
+    label: 'More Options',
+    icon: 'more-horizontal',
+    children: [
+      { id: 'select-all', label: 'Select All', icon: 'check-square' },
+      { id: 'sep2', separator: true },
+      {
+        id: 'format',
+        label: 'Format',
+        icon: 'palette',
+        children: [
+          { id: 'bold', label: 'Bold', icon: 'bold' },
+          { id: 'italic', label: 'Italic', icon: 'italic' },
+          { id: 'underline', label: 'Underline', icon: 'underline' },
+          { id: 'sep3', separator: true },
+          {
+            id: 'color',
+            label: 'Text Color',
+            icon: 'droplet',
+            children: [
+              { id: 'red', label: 'Red', icon: 'circle' },
+              { id: 'green', label: 'Green', icon: 'circle' },
+              { id: 'blue', label: 'Blue', icon: 'circle' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'share',
+        label: 'Share',
+        icon: 'share-2',
+        children: [
+          { id: 'email', label: 'Email', icon: 'mail' },
+          { id: 'link', label: 'Copy Link', icon: 'link' }
+        ]
+      }
+    ]
+  },
+  { id: 'sep4', separator: true },
+  { id: 'delete', label: 'Delete', icon: 'trash-2' }
+];
+
+const nestedMenuItems = [
+  {
+    id: 'new',
+    label: 'New',
+    icon: 'plus',
+    children: [
+      { id: 'file', label: 'File', icon: 'file' },
+      { id: 'folder', label: 'Folder', icon: 'folder' },
+      { id: 'sep1', separator: true },
+      {
+        id: 'more',
+        label: 'More Options',
+        icon: 'more-horizontal',
+        children: [
+          { id: 'text', label: 'Text Document', icon: 'file-text' },
+          { id: 'image', label: 'Image', icon: 'image' },
+          { id: 'video', label: 'Video', icon: 'video' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'open',
+    label: 'Open With',
+    icon: 'folder-open',
+    children: [
+      { id: 'notepad', label: 'Notepad', icon: 'file-text' },
+      { id: 'vscode', label: 'VS Code', icon: 'code' },
+      { id: 'browser', label: 'Browser', icon: 'globe' }
+    ]
+  },
+  { id: 'sep2', separator: true },
+  {
+    id: 'share',
+    label: 'Share',
+    icon: 'share-2',
+    children: [
+      { id: 'email', label: 'Email', icon: 'mail' },
+      { id: 'link', label: 'Copy Link', icon: 'link' },
+      {
+        id: 'social',
+        label: 'Social Media',
+        icon: 'smartphone',
+        children: [
+          { id: 'twitter', label: 'Twitter', icon: 'twitter' },
+          { id: 'facebook', label: 'Facebook', icon: 'facebook' }
+        ]
+      }
+    ]
+  }
+];
+
+const iconMenuItems = [
+  {
+    id: 'format',
+    label: 'Format',
+    icon: 'palette',
+    children: [
+      { id: 'bold', label: 'Bold', icon: 'bold' },
+      { id: 'italic', label: 'Italic', icon: 'italic' },
+      { id: 'underline', label: 'Underline', icon: 'underline' }
+    ]
+  },
+  {
+    id: 'align',
+    label: 'Alignment',
+    icon: 'align-justify',
+    children: [
+      { id: 'left', label: 'Left', icon: 'align-left' },
+      { id: 'center', label: 'Center', icon: 'align-center' },
+      { id: 'right', label: 'Right', icon: 'align-right' },
+      { id: 'justify', label: 'Justify', icon: 'align-justify' }
+    ]
+  },
+  { id: 'sep1', separator: true },
+  {
+    id: 'insert',
+    label: 'Insert',
+    icon: 'plus-circle',
+    children: [
+      { id: 'image', label: 'Image', icon: 'image' },
+      { id: 'table', label: 'Table', icon: 'table' },
+      { id: 'link', label: 'Link', icon: 'link' },
+      { id: 'emoji', label: 'Emoji', icon: 'smile' }
+    ]
+  }
+];
+
+const fourLevelMenuItems = [
+  {
+    id: 'level-1',
+    label: 'Level 1',
+    icon: 'layers',
+    children: [
+      {
+        id: 'level-2',
+        label: 'Level 2',
+        icon: 'layers',
+        children: [
+          {
+            id: 'level-3',
+            label: 'Level 3',
+            icon: 'layers',
+            children: [
+              { id: 'level-4-a', label: 'Level 4 - A', icon: 'type' },
+              { id: 'level-4-b', label: 'Level 4 - B', icon: 'bold' },
+              { id: 'level-4-c', label: 'Level 4 - C', icon: 'case-sensitive' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  { id: 'sep1', separator: true },
+  {
+    id: 'tools',
+    label: 'Tools',
+    icon: 'tool',
+    children: [
+      {
+        id: 'format',
+        label: 'Format',
+        icon: 'palette',
+        children: [
+          {
+            id: 'colors',
+            label: 'Colors',
+            icon: 'droplet',
+            children: [
+              { id: 'red', label: 'Red', icon: 'circle' },
+              { id: 'green', label: 'Green', icon: 'circle' },
+              { id: 'blue', label: 'Blue', icon: 'circle' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'export',
+        label: 'Export',
+        icon: 'download',
+        children: [
+          { id: 'pdf', label: 'Export as PDF', icon: 'file-text' },
+          { id: 'html', label: 'Export as HTML', icon: 'globe' }
+        ]
+      }
+    ]
+  },
+  { id: 'sep2', separator: true },
+  { id: 'help', label: 'Help', icon: 'help-circle' }
+];
+
+const editorMenuItems = [
+  { id: 'undo', label: 'Undo', icon: 'undo' },
+  { id: 'redo', label: 'Redo', icon: 'redo' },
+  { id: 'sep1', separator: true },
+  { id: 'cut', label: 'Cut', icon: 'scissors' },
+  { id: 'copy', label: 'Copy', icon: 'copy' },
+  { id: 'paste', label: 'Paste', icon: 'clipboard' },
+  { id: 'sep2', separator: true },
+  {
+    id: 'text',
+    label: 'Text Style',
+    icon: 'type',
+    children: [
+      { id: 'bold', label: 'Bold', icon: 'bold' },
+      { id: 'italic', label: 'Italic', icon: 'italic' },
+      { id: 'underline', label: 'Underline', icon: 'underline' },
+      { id: 'strike', label: 'Strikethrough', icon: 'strikethrough' },
+      { id: 'sep3', separator: true },
+      {
+        id: 'font',
+        label: 'Font Family',
+        icon: 'type',
+        children: [
+          { id: 'arial', label: 'Arial' },
+          { id: 'times', label: 'Times New Roman' },
+          { id: 'courier', label: 'Courier New' }
+        ]
+      },
+      {
+        id: 'size',
+        label: 'Font Size',
+        icon: 'maximize',
+        children: [
+          { id: 'small', label: 'Small' },
+          { id: 'md', label: 'md' },
+          { id: 'large', label: 'Large' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'paragraph',
+    label: 'Paragraph',
+    icon: 'align-justify',
+    children: [
+      {
+        id: 'align',
+        label: 'Alignment',
+        icon: 'align-justify',
+        children: [
+          { id: 'left', label: 'Left', icon: 'align-left' },
+          { id: 'center', label: 'Center', icon: 'align-center' },
+          { id: 'right', label: 'Right', icon: 'align-right' }
+        ]
+      },
+      {
+        id: 'spacing',
+        label: 'Line Spacing',
+        icon: 'arrow-up-down',
+        children: [
+          { id: '1', label: 'Single' },
+          { id: '1.5', label: '1.5 Lines' },
+          { id: '2', label: 'Double' }
+        ]
+      }
+    ]
+  }
+];
+
+const fileMenuItems = [
+  { id: 'open', label: 'Open', icon: 'folder-open' },
+  {
+    id: 'open-with',
+    label: 'Open With',
+    icon: 'settings',
+    children: [
+      { id: 'notepad', label: 'Notepad', icon: 'file-text' },
+      { id: 'vscode', label: 'VS Code', icon: 'code' },
+      { id: 'browser', label: 'Web Browser', icon: 'globe' },
+      { id: 'sep1', separator: true },
+      { id: 'choose', label: 'Choose Program...', icon: 'more-horizontal' }
+    ]
+  },
+  { id: 'sep2', separator: true },
+  { id: 'cut', label: 'Cut', icon: 'scissors' },
+  { id: 'copy', label: 'Copy', icon: 'copy' },
+  { id: 'paste', label: 'Paste', icon: 'clipboard' },
+  { id: 'sep3', separator: true },
+  {
+    id: 'share',
+    label: 'Share',
+    icon: 'share-2',
+    children: [
+      { id: 'email', label: 'Send to Email', icon: 'mail' },
+      { id: 'compress', label: 'Compress & Share', icon: 'package' },
+      { id: 'cloud', label: 'Upload to Cloud', icon: 'cloud' }
+    ]
+  },
+  {
+    id: 'export',
+    label: 'Export As',
+    icon: 'save',
+    children: [
+      { id: 'pdf', label: 'PDF Document', icon: 'file-text' },
+      { id: 'csv', label: 'CSV File', icon: 'bar-chart-2' },
+      { id: 'json', label: 'JSON Data', icon: 'file-json' },
+      { id: 'xml', label: 'XML File', icon: 'database' }
+    ]
+  },
+  { id: 'sep4', separator: true },
+  { id: 'rename', label: 'Rename', icon: 'edit-2' },
+  { id: 'delete', label: 'Delete', icon: 'trash-2' },
+  { id: 'sep5', separator: true },
+  { id: 'properties', label: 'Properties', icon: 'settings' }
+];
+
+const actionMenuItems = [
+  {
+    id: 'quick',
+    label: 'Quick Actions',
+    icon: 'zap',
+    children: [
+      { id: 'save', label: 'Save', icon: 'save' },
+      { id: 'refresh', label: 'Refresh', icon: 'refresh-cw' },
+      { id: 'print', label: 'Print', icon: 'printer' }
+    ]
+  },
+  {
+    id: 'edit',
+    label: 'Edit',
+    icon: 'edit',
+    children: [
+      { id: 'undo', label: 'Undo', icon: 'undo' },
+      { id: 'redo', label: 'Redo', icon: 'redo' },
+      { id: 'sep1', separator: true },
+      { id: 'cut', label: 'Cut', icon: 'scissors' },
+      { id: 'copy', label: 'Copy', icon: 'copy' },
+      { id: 'paste', label: 'Paste', icon: 'clipboard' }
+    ]
+  },
+  {
+    id: 'tools',
+    label: 'Tools',
+    icon: 'tool',
+    children: [
+      {
+        id: 'validate',
+        label: 'Validate',
+        icon: 'check-circle',
+        children: [
+          { id: 'html', label: 'HTML' },
+          { id: 'css', label: 'CSS' },
+          { id: 'js', label: 'JavaScript' }
+        ]
+      },
+      {
+        id: 'optimize',
+        label: 'Optimize',
+        icon: 'sliders',
+        children: [
+          { id: 'minify', label: 'Minify' },
+          { id: 'compress', label: 'Compress' }
+        ]
+      }
+    ]
+  },
+  { id: 'sep2', separator: true },
+  { id: 'help', label: 'Help', icon: 'help-circle' }
+];
+
+const homeContextMenuItems = [
+  { id: 'cut', label: 'Cut', icon: 'scissors' },
+  { id: 'copy', label: 'Copy', icon: 'copy' },
+  { id: 'paste', label: 'Paste', icon: 'clipboard' },
+  { id: 'sep1', separator: true },
+  { id: 'delete', label: 'Delete', icon: 'trash-2' }
+];
+
+const interactiveDefaultItems = [
+  {"id": "cut", "label": "Cut", "icon": "scissors"},
+  {"id": "copy", "label": "Copy", "icon": "copy"},
+  {"id": "paste", "label": "Paste", "icon": "clipboard"},
+  {"id": "sep1", "separator": true},
+  {
+    "id": "more",
+    "label": "More Options",
+    "icon": "more-horizontal",
+    "children": [
+      {"id": "select-all", "label": "Select All", "icon": "check-square"},
+      {"id": "sep2", "separator": true},
+      {
+        "id": "format",
+        "label": "Format",
+        "icon": "palette",
+        "children": [
+          {"id": "bold", "label": "Bold", "icon": "bold"},
+          {"id": "italic", "label": "Italic", "icon": "italic"},
+          {"id": "underline", "label": "Underline", "icon": "underline"}
+        ]
+      }
+    ]
+  },
+  {"id": "sep3", "separator": true},
+  {"id": "delete", "label": "Delete", "icon": "trash-2"}
+];
+
+const disabledItemsMenu = [
+  { id: 'cut', label: 'Cut', icon: 'scissors' },
+  { id: 'copy', label: 'Copy', icon: 'copy' },
+  { id: 'paste', label: 'Paste', icon: 'clipboard', disabled: true },
+  { id: 'sep1', separator: true },
+  {
+    id: 'more',
+    label: 'More Options',
+    icon: 'more-horizontal',
+    children: [
+      { id: 'select-all', label: 'Select All', icon: 'check-square' },
+      { id: 'sep2', separator: true },
+      { id: 'disabled-item', label: 'Disabled Item', icon: 'ban', disabled: true },
+      {
+        id: 'format',
+        label: 'Format',
+        icon: 'palette',
+        children: [
+          { id: 'bold', label: 'Bold', icon: 'bold' },
+          { id: 'italic', label: 'Italic', icon: 'italic', disabled: true },
+          { id: 'underline', label: 'Underline', icon: 'underline' }
+        ]
+      }
+    ]
+  },
+  { id: 'sep3', separator: true },
+  { id: 'delete', label: 'Delete', icon: 'trash-2', disabled: true }
+];
 
 export function initContextMenuDemo() {
   const section = document.getElementById('context-menu');
@@ -36,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
@@ -58,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>
@@ -80,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
@@ -108,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>
@@ -141,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>
@@ -174,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>
@@ -208,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.
@@ -238,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>
@@ -272,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>
@@ -344,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>
@@ -446,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;">
@@ -478,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;
@@ -502,7 +923,7 @@ export function initContextMenuDemo() {
       }
       .slot-index {
         font-size:10px;
-        color:#8b5cf6;
+        color:var(--accent-purple,#8b5cf6);
         margin-right:6px;
       }
       .slot-state {
@@ -601,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>
@@ -622,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>
@@ -751,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>
           
@@ -783,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>
     `;