atomicuilibrary 0.0.1 → 0.1.3

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

@@ -39,22 +39,22 @@ export function initBadgeDemo() {
     if (!badge || !codeBlock) return;
 
     let props = '';
-    if (badge.getAttribute('value')) props += ` value="${badge.getAttribute('value')}"`;
-    if (badge.getAttribute('icon')) {
-      props += ` icon="${badge.getAttribute('icon')}"`;
-      if (badge.getAttribute('icon-library') && badge.getAttribute('icon-library') !== 'default') {
-        props += ` icon-library="${badge.getAttribute('icon-library')}"`;
+    if (badge.value) props += ` value="${badge.value}"`;
+    if (badge.icon) {
+      props += ` icon="${badge.icon}"`;
+      if (badge.iconLibrary && badge.iconLibrary !== 'default') {
+        props += ` icon-library="${badge.iconLibrary}"`;
       }
     }
-    if (badge.getAttribute('color') && badge.getAttribute('color') !== 'danger') props += ` color="${badge.getAttribute('color')}"`;
-    if (badge.getAttribute('variant') && badge.getAttribute('variant') !== 'standard') props += ` variant="${badge.getAttribute('variant')}"`;
-    if (badge.getAttribute('size') && badge.getAttribute('size') !== 'md') props += ` size="${badge.getAttribute('size')}"`;
-    if (badge.getAttribute('gradient')) props += ` gradient="${badge.getAttribute('gradient')}"`;
-    if (badge.getAttribute('animation') && badge.getAttribute('animation') !== 'none') props += ` animation="${badge.getAttribute('animation')}"`;
-    if (badge.getAttribute('dot') === 'true') props += ` dot`;
-    if (badge.getAttribute('interactive') === 'true') props += ` interactive`;
-    if (badge.getAttribute('closeable') === 'true') props += ` closeable`;
-    if (badge.getAttribute('glow') === 'true') props += ` glow`;
+    if (badge.color && badge.color !== 'danger') props += ` color="${badge.color}"`;
+    if (badge.variant && badge.variant !== 'standard') props += ` variant="${badge.variant}"`;
+    if (badge.size && badge.size !== 'md') props += ` size="${badge.size}"`;
+    if (badge.gradient) props += ` gradient="${badge.gradient}"`;
+    if (badge.animation && badge.animation !== 'none') props += ` animation="${badge.animation}"`;
+    if (badge.dot) props += ` dot`;
+    if (badge.interactive) props += ` interactive`;
+    if (badge.closeable) props += ` closeable`;
+    if (badge.glow) props += ` glow`;
 
     codeBlock.innerText = `<ui-badge${props}>\n  <ui-button label="Notifications"></ui-button>\n</ui-badge>`;
   };
@@ -76,26 +76,25 @@ export function initBadgeDemo() {
     const isCloseable = section.querySelector('#badgeCloseable').checked;
     const hasGlow = section.querySelector('#badgeGlow').checked;
 
-    badge.setAttribute('value', value);
-    badge.setAttribute('color', color);
-    badge.setAttribute('variant', variant);
-    badge.setAttribute('size', size);
-    badge.setAttribute('animation', animation);
-    badge.setAttribute('dot', isDot);
-    badge.setAttribute('interactive', isInteractive);
-    badge.setAttribute('closeable', isCloseable);
-    badge.setAttribute('glow', hasGlow);
+    badge.value = value;
+    badge.color = color;
+    badge.variant = variant;
+    badge.size = size;
+    badge.animation = animation;
+    badge.dot = isDot;
+    badge.interactive = isInteractive;
+    badge.closeable = isCloseable;
+    badge.glow = hasGlow;
 
     if (icon) {
-      badge.setAttribute('icon', icon);
-      badge.setAttribute('icon-library', library);
+      badge.icon = icon;
+      badge.iconLibrary = library;
     } else {
-      badge.removeAttribute('icon');
-      badge.removeAttribute('icon-library');
+      badge.icon = undefined;
+      badge.iconLibrary = 'default';
     }
 
-    if (gradient) badge.setAttribute('gradient', gradient);
-    else badge.removeAttribute('gradient');
+    badge.gradient = gradient || undefined;
 
     updateBadgeCode();
   };
@@ -194,16 +193,16 @@ export function initBadgeDemo() {
           <ui-checkbox id="badgeGlow" label="Glow Effect"></ui-checkbox>
         </div>
         
-        <div class="playground-preview" style="padding: 40px; background: #f9fafb; border-radius: 8px; display: flex; justify-content: center;">
+        <div class="playground-preview" style="padding: 40px;">
           <ui-badge id="playgroundBadge" value="5" color="danger">
             <ui-button label="Notifications"></ui-button>
           </ui-badge>
         </div>
         
-        <div id="badgeEventLog" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px; font-size: 13px; max-height: 150px; overflow-y: auto;"></div>
+        <div id="badgeEventLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f3f4f6); border-radius: 6px; font-size: 13px; max-height: 150px; overflow-y: auto; color: var(--text-primary); border: 1px solid var(--border-default, #e2e8f0);"></div>
         
         <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
-          <ui-button id="copyBadgeBtn" label="Copy" size="md"riant="ghost" style="position: absolute; top: 10px; right: 10px; color: white;"></ui-button>
+          <ui-button id="copyBadgeBtn" label="Copy" size="md" variant="ghost" style="position: absolute; top: 10px; right: 10px; color: white;"></ui-button>
           <code id="badgeCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px;">
             &lt;ui-badge value="5"&gt;...&lt;/ui-badge&gt;
           </code>
@@ -218,7 +217,7 @@ export function initBadgeDemo() {
     const playgroundBadge = container.querySelector('#playgroundBadge');
 
     inputs.forEach(input => input.addEventListener('inputChange', updatePlaygroundBadge));
-    dropdowns.forEach(dropdown => dropdown.addEventListener('dropdownChange', updatePlaygroundBadge));
+    dropdowns.forEach(dropdown => dropdown.addEventListener('valueChange', updatePlaygroundBadge));
     checkboxes.forEach(checkbox => checkbox.addEventListener('checkboxChange', updatePlaygroundBadge));
 
     container.querySelector('#copyBadgeBtn')?.addEventListener('click', e => copyBadgeCode(e.target));
@@ -248,7 +247,7 @@ export function initBadgeDemo() {
             <ui-button label="Notifications"></ui-button>
           </ui-badge>
           
-          <ui-badge value="New" icon="star" icon-library="lucide" color="warning" icon-position="end">
+          <ui-badge value="New" icon="star" icon-library="lucide" color="warning" icon-position="right">
             <ui-button label="Features"></ui-button>
           </ui-badge>
           
@@ -312,7 +311,7 @@ export function initBadgeDemo() {
             <ui-button label="Interactive"></ui-button>
           </ui-badge>
         </div>
-        <div id="clickLog" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px; font-size: 13px;"></div>
+         <div id="clickLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f3f4f6); border-radius: 6px; font-size: 13px; color: var(--text-primary); border: 1px solid var(--border-default, #cbd5e1);"></div>
       </div>
     `;
 
@@ -342,7 +341,7 @@ export function initBadgeDemo() {
             <ui-button label="Updates"></ui-button>
           </ui-badge>
           
-          <ui-badge value="3" closeable="true" variant="outline" color="warning">
+          <ui-badge value="5" closeable="true" variant="outlined" color="warning">
             <ui-button label="Alerts"></ui-button>
           </ui-badge>
         </div>
@@ -369,7 +368,7 @@ export function initBadgeDemo() {
             <ui-button label="Bordered"></ui-button>
           </ui-badge>
           
-          <ui-badge value="5" variant="outline" color="danger">
+          <ui-badge value="5" variant="soft" color="danger">
             <ui-button label="Soft"></ui-button>
           </ui-badge>
         </div>
@@ -395,7 +394,7 @@ export function initBadgeDemo() {
             <ui-button label="Shake"></ui-button>
           </ui-badge>
           
-          <ui-badge variant="dot" animation="pulse" color="primary">
+          <ui-badge dot="true" animation="pulse" color="primary">
             <ui-button label="Dot Pulse"></ui-button>
           </ui-badge>
         </div>
@@ -408,7 +407,7 @@ export function initBadgeDemo() {
       <div class="demo-block">
         <h3>💫 Glow Effects</h3>
         <p style="opacity: 0.7; margin-bottom: 20px;">Add pulsing glow for premium look.</p>
-        <div class="playground-preview" style="gap: 40px; flex-wrap: wrap; background: #1f2937; padding: 40px;">
+        <div class="playground-preview" style="gap: 40px; flex-wrap: wrap; background: var(--bg-tertiary, #f8fafc); padding: 40px; border-radius: 12px; border: 1px solid var(--border-subtle, #e2e8f0);">
           <ui-badge value="VIP" glow="true" color="warning">
             <ui-button label="Premium"></ui-button>
           </ui-badge>
@@ -439,7 +438,7 @@ export function initBadgeDemo() {
             <ui-button label="Square"></ui-button>
           </ui-badge>
           
-          <ui-badge value="3" shape="circle" variant="outline" color="success">
+          <ui-badge value="3" shape="circle" variant="outlined" color="success">
             <ui-button label="Soft Circle"></ui-button>
           </ui-badge>
           
@@ -473,7 +472,7 @@ export function initBadgeDemo() {
             <div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 24px;">BW</div>
           </ui-badge>
           
-          <ui-badge variant="dot" color="success" position="bottom-right" animation="pulse">
+          <ui-badge dot="true" color="success" position="bottom-right" animation="pulse">
             <div style="width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 24px;">AB</div>
           </ui-badge>
           
@@ -491,38 +490,38 @@ export function initBadgeDemo() {
       <div class="demo-block">
         <h3>🔔 Badge on Library Icons</h3>
         <p style="opacity: 0.7; margin-bottom: 20px;">Position badges over icons from Lucide, FontAwesome, etc. Use <code>position</code> prop to shift the overlay.</p>
-        <div class="playground-preview" style="gap: 50px; flex-wrap: wrap; background: #f8fafc; padding: 40px; border-radius: 12px; border: 1px solid #e2e8f0;">
+        <div class="playground-preview" style="gap: 50px; flex-wrap: wrap; background:var(--bg-secondary,#f8fafc); padding: 40px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">LUCIDE - TOP RIGHT</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">LUCIDE - TOP RIGHT</p>
             <ui-badge value="5" color="danger" position="top-right">
               <ui-icon library="lucide" name="bell" size="32px" color="#1e293b"></ui-icon>
             </ui-badge>
           </div>
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">HOT - TOP LEFT</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">HOT - TOP LEFT</p>
             <ui-badge value="New" color="success" position="top-left">
               <ui-icon library="lucide" name="zap" size="32px" color="#10b981"></ui-icon>
             </ui-badge>
           </div>
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">DOT - BOTTOM RIGHT</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">DOT - BOTTOM RIGHT</p>
             <ui-badge dot="true" color="success" position="bottom-right" animation="pulse">
               <ui-icon library="lucide" name="message-square" size="32px" color="#334155"></ui-icon>
             </ui-badge>
           </div>
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">GLOW - BOTTOM LEFT</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">GLOW - BOTTOM LEFT</p>
             <ui-badge value="!" glow="true" color="warning" position="bottom-left">
               <ui-icon library="lucide" name="shield-alert" size="32px" color="#dc2626"></ui-icon>
             </ui-badge>
           </div>
 
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">INTERACTIVE SCALE</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">INTERACTIVE SCALE</p>
             <ui-badge value="99" interactive="true" color="primary" shape="circle">
               <ui-icon library="lucide" name="mail" size="32px" color="#2563eb"></ui-icon>
             </ui-badge>
@@ -537,10 +536,10 @@ export function initBadgeDemo() {
       <div class="demo-block">
         <h3>🧩 Custom Badge Content (Slots)</h3>
         <p style="opacity: 0.7; margin-bottom: 20px;">Use the <code>badge-content</code> named slot for completely custom badge labels, including multiple icons or special formatting.</p>
-        <div class="playground-preview" style="gap: 50px; flex-wrap: wrap; background: #f8fafc; padding: 40px; border-radius: 12px; border: 1px solid #e2e8f0;">
+        <div class="playground-preview" style="gap: 50px; flex-wrap: wrap; background:var(--bg-secondary,#f8fafc); padding: 40px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">COMBO ICON + TEXT</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">COMBO ICON + TEXT</p>
             <ui-badge color="primary" size="lg">
               <ui-button label="Project"></ui-button>
               <div slot="badge-content" style="display: flex; align-items: center; gap: 4px;">
@@ -551,8 +550,8 @@ export function initBadgeDemo() {
           </div>
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">STATUS DOT + TIME</p>
-            <ui-badge color="secondary" variant="outline" size="lg">
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">STATUS DOT + TIME</p>
+            <ui-badge color="secondary" variant="outlined" size="lg">
               <ui-button label="Recent"></ui-button>
               <div slot="badge-content" style="display: flex; align-items: center; gap: 6px;">
                 <span style="width: 8px; height: 8px; border-radius: 50%; background: #10b981;"></span>
@@ -562,7 +561,7 @@ export function initBadgeDemo() {
           </div>
           
           <div style="text-align: center;">
-            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color: #64748b;">CUSTOM HTML (CHIP STYLE)</p>
+            <p style="font-size: 11px; font-weight: 600; margin-bottom: 15px; color:var(--text-secondary,#64748b);">CUSTOM HTML (CHIP STYLE)</p>
             <ui-badge closeable="true" color="danger" size="lg">
               <ui-button label="Updates"></ui-button>
               <strong slot="badge-content" style="padding: 0 4px;">U</strong>

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

@@ -51,9 +51,9 @@ export function initBreadcrumbDemo() {
     previewContainer.innerHTML = '';
 
     if (variant === 'glass') {
-      previewContainer.parentElement.style.background = 'url("https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=400&q=80") center/cover';
+      previewContainer.parentElement.style.background = 'url("/build/assets/images/nature_desert_3.png") center/cover';
     } else {
-      previewContainer.parentElement.style.background = '#f1f5f9';
+      previewContainer.parentElement.style.background = '';
     }
 
     try {
@@ -69,7 +69,7 @@ export function initBreadcrumbDemo() {
       previewContainer.appendChild(breadcrumb);
       updateBreadcrumbCode(separator, size, variant, maxItems, showHome, itemsText);
     } catch (error) {
-      previewContainer.innerHTML = `<p style="color: #ef4444;">Invalid JSON: ${error.message}</p>`;
+      previewContainer.innerHTML = `<p style="color:var(--accent-red,#ef4444);">Invalid JSON: ${error.message}</p>`;
     }
   };
 
@@ -98,7 +98,7 @@ export function initBreadcrumbDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>🎮 Interactive Playground</h3>
-        <div class="playground-settings" style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px;">
+        <div class="playground-settings" style="padding: 20px; margin-bottom: 20px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px;">
             <ui-input id="breadcrumbSeparator" label="Separator" value="/"></ui-input>
             <ui-input id="breadcrumbMaxItems" label="Max Items" type="number" value="3" min="0"></ui-input>
@@ -123,7 +123,7 @@ export function initBreadcrumbDemo() {
   {"label": "Gaming", "active": true}
 ]'></ui-input>
         </div>
-        <div class="playground-preview" style="padding: 40px; background: #f1f5f9; border-radius: 12px; border: 1px dashed #cbd5e1; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+        <div class="playground-preview" style="padding: 40px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
           <div id="interactiveBreadcrumbContainer" style="width: 100%;"></div>
         </div>
         
@@ -266,7 +266,7 @@ export function initBreadcrumbDemo() {
             <ui-breadcrumb id="pillBreadcrumb" variant="pills" icon-library="lucide"></ui-breadcrumb>
           </div>
 
-          <div style="padding: 40px; background: url('https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=800&q=80') center/cover; border-radius: 12px;">
+          <div style="padding: 40px; background: url('/build/assets/images/nature_desert_3.png') center/cover; border-radius: 12px;">
             <h4 style="margin-bottom: 12px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">Glassmorphism Variant</h4>
             <ui-breadcrumb id="glassBreadcrumb" variant="glass" separator="›" icon-library="lucide"></ui-breadcrumb>
           </div>
@@ -322,7 +322,7 @@ export function initBreadcrumbDemo() {
 
         <ui-breadcrumb id="seoBreadcrumb" structured-data="true" base-url="https://zenith.ui" icon-library="lucide"></ui-breadcrumb>
         
-        <div style="margin-top: 24px; padding: 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; font-size: 13px; color: #166534;">
+        <div style="margin-top: 24px; padding: 16px; background:var(--accent-green-soft,#f0fdf4); border: 1px solid #bbf7d0; border-radius: 8px; font-size: 13px; color: var(--accent-green,#166534);">
            ✅ Check the "Elements" panel in DevTools to see the <code>&lt;script type="application/ld+json"&gt;</code> block injected into the shadow root.
         </div>
       </div>