atomicuilibrary 0.1.0 → 0.1.3

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

@@ -10,7 +10,7 @@ export function initDocumentationDemo() {
         <div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">
           <span style="font-size:2rem;">🚀</span>
           <h1 style="font-size:2rem; font-weight:800; margin:0; color:var(--text-primary,#0f172a);">Installation</h1>
-          <span style="font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; background:#dcfce7; color:#15803d; border:1px solid #bbf7d0;">v0.0.1 — latest</span>
+          <span style="font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--accent-green-soft,#dcfce7); color:var(--accent-green,#15803d); border:1px solid #bbf7d0;">v0.0.1 — latest</span>
         </div>
         <p style="font-size:15px; color:var(--text-secondary,#64748b); margin:0; line-height:1.7;">
           App UI is a <strong>Stencil.js</strong> web-component library — framework-agnostic, tree-shakable, and zero runtime dependencies.
@@ -20,7 +20,7 @@ export function initDocumentationDemo() {
       <!-- Prerequisites -->
       <div style="margin-bottom:36px;">
         <h2 style="font-size:1.1rem; font-weight:700; margin:0 0 14px; color:var(--text-primary,#0f172a); display:flex; align-items:center; gap:8px;">
-          <span style="width:20px; height:20px; border-radius:4px; background:#f59e0b; display:inline-flex; align-items:center; justify-content:center; font-size:11px;">⚡</span>
+          <span style="width:20px; height:20px; border-radius:4px; background:var(--accent-yellow,#f59e0b); display:inline-flex; align-items:center; justify-content:center; font-size:11px;">⚡</span>
           Prerequisites
         </h2>
         <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;">
@@ -45,7 +45,7 @@ export function initDocumentationDemo() {
       <!-- Install commands -->
       <div style="margin-bottom:36px;">
         <h2 style="font-size:1.1rem; font-weight:700; margin:0 0 14px; color:var(--text-primary,#0f172a); display:flex; align-items:center; gap:8px;">
-          <span style="width:20px; height:20px; border-radius:4px; background:#3b82f6; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">📥</span>
+          <span style="width:20px; height:20px; border-radius:4px; background:var(--accent-blue,#3b82f6); display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">📥</span>
           Install
         </h2>
         ${[
@@ -69,7 +69,7 @@ export function initDocumentationDemo() {
       <!-- Framework Setup -->
       <div style="margin-bottom:36px;">
         <h2 style="font-size:1.1rem; font-weight:700; margin:0 0 14px; color:var(--text-primary,#0f172a); display:flex; align-items:center; gap:8px;">
-          <span style="width:20px; height:20px; border-radius:4px; background:#8b5cf6; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">🔌</span>
+          <span style="width:20px; height:20px; border-radius:4px; background:var(--accent-purple,#8b5cf6); display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">🔌</span>
           Framework Setup
         </h2>
         <!-- Tabs -->
@@ -80,20 +80,20 @@ export function initDocumentationDemo() {
         </div>
         <div id="doc-fw-content" style="background:#0f172a; border-radius:0 0 10px 10px; padding:20px 22px; font-family:'Courier New',monospace; font-size:12px; line-height:2; color:#e2e8f0; border:1px solid #1e293b; border-top:none;">
           <div id="doc-fw-Vanilla JS">
-            <span style="color:#64748b;">// 1. Import styles</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// 1. Import styles</span><br>
             <span style="color:#86efac;">import</span> <span style="color:#fbbf24;">'atomicuilibrary/dist/atomicuilibrary/atomicuilibrary.css'</span>;<br><br>
-            <span style="color:#64748b;">// 2. Register web components</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// 2. Register web components</span><br>
             <span style="color:#86efac;">import</span> { <span style="color:#7dd3fc;">defineCustomElements</span> } <span style="color:#86efac;">from</span> <span style="color:#fbbf24;">'atomicuilibrary/loader'</span>;<br>
             <span style="color:#7dd3fc;">defineCustomElements</span>();<br><br>
-            <span style="color:#64748b;">// 3. Use in HTML</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// 3. Use in HTML</span><br>
             <span style="color:#f87171;">&lt;ui-button</span> <span style="color:#86efac;">variant</span>=<span style="color:#fbbf24;">"primary"</span><span style="color:#f87171;">&gt;</span>Click me<span style="color:#f87171;">&lt;/ui-button&gt;</span>
           </div>
           <div id="doc-fw-React" style="display:none;">
-            <span style="color:#64748b;">// main.tsx</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// main.tsx</span><br>
             <span style="color:#86efac;">import</span> <span style="color:#fbbf24;">'atomicuilibrary/dist/atomicuilibrary/atomicuilibrary.css'</span>;<br>
             <span style="color:#86efac;">import</span> { <span style="color:#7dd3fc;">applyPolyfills</span>, <span style="color:#7dd3fc;">defineCustomElements</span> } <span style="color:#86efac;">from</span> <span style="color:#fbbf24;">'atomicuilibrary/loader'</span>;<br>
             <span style="color:#7dd3fc;">applyPolyfills</span>().<span style="color:#7dd3fc;">then</span>(() => <span style="color:#7dd3fc;">defineCustomElements</span>());<br><br>
-            <span style="color:#64748b;">// Component.tsx — declare module for JSX</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// Component.tsx — declare module for JSX</span><br>
             <span style="color:#86efac;">declare</span> <span style="color:#7dd3fc;">namespace</span> JSX {<br>
             &nbsp;&nbsp;<span style="color:#86efac;">interface</span> <span style="color:#7dd3fc;">IntrinsicElements</span> { [elem: <span style="color:#fbbf24;">string</span>]: any }<br>
             }<br><br>
@@ -102,22 +102,22 @@ export function initDocumentationDemo() {
             }
           </div>
           <div id="doc-fw-Angular" style="display:none;">
-            <span style="color:#64748b;">// app.module.ts</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// app.module.ts</span><br>
             <span style="color:#86efac;">import</span> { <span style="color:#7dd3fc;">NgModule</span>, <span style="color:#7dd3fc;">CUSTOM_ELEMENTS_SCHEMA</span> } <span style="color:#86efac;">from</span> <span style="color:#fbbf24;">'@angular/core'</span>;<br>
             <span style="color:#86efac;">import</span> { <span style="color:#7dd3fc;">defineCustomElements</span> } <span style="color:#86efac;">from</span> <span style="color:#fbbf24;">'atomicuilibrary/loader'</span>;<br>
             <span style="color:#7dd3fc;">defineCustomElements</span>();<br><br>
             <span style="color:#7dd3fc;">@NgModule</span>({<br>
             &nbsp;&nbsp;schemas: [<span style="color:#7dd3fc;">CUSTOM_ELEMENTS_SCHEMA</span>],<br>
-            &nbsp;&nbsp;<span style="color:#64748b;">// ...</span><br>
+            &nbsp;&nbsp;<span style="color:var(--text-secondary,#64748b);">// ...</span><br>
             })<br>
             <span style="color:#86efac;">export class</span> <span style="color:#7dd3fc;">AppModule</span> {}
           </div>
           <div id="doc-fw-Vue" style="display:none;">
-            <span style="color:#64748b;">// main.ts</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// main.ts</span><br>
             <span style="color:#86efac;">import</span> <span style="color:#fbbf24;">'atomicuilibrary/dist/atomicuilibrary/atomicuilibrary.css'</span>;<br>
             <span style="color:#86efac;">import</span> { <span style="color:#7dd3fc;">defineCustomElements</span> } <span style="color:#86efac;">from</span> <span style="color:#fbbf24;">'atomicuilibrary/loader'</span>;<br>
             <span style="color:#7dd3fc;">defineCustomElements</span>();<br><br>
-            <span style="color:#64748b;">// vite.config.ts — suppress web component warnings</span><br>
+            <span style="color:var(--text-secondary,#64748b);">// vite.config.ts — suppress web component warnings</span><br>
             <span style="color:#86efac;">export default</span> <span style="color:#7dd3fc;">defineConfig</span>({<br>
             &nbsp;&nbsp;plugins: [<span style="color:#7dd3fc;">vue</span>({<br>
             &nbsp;&nbsp;&nbsp;&nbsp;template: { compilerOptions: { isCustomElement: t => t.startsWith(<span style="color:#fbbf24;">'ui-'</span>) } }<br>
@@ -133,16 +133,16 @@ export function initDocumentationDemo() {
           <span style="width:20px; height:20px; border-radius:4px; background:#22c55e; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">✓</span>
           Supported Versions
         </h2>
-        <div style="overflow-x:auto; border-radius:10px; border:1px solid #e2e8f0;">
+        <div style="overflow-x:auto; border-radius:10px; border:1px solid var(--border-default,#e2e8f0);">
           <table style="width:100%; border-collapse:collapse; font-size:13px;">
             <thead>
-              <tr style="background:#f1f5f9;">
-                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid #e2e8f0;">Version</th>
-                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid #e2e8f0;">Release</th>
-                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid #e2e8f0;">Status</th>
-                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid #e2e8f0;">Node</th>
-                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid #e2e8f0;">Stencil</th>
-                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid #e2e8f0;">Changelog</th>
+              <tr style="background:var(--bg-tertiary,#f1f5f9);">
+                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid var(--border-default,#e2e8f0);">Version</th>
+                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid var(--border-default,#e2e8f0);">Release</th>
+                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid var(--border-default,#e2e8f0);">Status</th>
+                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid var(--border-default,#e2e8f0);">Node</th>
+                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid var(--border-default,#e2e8f0);">Stencil</th>
+                <th style="text-align:left; padding:10px 16px; font-weight:700; color:#475569; border-bottom:1px solid var(--border-default,#e2e8f0);">Changelog</th>
               </tr>
             </thead>
             <tbody>
@@ -159,15 +159,15 @@ export function initDocumentationDemo() {
                 const s = statusMap[r.status];
                 return `
                   <tr style="background:${i%2===1?'#f8fafc':'white'}; border-bottom:1px solid #f1f5f9;">
-                    <td style="padding:10px 16px; font-weight:700; color:#0f172a; font-family:'Courier New',monospace;">${r.ver}</td>
-                    <td style="padding:10px 16px; color:#64748b;">${r.date}</td>
+                    <td style="padding:10px 16px; font-weight:700; color:var(--text-primary,#0f172a); font-family:'Courier New',monospace;">${r.ver}</td>
+                    <td style="padding:10px 16px; color:var(--text-secondary,#64748b);">${r.date}</td>
                     <td style="padding:10px 16px;">
                       <span style="font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; background:${s.bg}; color:${s.color}; border:1px solid ${s.border};">${s.label}</span>
                     </td>
-                    <td style="padding:10px 16px; color:#64748b; font-family:monospace;">${r.node}</td>
-                    <td style="padding:10px 16px; color:#64748b; font-family:monospace;">${r.stencil}</td>
+                    <td style="padding:10px 16px; color:var(--text-secondary,#64748b); font-family:monospace;">${r.node}</td>
+                    <td style="padding:10px 16px; color:var(--text-secondary,#64748b); font-family:monospace;">${r.stencil}</td>
                     <td style="padding:10px 16px;">
-                      <a href="${r.link}" style="font-size:12px; color:#3b82f6; text-decoration:none; font-weight:600;">View →</a>
+                      <a href="${r.link}" style="font-size:12px; color:var(--accent-blue,#3b82f6); text-decoration:none; font-weight:600;">View →</a>
                     </td>
                   </tr>`;
               }).join('')}
@@ -182,25 +182,25 @@ export function initDocumentationDemo() {
           <span style="width:20px; height:20px; border-radius:4px; background:#64748b; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">📂</span>
           Older Versions
         </h2>
-        <div style="padding:16px 20px; background:#f8fafc; border-radius:10px; border:1px solid #e2e8f0; display:flex; flex-direction:column; gap:10px;">
-          <p style="margin:0; font-size:13px; color:#64748b; line-height:1.6;">
+        <div style="padding:16px 20px; background:var(--bg-secondary,#f8fafc); border-radius:10px; border:1px solid var(--border-default,#e2e8f0); display:flex; flex-direction:column; gap:10px;">
+          <p style="margin:0; font-size:13px; color:var(--text-secondary,#64748b); line-height:1.6;">
             Older releases are still available on npm and GitHub. We recommend upgrading to the latest version for security patches and new features.
           </p>
           <div style="display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;">
             <a href="https://www.npmjs.com/package/atomicuilibrary?activeTab=versions" target="_blank"
-               style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; border-radius:8px; background:#fff; border:1px solid #e2e8f0; color:#0f172a; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,0.06);">
+               style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; border-radius:8px; background:#fff; border:1px solid var(--border-default,#e2e8f0); color:var(--text-primary,#0f172a); text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,0.06);">
               📦 All versions on npm
             </a>
             <a href="https://github.com/kmn/atomicUILibrary/releases" target="_blank"
-               style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; border-radius:8px; background:#fff; border:1px solid #e2e8f0; color:#0f172a; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,0.06);">
+               style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; border-radius:8px; background:#fff; border:1px solid var(--border-default,#e2e8f0); color:var(--text-primary,#0f172a); text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,0.06);">
               🏷️ GitHub Releases
             </a>
             <a href="https://github.com/kmn/atomicUILibrary/blob/main/CHANGELOG.md" target="_blank"
-               style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; border-radius:8px; background:#fff; border:1px solid #e2e8f0; color:#0f172a; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,0.06);">
+               style="display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:600; border-radius:8px; background:#fff; border:1px solid var(--border-default,#e2e8f0); color:var(--text-primary,#0f172a); text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,0.06);">
               📝 Changelog
             </a>
           </div>
-          <div style="margin-top:6px; padding:12px 16px; background:#fffbeb; border-radius:8px; border:1px solid #fde68a; font-size:12px; color:#92400e; display:flex; gap:8px;">
+          <div style="margin-top:6px; padding:12px 16px; background:var(--accent-yellow-soft,#fffbeb); border-radius:8px; border:1px solid #fde68a; font-size:12px; color:var(--accent-yellow,#92400e); display:flex; gap:8px;">
             <span>⚠️</span>
             <span>Versions <strong>0.0.1-alpha</strong> and below have reached <strong>End of Life</strong> and no longer receive security updates. Please migrate to v0.0.1.</span>
           </div>
@@ -214,9 +214,9 @@ export function initDocumentationDemo() {
           CDN (Quick Prototype)
         </h2>
         <div style="background:#0f172a; border-radius:10px; padding:18px 22px; font-family:'Courier New',monospace; font-size:12px; line-height:1.9; color:#e2e8f0; overflow-x:auto; border:1px solid #1e293b;">
-          <span style="color:#64748b;">&lt;!-- Styles --&gt;</span><br>
+          <span style="color:var(--text-secondary,#64748b);">&lt;!-- Styles --&gt;</span><br>
           <span style="color:#f87171;">&lt;link</span> <span style="color:#86efac;">rel</span>=<span style="color:#fbbf24;">"stylesheet"</span> <span style="color:#86efac;">href</span>=<span style="color:#fbbf24;">"https://unpkg.com/atomicuilibrary/dist/atomicuilibrary/atomicuilibrary.css"</span><span style="color:#f87171;">/&gt;</span><br><br>
-          <span style="color:#64748b;">&lt;!-- ES Module --&gt;</span><br>
+          <span style="color:var(--text-secondary,#64748b);">&lt;!-- ES Module --&gt;</span><br>
           <span style="color:#f87171;">&lt;script</span> <span style="color:#86efac;">type</span>=<span style="color:#fbbf24;">"module"</span><br>
           &nbsp;&nbsp;<span style="color:#86efac;">src</span>=<span style="color:#fbbf24;">"https://unpkg.com/atomicuilibrary/dist/atomicuilibrary/atomicuilibrary.esm.js"</span><span style="color:#f87171;">&gt;&lt;/script&gt;</span>
         </div>

package/dist/collection/assets/js/demos/drag-drop-demo.js

@@ -1,4 +1,4 @@
-const dragDropTasks = [
+const dragDropTasks = [
   { id: 'task-1', label: 'Discovery workshop', description: 'Align the exec team on goals' },
   { id: 'task-2', label: 'Design sprint', description: 'Prototype the new module', detail: 'Due Friday' },
   { id: 'task-3', label: 'Review feedback', description: 'Gather insights from QA' },
@@ -106,7 +106,7 @@ export function initDragDropDemo() {
       </div>
     </div>
 
-    <div class="demo-block" style="padding: 24px; background: #f8fafc; border: 1px solid #e5e7eb;">
+    <div class="demo-block" style="padding: 24px; background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e5e7eb);">
       <h3 style="margin-top: 0;">Activity log</h3>
       <div id="dragDropLog" style="max-height: 180px; overflow-y: auto;"></div>
     </div>