atomicuilibrary 0.0.1 → 0.1.3

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

@@ -1,11 +1,39 @@
-// Card Demo Functions
+// Card Demo Functions
 export function initCardDemo() {
   const section = document.getElementById('card');
   if (!section) return;
 
+  // Listen for and pretty-print all card component custom events in the console
+  const cardEvents = [
+    'cardClose',
+    'cardFlip',
+    'cardToggle',
+    'expandToggle',
+    'cardClick',
+    'cardSelect',
+    'menuItemClick',
+    'menuActionClick'
+  ];
+  cardEvents.forEach(eventName => {
+    section.addEventListener(eventName, (event) => {
+      console.log(
+        `%c[ui-card Event] %cEmitted: %c"${eventName}"`,
+        'color:var(--accent-blue,#3b82f6); font-weight: bold;',
+        'color: #4b5563;',
+        'color: #10b981; font-weight: bold;',
+        {
+          event: eventName,
+          payload: event.detail,
+          target: event.target,
+          timestamp: new Date().toLocaleTimeString()
+        }
+      );
+    });
+  });
+
   section.innerHTML = `
     <div class="demo-header" style="margin-bottom: 32px;">
-      <h2 style="margin: 0 0 8px; font-size: 24px; color: #111827;">Unified Card Component</h2>
+      <h2 style="margin: 0 0 8px; font-size: 24px; color:var(--text-primary,#111827);">Unified Card Component</h2>
       <p style="margin: 0; opacity: 0.7; font-size: 15px; color: #4b5563;">A feature-rich, highly customizable card component that combines the best of both libraries.</p>
     </div>
 
@@ -25,7 +53,7 @@ export function initCardDemo() {
       .nav-pill {
         padding: 8px 16px;
         background: #f3f4f6;
-        border: 1px solid #e5e7eb;
+        border:1px solid var(--border-default,#e5e7eb);
         border-radius: 9999px;
         color: #4b5563;
         font-size: 14px;
@@ -33,18 +61,18 @@ export function initCardDemo() {
         cursor: pointer;
         transition: all 0.2s ease;
       }
-      .nav-pill:hover { background: #e5e7eb; color: #111827; }
+      .nav-pill:hover { background: #e5e7eb; color:var(--text-primary,#111827); }
       .nav-pill.active { background: #10b981; border-color: #10b981; color: white; }
-      .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 32px; }
-      .section-title { grid-column: 1 / -1; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; color: #111827; }
+      .demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 16px; margin-bottom: 32px; }
+      .section-title { margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; color:var(--text-primary,#111827); }
     </style>
 
     <div id="cardDemoContainer"></div>
   `;
 
   const updateActivePill = id => {
-    document.querySelectorAll('.nav-pill').forEach(p => {
-      p.variant = 'soft';
+    document.querySelectorAll('.demo-nav-pills ui-button').forEach(p => {
+      p.variant = 'outline';
       p.color = 'default';
     });
     const el = document.getElementById(id);
@@ -60,16 +88,30 @@ export function initCardDemo() {
     const container = document.getElementById('cardDemoContainer');
     if (!container) return;
     container.innerHTML = `
+      <h3 class="section-title" style="margin-top: 0;">Color Variants</h3>
       <div class="demo-grid">
-        <h3 class="section-title">Color Variants</h3>
         <ui-card variant="default" card-title="Default" extra="Status: Idle"></ui-card>
         <ui-card variant="primary" card-title="Primary" extra="Status: Active"></ui-card>
         <ui-card variant="success" card-title="Success" extra="Status: Complete"></ui-card>
         <ui-card variant="info" card-title="Info" extra="Status: Info"></ui-card>
         <ui-card variant="warning" card-title="Warning" extra="Status: Alert"></ui-card>
         <ui-card variant="danger" card-title="Danger" extra="Status: Error"></ui-card>
-        
-        <h3 class="section-title">Visual Styles</h3>
+      </div>
+      
+      <h3 class="section-title">Status Cards (New Variant)</h3>
+      <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-top: -8px; margin-bottom: 16px;">
+        Status cards tint the card background and border dynamically based on the <code>color</code> prop.
+      </p>
+      <div class="demo-grid">
+        <ui-card variant="status" color="primary" card-title="Primary Status" description="Status card with a primary themed border and soft primary background tint."></ui-card>
+        <ui-card variant="status" color="success" card-title="Success Status" description="Status card with a success themed border and soft success background tint."></ui-card>
+        <ui-card variant="status" color="info" card-title="Info Status" description="Status card with an info themed border and soft info background tint."></ui-card>
+        <ui-card variant="status" color="warning" card-title="Warning Status" description="Status card with a warning themed border and soft warning background tint."></ui-card>
+        <ui-card variant="status" color="danger" card-title="Danger Status" description="Status card with a danger themed border and soft danger background tint."></ui-card>
+      </div>
+      
+      <h3 class="section-title">Visual Styles</h3>
+      <div class="demo-grid">
         <ui-card variant="elevated" card-title="Elevated" description="Standard elevated style with deep shadow."></ui-card>
         <ui-card variant="outlined" card-title="Outlined" description="Clean outlined style with minimal shadow."></ui-card>
         <ui-card variant="filled" card-title="Filled" description="Solid background color without borders."></ui-card>
@@ -84,35 +126,33 @@ export function initCardDemo() {
     const container = document.getElementById('cardDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div class="demo-grid" style="grid-template-columns: 1fr;">
-        <h3 class="section-title">Orientation Layouts</h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px;">
-           <ui-card layout="vertical" card-title="Vertical Layout" cover="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600" description="The classic vertical card structure."></ui-card>
-           <ui-card layout="horizontal" card-title="Horizontal Layout" cover="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600" description="Perfect for list items and detailed previews."></ui-card>
-        </div>
+      <h3 class="section-title" style="margin-top: 0;">Orientation Layouts</h3>
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 24px; margin-bottom: 32px;">
+         <ui-card layout="vertical" card-title="Vertical Layout" cover="/build/assets/images/nature_forest_1.png" description="The classic vertical card structure."></ui-card>
+         <ui-card layout="horizontal" card-title="Horizontal Layout" cover="/build/assets/images/nature_lake_2.png" description="Perfect for list items and detailed previews."></ui-card>
+      </div>
 
-        <h3 class="section-title">Design Patterns</h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
-           <ui-card pattern="product" card-title="Wireless Headphones" cover="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500" tag="Best Seller" button-text="Add to Cart">
-             <div slot="content">
-               <p style="font-size: 24px; font-weight: bold; margin: 8px 0;">$199.00</p>
-               <p style="color: #6b7280;">High-fidelity sound with noise cancellation.</p>
-             </div>
-           </ui-card>
+      <h3 class="section-title">Design Patterns</h3>
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: 32px;">
+         <ui-card pattern="product" card-title="Wireless Headphones" cover="/build/assets/images/nature_desert_3.png" tag="Best Seller" button-text="Add to Cart">
+           <div slot="content">
+             <p style="font-size: 24px; font-weight: bold; margin: 8px 0;">$199.00</p>
+             <p style="color: var(--text-secondary, #6b7280);">High-fidelity sound with noise cancellation.</p>
+           </div>
+         </ui-card>
 
-           <ui-card pattern="shortcut" card-title="Security Settings" avatar-icon="fas fa-shield-alt" description="Manage your password, 2FA, and connected devices."></ui-card>
-           
-           <ui-card pattern="shortcut" card-title="User Profile" avatar="https://i.pravatar.cc/150?u=a" description="Update your personal information and profile picture."></ui-card>
-         </div>
+         <ui-card pattern="shortcut" card-title="Security Settings" avatar-icon="fas fa-shield-alt" description="Manage your password, 2FA, and connected devices."></ui-card>
+         
+         <ui-card pattern="shortcut" card-title="User Profile" avatar="/build/assets/images/logo.png" description="Update your personal information and profile picture."></ui-card>
+      </div>
 
-         <h3 class="section-title">Card Types (Nesting)</h3>
-         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
-            <ui-card card-title="Outer Card" description="Standard container card.">
-               <div style="margin-top: 16px;">
-                  <ui-card type="inner" card-title="Nested Inner Card" description="Subtly grey background to distinguish from its parent."></ui-card>
-               </div>
-            </ui-card>
-         </div>
+      <h3 class="section-title">Card Types (Nesting)</h3>
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;">
+         <ui-card card-title="Outer Card" description="Standard container card.">
+            <div style="margin-top: 16px;">
+               <ui-card type="inner" card-title="Nested Inner Card" description="Subtly grey background to distinguish from its parent."></ui-card>
+            </div>
+         </ui-card>
       </div>
     `;
   };
@@ -123,15 +163,14 @@ export function initCardDemo() {
     const container = document.getElementById('cardDemoContainer');
     if (!container) return;
     container.innerHTML = `
+      <h3 class="section-title" style="margin-top: 0;">Physical Interaction Engine</h3>
+      <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-top: -8px; margin-bottom: 16px;">
+        The component now supports 3D Tilt and Magnetic Attraction for high-end web experiences.
+      </p>
       <div class="demo-grid">
-        <h3 class="section-title">Physical Interaction Engine</h3>
-        <p style="grid-column: 1 / -1; color: #64748b; font-size: 14px; margin-top: -12px; margin-bottom: 20px;">
-          The component now supports 3D Tilt and Magnetic Attraction for high-end web experiences.
-        </p>
-        
         <ui-card tilt="true" variant="primary" importance="emphasized" card-title="3D Tilt Mode" description="Hover over this card to see it tilt in 3D space based on your mouse position."></ui-card>
         <ui-card magnetic="true" variant="success" card-title="Magnetic Attraction" description="This card follows your mouse cursor with a subtle organic movement."></ui-card>
-        <ui-card tilt="true" magnetic="true" glass="true" card-title="Total Physicality" ribbon="Elite" cover="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500" description="Combining 3D tilt, magnetic attraction, and glassmorphism."></ui-card>
+        <ui-card tilt="true" magnetic="true" glass="true" card-title="Total Physicality" ribbon="Elite" cover="/build/assets/images/nature_lake_2.png" description="Combining 3D tilt, magnetic attraction, and glassmorphism."></ui-card>
       </div>
     `;
   };
@@ -142,55 +181,61 @@ export function initCardDemo() {
     const container = document.getElementById('cardDemoContainer');
     if (!container) return;
     container.innerHTML = `
+      <h3 class="section-title" style="margin-top: 0;">Glassmorphism & Ribbons</h3>
       <div class="demo-grid">
-        <h3 class="section-title">Glassmorphism & Ribbons</h3>
-        <ui-card glass="true" card-title="Glass Design" ribbon="Premium" ribbon-color="#8b5cf6" cover="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=500" description="Elegant translucent backdrop effect."></ui-card>
+        <ui-card glass="true" card-title="Glass Design" ribbon="Premium" ribbon-color="#8b5cf6" cover="/build/assets/images/nature_ocean_4.png" description="Elegant translucent backdrop effect."></ui-card>
         <ui-card variant="primary" card-title="Left Ribbon" ribbon="New" ribbon-position="top-left" ribbon-color="#10b981" description="Ribbons can be placed on the left side too."></ui-card>
         <ui-card variant="elevated" card-title="Custom Radius" border-radius="32px" border="2px dashed #10b981" description="Fully customizable borders and radius."></ui-card>
+      </div>
 
-        <h3 class="section-title">Headers & Content</h3>
-        <ui-card avatar="https://i.pravatar.cc/150?u=jane" card-title="Jane Cooper" extra="Active" description="Card with image avatar in header."></ui-card>
+      <h3 class="section-title">Headers & Content</h3>
+      <div class="demo-grid">
+        <ui-card avatar="/build/assets/images/logo.png" card-title="Jane Cooper" extra="Active" description="Card with image avatar in header."></ui-card>
         <ui-card avatar-icon="fas fa-rocket" card-title="Mission Alpha" extra="T-Minus 10s" description="Card with icon avatar in header."></ui-card>
         <ui-card card-title="Full Features" tag="V1.0" actions="Details, Docs, GitHub" button-text="Launch" description="Combining tags, quick actions, and buttons."></ui-card>
       </div>
     `;
   };
 
-  // --- 4. Interactions ---
+  // --- 5. Interactions ---
   window.showInteractions = () => {
     updateActivePill('pill-interactions');
     const container = document.getElementById('cardDemoContainer');
     if (!container) return;
     container.innerHTML = `
+      <h3 class="section-title" style="margin-top: 0;">Flip Interaction</h3>
       <div class="demo-grid">
-        <h3 class="section-title">Flip Interaction</h3>
-        <ui-card flippable="true" card-title="Click to Flip" description="Discover what is on the other side.">
-          <div slot="back">
-            <h3 style="color: white;">Secret Content!</h3>
-            <p style="color: rgba(255,255,255,0.8);">This is the back side of a flippable card.</p>
+        <ui-card flippable="true" height="280px" card-title="Click to Flip" description="Discover what is on the other side.">
+          <div slot="back" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; height: 100%; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;">
+            <h3 style="margin: 0 0 8px; font-size: 20px; font-weight: 700; color: white;">Secret Content!</h3>
+            <p style="margin: 0; opacity: 0.9; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.9);">This is the back side of a flippable card, fully customizable using slots.</p>
           </div>
         </ui-card>
         
-        <ui-card flippable="true" flip-trigger="hover" card-title="Hover to Flip" description="Simply hover to see the back.">
-          <div slot="back" style="background: #10b981; color: white; height: 100%; padding: 20px; border-radius: 8px;">
-            <h3>Instant Preview</h3>
-            <p>Perfect for quick-reveal information.</p>
+        <ui-card flippable="true" flip-trigger="hover" height="280px" card-title="Hover to Flip" description="Simply hover to see the back.">
+          <div slot="back" style="background: linear-gradient(135deg, #10b981 0%, #047857 100%); color: white; height: 100%; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;">
+            <h3 style="margin: 0 0 8px; font-size: 20px; font-weight: 700; color: white;">Instant Preview</h3>
+            <p style="margin: 0; opacity: 0.9; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.9);">Perfect for quick-reveal information, triggered on hover.</p>
           </div>
         </ui-card>
+      </div>
 
-        <h3 class="section-title">Stateful Cards</h3>
+      <h3 class="section-title">Stateful Cards</h3>
+      <div class="demo-grid">
         <ui-card collapsible="true" card-title="Collapsible Card" description="Toggle the body visibility using the header arrow."></ui-card>
         <ui-card closable="true" card-title="Closable Card" description="Perfect for notifications or dismissible content."></ui-card>
         <ui-card selectable="true" card-title="Selectable Mode" description="Click to select this card. Supports shared selection groups."></ui-card>
-        
-        <h3 class="section-title">Navigation</h3>
+      </div>
+      
+      <h3 class="section-title">Navigation</h3>
+      <div class="demo-grid">
         <ui-card clickable="true" href="https://google.com" target="_blank" card-title="External Link Card" description="The entire card acts as a link to an external site."></ui-card>
         <ui-card hoverable="true" card-title="Hover Effect" description="Subtle Lift and Shadow increase on hover."></ui-card>
       </div>
     `;
   };
 
-  // --- 5. Menus & Actions ---
+  // --- 6. Menus & Actions ---
   window.showMenuActions = () => {
     updateActivePill('pill-actions');
     const container = document.getElementById('cardDemoContainer');
@@ -203,28 +248,30 @@ export function initCardDemo() {
     ]);
 
     container.innerHTML = `
+      <h3 class="section-title" style="margin-top: 0;">Contextual Menus</h3>
       <div class="demo-grid">
-        <h3 class="section-title">Contextual Menus</h3>
         <ui-card show-menu="true" menu-items='${menuItems}' card-title="JSON Defined Menu" icon-library="lucide" description="Define menu items via complex JSON objects."></ui-card>
         <ui-card menu-actions="Share, Export, Report" card-title="Action String Menu" description="Quickly define menu actions via a simple comma-separated string."></ui-card>
+      </div>
 
-        <h3 class="section-title">Footer Actions</h3>
+      <h3 class="section-title">Footer Actions</h3>
+      <div class="demo-grid">
         <ui-card button-text="Primary Action" actions="Secondary, Tertiary" card-title="Footer Showcase" description="Mix standard primary buttons with quick link actions."></ui-card>
       </div>
     `;
   };
 
-  // --- 6. Loading States ---
+  // --- 7. Loading States ---
   window.showLoadingStates = () => {
     updateActivePill('pill-loading');
     const container = document.getElementById('cardDemoContainer');
     if (!container) return;
     container.innerHTML = `
+      <h3 class="section-title" style="margin-top: 0;">Skeleton Loading</h3>
+      <div style="margin-bottom: 20px;">
+        <ui-button onclick="document.querySelectorAll('ui-card').forEach(c => c.loading = !c.loading)" variant="outline" color="primary">Toggle Loading All</ui-button>
+      </div>
       <div class="demo-grid">
-        <h3 class="section-title">Skeleton Loading</h3>
-        <div style="grid-column: 1 / -1; margin-bottom: 20px;">
-          <ui-button onclick="document.querySelectorAll('ui-card').forEach(c => c.loading = !c.loading)" variant="outline" color="primary">Toggle Loading All</ui-button>
-        </div>
         <ui-card loading="true" card-title="Skeleton 1"></ui-card>
         <ui-card loading="true" variant="primary" card-title="Skeleton 2"></ui-card>
         <ui-card loading="true" layout="horizontal" card-title="Horizontal Skeleton"></ui-card>
@@ -239,7 +286,7 @@ export function initCardDemo() {
     if (!container) return;
     container.innerHTML = `
       <div class="playground-layout" style="display: grid; grid-template-columns: 350px 1fr; gap: 32px; align-items: start;">
-        <div class="controls-panel" style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+        <div class="controls-panel" style="border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
            <h4 style="margin: 0 0 20px; font-size: 18px;">Configuration</h4>
            
            <div style="display: flex; flex-direction: column; gap: 16px;">
@@ -307,14 +354,15 @@ export function initCardDemo() {
              </label>
            </div>
         </div>
-
-        <div class="result-panel" style="display: flex; flex-direction: column; align-items: center; gap: 32px;">
-           <div id="pg-container"></div>
+ 
+        <div class="result-panel" style="display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%;">
+           <div id="pg-container" class="playground-preview" style="width: 100%; box-sizing: border-box;"></div>
            
            <div style="width: 100%; background: #1f2937; border-radius: 8px; padding: 20px; color: #f9fafb; font-family: monospace; font-size: 13px; overflow-x: auto;">
              <code id="pg-code"></code>
            </div>
         </div>
+      </div>   </div>
       </div>
     `;
 
@@ -360,7 +408,7 @@ export function initCardDemo() {
   ${ribbon ? 'ribbon="' + ribbon + '"' : ''}
   ${type !== 'default' ? 'type="' + type + '"' : ''}
   ${importance !== 'standard' ? 'importance="' + importance + '"' : ''}
-  ${layout === 'horizontal' || pattern === 'product' ? 'cover="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=500"' : ''}
+  ${layout === 'horizontal' || pattern === 'product' ? 'cover="/build/assets/images/nature_forest_1.png"' : ''}
 >
   <div slot="content">
     <p>Flexible content area supporting any HTML or components.</p>
@@ -405,7 +453,7 @@ export function initCardDemo() {
                 description="Try expanding me if I'm at the bottom of your screen!"
               >
                 <div slot="content">
-                  <div style="height: 150px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px dashed #e5e7eb; color: #9ca3af;">
+                  <div style="height: 150px; background: var(--bg-secondary, #f3f4f6); border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-default, #e5e7eb); color: var(--text-muted, #9ca3af);">
                     <span>Detailed content for card ${i}</span>
                   </div>
                 </div>