various fixes

Author: crikfilippo

demo.html

@@ -953,21 +953,21 @@ <h2 class="font-lg text-primary my-4">Separator Component Demo</h2>
     <h2 class="font-lg text-primary my-4">Skeleton Component Demo</h2>
 
     <!-- Rectangular Skeleton with Primary Variant -->
-    <div class="skeleton" data-shape="rect" data-size="lg"></div>
+    <div class="skeleton mb-2" data-shape="rect" data-size="lg"></div>
 
     <!-- Circle Skeleton Avatar -->
-    <div class="skeleton" data-shape="circle" data-size="md"></div>
+    <div class="skeleton mb-2" data-shape="circle" data-size="md"></div>
 
     <!-- Multi-Line Text Skeleton -->
-    <div class="skeleton-multiline">
+    <div class="skeleton-multiline mb-2">
         <div class="skeleton skeleton-text" data-size="md"></div>
         <div class="skeleton skeleton-text" data-size="md"></div>
         <div class="skeleton skeleton-text" data-size="sm"></div>
     </div>
 
     <!-- Skeleton for Avatar with Button -->
-    <div class="skeleton" data-shape="avatar"></div>
-    <div class="skeleton" data-shape="button"></div>
+    <div class="skeleton mb-2" data-shape="avatar"></div>
+    <div class="skeleton mb-2" data-shape="button"></div>
 
     <!-- Skeleton Thumbnail for Content Loading -->
     <div class="skeleton" data-shape="thumbnail"></div>
@@ -1164,39 +1164,40 @@ <h2 class="font-lg text-primary my-4">Pagination Component Demo</h2>
 
   <section class="p-4 bg-neutral-50 shadow-md rounded my-6">
     <h2 class="font-lg text-primary my-4">Stat Box Component Demo</h2>
-    <section class="stat-box" data-variant="primary" data-layout="vertical" data-shadow="lg" tabindex="0" aria-label="Monthly Sales">
+    <div class="stat-box" data-variant="primary" data-layout="vertical" data-shadow="lg" tabindex="0" aria-label="Monthly Sales">
       <div class="icon">💵</div>
       <div class="title">Monthly Sales</div>
       <div class="value">$35,000</div>
       <div class="change" data-change="positive">+12%</div>
-    </section>
+    </div>
 
-    <section class="stat-box" data-variant="success" data-layout="horizontal" data-shadow="sm" aria-label="Active Users">
+    <div class="stat-box" data-variant="success" data-layout="horizontal" data-shadow="sm" aria-label="Active Users">
         <div class="icon">👥</div>
         <div class="title">Active Users</div>
         <div class="value">5,720</div>
         <div class="change" data-change="positive">+5%</div>
-    </section>
+    </div>
 
-    <section class="stat-box" data-variant="danger" data-layout="expanded" data-radius="full" aria-label="Churn Rate">
+    <div class="stat-box" data-variant="danger" data-layout="expanded" data-radius="full" aria-label="Churn Rate">
         <div class="icon">⚠️</div>
         <div class="title">Churn Rate</div>
         <div class="value">8%</div>
         <div class="change" data-change="negative">-2%</div>
-    </section>
+    </div>
 
-    <section class="stat-box" data-variant="warning" data-layout="compact" aria-label="Pending Tickets">
+    <div class="stat-box" data-variant="warning" data-layout="compact" aria-label="Pending Tickets">
         <div class="icon">📩</div>
         <div class="title">Pending Tickets</div>
         <div class="value">27</div>
         <div class="change" data-change="neutral">+0%</div>
-    </section>  
+
+    </div>  
   </section>
 
   <section class="p-4 bg-neutral-50 shadow-md rounded my-6">
     <h2 class="font-lg text-primary my-4">Timeline Component Demo</h2>
 
-    <section class="timeline" data-variant="primary" data-scroll="true">
+    <div class="timeline" data-variant="primary" data-scroll="true">
       <div class="timeline-item" data-date="2023-01-01" data-state="completed">
           <div class="timeline-content">
               <h3 class="timeline-title">Project Initiation</h3>
@@ -1227,9 +1228,9 @@ <h3 class="timeline-title">Project Completion</h3>
               <p class="timeline-description">The project is scheduled for completion, with final deliverables submitted.</p>
           </div>
       </div>
-    </section>
+    </div>
 
-    <section class="timeline" data-variant="success">
+    <div class="timeline" data-variant="success">
       <div class="timeline-item" data-date="2023-01-01" data-state="completed">
           <div class="timeline-content">
               <h3 class="timeline-title">Idea Development</h3>
@@ -1254,7 +1255,7 @@ <h3 class="timeline-title">Final Product Development</h3>
               <p class="timeline-description">Currently refining the product based on user feedback and data.</p>
           </div>
       </div>
-    </section>
+    </div>
   </section>
 
   <section class="p-4 bg-neutral-50 shadow-md rounded my-6">

src/css/components/skeleton.css

@@ -26,16 +26,18 @@
   background-size: 200% 100%;
 }
 
-/* Shape Variants */
-.skeleton[data-shape="rect"] { height: 100px; border-radius: var(--radius-md); }
-.skeleton[data-shape="circle"] { width: 50px; height: 50px; border-radius: 50%; }
-.skeleton[data-shape="text"] { height: 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
 
 /* Size Variants */
 .skeleton[data-size="sm"] { height: 0.5rem; }
 .skeleton[data-size="md"] { height: 1rem; }
 .skeleton[data-size="lg"] { height: 1.5rem; }
 
+/* Shape Variants */
+.skeleton[data-shape="rect"] { height: 100px; border-radius: var(--radius-md); }
+.skeleton[data-shape="circle"] { width: 50px; height: 50px; border-radius: 50%; }
+.skeleton[data-shape="text"] { height: 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
+
+
 /* Skeleton for Multi-Line Text */
 .skeleton-multiline {
   display: flex;

src/css/components/stat-metrics.css

@@ -28,18 +28,21 @@
 /* Icon Styling */
 .stat-box .icon {
     font-size: clamp(2.5rem, 5vw, 4rem);
+    line-height: clamp(2.5rem, 5vw, 4rem);
     color: var(--neutral-800);
 }
 
 /* Title and Value Styling */
 .stat-box .title {
     font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
+    line-height: clamp(1rem, 2vw + 0.5rem, 1.25rem);
     font-weight: 500;
     color: var(--neutral-900);
     margin-bottom: var(--space-1);
 }
 .stat-box .value {
     font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
+    line-height: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
     font-weight: 700;
     color: var(--neutral-900);
 }
@@ -50,6 +53,7 @@
     align-items: center;
     gap: var(--space-1);
     font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
+    line-height: clamp(0.875rem, 1vw + 0.5rem, 1rem);
     font-weight: 500;
 }