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

atomicuilibrary 0.1.0 → 0.1.3

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

Files changed (618) hide show

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

@@ -11,7 +11,7 @@ window.showSkeletonAriaLive = function () {
         <ui-skeleton aria-label="Loading user data" aria-live="polite" width="200px" height="24px"></ui-skeleton>
       </div>
       <ui-button id="toggleAriaLiveBtn" >Toggle Content</ui-button>
-      <p style="font-size: 13px; color: #64748b; margin-top: 8px;">This demonstrates a live region that swaps skeleton for real content. Use a screen reader to hear announcements.</p>
+      <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-top: 8px;">This demonstrates a live region that swaps skeleton for real content. Use a screen reader to hear announcements.</p>
     `;
   document.getElementById('toggleAriaLiveBtn').onclick = function () {
     loading = !loading;
@@ -49,9 +49,9 @@ export function initSkeletonDemo() {
     container.innerHTML = `
       <h4>Accessibility & ARIA</h4>
       <ui-skeleton aria-label="Loading content" aria-live="polite" animated="true" width="200px" height="24px"></ui-skeleton>
-      <p style="font-size: 13px; color: #64748b; margin-top: 8px;">This skeleton uses <code>aria-label</code> and <code>aria-live</code> for screen readers. Try using a screen reader to verify announcements.</p>
+      <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-top: 8px;">This skeleton uses <code>aria-label</code> and <code>aria-live</code> for screen readers. Try using a screen reader to verify announcements.</p>
       <ui-skeleton aria-label="Loading profile" role="status" animated="true" width="120px" height="120px" shape="circle"></ui-skeleton>
-      <p style="font-size: 13px; color: #64748b; margin-top: 8px;">Role can be set to <code>status</code> or <code>progressbar</code> for accessibility.</p>
+      <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-top: 8px;">Role can be set to <code>status</code> or <code>progressbar</code> for accessibility.</p>
     `;
   };
@@ -83,7 +83,7 @@ export function initSkeletonDemo() {
       </div>
       <div style="margin-top: 16px; direction: rtl;">
         <ui-skeleton rtl="true" width="200px" height="24px" animated="true"></ui-skeleton>
-        <span style="font-size: 13px; color: #0ea5e9;">RTL shimmer direction</span>
+        <span style="font-size: 13px; color:var(--accent-cyan,#0ea5e9);">RTL shimmer direction</span>
       </div>
       <div style="margin-top: 16px;">
         <ui-skeleton width="200px" height="24px" animated="true">
@@ -103,7 +103,7 @@ export function initSkeletonDemo() {
   window.addEventListener('skeletonHide', () => {
     const container = document.getElementById('skeletonDemoContainer');
     if (container) {
-      container.insertAdjacentHTML('beforeend', '<div style="color: #ef4444; font-size: 13px;">[Event] skeletonHide fired</div>');
+      container.insertAdjacentHTML('beforeend', '<div style="color:var(--accent-red,#ef4444); font-size: 13px;">[Event] skeletonHide fired</div>');
     }
   });
@@ -114,13 +114,13 @@ export function initSkeletonDemo() {
       <div style="display: flex; flex-direction: column; gap: 40px;">
         <div class="demo-block">
           <h4>Multi-Line Text (Paragraph Mode)</h4>
-          <p style="color: #64748b; font-size: 13px; margin-bottom: 12px;">Using <code>rows="3"</code> and <code>last-row-width="60%"</code>. Intermediate rows automatically jitter for a natural feel.</p>
+          <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-bottom: 12px;">Using <code>rows="3"</code> and <code>last-row-width="60%"</code>. Intermediate rows automatically jitter for a natural feel.</p>
           <ui-skeleton shape="text" rows="3" last-row-width="60%" animated="true"></ui-skeleton>
         </div>
         <div class="demo-block">
           <h4>Pill Shapes (Tags/Badges)</h4>
-          <p style="color: #64748b; font-size: 13px; margin-bottom: 12px;">The <code>pill</code> shape is optimized for chip and tag loading states.</p>
+          <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-bottom: 12px;">The <code>pill</code> shape is optimized for chip and tag loading states.</p>
           <div style="display: flex; gap: 8px;">
             <ui-skeleton shape="pill" width="60px" size="md"></ui-skeleton>
             <ui-skeleton shape="pill" width="80px" size="md"></ui-skeleton>
@@ -130,8 +130,8 @@ export function initSkeletonDemo() {
         <div class="demo-block">
           <h4>Table Row Template</h4>
-          <p style="color: #64748b; font-size: 13px; margin-bottom: 12px;">A complex compound skeleton for data grids using <code>template="table-row"</code>.</p>
-          <div style="background: white; border-radius: 8px; border: 1px solid #e5e7eb; padding: 0 16px;">
+          <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-bottom: 12px;">A complex compound skeleton for data grids using <code>template="table-row"</code>.</p>
+          <div style="background:var(--bg-primary,white); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); padding: 0 16px;">
             <ui-skeleton template="table-row" animated="true"></ui-skeleton>
             <div style="border-top: 1px solid #f3f4f6;"></div>
             <ui-skeleton template="table-row" animated="true"></ui-skeleton>
@@ -149,7 +149,7 @@ export function initSkeletonDemo() {
     if (!container) return;
     const t0 = performance.now();
     container.innerHTML = `
-      <div id="timer-basic" style="font-size: 13px; color: #64748b; margin-bottom: 8px;"></div>
+      <div id="timer-basic" style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 8px;"></div>
       <div style="display: flex; flex-direction: column; gap: 12px;">
         <ui-skeleton width="100%" height="20px"></ui-skeleton>
         <ui-skeleton width="80%" height="20px"></ui-skeleton>
@@ -165,7 +165,7 @@ export function initSkeletonDemo() {
     if (!container) return;
     const t0 = performance.now();
     container.innerHTML = `
-      <div id="timer-shapes" style="font-size: 13px; color: #64748b; margin-bottom: 8px;"></div>
+      <div id="timer-shapes" style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 8px;"></div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 30px;">
         <div style="text-align: center;">
           <ui-skeleton shape="rectangle" width="120px" height="80px"></ui-skeleton>
@@ -207,7 +207,7 @@ export function initSkeletonDemo() {
     if (!container) return;
     const t0 = performance.now();
     container.innerHTML = `
-      <div id="timer-sizes" style="font-size: 13px; color: #64748b; margin-bottom: 8px;"></div>
+      <div id="timer-sizes" style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 8px;"></div>
       <div style="display: flex; flex-direction: column; gap: 20px;">
         <div>
           <h4>Small</h4>
@@ -232,19 +232,62 @@ export function initSkeletonDemo() {
     if (!container) return;
     const t0 = performance.now();
     container.innerHTML = `
-      <div id="timer-animations" style="font-size: 13px; color: #64748b; margin-bottom: 8px;"></div>
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <div>
-          <h4>Pulse Animation</h4>
-          <ui-skeleton animation-type="pulse" width="300px" height="40px"></ui-skeleton>
+      <div id="timer-animations" style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 12px;"></div>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid var(--border-default, #e5e7eb);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary);">Pulse (Breathing)</h4>
+          <ui-skeleton animation-type="pulse" width="100%" height="40px" border-radius="6px"></ui-skeleton>
         </div>
-        <div>
-          <h4>Wave Animation</h4>
-          <ui-skeleton animation-type="wave" width="300px" height="40px"></ui-skeleton>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid var(--border-default, #e5e7eb);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary);">Wave (Diagonal Shimmer)</h4>
+          <ui-skeleton animation-type="wave" width="100%" height="40px" border-radius="6px"></ui-skeleton>
         </div>
-        <div>
-          <h4>No Animation</h4>
-          <ui-skeleton animated="false" width="300px" height="40px"></ui-skeleton>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid var(--border-default, #e5e7eb);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary);">Shimmer</h4>
+          <ui-skeleton animation-type="shimmer" width="100%" height="40px" border-radius="6px"></ui-skeleton>
+        </div>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid var(--border-default, #e5e7eb);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary);">Sheen</h4>
+          <ui-skeleton animation-type="sheen" width="100%" height="40px" border-radius="6px"></ui-skeleton>
+        </div>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid var(--border-default, #e5e7eb);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary);">Glow</h4>
+          <ui-skeleton animation-type="glow" width="100%" height="40px" border-radius="6px" color="primary"></ui-skeleton>
+        </div>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid var(--border-default, #e5e7eb);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary);">Flicker</h4>
+          <ui-skeleton animation-type="flicker" width="100%" height="40px" border-radius="6px"></ui-skeleton>
+        </div>
+        <!-- NEW PREMIUM ANIMATIONS -->
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; box-shadow: 0 4px 12px rgba(59,130,246,0.08);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary); display: flex; align-items: center; gap: 6px;">
+            <span>Neon Sweep</span>
+            <span style="font-size:9px; background:#eff6ff; color:#2563eb; padding:2px 6px; border-radius:10px; border: 1px solid #bfdbfe;">PREMIUM</span>
+          </h4>
+          <ui-skeleton animation-type="neon-sweep" width="100%" height="40px" border-radius="6px" color="primary"></ui-skeleton>
+        </div>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; box-shadow: 0 4px 12px rgba(59,130,246,0.08);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary); display: flex; align-items: center; gap: 6px;">
+            <span>Liquify</span>
+            <span style="font-size:9px; background:#eff6ff; color:#2563eb; padding:2px 6px; border-radius:10px; border: 1px solid #bfdbfe;">PREMIUM</span>
+          </h4>
+          <ui-skeleton animation-type="liquify" width="100%" height="40px" border-radius="6px"></ui-skeleton>
+        </div>
+        <div style="background: var(--bg-primary, white); padding: 16px; border-radius: 8px; border: 1px solid #c084fc; box-shadow: 0 4px 12px rgba(168,85,247,0.08);">
+          <h4 style="margin: 0 0 8px 0; color: var(--text-primary); display: flex; align-items: center; gap: 6px;">
+            <span>Aurora</span>
+            <span style="font-size:9px; background:#faf5ff; color:#7c3aed; padding:2px 6px; border-radius:10px; border: 1px solid #e9d5ff;">PREMIUM</span>
+          </h4>
+          <ui-skeleton animation-type="aurora" width="100%" height="40px" border-radius="6px"></ui-skeleton>
         </div>
       </div>
     `;
@@ -257,46 +300,58 @@ export function initSkeletonDemo() {
     if (!container) return;
     const t0 = performance.now();
     container.innerHTML = `
-      <div id="timer-layouts" style="font-size: 13px; color: #64748b; margin-bottom: 8px;"></div>
+      <div id="timer-layouts" style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 8px;"></div>
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
         <!-- Card Skeleton -->
-        <div style="background-color: white; padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb;">
-          <ui-skeleton shape="rectangle" width="100%" height="160px" border-radius="8px"></ui-skeleton>
-          <ui-skeleton width="60%" height="24px" style="margin-top: 12px;"></ui-skeleton>
-          <ui-skeleton width="100%" height="16px" style="margin-top: 8px;"></ui-skeleton>
-          <ui-skeleton width="80%" height="16px" style="margin-top: 4px;"></ui-skeleton>
+        <div style="background-color:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
+          <ui-skeleton shape="rectangle" width="100%" height="180px" border-radius="0"></ui-skeleton>
+          <div style="padding: 16px; display:flex; flex-direction:column; gap:10px;">
+            <ui-skeleton width="65%" height="20px" border-radius="6px"></ui-skeleton>
+            <ui-skeleton width="100%" height="14px" border-radius="4px"></ui-skeleton>
+            <ui-skeleton width="85%" height="14px" border-radius="4px"></ui-skeleton>
+            <div style="display:flex; gap:8px; margin-top:4px;">
+              <ui-skeleton width="80px" height="32px" border-radius="8px"></ui-skeleton>
+              <ui-skeleton width="80px" height="32px" border-radius="8px"></ui-skeleton>
+            </div>
+          </div>
         </div>
         <!-- Profile Skeleton -->
-        <div style="background-color: white; padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb;">
-          <div style="display: flex; gap: 12px;">
-            <ui-skeleton shape="circle" width="60px" height="60px"></ui-skeleton>
-            <div style="flex: 1;">
-              <ui-skeleton width="120px" height="20px"></ui-skeleton>
-              <ui-skeleton width="160px" height="16px" style="margin-top: 8px;"></ui-skeleton>
+        <div style="background-color:var(--bg-primary,white); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); display:flex; flex-direction:column; gap:16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
+          <div style="display: flex; align-items:center; gap: 14px;">
+            <ui-skeleton shape="circle" width="56px" height="56px"></ui-skeleton>
+            <div style="flex: 1; display:flex; flex-direction:column; gap:8px;">
+              <ui-skeleton width="140px" height="18px" border-radius="6px"></ui-skeleton>
+              <ui-skeleton width="100px" height="13px" border-radius="4px"></ui-skeleton>
             </div>
           </div>
-          <ui-skeleton width="100%" height="16px" style="margin-top: 16px;"></ui-skeleton>
-          <ui-skeleton width="90%" height="16px" style="margin-top: 4px;"></ui-skeleton>
+          <div style="display:flex; flex-direction:column; gap:8px;">
+            <ui-skeleton width="100%" height="13px" border-radius="4px"></ui-skeleton>
+            <ui-skeleton width="92%" height="13px" border-radius="4px"></ui-skeleton>
+            <ui-skeleton width="75%" height="13px" border-radius="4px"></ui-skeleton>
+          </div>
+          <div style="display:flex; gap:8px;">
+            <ui-skeleton width="70px" height="28px" border-radius="20px"></ui-skeleton>
+            <ui-skeleton width="70px" height="28px" border-radius="20px"></ui-skeleton>
+            <ui-skeleton width="70px" height="28px" border-radius="20px"></ui-skeleton>
+          </div>
         </div>
         <!-- List Skeleton -->
-        <div style="background-color: white; padding: 16px; border-radius: 8px; border: 1px solid #e5e7eb;">
-          <div style="display: flex; gap: 12px; margin-bottom: 12px;">
+        <div style="background-color:var(--bg-primary,white); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); display:flex; flex-direction:column; gap:16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
+          <ui-skeleton width="120px" height="18px" border-radius="6px"></ui-skeleton>
+          ${[1,2,3].map(() => `
+          <div style="display: flex; align-items:center; gap: 12px;">
             <ui-skeleton shape="circle" width="40px" height="40px"></ui-skeleton>
-            <div style="flex: 1;">
-              <ui-skeleton width="80%" height="16px"></ui-skeleton>
-              <ui-skeleton width="60%" height="12px" style="margin-top: 4px;"></ui-skeleton>
+            <div style="flex: 1; display:flex; flex-direction:column; gap:7px;">
+              <ui-skeleton width="75%" height="14px" border-radius="4px"></ui-skeleton>
+              <ui-skeleton width="55%" height="11px" border-radius="4px"></ui-skeleton>
             </div>
-          </div>
-          <div style="display: flex; gap: 12px; margin-bottom: 12px;">
-            <ui-skeleton shape="circle" width="40px" height="40px"></ui-skeleton>
-            <div style="flex: 1;">
-              <ui-skeleton width="70%" height="16px"></ui-skeleton>
-              <ui-skeleton width="50%" height="12px" style="margin-top: 4px;"></ui-skeleton>
-            </div>
-          </div>
+            <ui-skeleton width="48px" height="24px" border-radius="12px"></ui-skeleton>
+          </div>`).join('')}
         </div>
       </div>
     `;
     const t1 = performance.now();
@@ -380,6 +435,9 @@ export function initSkeletonDemo() {
                 <option value="sheen">Sheen</option>
                 <option value="glow">Glow</option>
                 <option value="flicker">Flicker</option>
+                <option value="neon-sweep">Neon Sweep (Premium)</option>
+                <option value="liquify">Liquify (Premium)</option>
+                <option value="aurora">Aurora (Premium)</option>
               </ui-dropdown>
             </label>
@@ -398,8 +456,8 @@ export function initSkeletonDemo() {
             <ui-checkbox id="skeletonAnimated" checked label="Animated" oncheckboxchange="updateInteractiveSkeleton()"></ui-checkbox>
           </div>
-          <div style="margin-top: 12px; padding: 12px; background-color: #eff6ff; border-radius: 6px; border: 1px solid #bfdbfe;">
-            <p style="margin: 0; font-size: 13px; color: #1e40af;">
+          <div style="margin-top: 12px; padding: 12px; background-color:var(--accent-blue-soft,#eff6ff); border-radius: 6px; border: 1px solid #bfdbfe;">
+            <p style="margin: 0; font-size: 13px; color:var(--accent-blue,#1e40af);">
               💡 <strong>Tip:</strong> Changes apply instantly as you type or select options!
             </p>
           </div>

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

@@ -1,4 +1,4 @@
-// Performance benchmark for skeleton-loader with large lists
+// Performance benchmark for skeleton-loader with large lists
 export function initSkeletonPerformanceDemo() {
   const section = document.getElementById('skeleton');
   if (!section) return;
@@ -6,7 +6,7 @@ export function initSkeletonPerformanceDemo() {
     <h4>Performance Benchmark: 500 Skeletons</h4>
     <ui-button id="startPerfTest" style="padding: 8px 16px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer;">Start Benchmark</ui-button>
     <div id="perfSkeletonContainer" style="margin-top: 20px;"></div>
-    <div id="perfResult" style="margin-top: 12px; color: #64748b;"></div>
+    <div id="perfResult" style="margin-top: 12px; color:var(--text-secondary,#64748b);"></div>
   `;
   document.getElementById('startPerfTest').onclick = function () {
     const container = document.getElementById('perfSkeletonContainer');

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

@@ -17,17 +17,17 @@ export function initSmartDialogDemo() {
         <!-- Basic -->
         <ui-button class="sd-btn" onclick="SD.basic()" style="--c:#10b981">📄 Basic</ui-button>
-        <ui-button class="sd-btn" onclick="SD.minimize()" style="--c:#8b5cf6">📌 Minimizable</ui-button>
-        <ui-button class="sd-btn" onclick="SD.multiMinimize()" style="--c:#7c3aed">⬇️ Multi-Minimize Tray</ui-button>
+        <ui-button class="sd-btn" onclick="SD.minimize()" style="--c:var(--accent-purple,#8b5cf6)">📌 Minimizable</ui-button>
+        <ui-button class="sd-btn" onclick="SD.multiMinimize()" style="--c:var(--accent-purple,#7c3aed)">⬇️ Multi-Minimize Tray</ui-button>
         <ui-button class="sd-btn" onclick="SD.draggable()" style="--c:#10b981">🖱️ Draggable</ui-button>
-        <ui-button class="sd-btn" onclick="SD.resizable()" style="--c:#0ea5e9">↔️ Draggable + Resizable</ui-button>
-        <ui-button class="sd-btn" onclick="SD.maximizable()" style="--c:#f59e0b">🖥️ Maximizable</ui-button>
-        <ui-button class="sd-btn" onclick="SD.sizes()" style="--c:#ef4444">📐 Sizes</ui-button>
+        <ui-button class="sd-btn" onclick="SD.resizable()" style="--c:var(--accent-cyan,#0ea5e9)">↔️ Draggable + Resizable</ui-button>
+        <ui-button class="sd-btn" onclick="SD.maximizable()" style="--c:var(--accent-yellow,#f59e0b)">🖥️ Maximizable</ui-button>
+        <ui-button class="sd-btn" onclick="SD.sizes()" style="--c:var(--accent-red,#ef4444)">📐 Sizes</ui-button>
         <!-- Variants / Status -->
-        <ui-button class="sd-btn" onclick="SD.variants()" style="--c:#6366f1">🎨 Variants</ui-button>
-        <ui-button class="sd-btn" onclick="SD.statusDialogs()" style="--c:#dc2626">🚦 Status</ui-button>
-        <ui-button class="sd-btn" onclick="SD.glassVariant()" style="--c:#0891b2">🪟 Glass</ui-button>
+        <ui-button class="sd-btn" onclick="SD.variants()" style="--c:var(--accent-indigo,#6366f1)">🎨 Variants</ui-button>
+        <ui-button class="sd-btn" onclick="SD.statusDialogs()" style="--c:var(--accent-red,#dc2626)">🚦 Status</ui-button>
+        <ui-button class="sd-btn" onclick="SD.glassVariant()" style="--c:var(--accent-cyan,#0891b2)">🪟 Glass</ui-button>
         <ui-button class="sd-btn" onclick="SD.positions()" style="--c:#84cc16">📍 Positions</ui-button>
         <ui-button class="sd-btn" onclick="SD.animations()" style="--c:#f97316">✨ Animations</ui-button>
@@ -36,17 +36,17 @@ export function initSmartDialogDemo() {
         <ui-button class="sd-btn" onclick="SD.backdropNone()" style="--c:#374151">🚫 No Backdrop</ui-button>
         <!-- Footer Actions -->
-        <ui-button class="sd-btn" onclick="SD.withFooter()" style="--c:#059669">✅ With Footer</ui-button>
-        <ui-button class="sd-btn" onclick="SD.confirmDialog()" style="--c:#b45309">⚠️ Confirm</ui-button>
+        <ui-button class="sd-btn" onclick="SD.withFooter()" style="--c:var(--accent-green,#059669)">✅ With Footer</ui-button>
+        <ui-button class="sd-btn" onclick="SD.confirmDialog()" style="--c:var(--accent-yellow,#b45309)">⚠️ Confirm</ui-button>
         <ui-button class="sd-btn" onclick="SD.autoClose()" style="--c:#e11d48">⏱️ Auto-Close</ui-button>
         <!-- Advanced -->
-        <ui-button class="sd-btn" onclick="SD.formDialog()" style="--c:#4f46e5">📝 Form Dialog</ui-button>
+        <ui-button class="sd-btn" onclick="SD.formDialog()" style="--c:var(--accent-indigo,#4f46e5)">📝 Form Dialog</ui-button>
         <ui-button class="sd-btn" onclick="SD.remember()" style="--c:#0f766e">💾 Remember Position</ui-button>
         <ui-button class="sd-btn" onclick="SD.nested()" style="--c:#9333ea">🪆 Nested Dialogs</ui-button>
         <ui-button class="sd-btn" onclick="SD.scrollable()" style="--c:#0284c7">📜 Scrollable Content</ui-button>
         <ui-button class="sd-btn" onclick="SD.icon()" style="--c:#ca8a04">🖼️ With Icon</ui-button>
-        <ui-button class="sd-btn" onclick="SD.customSize()" style="--c:#be185d">📏 Custom Size</ui-button>
+        <ui-button class="sd-btn" onclick="SD.customSize()" style="--c:var(--accent-pink,#be185d)">📏 Custom Size</ui-button>
         <ui-button class="sd-btn" onclick="SD.kitchen()" style="--c:linear-gradient(135deg,#7c3aed,#db2777)">🍽️ Kitchen Sink</ui-button>
       </div>

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

@@ -1,4 +1,4 @@
-// Smart Menu Demo Functions
+// Smart Menu Demo Functions
 export function initSmartMenuDemo() {
   const section = document.getElementById('smart-menu');
   if (!section) return;
@@ -8,10 +8,10 @@ export function initSmartMenuDemo() {
     <p>Advanced context menu with smart positioning and submenu support.</p>
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button onclick="showBasicSmartMenu()" style="padding: 8px 16px; background-color: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer;" variant="outline">Basic Menu</ui-button>
-      <ui-button onclick="showNestedSmartMenu()" style="padding: 8px 16px; background-color: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer;" variant="outline">Nested Submenus</ui-button>
-      <ui-button onclick="showFileOperationsMenu()" style="padding: 8px 16px; background-color: #f59e0b; color: white; border: none; border-radius: 6px; cursor: pointer;" variant="outline">File Operations</ui-button>
-      <ui-button onclick="showInteractiveSmartMenu()" style="padding: 8px 16px; background-color: #8b5cf6; color: white; border: none; border-radius: 6px; cursor: pointer;" variant="outline">?? Interactive Playground</ui-button>
+      <ui-button onclick="showBasicSmartMenu()"  variant="outline">Basic Menu</ui-button>
+      <ui-button onclick="showNestedSmartMenu()"  variant="outline">Nested Submenus</ui-button>
+      <ui-button onclick="showFileOperationsMenu()"  variant="outline">File Operations</ui-button>
+      <ui-button onclick="showInteractiveSmartMenu()"  variant="outline">?? Interactive Playground</ui-button>
     </div>
     <div id="smartMenuDemoContainer" style="margin-top: 20px;"></div>
@@ -26,10 +26,10 @@ export function initSmartMenuDemo() {
         <div style="max-width: 600px; margin: 0 auto;">
           <h4>Basic Smart Menu</h4>
           <p style="color: #6b7280; font-size: 13px;">Right-click on the area below to open the smart menu</p>
-          <div id="basicSmartTarget" 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="basicSmartTarget" 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>
@@ -48,7 +48,7 @@ export function initSmartMenuDemo() {
           function logAction(action) {
             const log = document.querySelector('#smartMenuLog 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>`;
             }
           }
@@ -81,10 +81,10 @@ export function initSmartMenuDemo() {
         <div style="max-width: 600px; margin: 0 auto;">
           <h4>Nested Smart Menu</h4>
           <p style="color: #6b7280; font-size: 13px;">Multi-level menu with submenus</p>
-          <div id="nestedSmartTarget" 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="nestedSmartTarget" 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-tree" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+                <ui-icon name="folder-tree" 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>
@@ -184,10 +184,10 @@ export function initSmartMenuDemo() {
         <div style="max-width: 600px; margin: 0 auto;">
           <h4>File Operations Menu</h4>
           <p style="color: #6b7280; font-size: 13px;">Complete file management operations</p>
-          <div id="fileSmartTarget" 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="fileSmartTarget" 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>
@@ -242,7 +242,7 @@ window.showInteractiveSmartMenu = 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>
@@ -263,17 +263,17 @@ window.showInteractiveSmartMenu = 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="interactiveSmartMenuTarget" 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="interactiveSmartMenuTarget" 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="smartMenuOutput" style="margin-top: 20px; padding: 10px; background-color: white; border-radius: 4px; font-family: monospace; font-size: 12px; display: none;"></div>
+          <div id="smartMenuOutput" 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>
       </div>
     </div>