atomicuilibrary 0.0.1 → 0.1.0

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

@@ -34,28 +34,27 @@ export function initDockDemo() {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: 'finder', label: 'Finder', icon: 'smile' },
-      { id: 'mail', label: 'Mail', icon: 'mail' },
-      { id: 'browser', label: 'Browser', icon: 'globe' },
-      { id: 'music', label: 'Music', icon: 'music' },
-      { id: 'photos', label: 'Photos', icon: 'image' },
-      { id: 'settings', label: 'Settings', icon: 'settings' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Bottom Dock (Default)</h4>
         <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Hover over icons to see magnification effect</p>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' icon-library="lucide"></ui-dock>
+          <ui-dock id="basicDock" icon-library="lucide"></ui-dock>
         </div>
       </div>
     `;
 
     setTimeout(() => {
-      const dock = container.querySelector('ui-dock');
+      const dock = document.getElementById('basicDock');
       if (dock) {
+        dock.items = JSON.stringify([
+          { id: 'finder', label: 'Finder', icon: 'smile' },
+          { id: 'mail', label: 'Mail', icon: 'mail' },
+          { id: 'browser', label: 'Browser', icon: 'globe' },
+          { id: 'music', label: 'Music', icon: 'music' },
+          { id: 'photos', label: 'Photos', icon: 'image' },
+          { id: 'settings', label: 'Settings', icon: 'settings' },
+        ]);
         dock.addEventListener('dockItemClick', e => {
           console.log('Dock item clicked:', e.detail);
         });
@@ -67,26 +66,18 @@ export function initDockDemo() {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: '1', label: 'Home', icon: 'home' },
-      { id: '2', label: 'Search', icon: 'search' },
-      { id: '3', label: 'Heart', icon: 'heart' },
-      { id: '4', label: 'Star', icon: 'star' },
-      { id: '5', label: 'Settings', icon: 'settings' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Bottom Position</h4>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' position="bottom" icon-library="lucide"></ui-dock>
+          <ui-dock id="dockPosBottom" position="bottom" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div style="margin-bottom: 30px;">
         <h4>Top Position</h4>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' position="top" icon-library="lucide"></ui-dock>
+          <ui-dock id="dockPosTop" position="top" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
@@ -94,98 +85,107 @@ export function initDockDemo() {
         <div>
           <h4>Left Position</h4>
           <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-            <ui-dock items='${items}' position="left" icon-library="lucide"></ui-dock>
+            <ui-dock id="dockPosLeft" position="left" icon-library="lucide"></ui-dock>
           </div>
         </div>
 
         <div>
           <h4>Right Position</h4>
           <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-            <ui-dock items='${items}' position="right" icon-library="lucide"></ui-dock>
+            <ui-dock id="dockPosRight" position="right" icon-library="lucide"></ui-dock>
           </div>
         </div>
       </div>
     `;
+
+    setTimeout(() => {
+      const itemsList = JSON.stringify([
+        { id: '1', label: 'Home', icon: 'home' },
+        { id: '2', label: 'Search', icon: 'search' },
+        { id: '3', label: 'Heart', icon: 'heart' },
+        { id: '4', label: 'Star', icon: 'star' },
+        { id: '5', label: 'Settings', icon: 'settings' },
+      ]);
+      ['dockPosBottom', 'dockPosTop', 'dockPosLeft', 'dockPosRight'].forEach(id => {
+        const d = document.getElementById(id);
+        if (d) d.items = itemsList;
+      });
+    }, 100);
   };
 
   window.showDockSizes = function () {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: '1', label: 'File', icon: 'file-text' },
-      { id: '2', label: 'Folder', icon: 'folder' },
-      { id: '3', label: 'Image', icon: 'image' },
-      { id: '4', label: 'Video', icon: 'clapperboard' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Small Size</h4>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' size="md" icon-library="lucide"></ui-dock>
+          <ui-dock id="dockSizeSm" size="sm" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div style="margin-bottom: 30px;">
         <h4>md Size (Default)</h4>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' size="md" icon-library="lucide"></ui-dock>
+          <ui-dock id="dockSizeMd" size="md" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div>
         <h4>Large Size</h4>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' size="lg" icon-library="lucide"></ui-dock>
+          <ui-dock id="dockSizeLg" size="lg" icon-library="lucide"></ui-dock>
         </div>
       </div>
     `;
+
+    setTimeout(() => {
+      const itemsList = JSON.stringify([
+        { id: '1', label: 'File', icon: 'file-text' },
+        { id: '2', label: 'Folder', icon: 'folder' },
+        { id: '3', label: 'Image', icon: 'image' },
+        { id: '4', label: 'Video', icon: 'clapperboard' },
+      ]);
+      ['dockSizeSm', 'dockSizeMd', 'dockSizeLg'].forEach(id => {
+        const d = document.getElementById(id);
+        if (d) d.items = itemsList;
+      });
+    }, 100);
   };
 
   window.showDockWithBadges = function () {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    const items = JSON.stringify([
-      { id: 'mail', label: 'Mail', icon: 'mail', badge: 12 },
-      { id: 'messages', label: 'Messages', icon: 'message-square', badge: 5 },
-      { id: 'notifications', label: 'Notifications', icon: 'bell', badge: 99 },
-      { id: 'calendar', label: 'Calendar', icon: 'calendar' },
-      { id: 'tasks', label: 'Tasks', icon: 'check-square', badge: 3 },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Dock with Badge Indicators</h4>
         <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Icons can display notification badges</p>
         <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
-          <ui-dock items='${items}' icon-library="lucide"></ui-dock>
+          <ui-dock id="dockWithBadges" icon-library="lucide"></ui-dock>
         </div>
       </div>
     `;
+
+    setTimeout(() => {
+      const d = document.getElementById('dockWithBadges');
+      if (d) {
+        d.items = JSON.stringify([
+          { id: 'mail', label: 'Mail', icon: 'mail', badge: 12 },
+          { id: 'messages', label: 'Messages', icon: 'message-square', badge: 5 },
+          { id: 'notifications', label: 'Notifications', icon: 'bell', badge: 99 },
+          { id: 'calendar', label: 'Calendar', icon: 'calendar' },
+          { id: 'tasks', label: 'Tasks', icon: 'check-square', badge: 3 },
+        ]);
+      }
+    }, 100);
   };
 
   window.showPremiumDock = function () {
     const container = document.getElementById('dockDemoContainer');
     if (!container) return;
 
-    // Simulate OS Dock
-    const items = JSON.stringify([
-      { id: 'finder', label: 'Finder', icon: 'smile', active: true },
-      { id: 'launchpad', label: 'Launchpad', icon: 'rocket' },
-      { id: 'browser', label: 'Safari', icon: 'compass', active: true },
-      { id: 'mail', label: 'Mail', icon: 'mail', badge: 3, bounce: true },
-      { id: 'maps', label: 'Maps', icon: 'map' },
-      { id: 'separator1', separator: true },
-      { id: 'music', label: 'Music', icon: 'music', active: true },
-      { id: 'podcasts', label: 'Podcasts', icon: 'mic' },
-      { id: 'tv', label: 'TV', icon: 'tv' },
-      { id: 'separator2', separator: true },
-      { id: 'settings', label: 'System Settings', icon: 'settings' },
-      { id: 'trash', label: 'Trash', icon: 'trash-2' },
-    ]);
-
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h3>✨ OS Experience</h3>
@@ -212,7 +212,7 @@ export function initDockDemo() {
 
           <!-- The Dock -->
           <ui-dock 
-            items='${items}' 
+            id="premiumDock" 
             position="bottom" 
             size="md" 
             magnify="true" 
@@ -227,6 +227,26 @@ export function initDockDemo() {
       </div>
     `;
 
+    setTimeout(() => {
+      const d = document.getElementById('premiumDock');
+      if (d) {
+        d.items = JSON.stringify([
+          { id: 'finder', label: 'Finder', icon: 'smile', active: true },
+          { id: 'launchpad', label: 'Launchpad', icon: 'rocket' },
+          { id: 'browser', label: 'Safari', icon: 'compass', active: true },
+          { id: 'mail', label: 'Mail', icon: 'mail', badge: 3, bounce: true },
+          { id: 'maps', label: 'Maps', icon: 'map' },
+          { id: 'separator1', separator: true },
+          { id: 'music', label: 'Music', icon: 'music', active: true },
+          { id: 'podcasts', label: 'Podcasts', icon: 'mic' },
+          { id: 'tv', label: 'TV', icon: 'tv' },
+          { id: 'separator2', separator: true },
+          { id: 'settings', label: 'System Settings', icon: 'settings' },
+          { id: 'trash', label: 'Trash', icon: 'trash-2' },
+        ]);
+      }
+    }, 100);
+
     window.toggleBounce = function () {
       alert("In a real React/Angular app, you'd update the 'items' prop to remove 'bounce: true'.");
     };
@@ -313,7 +333,7 @@ export function initDockDemo() {
       </div>
       
       <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
-        <ui-button id="btnCopyDockCode" variant="ghost" color="secondary" label="Copy" size="md"yle="position: absolute; top: 10px; right: 10px; --btn-bg: rgba(255,255,255,0.1); --btn-text: white;"></ui-button>
+        <ui-button id="btnCopyDockCode" variant="ghost" color="secondary" label="Copy" size="md" style="position: absolute; top: 10px; right: 10px; --btn-bg: rgba(255,255,255,0.1); --btn-text: white;"></ui-button>
         <code id="dockCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px; white-space: pre-wrap;">
           <ui-dock ...></ui-dock>
         </code>

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

@@ -1,34 +1,239 @@
 export function initDocumentationDemo() {
   const section = document.getElementById('documentation');
   if (!section) return;
+
   section.innerHTML = `
-    <div style="padding: 40px; max-width: 800px; margin: 0 auto;">
-      <h1 style="font-size: 2.5rem; margin-bottom: 24px;">🚀 Getting Started</h1>
-      <p style="font-size: 1.2rem; color: #64748b; margin-bottom: 32px;">Learn how to integrate our premium component library into your projects.</p>
-      
-      <div style="background: #1e293b; padding: 24px; border-radius: 12px; margin-bottom: 32px;">
-        <code style="color: #38bdf8; font-size: 1.1rem;">npm install @stencil/app-ui</code>
+    <div style="padding:40px 32px; max-width:860px; margin:0 auto; font-family:inherit;">
+
+      <!-- Header -->
+      <div style="margin-bottom:40px;">
+        <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>
+        </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.
+        </p>
+      </div>
+
+      <!-- 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>
+          Prerequisites
+        </h2>
+        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;">
+          ${[
+            { icon: '🟢', name: 'Node.js', version: '≥ 18.0', note: 'LTS recommended', ok: true },
+            { icon: '📦', name: 'npm', version: '≥ 9.0', note: 'or yarn ≥ 1.22', ok: true },
+            { icon: '🌐', name: 'Browser', version: 'Evergreen', note: 'Chrome, Firefox, Edge, Safari', ok: true },
+            { icon: '🔷', name: 'TypeScript', version: '≥ 5.0', note: 'optional but recommended', ok: false },
+          ].map(p => `
+            <div style="padding:14px 16px; border-radius:10px; background:var(--bg-surface,#f8fafc); border:1px solid var(--border,#e2e8f0); display:flex; gap:12px; align-items:flex-start;">
+              <span style="font-size:1.4rem; line-height:1;">${p.icon}</span>
+              <div>
+                <p style="margin:0; font-size:13px; font-weight:700; color:var(--text-primary,#0f172a);">${p.name}</p>
+                <p style="margin:2px 0 0; font-size:12px; color:var(--text-secondary,#64748b);">${p.version}</p>
+                <p style="margin:2px 0 0; font-size:11px; color:${p.ok ? '#16a34a' : '#94a3b8'};">${p.note}</p>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+
+      <!-- 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>
+          Install
+        </h2>
+        ${[
+          { label: 'npm', color: '#dc2626', cmd: 'npm install atomicuilibrary' },
+          { label: 'yarn', color: '#2563eb', cmd: 'yarn add atomicuilibrary' },
+          { label: 'pnpm', color: '#f59e0b', cmd: 'pnpm add atomicuilibrary' },
+        ].map(t => `
+          <div style="margin-bottom:10px;">
+            <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
+              <span style="font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; background:${t.color}22; color:${t.color};">${t.label}</span>
+            </div>
+            <div style="position:relative; background:#0f172a; border-radius:8px; padding:14px 48px 14px 18px; border:1px solid #1e293b; display:flex; align-items:center; gap:8px; font-family:'Courier New',monospace; font-size:13px;">
+              <span style="color:#4ade80;">$</span>
+              <span style="color:#e2e8f0;">${t.cmd}</span>
+              <button onclick="navigator.clipboard.writeText('${t.cmd}')" title="Copy" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); background:transparent; border:none; cursor:pointer; opacity:0.5; font-size:14px; padding:4px;">📋</button>
+            </div>
+          </div>
+        `).join('')}
       </div>
 
-      <h2 style="margin-bottom: 16px;">Core Concepts</h2>
-      <ul style="line-height: 1.8; color: #334155; padding-left: 20px;">
-        <li><strong>Web Components:</strong> Standards-based components that work anywhere (React, Vue, Angular, or Vanilla JS).</li>
-        <li><strong>Design Tokens:</strong> Harmonious color, spacing, and typography variables managed via CSS Custom Properties.</li>
-        <li><strong>Modern Tooling:</strong> Optimized for performance and developer experience using Stencil.js.</li>
-      </ul>
-
-      <h2 style="margin: 32px 0 16px;">Framework Integration</h2>
-      <p style="margin-bottom: 16px;">Follow our specific guides to get the most out of our components in your favorite framework:</p>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
-        <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px;">
-          <h4 style="margin-bottom: 8px;">React</h4>
-          <p style="font-size: 14px; color: #64748b;">Full type support and event mapping for React 18+ applications.</p>
+      <!-- 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>
+          Framework Setup
+        </h2>
+        <!-- Tabs -->
+        <div id="doc-fw-tabs" style="display:flex; gap:4px; margin-bottom:0; border-bottom:2px solid #e2e8f0; padding-bottom:0;">
+          ${['Vanilla JS','React','Angular','Vue'].map((fw,i) => `
+            <button data-fw="${fw}" onclick="docShowFw(this)" style="padding:7px 16px; font-size:12px; font-weight:600; border:none; background:transparent; cursor:pointer; border-bottom:2px solid ${i===0?'#3b82f6':'transparent'}; margin-bottom:-2px; color:${i===0?'#2563eb':'#64748b'}; transition:all .2s;">${fw}</button>
+          `).join('')}
         </div>
-        <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px;">
-          <h4 style="margin-bottom: 8px;">Angular</h4>
-          <p style="font-size: 14px; color: #64748b;">Seamless integration with NgModule and standalone component patterns.</p>
+        <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:#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:#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:#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:#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:#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>
+            <span style="color:#86efac;">export default function</span> <span style="color:#7dd3fc;">App</span>() {<br>
+            &nbsp;&nbsp;<span style="color:#86efac;">return</span> &lt;<span style="color:#f87171;">ui-button</span> <span style="color:#86efac;">variant</span>=<span style="color:#fbbf24;">"primary"</span>&gt;Click me&lt;/<span style="color:#f87171;">ui-button</span>&gt;;<br>
+            }
+          </div>
+          <div id="doc-fw-Angular" style="display:none;">
+            <span style="color:#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>
+            })<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:#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:#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>
+            &nbsp;&nbsp;})]<br>
+            });
+          </div>
         </div>
       </div>
+
+      <!-- Supported versions table -->
+      <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:#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;">
+          <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>
+            </thead>
+            <tbody>
+              ${[
+                { ver:'0.0.1', date:'May 2025',  status:'active',        node:'≥ 18', stencil:'4.x', link:'#' },
+                { ver:'0.0.1-beta', date:'Mar 2025', status:'maintenance', node:'≥ 16', stencil:'4.x', link:'#' },
+                { ver:'0.0.1-alpha', date:'Jan 2025', status:'eol',       node:'≥ 16', stencil:'3.x', link:'#' },
+              ].map((r,i) => {
+                const statusMap = {
+                  active:      { label:'✅ Active',       bg:'#f0fdf4', color:'#15803d', border:'#bbf7d0' },
+                  maintenance: { label:'🔧 Maintenance',  bg:'#fffbeb', color:'#b45309', border:'#fde68a' },
+                  eol:         { label:'🔴 End of Life',  bg:'#fff1f2', color:'#b91c1c', border:'#fecaca' },
+                };
+                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;">
+                      <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;">
+                      <a href="${r.link}" style="font-size:12px; color:#3b82f6; text-decoration:none; font-weight:600;">View →</a>
+                    </td>
+                  </tr>`;
+              }).join('')}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Older versions -->
+      <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:#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;">
+            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);">
+              📦 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);">
+              🏷️ 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);">
+              📝 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;">
+            <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>
+        </div>
+      </div>
+
+      <!-- CDN -->
+      <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:#06b6d4; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;">🌐</span>
+          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:#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:#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>
+      </div>
+
     </div>
   `;
+
+  // Framework tab switcher
+  window.docShowFw = function(btn) {
+    const fw = btn.getAttribute('data-fw');
+    document.querySelectorAll('#doc-fw-content > div').forEach(p => p.style.display = 'none');
+    document.getElementById('doc-fw-' + fw).style.display = '';
+    document.querySelectorAll('#doc-fw-tabs button').forEach(b => {
+      const on = b.getAttribute('data-fw') === fw;
+      b.style.borderBottomColor = on ? '#3b82f6' : 'transparent';
+      b.style.color = on ? '#2563eb' : '#64748b';
+    });
+  };
 }

package/dist/collection/assets/js/demos/empty-state-demo.js

@@ -10,7 +10,7 @@ export function initEmptyStateDemo() {
     <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
       <h2>Empty State</h2>
       <div style="display: flex; gap: 8px;">
-         <ui-tag label="NEW" color="info" size="md"ui-tag>
+         <ui-tag label="NEW" color="info" size="md"></ui-tag>
       </div>
     </div>
 
@@ -19,15 +19,15 @@ export function initEmptyStateDemo() {
     </p>
 
     <div class="demo-pills" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap; background: #f8fafc; padding: 12px; border-radius: 12px; border: 1px solid #f1f5f9;">
-      <ui-button id="btnEmptyPlayground" variant="outline" color="secondary" label="🎮 Playground" size="md"ui-button>
-      <ui-button id="btnEmptyCommon" variant="outline" color="primary" label="Common Types" size="md"ui-button>
-      <ui-button id="btnEmptyMaster" variant="outline" color="success" label="✨ Master Patterns" size="md"ui-button>
-      <ui-button id="btnEmptyAlignment" variant="outline" color="info" label="↔️ Alignment" size="md"ui-button>
-      <ui-button id="btnEmptyImages" variant="outline" color="warning" label="🖼️ Images" size="md"ui-button>
-      <ui-button id="btnEmptySpecial" variant="outline" color="secondary" label="⭐ Special" size="md"ui-button>
-      <ui-button id="btnEmptyRecovery" variant="outline" color="success" label="🔄 Recovery & Search" size="md"ui-button>
-      <ui-button id="btnEmptyErrors" variant="outline" color="danger" label="🚫 Errors" size="md"ui-button>
-      <ui-button id="btnEmptyFullPage" variant="outline" color="neutral" label="📺 Full Page" size="md"ui-button>
+      <ui-button id="btnEmptyPlayground" variant="outline" color="secondary" label="🎮 Playground" size="md"></ui-button>
+      <ui-button id="btnEmptyCommon" variant="outline" color="primary" label="Common Types" size="md"></ui-button>
+      <ui-button id="btnEmptyMaster" variant="outline" color="success" label="✨ Master Patterns" size="md"></ui-button>
+      <ui-button id="btnEmptyAlignment" variant="outline" color="info" label="↔️ Alignment" size="md"></ui-button>
+      <ui-button id="btnEmptyImages" variant="outline" color="warning" label="🖼️ Images" size="md"></ui-button>
+      <ui-button id="btnEmptySpecial" variant="outline" color="secondary" label="⭐ Special" size="md"></ui-button>
+      <ui-button id="btnEmptyRecovery" variant="outline" color="success" label="🔄 Recovery & Search" size="md"></ui-button>
+      <ui-button id="btnEmptyErrors" variant="outline" color="danger" label="🚫 Errors" size="md"></ui-button>
+      <ui-button id="btnEmptyFullPage" variant="outline" color="neutral" label="📺 Full Page" size="md"></ui-button>
     </div>
 
     <div id="emptyStateDemoContainer" style="margin-top: 40px;"></div>