atomicuilibrary 0.0.1

package/dist/collection/assets/js/demos/my-profile-demo.js

@@ -0,0 +1,237 @@
+/**
+ * My Profile Demo
+ * Creates a beautiful, premium profile page using existing components.
+ */
+export function initMyProfileDemo() {
+    const section = document.getElementById('my-profile');
+    if (!section) return;
+
+    section.innerHTML = `
+    <div class="profile-container" style="max-width: 1000px; margin: 0 auto; padding-bottom: 60px;">
+      
+      <!-- Hero Header Section -->
+      <div class="profile-hero" style="
+        position: relative;
+        height: 280px;
+        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 50%, #ec4899 100%);
+        border-radius: 24px;
+        margin-bottom: 80px;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        overflow: visible;
+      ">
+        <!-- Abstract Background Shapes -->
+        <div style="position: absolute; top: -20px; right: 40px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;"></div>
+        <div style="position: absolute; bottom: 20px; left: 10%; width: 100px; height: 100px; background: rgba(255,255,255,0.05); border-radius: 50%;"></div>
+
+        <!-- Float Profile Card -->
+        <div style="
+          position: absolute;
+          bottom: -60px;
+          left: 40px;
+          display: flex;
+          align-items: flex-end;
+          gap: 24px;
+          z-index: 10;
+        ">
+          <div style="
+            position: relative;
+            padding: 6px;
+            background: white;
+            border-radius: 32px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+          ">
+            <ui-avatar 
+              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" 
+              size="xl" 
+              style="--avatar-size: 140px; border-radius: 26px;"
+            ></ui-avatar>
+            <div style="
+              position: absolute; 
+              bottom: 12px; 
+              right: 12px; 
+              width: 18px; 
+              height: 18px; 
+              background: #22c55e; 
+              border: 3px solid white; 
+              border-radius: 50%;
+            "></div>
+          </div>
+          
+          <div style="padding-bottom: 20px;">
+            <h1 style="font-size: 2.2rem; font-weight: 800; color: white; margin: 0; text-shadow: 0 4px 12px rgba(0,0,0,0.2); margin-bottom: 4px;">John Doe</h1>
+            <p style="font-size: 1.1rem; color: rgba(255,255,255,0.9); margin: 0; font-weight: 500;">Senior UI/UX Architect</p>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div style="position: absolute; bottom: 24px; right: 40px; display: flex; gap: 12px;">
+          <ui-button label="Message" variant="outline" style="--button-border-color: rgba(255,255,255,0.4); --button-text-color: white; backdrop-filter: blur(8px); background: rgba(255,255,255,0.1);"></ui-button>
+          <ui-button label="Edit Profile" variant="primary" style="background: white; color: #10b981; border: none;"></ui-button>
+        </div>
+      </div>
+
+      <!-- Main Profile Grid -->
+      <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 32px;">
+        
+        <!-- Sidebar Columns -->
+        <div style="display: flex; flex-direction: column; gap: 24px;">
+          
+          <!-- About Section -->
+          <ui-card style="--card-padding: 24px;">
+            <h3 style="margin-top: 0; margin-bottom: 16px; font-size: 1.1rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 12px;">About</h3>
+            <p style="color: #64748b; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px;">
+              Passionate about building scalable design systems and beautiful user interfaces. Obsessed with typography, motion, and accessibility.
+            </p>
+            
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+              <div style="display: flex; align-items: center; gap: 12px; color: #475569; font-size: 0.9rem;">
+                <span style="font-size: 1.2rem;">📍</span> San Francisco, CA
+              </div>
+              <div style="display: flex; align-items: center; gap: 12px; color: #475569; font-size: 0.9rem;">
+                <span style="font-size: 1.2rem;">🔗</span> <a href="#" style="color: #10b981; text-decoration: none;">johndoe.design</a>
+              </div>
+              <div style="display: flex; align-items: center; gap: 12px; color: #475569; font-size: 0.9rem;">
+                <span style="font-size: 1.2rem;">📅</span> Joined March 2021
+              </div>
+            </div>
+          </ui-card>
+
+          <!-- Stats Grid -->
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+            <ui-card style="--card-padding: 16px; text-align: center;">
+              <div style="font-size: 1.5rem; font-weight: 800; color: #0f172a;">1.2k</div>
+              <div style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;">Followers</div>
+            </ui-card>
+            <ui-card style="--card-padding: 16px; text-align: center;">
+              <div style="font-size: 1.5rem; font-weight: 800; color: #0f172a;">48</div>
+              <div style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;">Projects</div>
+            </ui-card>
+          </div>
+
+          <!-- Skills Section -->
+          <ui-card style="--card-padding: 24px;">
+            <h3 style="margin-top: 0; margin-bottom: 16px; font-size: 1.1rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 12px;">Skills</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+              <ui-chip label="Design Systems" style="--chip-bg: #eff6ff; --chip-text: #10b981;"></ui-chip>
+              <ui-chip label="React" style="--chip-bg: #f5f3ff; --chip-text: #8b5cf6;"></ui-chip>
+              <ui-chip label="Stencil.js" style="--chip-bg: #fdf2f8; --chip-text: #ec4899;"></ui-chip>
+              <ui-chip label="TypeScript" style="--chip-bg: #ecfdf5; --chip-text: #10b981;"></ui-chip>
+              <ui-chip label="Figma" style="--chip-bg: #fff7ed; --chip-text: #f59e0b;"></ui-chip>
+              <ui-chip label="Interaction Design" style="--chip-bg: #f0f9ff; --chip-text: #0ea5e9;"></ui-chip>
+            </div>
+          </ui-card>
+        </div>
+
+        <!-- Content Column -->
+        <div style="display: flex; flex-direction: column; gap: 24px;">
+          
+
+          <!-- Activity Tabs -->
+          <ui-tabs id="profileTabs" icon-library="lucide">
+            <!-- Activity List Content (Projected via Slot) -->
+            <div slot="activity-content" style="display: flex; flex-direction: column; gap: 16px;">
+              <ui-card style="--card-padding: 20px;">
+                <div style="display: flex; gap: 16px;">
+                  <ui-avatar label="JD" style="background: #10b981; color: white;"></ui-avatar>
+                  <div style="flex: 1;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                      <div style="font-weight: 600;">Updated the Component Library Documentation</div>
+                      <span style="font-size: 0.8rem; color: #94a3b8;">2 hours ago</span>
+                    </div>
+                    <p style="font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0;">
+                      Finished adding the new stack component documentation and examples.
+                    </p>
+                  </div>
+                </div>
+              </ui-card>
+
+              <ui-card style="--card-padding: 20px;">
+                <div style="display: flex; gap: 16px;">
+                  <ui-avatar label="JD" style="background: #8b5cf6; color: white;"></ui-avatar>
+                  <div style="flex: 1;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                      <div style="font-weight: 600;">Published a new blog post</div>
+                      <span style="font-size: 0.8rem; color: #94a3b8;">Yesterday</span>
+                    </div>
+                    <p style="font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0;">
+                      "Mastering Web Components with Stencil.js" is now live on md!
+                    </p>
+                    <div style="margin-top: 12px; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 12px;">
+                      <div style="font-size: 1.5rem;">📝</div>
+                      <div>
+                        <div style="font-weight: 500; font-size: 0.85rem;">Stencil Roadmap 2024</div>
+                        <div style="font-size: 0.75rem; color: #94a3b8;">md.com/design-tips</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ui-card>
+
+              <ui-card style="--card-padding: 20px;">
+                <div style="display: flex; gap: 16px;">
+                  <ui-avatar label="JD" style="background: #ec4899; color: white;"></ui-avatar>
+                  <div style="flex: 1;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                      <div style="font-weight: 600;">Collaborated on "UI Kit Alpha"</div>
+                      <span style="font-size: 0.8rem; color: #94a3b8;">3 days ago</span>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
+                       <ui-avatar size="md" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100" style="--avatar-size: 24px;"></ui-avatar>
+                       <ui-avatar size="md" src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100" style="--avatar-size: 24px;"></ui-avatar>
+                       <span style="font-size: 0.8rem; color: #64748b;">+4 other contributors</span>
+                    </div>
+                  </div>
+                </div>
+              </ui-card>
+            </div>
+            
+            <!-- Portfolio Content (Projected via Slot) -->
+            <div slot="portfolio-content" style="padding: 20px; text-align: center; color: #64748b;">
+                <p>Portfolio items would be displayed here.</p>
+            </div>
+          </ui-tabs>
+
+        </div>
+
+      </div>
+
+    </div>
+  `;
+
+  // Initialize tabs via JS
+  setTimeout(() => {
+    const tabs = document.getElementById('profileTabs');
+    if (tabs) {
+      tabs.items = [
+        {
+          id: 'activity',
+          title: 'Recent Activity',
+          icon: 'activity', // Lucide icon
+          useSlot: true,
+          slot: 'activity-content'
+        },
+        {
+          id: 'portfolio',
+          title: 'Portfolio',
+          icon: 'briefcase', // Lucide icon
+          useSlot: true,
+          slot: 'portfolio-content'
+        },
+        {
+          id: 'followers',
+          title: 'Followers',
+          icon: 'users', // Lucide icon
+          badge: '1.2k',
+          content: '<div style="padding: 20px; text-align: center; color: #64748b;">Followers list would be here.</div>'
+        }
+      ];
+    }
+  }, 50);
+
+        </div>
+
+      </div>
+
+    </div>
+  `;
+}

package/dist/collection/assets/js/demos/nav-bar-demo.js

@@ -0,0 +1,187 @@
+// Navigation Bar Demo
+export function initNavBarDemo() {
+  const section = document.getElementById('nav-bar');
+  if (!section) return;
+
+  section.innerHTML = `
+    <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">A sophisticated sidebar/topbar navigation component with nested items, search, and badges.</p>
+    
+    <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
+      <ui-button onclick="showDemo('default')" variant="outline">🎮 Playground</ui-button>
+      <ui-button onclick="showDemo('collapsed')" variant="outline">Collapsed</ui-button>
+      <ui-button onclick="showDemo('search')" variant="outline">With Search</ui-button>
+      <ui-button onclick="showDemo('complex')" variant="outline">Complex Hierarchy</ui-button>
+      <ui-button onclick="showDemo('overflow')" variant="outline">Limited Icons (Overflow)</ui-button>
+    </div>
+    
+    <div id="navBarContainer" class="playground-preview" style="height: 600px; padding: 0; align-items: stretch; justify-content: flex-start; overflow: hidden;">
+       <nav-bar id="demoNavBar" app-title="App Store" logo-url="https://img.icons8.com/fluency/48/000000/apple-app-store.png" icon-library="lucide"></nav-bar>
+       <div style="flex: 1; display: flex; flex-direction: column; min-width: 0;">
+          <div style="height: 80px; border-bottom: 1px solid rgba(128,128,128,0.1); display: flex; align-items: center; padding: 0 32px; background: rgba(128,128,128,0.03);">
+             <h3 style="margin: 0; font-size: 18px; font-weight: 600;">Dashboard</h3>
+             <div style="margin-left: auto; display: flex; gap: 12px; align-items: center;">
+                <div style="width: 32px; height: 32px; background: rgba(128,128,128,0.2); border-radius: 8px;"></div>
+                <div style="width: 32px; height: 32px; background: var(--nav-accent, #10b981); border-radius: 50%; opacity: 0.8;"></div>
+             </div>
+          </div>
+          <div style="flex: 1; padding: 40px; overflow-y: auto;">
+             <h4 style="margin-top: 0; font-size: 24px; margin-bottom: 12px;">Welcome back, User!</h4>
+             <p style="opacity: 0.7; max-width: 600px; line-height: 1.6;">This interactive preview demonstrates the <code>nav-bar</code> component in a realistic application shell. Use the toggle to test collapse behavior, or try different hierarchy modes above.</p>
+             <div style="margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;">
+               <div style="height: 160px; background: rgba(128,128,128,0.05); border-radius: 16px; border: 1px dashed rgba(128,128,128,0.2); display: flex; align-items: center; justify-content: center; color: rgba(128,128,128,0.4);">Widget 1</div>
+               <div style="height: 160px; background: rgba(128,128,128,0.05); border-radius: 16px; border: 1px dashed rgba(128,128,128,0.2); display: flex; align-items: center; justify-content: center; color: rgba(128,128,128,0.4);">Widget 2</div>
+             </div>
+          </div>
+       </div>
+    </div>
+    
+    <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
+      <ui-button onclick="copyNavBarCode()" id="copyNavBarBtn" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s;">Copy</ui-button>
+      <code id="navBarCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px; white-space: pre-wrap;">
+        &lt;nav-bar ...&gt;&lt;/nav-bar&gt;
+      </code>
+    </div>
+  `;
+
+  const topItems = [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      sectionHeader: 'General',
+      icon: 'home',
+      active: true,
+    },
+    {
+      id: 'store-section',
+      label: 'Products',
+      sectionHeader: 'Business',
+      icon: 'shopping-bag',
+      children: [
+        { id: 'all-products', label: 'Inventory' },
+        { id: 'new-product', label: 'Add Item' },
+      ],
+    },
+    { id: 'orders', label: 'Orders', icon: 'shopping-cart', badge: '24' },
+    {
+      id: 'reports',
+      label: 'Analytics',
+      sectionHeader: 'Insights',
+      icon: 'bar-chart-2',
+    },
+  ];
+
+  const bottomItems = [
+    {
+      id: 'user-profile',
+      label: 'Praveen K',
+      sectionHeader: 'User',
+      icon: 'user',
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      sectionHeader: 'Settings & About',
+      icon: 'settings',
+    },
+    {
+      id: 'about',
+      label: 'About',
+      icon: 'info',
+    },
+  ];
+
+  const nav = document.getElementById('demoNavBar');
+  if (nav) {
+    nav.topItems = topItems;
+    nav.bottomItems = bottomItems;
+    nav.collapsed = false;
+    setTimeout(() => window.updateNavBarCode(), 100);
+  }
+
+  window.copyNavBarCode = () => {
+    const code = document.getElementById('navBarCodeBlock').innerText;
+    const btn = document.getElementById('copyNavBarBtn');
+
+    navigator.clipboard.writeText(code).then(() => {
+      const originalText = btn.innerText;
+      btn.innerText = 'Copied!';
+      btn.style.background = '#10b981';
+
+      setTimeout(() => {
+        btn.innerText = originalText;
+        btn.style.background = 'rgba(255,255,255,0.1)';
+      }, 2000);
+    });
+  };
+
+  window.updateNavBarCode = () => {
+    const nav = document.getElementById('demoNavBar');
+    const codeBlock = document.getElementById('navBarCodeBlock');
+    if (!nav || !codeBlock) return;
+
+    let props = '';
+    if (nav.appTitle) props += ` app-title="${nav.appTitle}"`;
+    if (nav.logoUrl) props += ` logo-url="${nav.logoUrl}"`;
+    if (nav.collapsed) props += ` collapsed`;
+    if (nav.showSearch) props += ` show-search`;
+    if (nav.maxVisibleItems > 0) props += ` max-visible-items="${nav.maxVisibleItems}"`;
+
+    let scriptStr = '';
+    // Only showing structure of items for brevity
+    scriptStr += `\n  // Items Setup\n  navBar.topItems = topItems;\n  navBar.bottomItems = bottomItems;`;
+
+    codeBlock.innerText = `<nav-bar icon-library="lucide"${props}></nav-bar>\n<script>${scriptStr}\n</script>`;
+  };
+
+  window.showDemo = type => {
+    const nav = document.getElementById('demoNavBar');
+    if (!nav) return;
+
+    // Reset to defaults
+    nav.collapsed = false;
+    nav.showSearch = false;
+    nav.maxVisibleItems = 0;
+    nav.topItems = topItems;
+    nav.bottomItems = bottomItems;
+
+    switch (type) {
+      case 'collapsed':
+        nav.collapsed = true;
+        break;
+      case 'search':
+        nav.showSearch = true;
+        break;
+      case 'overflow':
+        nav.maxVisibleItems = 3;
+        break;
+      case 'complex':
+        nav.topItems = [
+          { id: 'dash', label: 'Dashboard', icon: 'layout' },
+          {
+            id: 'mgmt',
+            label: 'Management',
+            icon: 'shield',
+            children: [
+              { id: 'usr', label: 'Users' },
+              { id: 'grp', label: 'Groups', sectionHeader: 'Permissions' },
+              {
+                id: 'rol',
+                label: 'Roles',
+                children: [
+                  { id: 'adm', label: 'Admin' },
+                  { id: 'mrr', label: 'Viewer' },
+                ],
+              },
+            ],
+          },
+          { id: 'anl', label: 'Analytics', icon: 'bar-chart' },
+        ];
+        break;
+      default:
+        // Default case already handled by resets above
+        break;
+    }
+
+    window.updateNavBarCode();
+  };
+}

package/dist/collection/assets/js/demos/number-input-demo.js

@@ -0,0 +1,242 @@
+/**
+ * Number Input Component Demo
+ */
+export function initNumberInputDemo() {
+  const container = document.getElementById('number-input');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-section-header">
+      <h2 class="demo-section-title">Number Input</h2>
+      <p class="demo-section-subtitle">Precision numerical input with stepper controls, affixes, and validation.</p>
+    </div>
+
+    <div class="demo-grid">
+      <!-- Basic Usage -->
+      <div class="demo-card">
+        <h3 class="demo-card-title">Basic Usage</h3>
+        <div class="demo-card-content">
+          <ui-number-input 
+            label="Age" 
+            value="25" 
+            min="0" 
+            max="120" 
+            helper-text="Enter your age (0-120)">
+          </ui-number-input>
+          
+          <ui-number-input 
+            label="Quantity" 
+            value="1" 
+            step="5" 
+            min="0"
+            helper-text="Steps of 5">
+          </ui-number-input>
+        </div>
+      </div>
+
+      <!-- Stepper Layouts -->
+      <div class="demo-card">
+        <h3 class="demo-card-title">Stepper Layouts</h3>
+        <div class="demo-card-content" style="display: flex; flex-direction: column; gap: 20px;">
+          <ui-number-input 
+            label="Sides Layout (Default)" 
+            value="10" 
+            stepper-layout="sides">
+          </ui-number-input>
+          
+          <ui-number-input 
+            label="Right Stacked Layout" 
+            value="10" 
+            stepper-layout="right">
+          </ui-number-input>
+
+          <ui-number-input 
+            label="No Steppers" 
+            value="10" 
+            stepper-layout="none">
+          </ui-number-input>
+        </div>
+      </div>
+
+      <!-- Precision & Affixes -->
+      <div class="demo-card">
+        <h3 class="demo-card-title">Precision & Affixes</h3>
+        <div class="demo-card-content">
+          <ui-number-input 
+            label="Currency (USD)" 
+            value="99.99" 
+            precision="2" 
+            step="0.01" 
+            prefix-text="$">
+          </ui-number-input>
+          
+          <ui-number-input 
+            label="Weight" 
+            value="75" 
+            suffix-text="kg" 
+            step="0.5">
+          </ui-number-input>
+
+          <ui-number-input 
+            label="Percentage" 
+            value="50" 
+            suffix-text="%" 
+            min="0" 
+            max="100">
+          </ui-number-input>
+        </div>
+      </div>
+
+      <!-- Sizes & States -->
+      <div class="demo-card">
+        <h3 class="demo-card-title">Sizes & States</h3>
+          <ui-number-input label="Small" size="sm" value="10"></ui-number-input>
+          <ui-number-input label="Medium" size="md" value="10"></ui-number-input>
+          <ui-number-input label="Large" size="lg" value="10"></ui-number-input>
+          <ui-number-input label="Disabled" value="10" disabled="true" size="md"></ui-number-input>
+          <ui-number-input label="Invalid State" value="-5" error-text="Value cannot be negative" size="md"></ui-number-input>
+        </div>
+      </div>
+
+      <!-- Variants -->
+      <div class="demo-card">
+        <h3 class="demo-card-title">Variants</h3>
+        <div class="demo-card-content" style="display: flex; flex-direction: column; gap: 20px;">
+          <ui-number-input 
+            label="Default Variant" 
+            value="100" 
+            suffix-text="Units"
+            size="md">
+          </ui-number-input>
+          
+          <ui-number-input 
+            label="Plain Variant" 
+            variant="plain" 
+            value="100" 
+            helper-text="Automatically hides steppers and suffices"
+            size="md">
+          </ui-number-input>
+          
+          <div style="padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
+             <p style="font-size: 12px; color: #64748b; margin: 0;">The <strong>plain</strong> variant is designed for dense UIs like pagination, where a borderless, icon-free appearance is preferred.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Full Width & Global -->
+    <div class="demo-card" style="margin-top: 24px;">
+      <h3 class="demo-card-title">Full Width & Scroll Wheel</h3>
+      <div class="demo-card-content">
+        <ui-number-input 
+          label="Full Width Amount" 
+          value="1000" 
+          full-width="true" 
+          prefix-text="€" 
+          step="50"
+          helper-text="Try using your mouse scroll wheel while focused!"
+          size="md">
+        </ui-number-input>
+      </div>
+    </div>
+
+    <!-- Playground -->
+    <div class="demo-playground" style="margin-top: 40px;">
+      <h3 class="demo-card-title">Interactive Playground</h3>
+      <div class="playground-layout">
+        <div class="playground-preview">
+          <ui-number-input id="playgroundNumberInput" label="Interactive Control" value="0" size="md"></ui-number-input>
+          <div id="numberValueDisplay" style="margin-top: 10px; font-size: 14px; font-weight: 600; color: #6366f1;">
+            Current Value: 0
+          </div>
+        </div>
+        <div class="playground-controls" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%;">
+          <div class="control-group">
+            <label>Variant</label>
+            <ui-dropdown onchange="updateNumberProp('variant', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+              <option value="default" selected>Default</option>
+              <option value="plain">Plain</option>
+            </ui-dropdown>
+          </div>
+          <div class="control-group">
+            <label>Size</label>
+            <ui-dropdown onchange="updateNumberProp('size', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+              <option value="sm">Small</option>
+              <option value="md" selected>Medium</option>
+              <option value="lg">Large</option>
+            </ui-dropdown>
+          </div>
+          <div class="control-group">
+            <label>Layout</label>
+            <ui-dropdown onchange="updateNumberProp('stepper-layout', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+              <option value="sides" selected>Sides</option>
+              <option value="right">Right Stacked</option>
+              <option value="none">None</option>
+            </ui-dropdown>
+          </div>
+          <div class="control-group">
+            <label>Color</label>
+            <ui-dropdown onchange="updateNumberProp('color', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+              <option value="primary" selected>Primary</option>
+              <option value="success">Success</option>
+              <option value="danger">Danger</option>
+              <option value="warning">Warning</option>
+              <option value="info">Info</option>
+            </ui-dropdown>
+          </div>
+          <div class="control-group">
+            <label>Min</label>
+            <ui-input type="number" value="0" oninput="updateNumberProp('min', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+          </div>
+          <div class="control-group">
+            <label>Max</label>
+            <ui-input type="number" value="100" oninput="updateNumberProp('max', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+          </div>
+          <div class="control-group">
+            <label>Step</label>
+            <ui-input type="number" value="1" oninput="updateNumberProp('step', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+          </div>
+          <div class="control-group">
+            <label>Precision</label>
+            <ui-input type="number" value="-1" oninput="updateNumberProp('precision', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+          </div>
+          <div class="control-group">
+            <label>Prefix</label>
+            <ui-input type="text" placeholder="e.g. $" oninput="updateNumberProp('prefix-text', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+          </div>
+          <div class="control-group">
+             <label>Suffix</label>
+             <ui-input type="text" placeholder="e.g. kg" oninput="updateNumberProp('suffix-text', this.value)" size="md" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #e2e8f0;">
+          </div>
+          <div class="control-group" style="grid-column: span 2; display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap;">
+            <ui-checkbox checked label="Default Icon" onCheckboxChange="updateNumberProp('show-type-icon', event.detail.checked)" size="md"></ui-checkbox>
+            <ui-checkbox label="Disabled" onCheckboxChange="updateNumberProp('disabled', event.detail.checked)" size="md"></ui-checkbox>
+            <ui-checkbox label="Readonly" onCheckboxChange="updateNumberProp('readonly', event.detail.checked)" size="md"></ui-checkbox>
+            <ui-checkbox label="Full Width" onCheckboxChange="updateNumberProp('full-width', event.detail.checked)" size="md"></ui-checkbox>
+            <ui-checkbox label="Floating Label" onCheckboxChange="updateNumberProp('floating-label', event.detail.checked)" size="md"></ui-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Global functions for playground
+  window.updateNumberProp = (prop, value) => {
+    const el = document.getElementById('playgroundNumberInput');
+    if (el) {
+      if (typeof value === 'boolean') {
+        el[prop] = value;
+      } else {
+        el.setAttribute(prop, value);
+      }
+    }
+  };
+
+  const playgroundEl = document.getElementById('playgroundNumberInput');
+  const displayEl = document.getElementById('numberValueDisplay');
+  if (playgroundEl && displayEl) {
+    playgroundEl.addEventListener('numberChange', e => {
+      displayEl.innerText = `Current Value: ${e.detail}`;
+    });
+  }
+}