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

atomicuilibrary 0.0.1 → 0.1.3

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

Files changed (675) hide show

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

@@ -87,31 +87,31 @@ window.showSingleSelect = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">Single Select Dropdown</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Standard dropdown with single selection and optional icons.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Standard dropdown with single selection and optional icons.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Countries</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Countries</h4>
           <ui-dropdown id="countriesDropdown" placeholder="Select a country"></ui-dropdown>
-          <div id="countryOutput" style="margin-top: 16px; padding: 12px; background: #f0f9ff; border-radius: 8px; font-size: 13px; color: #1e40af; border: 1px solid #bae6fd; min-height: 40px; display: flex; align-items: center;">
+          <div id="countryOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0f9ff); border-radius: 8px; font-size: 13px; color:var(--accent-blue,#1e40af); border: 1px solid #bae6fd; min-height: 40px; display: flex; align-items: center;">
             No selection
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Programming Languages</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Programming Languages</h4>
           <ui-dropdown id="languagesDropdown" placeholder="Select a language"></ui-dropdown>
-          <div id="languageOutput" style="margin-top: 16px; padding: 12px; background: #f0fdf4; border-radius: 8px; font-size: 13px; color: #166534; border: 1px solid #bbf7d0; min-height: 40px; display: flex; align-items: center;">
+          <div id="languageOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0fdf4); border-radius: 8px; font-size: 13px; color: var(--accent-green,#166534); border: 1px solid #bbf7d0; min-height: 40px; display: flex; align-items: center;">
             No selection
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">With Icons</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">With Icons</h4>
           <ui-dropdown id="iconsDropdown" placeholder="Select an option" icon-library="lucide"></ui-dropdown>
-          <div id="iconOutput" style="margin-top: 16px; padding: 12px; background: #fffbeb; border-radius: 8px; font-size: 13px; color: #92400e; border: 1px solid #fef3c7; min-height: 40px; display: flex; align-items: center;">
+          <div id="iconOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #fffbeb); border-radius: 8px; font-size: 13px; color:var(--accent-yellow,#92400e); border: 1px solid #fef3c7; min-height: 40px; display: flex; align-items: center;">
             No selection
           </div>
         </div>
@@ -192,31 +192,31 @@ window.showMultiSelect = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">Multi-Select Dropdown</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Select multiple options with checkboxes and clearable selections.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Select multiple options with checkboxes and clearable selections.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Skills</h4>
-          <ui-dropdown id="skillsDropdown" multi-select placeholder="Select your skills"></ui-dropdown>
-          <div id="skillsOutput" style="margin-top: 16px; padding: 12px; background: #f0f9ff; border-radius: 8px; font-size: 13px; color: #1e40af; border: 1px solid #bae6fd; min-height: 40px;">
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Skills</h4>
+          <ui-dropdown id="skillsDropdown" multi-select show-select-all placeholder="Select your skills"></ui-dropdown>
+          <div id="skillsOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0f9ff); border-radius: 8px; font-size: 13px; color:var(--accent-blue,#1e40af); border: 1px solid #bae6fd; min-height: 40px;">
             No skills selected
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Project Status (With Icons)</h4>
-          <ui-dropdown id="fruitsDropdown" multi-select placeholder="Select status" icon-library="lucide"></ui-dropdown>
-          <div id="fruitsOutput" style="margin-top: 16px; padding: 12px; background: #f0fdf4; border-radius: 8px; font-size: 13px; color: #166534; border: 1px solid #bbf7d0; min-height: 40px;">
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Project Status (With Icons)</h4>
+          <ui-dropdown id="fruitsDropdown" multi-select show-select-all placeholder="Select status" icon-library="lucide"></ui-dropdown>
+          <div id="fruitsOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0fdf4); border-radius: 8px; font-size: 13px; color: var(--accent-green,#166534); border: 1px solid #bbf7d0; min-height: 40px;">
             No status selected
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Technologies</h4>
-          <ui-dropdown id="techDropdown" multi-select placeholder="Select technologies"></ui-dropdown>
-          <div id="techOutput" style="margin-top: 16px; padding: 12px; background: #fffbeb; border-radius: 8px; font-size: 13px; color: #92400e; border: 1px solid #fef3c7; min-height: 40px;">
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Technologies</h4>
+          <ui-dropdown id="techDropdown" multi-select show-select-all placeholder="Select technologies"></ui-dropdown>
+          <div id="techOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #fffbeb); border-radius: 8px; font-size: 13px; color:var(--accent-yellow,#92400e); border: 1px solid #fef3c7; min-height: 40px;">
             No technologies selected
           </div>
         </div>
@@ -299,34 +299,34 @@ window.showCascadingDropdown = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">🌳 Cascading Dropdown</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Navigate through nested options with expandable nodes and hierarchical selection.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Navigate through nested options with expandable nodes and hierarchical selection.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
           <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
-            <h4 style="margin: 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">File System (Expanded)</h4>
+            <h4 style="margin: 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">File System (Expanded)</h4>
             <ui-button id="btnScanTree" variant="outline" color="neutral" label="Scan Tree" size="md"ui-button>
           </div>
           <ui-dropdown id="fileSystemDropdown" cascading expand-all multi-select full-width="true" placeholder="Browse files" icon-library="lucide"></ui-dropdown>
-          <div id="fileSystemOutput" style="margin-top: 16px; padding: 12px; background: #f0f9ff; border-radius: 8px; font-size: 13px; color: #1e40af; border: 1px solid #bae6fd; min-height: 40px;">
+          <div id="fileSystemOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0f9ff); border-radius: 8px; font-size: 13px; color:var(--accent-blue,#1e40af); border: 1px solid #bae6fd; min-height: 40px;">
             No files selected
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Organization</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Organization</h4>
           <ui-dropdown id="orgDropdown" cascading multi-select full-width="true" placeholder="Select departments"></ui-dropdown>
-          <div id="orgOutput" style="margin-top: 16px; padding: 12px; background: #f0fdf4; border-radius: 8px; font-size: 13px; color: #166534; border: 1px solid #bbf7d0; min-height: 40px;">
+          <div id="orgOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0fdf4); border-radius: 8px; font-size: 13px; color: var(--accent-green,#166534); border: 1px solid #bbf7d0; min-height: 40px;">
             No departments selected
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Product Catalog</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Product Catalog</h4>
           <ui-dropdown id="categoryDropdown" cascading full-width="true" placeholder="Select category"></ui-dropdown>
-          <div id="categoryOutput" style="margin-top: 16px; padding: 12px; background: #fffbeb; border-radius: 8px; font-size: 13px; color: #92400e; border: 1px solid #fef3c7; min-height: 40px;">
+          <div id="categoryOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #fffbeb); border-radius: 8px; font-size: 13px; color:var(--accent-yellow,#92400e); border: 1px solid #fef3c7; min-height: 40px;">
             No category selected
           </div>
         </div>
@@ -479,31 +479,31 @@ window.showSearchableDropdown = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">🔍 Searchable Dropdown</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Efficiently filter large lists with real-time text search.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Efficiently filter large lists with real-time text search.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Countries (Searchable)</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Countries (Searchable)</h4>
           <ui-dropdown id="searchCountriesDropdown" searchable placeholder="Search countries..."></ui-dropdown>
-          <div id="searchCountryOutput" style="margin-top: 16px; padding: 12px; background: #f0f9ff; border-radius: 8px; font-size: 13px; color: #1e40af; border: 1px solid #bae6fd; min-height: 40px;">
+          <div id="searchCountryOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0f9ff); border-radius: 8px; font-size: 13px; color:var(--accent-blue,#1e40af); border: 1px solid #bae6fd; min-height: 40px;">
             No selection
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Multi-Select with Search</h4>
-          <ui-dropdown id="searchMultiDropdown" searchable multi-select placeholder="Search and select..."></ui-dropdown>
-          <div id="searchMultiOutput" style="margin-top: 16px; padding: 12px; background: #f0fdf4; border-radius: 8px; font-size: 13px; color: #166534; border: 1px solid #bbf7d0; min-height: 40px;">
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Multi-Select with Search</h4>
+          <ui-dropdown id="searchMultiDropdown" searchable multi-select show-select-all placeholder="Search and select..."></ui-dropdown>
+          <div id="searchMultiOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #f0fdf4); border-radius: 8px; font-size: 13px; color: var(--accent-green,#166534); border: 1px solid #bbf7d0; min-height: 40px;">
             No items selected
           </div>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Cascading with Search</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Cascading with Search</h4>
           <ui-dropdown id="searchCascadeDropdown" searchable cascading multi-select placeholder="Search hierarchy..."></ui-dropdown>
-          <div id="searchCascadeOutput" style="margin-top: 16px; padding: 12px; background: #fffbeb; border-radius: 8px; font-size: 13px; color: #92400e; border: 1px solid #fef3c7; min-height: 40px;">
+          <div id="searchCascadeOutput" style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary, #fffbeb); border-radius: 8px; font-size: 13px; color:var(--accent-yellow,#92400e); border: 1px solid #fef3c7; min-height: 40px;">
             No items selected
           </div>
         </div>
@@ -614,23 +614,22 @@ window.showDropdownSizes = function () {
   container.innerHTML = `
     <div class="demo-block">
-      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
-        <div>
-          <h3 style="margin: 0;">📐 Size Variants</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Choose from small, md (default), or large variants to fit your layout.</p>
-        </div>
-        <div style="display: flex; flex-direction: column; gap: 20px;">
+      <div style="margin-bottom: 24px;">
+        <h3 style="margin: 0;">📐 Size Variants</h3>
+        <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Choose from small, md (default), or large variants to fit your layout.</p>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
         ${['xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
           .map(
             s => `
-          <div style="display: flex; align-items: center; gap: 16px; background: white; padding: 16px; border-radius: 12px; border: 1px solid #e5e7eb;">
-            <span style="width: 100px; font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase;">${s}</span>
-            <ui-dropdown size="${s}" placeholder="Select ${s}..." style="flex: 1;"></ui-dropdown>
+          <div style="display: flex; align-items: center; gap: 16px; background: var(--bg-primary, white); padding: 16px; border-radius: 12px; border:1px solid var(--border-default,#e5e7eb);">
+            <span style="width: 80px; font-size: 11px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase;">${s}</span>
+            <ui-dropdown class="demo-size-dropdown" size="${s}" placeholder="Select ${s}..." style="flex: 1;"></ui-dropdown>
           </div>
         `,
           )
           .join('')}
-      </div></div>
       </div>
     </div>
   `;
@@ -648,6 +647,10 @@ window.showDropdownSizes = function () {
         dropdown.options = options;
       }
     });
+    document.querySelectorAll('.demo-size-dropdown').forEach(dropdown => {
+      dropdown.options = options;
+    });
   }, 100);
 };
@@ -661,7 +664,7 @@ window.showDropdownPlayground = function () {
       <p>Customize dropdown behavior and appearance.</p>
       <div style="display: grid; grid-template-columns: 300px 1fr; gap: 30px; margin-top: 30px;">
-        <div style="background: #f9fafb; padding: 20px; border-radius: 8px; height: fit-content;">
+        <div style="background: var(--bg-secondary, #f9fafb); padding: 20px; border-radius: 8px; height: fit-content;">
           <h4 style="margin-top: 0;">Configuration</h4>
           <div style="margin-bottom: 20px;">
@@ -713,8 +716,8 @@ window.showDropdownPlayground = function () {
           <h4>Preview</h4>
           <ui-dropdown id="playgroundDropdown" placeholder="Configure and test dropdown" icon-library="lucide"></ui-dropdown>
-          <div id="playgroundOutput" style="margin-top: 20px; padding: 15px; background: #eff6ff; border-radius: 6px;">
-            <h5 style="margin: 0 0 10px 0; color: #1e40af;">Output</h5>
+          <div id="playgroundOutput" style="margin-top: 20px; padding: 15px; background: var(--bg-tertiary, #eff6ff); border-radius: 6px;">
+            <h5 style="margin: 0 0 10px 0; color:var(--accent-blue,#1e40af);">Output</h5>
             <div id="playgroundValue" style="font-size: 14px; color: #374151;">No selection</div>
           </div>
@@ -793,6 +796,7 @@ window.showDropdownPlayground = function () {
     // Set attributes
     dropdown.multiSelect = mode === 'multi';
+    dropdown.showSelectAll = mode === 'multi';
     dropdown.chipView = chipView;
     dropdown.variant = variant;
     dropdown.loading = loading;
@@ -844,7 +848,7 @@ window.showDropdownPlayground = function () {
     document.getElementById('copyDropdownBtn')?.addEventListener('click', copyDropdownCode);
     ['playMode', 'playSize', 'playVariant'].forEach(id => {
-      document.getElementById(id)?.addEventListener('dropdownChange', updatePlaygroundDropdown);
+      document.getElementById(id)?.addEventListener('valueChange', updatePlaygroundDropdown);
     });
     document.getElementById('playMaxHeight')?.addEventListener('inputChange', updatePlaygroundDropdown);
@@ -878,30 +882,30 @@ window.showDropdownAppearances = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">Dropdown Appearances</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Toggle between standard dropdown and button-style variants.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Toggle between standard dropdown and button-style variants.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Default Appearance</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Default Appearance</h4>
           <ui-dropdown id="defaultAppDropdown" appearance="dropdown" placeholder="Standard Dropdown"></ui-dropdown>
-          <p style="margin-top: 12px; font-size: 12px; color: #9ca3af;">Has a traditional dropdown arrow and border.</p>
+          <p style="margin-top: 12px; font-size: 12px; color: var(--text-muted, #9ca3af);">Has a traditional dropdown arrow and border.</p>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Button Appearance</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Button Appearance</h4>
           <ui-dropdown id="buttonAppDropdown" appearance="button" placeholder="Action Menu"></ui-dropdown>
-          <p style="margin-top: 12px; font-size: 12px; color: #9ca3af;">No arrow by default, looks like a standard action button.</p>
+          <p style="margin-top: 12px; font-size: 12px; color: var(--text-muted, #9ca3af);">No arrow by default, looks like a standard action button.</p>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;">Toggle Variant (Compact)</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em;">Toggle Variant (Compact)</h4>
           <div style="display: flex; align-items: center; gap: 20px;">
             <ui-dropdown id="toggleVarDropdown" variant="toggle" placeholder="Select" icon-library="lucide"></ui-dropdown>
-            <span style="font-size: 12px; color: #64748b; background: #f1f5f9; padding: 4px 8px; border-radius: 4px;">In-line Toggle</span>
+            <span style="font-size: 12px; color:var(--text-secondary,#64748b); background: var(--bg-tertiary, #f1f5f9); padding: 4px 8px; border-radius: 4px;">In-line Toggle</span>
           </div>
-          <p style="margin-top: 12px; font-size: 12px; color: #9ca3af;">Padding-less variant for dense toolbars and minimal UI blocks.</p>
+          <p style="margin-top: 12px; font-size: 12px; color: var(--text-muted, #9ca3af);">Padding-less variant for dense toolbars and minimal UI blocks.</p>
         </div>
       </div>
     </div>
@@ -939,31 +943,31 @@ window.showDropdownEvents = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">📡 Event Monitoring</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Track value changes and lifecycle events in real-time.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Track value changes and lifecycle events in real-time.</p>
         </div>
         <ui-button id="btnClearLog" variant="outline" color="neutral" label="Clear Log" size="md"ui-button>
       </div>
       <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
         <div>
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px;">
-            <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Standard Events</h4>
+          <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px;">
+            <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Standard Events</h4>
             <ui-dropdown id="eventDropdown" placeholder="Interact with me" clearable="true"></ui-dropdown>
           </div>
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-            <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Multi-select Events</h4>
-            <ui-dropdown id="eventMultiDropdown" multi-select placeholder="Select multiple"></ui-dropdown>
+          <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+            <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Multi-select Events</h4>
+            <ui-dropdown id="eventMultiDropdown" multi-select show-select-all placeholder="Select multiple"></ui-dropdown>
           </div>
         </div>
         <div style="background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 12px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; height: 400px; display: flex; flex-direction: column;">
           <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 10px;">
-            <span style="color: #94a3b8; font-weight: 600;">EVENT_LOG</span>
+            <span style="color:var(--text-secondary,#64748b); font-weight: 600;">EVENT_LOG</span>
             <span style="color: #4ade80;">READY</span>
           </div>
           <div id="eventLogContainer" style="overflow-y: auto; flex: 1; display: flex; flex-direction: column-reverse; gap: 8px;">
-            <div style="color: #64748b;">> Waiting for interaction...</div>
+            <div style="color:var(--text-secondary,#64748b);">> Waiting for interaction...</div>
           </div>
         </div>
       </div>
@@ -971,7 +975,7 @@ window.showDropdownEvents = function () {
   `;
   window.clearEventLog = () => {
-    document.getElementById('eventLogContainer').innerHTML = '<div style="color: #64748b;">> Log cleared.</div>';
+    document.getElementById('eventLogContainer').innerHTML = '<div style="color:var(--text-secondary,#64748b);">> Log cleared.</div>';
   };
   const addLog = (type, detail) => {
@@ -979,7 +983,7 @@ window.showDropdownEvents = function () {
     if (!log) return;
     const entry = document.createElement('div');
     const time = new Date().toLocaleTimeString();
-    entry.innerHTML = `<span style="color: #94a3b8;">[${time}]</span> <span style="color: #10b981;">${type}</span>: ${JSON.stringify(detail)}`;
+    entry.innerHTML = `<span style="color:var(--text-secondary,#64748b);">[${time}]</span> <span style="color: #10b981;">${type}</span>: ${JSON.stringify(detail)}`;
     log.prepend(entry);
   };
@@ -1000,7 +1004,7 @@ window.showDropdownEvents = function () {
     });
     document.getElementById('btnClearLog')?.addEventListener('click', () => {
-      document.getElementById('eventLogContainer').innerHTML = '<div style="color: #64748b;">> Log cleared.</div>';
+      document.getElementById('eventLogContainer').innerHTML = '<div style="color:var(--text-secondary,#64748b);">> Log cleared.</div>';
     });
   }, 100);
 };
@@ -1013,27 +1017,27 @@ window.showRichItemDropdown = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">💎 Rich Dropdown Items</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Enhance items with subtitles, descriptions, right-side tags, and secondary icons.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Enhance items with subtitles, descriptions, right-side tags, and secondary icons.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Subtitles & Tags</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Subtitles & Tags</h4>
           <ui-dropdown id="richTagsDropdown" placeholder="Select project status"></ui-dropdown>
-          <p style="margin-top: 12px; font-size: 12px; color: #9ca3af;">Items with <code>subtitle</code> and <code>rightTag</code>.</p>
+          <p style="margin-top: 12px; font-size: 12px; color: var(--text-muted, #9ca3af);">Items with <code>subtitle</code> and <code>rightTag</code>.</p>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Tick Mark Indicators</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Tick Mark Indicators</h4>
           <ui-dropdown id="tickMarkDropdown" placeholder="Select an option" value="v1"></ui-dropdown>
-          <p style="margin-top: 12px; font-size: 12px; color: #9ca3af;">Automatic <code>checkmark</code> indicator for the selected item.</p>
+          <p style="margin-top: 12px; font-size: 12px; color: var(--text-muted, #9ca3af);">Automatic <code>checkmark</code> indicator for the selected item.</p>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; text-transform: uppercase;">Complex Composition</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-muted, #6b7280); text-transform: uppercase;">Complex Composition</h4>
           <ui-dropdown id="complexRichDropdown" placeholder="Settings menu" icon-library="lucide"></ui-dropdown>
-          <p style="margin-top: 12px; font-size: 12px; color: #9ca3af;">Combining icons, labels, subtitles, and tags.</p>
+          <p style="margin-top: 12px; font-size: 12px; color: var(--text-muted, #9ca3af);">Combining icons, labels, subtitles, and tags.</p>
         </div>
       </div>
     </div>
@@ -1079,36 +1083,36 @@ window.showEnterpriseDropdowns = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">🏢 Enterprise Master Gallery</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">High-fidelity substrates for complex data entry and atmospheric interfaces.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">High-fidelity substrates for complex data entry and atmospheric interfaces.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 32px;">
         <!-- Multi-Select Chips -->
-        <div style="background: white; padding: 28px; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
-          <h4 style="margin: 0 0 8px 0; color: #1e293b; font-weight: 700;">Sensory Chip Substrate</h4>
-          <p style="font-size: 13px; color: #64748b; margin-bottom: 20px;">Selected items rendered as removable tactical chips.</p>
-          <ui-dropdown id="entChipDropdown" multi-select chip-view placeholder="Select team members" full-width="true"></ui-dropdown>
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary, var(--text-primary, #1e293b)); font-weight: 700;">Sensory Chip Substrate</h4>
+          <p style="font-size: 13px; color: var(--text-muted, #64748b); margin-bottom: 20px;">Selected items rendered as removable tactical chips.</p>
+          <ui-dropdown id="entChipDropdown" multi-select show-select-all chip-view placeholder="Select team members" full-width="true"></ui-dropdown>
         </div>
         <!-- Glassmorphism -->
-        <div style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 28px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
+        <div style="background: linear-gradient(135deg, #0f172a 0%, var(--text-primary, #1e293b) 100%); padding: 28px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
           <h4 style="margin: 0 0 8px 0; color: white; font-weight: 700;">Atmospheric Glass Variant</h4>
-          <p style="font-size: 13px; color: #94a3b8; margin-bottom: 20px;">Cinema-grade backdrop filter with 180% saturation.</p>
+          <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 20px;">Cinema-grade backdrop filter with 180% saturation.</p>
           <ui-dropdown id="entGlassDropdown" variant="glass" placeholder="Select global region" full-width="true" icon-library="lucide"></ui-dropdown>
         </div>
         <!-- Smart Groups & Select All -->
-        <div style="background: white; padding: 28px; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
-          <h4 style="margin: 0 0 8px 0; color: #1e293b; font-weight: 700;">Bulk Lifecycle Control</h4>
-          <p style="font-size: 13px; color: #64748b; margin-bottom: 20px;">Categorized hierarchical headers with bulk "Select All" and "Clear All" logic.</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary, var(--text-primary, #1e293b)); font-weight: 700;">Bulk Lifecycle Control</h4>
+          <p style="font-size: 13px; color: var(--text-muted, #64748b); margin-bottom: 20px;">Categorized hierarchical headers with bulk "Select All" and "Clear All" logic.</p>
           <ui-dropdown id="entGroupDropdown" multi-select show-select-all="true" placeholder="Manage system permissions" full-width="true"></ui-dropdown>
         </div>
         <!-- Skeleton & States -->
-        <div style="background: white; padding: 28px; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
-          <h4 style="margin: 0 0 8px 0; color: #1e293b; font-weight: 700;">Loading States & Shimmers</h4>
-          <p style="font-size: 13px; color: #64748b; margin-bottom: 20px;">From shimmering skeletons to active async spinners.</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary, var(--text-primary, #1e293b)); font-weight: 700;">Loading States & Shimmers</h4>
+          <p style="font-size: 13px; color: var(--text-muted, #64748b); margin-bottom: 20px;">From shimmering skeletons to active async spinners.</p>
           <div style="display: flex; flex-direction: column; gap: 24px;">
             <ui-dropdown id="entSkeletonDropdown" skeleton full-width="true"></ui-dropdown>
@@ -1117,22 +1121,22 @@ window.showEnterpriseDropdowns = function () {
         </div>
         <!-- No Data Slot Mastery -->
-        <div style="background: white; padding: 28px; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
-          <h4 style="margin: 0 0 8px 0; color: #1e293b; font-weight: 700;">Zero-Data Slot Mastery</h4>
-          <p style="font-size: 13px; color: #64748b; margin-bottom: 20px;">Custom atmospheric slots for empty hierarchical states.</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary, var(--text-primary, #1e293b)); font-weight: 700;">Zero-Data Slot Mastery</h4>
+          <p style="font-size: 13px; color: var(--text-muted, #64748b); margin-bottom: 20px;">Custom atmospheric slots for empty hierarchical states.</p>
           <ui-dropdown id="entEmptyDropdown" full-width="true" placeholder="No resources available">
             <div slot="empty-state" style="padding: 20px; text-align: center;">
               <div style="font-size: 24px; margin-bottom: 8px;">📭</div>
-              <div style="font-weight: 600; color: #1e293b;">Vault is Empty</div>
-              <div style="font-size: 11px; color: #94a3b8;">Initialize the system to see resources.</div>
+              <div style="font-weight: 600; color: var(--text-primary, var(--text-primary, #1e293b));">Vault is Empty</div>
+              <div style="font-size: 11px; color:var(--text-secondary,#64748b);">Initialize the system to see resources.</div>
             </div>
           </ui-dropdown>
         </div>
         <!-- Separators & Custom Color -->
-        <div style="background: white; padding: 28px; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
-          <h4 style="margin: 0 0 8px 0; color: #1e293b; font-weight: 700;">Visual Signatures</h4>
-          <p style="font-size: 13px; color: #64748b; margin-bottom: 20px;">Geometric separators and custom chromatic typography.</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 4px 20px rgba(0,0,0,0.03);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary, var(--text-primary, #1e293b)); font-weight: 700;">Visual Signatures</h4>
+          <p style="font-size: 13px; color: var(--text-muted, #64748b); margin-bottom: 20px;">Geometric separators and custom chromatic typography.</p>
           <ui-dropdown id="entVisualsDropdown" text-color="#2563eb" full-width="true" placeholder="Custom visual style"></ui-dropdown>
         </div>
       </div>
@@ -1205,11 +1209,11 @@ window.showDropdownComposition = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">🧩 Component Composition</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Combining diverse substrates into cohesive functional blocks.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Combining diverse substrates into cohesive functional blocks.</p>
         </div>
       </div>
-      <div style="background: white; padding: 32px; border-radius: 20px; border: 1px solid #e2e8f0;">
+      <div style="background: var(--bg-primary, #ffffff); padding: 32px; border-radius: 20px; border: 1px solid var(--border-default, #e2e8f0);">
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
           <div>
             <h4 style="margin: 0 0 16px 0;">Recursive Hierarchy</h4>
@@ -1217,17 +1221,17 @@ window.showDropdownComposition = function () {
           </div>
           <div>
             <h4 style="margin: 0 0 16px 0;">Rich Metadata Selection</h4>
-            <ui-dropdown id="compMulti" multi-select chip-view full-width="true" placeholder="Assign stakeholders" icon-library="lucide"></ui-dropdown>
+            <ui-dropdown id="compMulti" multi-select show-select-all chip-view full-width="true" placeholder="Assign stakeholders" icon-library="lucide"></ui-dropdown>
           </div>
         </div>
-        <div style="margin-top: 40px; padding-top: 30px; border-top: 1px dashed #e2e8f0;">
+        <div style="margin-top: 40px; padding-top: 30px; border-top: 1px dashed var(--border-default, #e2e8f0);">
           <h4 style="margin: 0 0 16px 0;">Advanced Slot Interjection</h4>
           <ui-dropdown id="compEmpty" full-width="true" placeholder="No connected devices">
-            <div slot="empty-state" style="padding: 30px; border-radius: 12px; background: #f8fafc; border: 2px dashed #cbd5e1; text-align: center;">
+            <div slot="empty-state" style="padding: 30px; border-radius: 12px; background: var(--bg-secondary, #f8fafc); border: 2px dashed #cbd5e1; text-align: center;">
               <ui-icon name="cloud-offline" library="lucide" size="32px" color="#94a3b8" style="margin-bottom: 12px;"></ui-icon>
               <div style="font-weight: 600; color: #475569;">System Offline</div>
-              <p style="font-size: 12px; color: #94a3b8; margin: 4px 0 0 0;">Check your gateway connection to synchronize resources.</p>
+              <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin: 4px 0 0 0;">Check your gateway connection to synchronize resources.</p>
             </div>
           </ui-dropdown>
         </div>
@@ -1278,25 +1282,25 @@ window.showApexRichDropdown = function () {
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
         <div>
           <h3 style="margin: 0;">👑 Apex Rich Metadata Substrate</h3>
-          <p style="color: #6b7280; font-size: 14px; margin: 4px 0 0 0;">Experience the ultimate dropdown variant with complex hierarchy, multi-line metadata, and tactical tags.</p>
+          <p style="color: var(--text-muted, #6b7280); font-size: 14px; margin: 4px 0 0 0;">Experience the ultimate dropdown variant with complex hierarchy, multi-line metadata, and tactical tags.</p>
         </div>
       </div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 32px;">
         <!-- Single Select Detailed -->
-        <div style="background: white; padding: 28px; border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.04);">
-          <h4 style="margin: 0 0 16px 0; color: #1e293b; font-size: 16px; font-weight: 700;">Location Hub (Single)</h4>
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 24px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 10px 30px rgba(0,0,0,0.04);">
+          <h4 style="margin: 0 0 16px 0; color: var(--text-primary, #1e293b); font-size: 16px; font-weight: 700;">Location Hub (Single)</h4>
           <ui-dropdown id="apexSingleDropdown" variant="detailed" placeholder="Choose office location" search-placeholder="Search country, state, city, postal code..." searchable="true" full-width="true" icon-library="lucide"></ui-dropdown>
-          <div id="apexSingleOutput" style="margin-top: 20px; padding: 16px; background: #f8fafc; border-radius: 12px; font-size: 13px; border: 1px solid #e2e8f0;">
+          <div id="apexSingleOutput" style="margin-top: 20px; padding: 16px; background: var(--bg-secondary, #f8fafc); border-radius: 12px; font-size: 13px; border: 1px solid var(--border-default, #e2e8f0);">
             Waiting for selection...
           </div>
         </div>
         <!-- Multi Select Detailed -->
-        <div style="background: white; padding: 28px; border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.04);">
-          <h4 style="margin: 0 0 16px 0; color: #1e293b; font-size: 16px; font-weight: 700;">Resource Manager (Multi)</h4>
-          <ui-dropdown id="apexMultiDropdown" variant="detailed" multi-select="true" chip-view="true" placeholder="Assign resources..." searchable="true" full-width="true" icon-library="lucide"></ui-dropdown>
-          <div id="apexMultiOutput" style="margin-top: 20px; padding: 16px; background: #f8fafc; border-radius: 12px; font-size: 13px; border: 1px solid #e2e8f0;">
+        <div style="background: var(--bg-primary, #ffffff); padding: 28px; border-radius: 24px; border: 1px solid var(--border-default, #e2e8f0); box-shadow: 0 10px 30px rgba(0,0,0,0.04);">
+          <h4 style="margin: 0 0 16px 0; color: var(--text-primary, #1e293b); font-size: 16px; font-weight: 700;">Resource Manager (Multi)</h4>
+          <ui-dropdown id="apexMultiDropdown" variant="detailed" multi-select="true" show-select-all chip-view="true" placeholder="Assign resources..." searchable="true" full-width="true" icon-library="lucide"></ui-dropdown>
+          <div id="apexMultiOutput" style="margin-top: 20px; padding: 16px; background: var(--bg-secondary, #f8fafc); border-radius: 12px; font-size: 13px; border: 1px solid var(--border-default, #e2e8f0);">
             No resources assigned
           </div>
         </div>
@@ -1357,27 +1361,27 @@ window.showMarkerStyling = function () {
       <p style="color: #6b7280; margin-bottom: 24px;">Control how selected items are visually indicated using markers or just color shades.</p>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #1e293b;">Icon-less Selection</h4>
-          <p style="color: #6b7280; font-size: 13px; margin-bottom: 16px;">Selection indicated only by color shade (<code>show-selected-marker="false"</code>).</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; color: var(--text-primary, var(--text-primary, #1e293b));">Icon-less Selection</h4>
+          <p style="color: var(--text-muted, #6b7280); font-size: 13px; margin-bottom: 16px;">Selection indicated only by color shade (<code>show-selected-marker="false"</code>).</p>
           <ui-dropdown id="noMarkerDropdown" show-selected-marker="false" placeholder="Select a city"></ui-dropdown>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #1e293b;">Custom Marker Icon</h4>
-          <p style="color: #6b7280; font-size: 13px; margin-bottom: 16px;">Using a custom circle icon instead of the default tick.</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; color: var(--text-primary, var(--text-primary, #1e293b));">Custom Marker Icon</h4>
+          <p style="color: var(--text-muted, #6b7280); font-size: 13px; margin-bottom: 16px;">Using a custom circle icon instead of the default tick.</p>
           <ui-dropdown id="customMarkerDropdown" selected-marker-icon="circle" icon-library="lucide" placeholder="Select Priority"></ui-dropdown>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
-          <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #1e293b;">Star Indicator</h4>
-          <p style="color: #6b7280; font-size: 13px; margin-bottom: 16px;">Premium look with a star selection marker.</p>
+        <div style="background: var(--bg-primary, #ffffff); padding: 24px; border-radius: 12px; border: 1px solid var(--border-default, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; color: var(--text-primary, var(--text-primary, #1e293b));">Star Indicator</h4>
+          <p style="color: var(--text-muted, #6b7280); font-size: 13px; margin-bottom: 16px;">Premium look with a star selection marker.</p>
           <ui-dropdown id="starMarkerDropdown" selected-marker-icon="star" icon-library="lucide" placeholder="Highlight item"></ui-dropdown>
         </div>
       </div>
-      <div style="margin-top: 30px; padding: 16px; background-color: #f0fdf4; border-radius: 12px; border: 1px solid #bbf7d0;">
-        <p style="margin: 0; color: #166534; font-size: 14px; line-height: 1.6;">
+      <div style="margin-top: 30px; padding: 16px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 12px; border: 1px solid #bbf7d0;">
+        <p style="margin: 0; color: var(--accent-green,#166534); font-size: 14px; line-height: 1.6;">
           💡 <strong>Validation Tip:</strong> Hiding the marker is ideal for compact layouts like <strong>Pagination Action Bars</strong> where space is limited and color shading provides enough context.
         </p>
       </div>