@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/components/navbar.css

@@ -5,44 +5,44 @@
 
 :root {
   /* Navbar Colors */
-  --navbar-bg: var(--vd-color-white);
-  --navbar-bg-dark: var(--vd-bg-dark);
-  --navbar-text-color: var(--vd-text-primary);
-  --navbar-text-color-dark: var(--vd-text-inverse);
-  --navbar-link-color: var(--vd-text-primary);
-  --navbar-link-hover-color: var(--vd-color-primary);
-  --navbar-link-active-color: var(--vd-color-primary);
-  --navbar-border-color: var(--vd-border-color);
+  --vd-navbar-bg: var(--vd-color-white);
+  --vd-navbar-bg-dark: var(--vd-bg-dark);
+  --vd-navbar-text-color: var(--vd-text-primary);
+  --vd-navbar-text-color-dark: var(--vd-text-inverse);
+  --vd-navbar-link-color: var(--vd-text-primary);
+  --vd-navbar-link-hover-color: var(--vd-color-primary);
+  --vd-navbar-link-active-color: var(--vd-color-primary);
+  --vd-navbar-border-color: var(--vd-border-color);
   
   /* Navbar Spacing (Fibonacci) */
-  --navbar-padding-y: 0.8125rem;   /* 13px - fib */
-  --navbar-padding-x: 1.3125rem;   /* 21px - fib (21/13 ~ phi) */
-  --navbar-height: 3.4375rem;      /* 55px - fib */
-  --navbar-brand-font-size: var(--font-size-xl);
-  --navbar-nav-gap: 1.3125rem;     /* 21px - fib */
-  --navbar-actions-gap: 2.125rem;  /* 34px - fib */
+  --vd-navbar-padding-y: 0.8125rem;   /* 13px - fib */
+  --vd-navbar-padding-x: 1.3125rem;   /* 21px - fib (21/13 ~ phi) */
+  --vd-navbar-height: 3.4375rem;      /* 55px - fib */
+  --vd-navbar-brand-font-size: var(--vd-font-size-xl);
+  --vd-navbar-nav-gap: 1.3125rem;     /* 21px - fib */
+  --vd-navbar-actions-gap: 2.125rem;  /* 34px - fib */
 
   /* Mobile Menu */
-  --navbar-mobile-menu-bg: var(--vd-color-white);
-  --navbar-mobile-menu-bg-dark: var(--vd-bg-dark);
-  --navbar-mobile-menu-width: 233px; /* fib */
-  --navbar-mobile-overlay-bg: rgba(0, 0, 0, 0.5);
+  --vd-navbar-mobile-menu-bg: var(--vd-color-white);
+  --vd-navbar-mobile-menu-bg-dark: var(--vd-bg-dark);
+  --vd-navbar-mobile-menu-width: 233px; /* fib */
+  --vd-navbar-mobile-overlay-bg: rgba(0, 0, 0, 0.5);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --navbar-bg: var(--vd-bg-primary);
-  --navbar-text-color: var(--vd-text-primary);
-  --navbar-link-color: var(--vd-text-primary);
-  --navbar-mobile-menu-bg: var(--vd-bg-primary);
+  --vd-navbar-bg: var(--vd-bg-primary);
+  --vd-navbar-text-color: var(--vd-text-primary);
+  --vd-navbar-link-color: var(--vd-text-primary);
+  --vd-navbar-mobile-menu-bg: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --navbar-bg: var(--vd-bg-primary);
-    --navbar-text-color: var(--vd-text-primary);
-    --navbar-link-color: var(--vd-text-primary);
-    --navbar-mobile-menu-bg: var(--vd-bg-primary);
+    --vd-navbar-bg: var(--vd-bg-primary);
+    --vd-navbar-text-color: var(--vd-text-primary);
+    --vd-navbar-link-color: var(--vd-text-primary);
+    --vd-navbar-mobile-menu-bg: var(--vd-bg-primary);
   }
 }
 
@@ -53,10 +53,10 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding: var(--navbar-padding-y) var(--navbar-padding-x);
-  background-color: var(--navbar-bg);
-  border-bottom: 1px solid var(--navbar-border-color);
-  min-height: var(--navbar-height);
+  padding: var(--vd-navbar-padding-y) var(--vd-navbar-padding-x);
+  background-color: var(--vd-navbar-bg);
+  border-bottom: 1px solid var(--vd-navbar-border-color);
+  min-height: var(--vd-navbar-height);
 }
 
 /* Navbar Variant - Glass */
@@ -89,22 +89,22 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  max-width: var(--container-max-width);
+  max-width: var(--vd-container-max-width);
   margin-left: auto;
   margin-right: auto;
-  padding-left: var(--container-padding);
-  padding-right: var(--container-padding);
+  padding-left: var(--vd-container-padding);
+  padding-right: var(--vd-container-padding);
 }
 
 @media (min-width: 1200px) {
   .vd-navbar-container {
-    max-width: var(--container-xl);
+    max-width: var(--vd-container-xl);
   }
 }
 
 @media (min-width: 1400px) {
   .vd-navbar-container {
-    max-width: var(--container-2xl);
+    max-width: var(--vd-container-2xl);
   }
 }
 
@@ -114,11 +114,11 @@
   align-items: center;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
-  font-size: var(--navbar-brand-font-size);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--vd-navbar-brand-font-size);
+  font-weight: var(--vd-font-weight-bold);
   line-height: 1;
   white-space: nowrap;
-  color: var(--navbar-text-color);
+  color: var(--vd-navbar-text-color);
   text-decoration: none;
   transition: color 0.2s ease;
 }
@@ -131,7 +131,7 @@
 
 .vd-navbar-brand:hover,
 .vd-navbar-brand:focus {
-  color: var(--navbar-link-hover-color);
+  color: var(--vd-navbar-link-hover-color);
   text-decoration: none;
 }
 
@@ -154,7 +154,7 @@
 
 .vd-navbar-nav .vd-nav-link {
   padding: 0.5rem 1rem;
-  color: var(--navbar-link-color);
+  color: var(--vd-navbar-link-color);
   text-decoration: none;
   transition: color 0.2s ease, background-color 0.2s ease;
   display: block;
@@ -162,7 +162,7 @@
 
 .vd-navbar-nav .vd-nav-link:hover,
 .vd-navbar-nav .vd-nav-link:focus {
-  color: var(--navbar-link-hover-color);
+  color: var(--vd-navbar-link-hover-color);
   text-decoration: none;
   background-color: rgba(0, 0, 0, 0.05);
 }
@@ -173,8 +173,8 @@
 }
 
 .vd-navbar-nav .vd-nav-link.active {
-  color: var(--navbar-link-active-color);
-  font-weight: var(--font-weight-semibold);
+  color: var(--vd-navbar-link-active-color);
+  font-weight: var(--vd-font-weight-semibold);
 }
 
 /* Navbar Toggle (Hamburger Menu) */
@@ -196,7 +196,7 @@
 .vd-navbar-burger span {
   width: 2rem;
   height: 2px;
-  background-color: var(--navbar-text-color);
+  background-color: var(--vd-navbar-text-color);
   border-radius: 10px;
   transition: all 0.3s ease;
   transform-origin: center;
@@ -244,7 +244,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--navbar-mobile-overlay-bg);
+  background-color: var(--vd-navbar-mobile-overlay-bg);
   z-index: 999;
   opacity: 0;
   transition: opacity 0.3s ease;
@@ -257,13 +257,13 @@
 
 /* Navbar Variants - Dark */
 .vd-navbar-dark {
-  background-color: var(--navbar-bg-dark);
-  color: var(--navbar-text-color-dark);
+  background-color: var(--vd-navbar-bg-dark);
+  color: var(--vd-navbar-text-color-dark);
   border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 
 .vd-navbar-dark .vd-navbar-brand {
-  color: var(--navbar-text-color-dark);
+  color: var(--vd-navbar-text-color-dark);
 }
 
 .vd-navbar-dark .vd-navbar-brand:hover,
@@ -287,7 +287,7 @@
 
 .vd-navbar-dark .vd-navbar-toggle span,
 .vd-navbar-dark .vd-navbar-burger span {
-  background-color: var(--navbar-text-color-dark);
+  background-color: var(--vd-navbar-text-color-dark);
 }
 
 /* Navbar Variants - Transparent */
@@ -297,12 +297,12 @@
 }
 
 .vd-navbar-transparent.vd-navbar-scrolled {
-  background-color: var(--navbar-bg);
-  border-bottom: 1px solid var(--navbar-border-color);
+  background-color: var(--vd-navbar-bg);
+  border-bottom: 1px solid var(--vd-navbar-border-color);
 }
 
 .vd-navbar-transparent.vd-navbar-dark.vd-navbar-scrolled {
-  background-color: var(--navbar-bg-dark);
+  background-color: var(--vd-navbar-bg-dark);
   border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -314,12 +314,12 @@
   right: 0;
   left: 0;
   z-index: 1000;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--vd-shadow-sm);
 }
 
 .vd-navbar-fixed ~ *,
 .vd-navbar-fixed-top ~ * {
-  padding-top: var(--navbar-height);
+  padding-top: var(--vd-navbar-height);
 }
 
 /* Navbar Positioning - Fixed Bottom */
@@ -333,7 +333,7 @@
 }
 
 .vd-navbar-fixed-bottom ~ * {
-  padding-bottom: var(--navbar-height);
+  padding-bottom: var(--vd-navbar-height);
 }
 
 /* Navbar Positioning - Sticky */
@@ -341,7 +341,7 @@
   position: sticky;
   top: 0;
   z-index: 1000;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--vd-shadow-sm);
 }
 
 /* Navbar Dropdown */
@@ -359,9 +359,9 @@
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   background-color: var(--vd-color-white);
-  border: 1px solid var(--navbar-border-color);
-  border-radius: var(--btn-border-radius);
-  box-shadow: var(--shadow-md);
+  border: 1px solid var(--vd-navbar-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  box-shadow: var(--vd-shadow-md);
   list-style: none;
 }
 
@@ -374,8 +374,8 @@
   width: 100%;
   padding: 0.5rem 1rem;
   clear: both;
-  font-weight: var(--font-weight-normal);
-  color: var(--navbar-link-color);
+  font-weight: var(--vd-font-weight-normal);
+  color: var(--vd-navbar-link-color);
   text-align: inherit;
   text-decoration: none;
   white-space: nowrap;
@@ -386,18 +386,18 @@
 
 .vd-navbar-dropdown-item:hover,
 .vd-navbar-dropdown-item:focus {
-  color: var(--navbar-link-hover-color);
+  color: var(--vd-navbar-link-hover-color);
   background-color: var(--vd-bg-secondary);
   text-decoration: none;
 }
 
 .vd-navbar-dropdown-item.active {
-  color: var(--navbar-link-active-color);
+  color: var(--vd-navbar-link-active-color);
   background-color: var(--vd-color-primary-alpha-10);
 }
 
 .vd-navbar-dark .vd-navbar-dropdown-menu {
-  background-color: var(--navbar-bg-dark);
+  background-color: var(--vd-navbar-bg-dark);
   border-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -420,7 +420,7 @@
   .vd-navbar-nav {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 0.5rem var(--navbar-nav-gap);
+    gap: 0.5rem var(--vd-navbar-nav-gap);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -452,7 +452,7 @@
   }
 
   .vd-navbar-actions {
-    margin-left: var(--navbar-actions-gap);
+    margin-left: var(--vd-navbar-actions-gap);
   }
 
   .vd-navbar-dropdown-menu {
@@ -471,9 +471,9 @@
     position: fixed;
     top: 0;
     right: -100%;
-    width: var(--navbar-mobile-menu-width);
+    width: var(--vd-navbar-mobile-menu-width);
     height: 100vh;
-    background-color: var(--navbar-mobile-menu-bg);
+    background-color: var(--vd-navbar-mobile-menu-bg);
     flex-direction: column;
     align-items: flex-start;
     padding: 4rem 1.5rem 1.5rem;
@@ -495,7 +495,7 @@
   }
   
   .vd-navbar-dark .vd-navbar-menu {
-    background-color: var(--navbar-mobile-menu-bg-dark);
+    background-color: var(--vd-navbar-mobile-menu-bg-dark);
   }
   
   .vd-navbar-nav {
@@ -506,7 +506,7 @@
   .vd-navbar-nav .vd-nav-link {
     width: 100%;
     padding: 1rem;
-    border-bottom: 1px solid var(--navbar-border-color);
+    border-bottom: 1px solid var(--vd-navbar-border-color);
   }
   
   .vd-navbar-nav .vd-nav-link:last-child {
@@ -535,7 +535,7 @@
   .vd-navbar-actions {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid var(--navbar-border-color);
+    border-top: 1px solid var(--vd-navbar-border-color);
     width: 100%;
   }
   

package/css/components/pagination.css

@@ -5,41 +5,41 @@
 
 :root {
   /* Pagination Colors */
-  --pagination-bg: var(--vd-color-white);
-  --pagination-border-color: var(--vd-border-color);
-  --pagination-link-color: var(--vd-color-primary);
-  --pagination-link-bg: var(--vd-color-white);
-  --pagination-link-bg-hover: var(--vd-bg-secondary);
-  --pagination-link-bg-active: var(--vd-color-primary);
-  --pagination-link-color-active: var(--vd-color-white);
-  --pagination-link-color-disabled: var(--vd-text-muted);
+  --vd-pagination-bg: var(--vd-color-white);
+  --vd-pagination-border-color: var(--vd-border-color);
+  --vd-pagination-link-color: var(--vd-color-primary);
+  --vd-pagination-link-bg: var(--vd-color-white);
+  --vd-pagination-link-bg-hover: var(--vd-bg-secondary);
+  --vd-pagination-link-bg-active: var(--vd-color-primary);
+  --vd-pagination-link-color-active: var(--vd-color-white);
+  --vd-pagination-link-color-disabled: var(--vd-text-muted);
   
   /* Pagination Spacing (Fibonacci pairs: x/y ratio ~ phi) */
-  --pagination-padding-y: 0.5rem;        /* 8px  - fib */
-  --pagination-padding-x: 0.8125rem;     /* 13px - fib */
-  --pagination-padding-y-sm: 0.1875rem;  /* 3px  - fib */
-  --pagination-padding-x-sm: 0.3125rem;  /* 5px  - fib */
-  --pagination-padding-y-lg: 0.8125rem;  /* 13px - fib */
-  --pagination-padding-x-lg: 1.3125rem;  /* 21px - fib */
+  --vd-pagination-padding-y: 0.5rem;        /* 8px  - fib */
+  --vd-pagination-padding-x: 0.8125rem;     /* 13px - fib */
+  --vd-pagination-padding-y-sm: 0.1875rem;  /* 3px  - fib */
+  --vd-pagination-padding-x-sm: 0.3125rem;  /* 5px  - fib */
+  --vd-pagination-padding-y-lg: 0.8125rem;  /* 13px - fib */
+  --vd-pagination-padding-x-lg: 1.3125rem;  /* 21px - fib */
   
   /* Pagination Font */
-  --pagination-font-size: var(--font-size-base);
-  --pagination-font-size-sm: var(--font-size-sm);
-  --pagination-font-size-lg: var(--font-size-lg);
+  --vd-pagination-font-size: var(--vd-font-size-base);
+  --vd-pagination-font-size-sm: var(--vd-font-size-sm);
+  --vd-pagination-font-size-lg: var(--vd-font-size-lg);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --pagination-bg: var(--vd-bg-secondary);
-  --pagination-link-bg: var(--vd-bg-secondary);
-  --pagination-link-bg-hover: var(--vd-bg-primary);
+  --vd-pagination-bg: var(--vd-bg-secondary);
+  --vd-pagination-link-bg: var(--vd-bg-secondary);
+  --vd-pagination-link-bg-hover: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --pagination-bg: var(--vd-bg-secondary);
-    --pagination-link-bg: var(--vd-bg-secondary);
-    --pagination-link-bg-hover: var(--vd-bg-primary);
+    --vd-pagination-bg: var(--vd-bg-secondary);
+    --vd-pagination-link-bg: var(--vd-bg-secondary);
+    --vd-pagination-link-bg-hover: var(--vd-bg-primary);
   }
 }
 
@@ -70,61 +70,61 @@
 .vd-pagination-link {
   position: relative;
   display: block;
-  padding: var(--pagination-padding-y) var(--pagination-padding-x);
-  font-size: var(--pagination-font-size);
-  line-height: var(--line-height-normal);
-  color: var(--pagination-link-color);
+  padding: var(--vd-pagination-padding-y) var(--vd-pagination-padding-x);
+  font-size: var(--vd-pagination-font-size);
+  line-height: var(--vd-line-height-normal);
+  color: var(--vd-pagination-link-color);
   text-decoration: none;
-  background-color: var(--pagination-link-bg);
-  border: 1px solid var(--pagination-border-color);
-  border-radius: var(--btn-border-radius);
-  transition: var(--transition-colors);
+  background-color: var(--vd-pagination-link-bg);
+  border: 1px solid var(--vd-pagination-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  transition: var(--vd-transition-colors);
   cursor: pointer;
   user-select: none;
 }
 
 .vd-pagination-link:hover {
-  color: var(--pagination-link-color);
-  background-color: var(--pagination-link-bg-hover);
-  border-color: var(--pagination-border-color);
+  color: var(--vd-pagination-link-color);
+  background-color: var(--vd-pagination-link-bg-hover);
+  border-color: var(--vd-pagination-border-color);
   text-decoration: none;
 }
 
 .vd-pagination-link:focus {
   outline: 0;
-  box-shadow: var(--input-focus-box-shadow);
+  box-shadow: var(--vd-input-focus-box-shadow);
   z-index: 1;
 }
 
 /* Pagination Active State */
 .vd-pagination-item.active .vd-pagination-link {
   z-index: 1;
-  color: var(--pagination-link-color-active);
-  background-color: var(--pagination-link-bg-active);
-  border-color: var(--pagination-link-bg-active);
+  color: var(--vd-pagination-link-color-active);
+  background-color: var(--vd-pagination-link-bg-active);
+  border-color: var(--vd-pagination-link-bg-active);
   cursor: default;
 }
 
 .vd-pagination-item.active .vd-pagination-link:hover {
-  color: var(--pagination-link-color-active);
-  background-color: var(--pagination-link-bg-active);
-  border-color: var(--pagination-link-bg-active);
+  color: var(--vd-pagination-link-color-active);
+  background-color: var(--vd-pagination-link-bg-active);
+  border-color: var(--vd-pagination-link-bg-active);
 }
 
 /* Pagination Disabled State */
 .vd-pagination-item.disabled .vd-pagination-link {
-  color: var(--pagination-link-color-disabled);
+  color: var(--vd-pagination-link-color-disabled);
   pointer-events: none;
   cursor: not-allowed;
-  background-color: var(--pagination-link-bg);
-  border-color: var(--pagination-border-color);
+  background-color: var(--vd-pagination-link-bg);
+  border-color: var(--vd-pagination-border-color);
   opacity: 0.6;
 }
 
 /* Pagination Previous/Next */
 .vd-pagination-prev,
 .vd-pagination-next {
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--vd-font-weight-medium);
 }
 
 .vd-pagination-prev .vd-pagination-link::before {
@@ -139,7 +139,7 @@
 
 /* Pagination Ellipsis */
 .vd-pagination-ellipsis {
-  padding: var(--pagination-padding-y) var(--pagination-padding-x);
+  padding: var(--vd-pagination-padding-y) var(--vd-pagination-padding-x);
   color: var(--vd-text-muted);
   pointer-events: none;
   cursor: default;
@@ -147,13 +147,13 @@
 
 /* Pagination Sizes */
 .vd-pagination-sm .vd-pagination-link {
-  padding: var(--pagination-padding-y-sm) var(--pagination-padding-x-sm);
-  font-size: var(--pagination-font-size-sm);
+  padding: var(--vd-pagination-padding-y-sm) var(--vd-pagination-padding-x-sm);
+  font-size: var(--vd-pagination-font-size-sm);
 }
 
 .vd-pagination-lg .vd-pagination-link {
-  padding: var(--pagination-padding-y-lg) var(--pagination-padding-x-lg);
-  font-size: var(--pagination-font-size-lg);
+  padding: var(--vd-pagination-padding-y-lg) var(--vd-pagination-padding-x-lg);
+  font-size: var(--vd-pagination-font-size-lg);
 }
 
 /* Pagination Alignment */

package/css/components/preloader.css

@@ -8,29 +8,29 @@
 /* Legacy preloader spinner alias */
 .vd-preloader {
   display: inline-block;
-  width: var(--spinner-size, 2rem);
-  height: var(--spinner-size, 2rem);
-  border: var(--spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);
-  border-top-color: var(--spinner-color, var(--vd-color-primary));
+  width: var(--vd-spinner-size, 2rem);
+  height: var(--vd-spinner-size, 2rem);
+  border: var(--vd-spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);
+  border-top-color: var(--vd-spinner-color, var(--vd-color-primary));
   border-radius: 50%;
-  animation: spinner-rotate var(--spinner-speed, 0.65s) linear infinite;
+  animation: spinner-rotate var(--vd-spinner-speed, 0.65s) linear infinite;
 }
 
 /* Preloader Sizes */
-.vd-preloader-xs { --spinner-size: 1rem; --spinner-border-width: 2px; }
-.vd-preloader-sm { --spinner-size: 1.5rem; --spinner-border-width: 2px; }
-.vd-preloader-lg { --spinner-size: 3rem; --spinner-border-width: 4px; }
-.vd-preloader-xl { --spinner-size: 4rem; --spinner-border-width: 5px; }
+.vd-preloader-xs { --vd-spinner-size: 1rem; --vd-spinner-border-width: 2px; }
+.vd-preloader-sm { --vd-spinner-size: 1.5rem; --vd-spinner-border-width: 2px; }
+.vd-preloader-lg { --vd-spinner-size: 3rem; --vd-spinner-border-width: 4px; }
+.vd-preloader-xl { --vd-spinner-size: 4rem; --vd-spinner-border-width: 5px; }
 
 /* Preloader Colors */
-.vd-preloader-primary { --spinner-color: var(--vd-color-primary); }
-.vd-preloader-secondary { --spinner-color: var(--vd-color-secondary); }
-.vd-preloader-success { --spinner-color: var(--vd-color-success); }
-.vd-preloader-warning { --spinner-color: var(--vd-color-warning); }
-.vd-preloader-error { --spinner-color: var(--vd-color-error); }
-.vd-preloader-info { --spinner-color: var(--vd-color-info); }
-.vd-preloader-light { --spinner-color: #fff; }
-.vd-preloader-dark { --spinner-color: var(--vd-text-primary); }
+.vd-preloader-primary { --vd-spinner-color: var(--vd-color-primary); }
+.vd-preloader-secondary { --vd-spinner-color: var(--vd-color-secondary); }
+.vd-preloader-success { --vd-spinner-color: var(--vd-color-success); }
+.vd-preloader-warning { --vd-spinner-color: var(--vd-color-warning); }
+.vd-preloader-error { --vd-spinner-color: var(--vd-color-error); }
+.vd-preloader-info { --vd-spinner-color: var(--vd-color-info); }
+.vd-preloader-light { --vd-spinner-color: #fff; }
+.vd-preloader-dark { --vd-spinner-color: var(--vd-text-primary); }
 
 /* Preloader Container */
 .vd-preloader-container {
@@ -44,7 +44,7 @@
 
 .vd-preloader-text {
   color: var(--vd-text-secondary);
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
 }
 
 /* Reduced Motion */

package/css/components/progress.css

@@ -4,19 +4,19 @@
  */
 
 :root {
-  --progress-height: 8px;
-  --progress-bg: var(--vd-bg-tertiary, #e9ecef);
-  --progress-bar-bg: var(--vd-color-primary);
-  --progress-border-radius: var(--radius-fib-5, 5px);
+  --vd-progress-height: 8px;
+  --vd-progress-bg: var(--vd-bg-tertiary, #e9ecef);
+  --vd-progress-bar-bg: var(--vd-color-primary);
+  --vd-progress-border-radius: var(--vd-radius-fib-5, 5px);
 }
 
 /* Base Progress */
 .vd-progress {
   display: flex;
-  height: var(--progress-height);
+  height: var(--vd-progress-height);
   overflow: hidden;
-  background-color: var(--progress-bg);
-  border-radius: var(--progress-border-radius);
+  background-color: var(--vd-progress-bg);
+  border-radius: var(--vd-progress-border-radius);
 }
 
 .vd-progress-bar {
@@ -27,9 +27,9 @@
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  background-color: var(--progress-bar-bg);
+  background-color: var(--vd-progress-bar-bg);
   transition: width 0.4s ease;
-  border-radius: var(--progress-border-radius);
+  border-radius: var(--vd-progress-border-radius);
 }
 
 /* Variants */
@@ -39,15 +39,15 @@
 .vd-progress-bar.vd-progress-info { background-color: var(--vd-color-info); }
 
 /* Sizes */
-.vd-progress-xs { --progress-height: 3px; }
-.vd-progress-sm { --progress-height: 5px; }
-.vd-progress-lg { --progress-height: 13px; }
-.vd-progress-xl { --progress-height: 21px; }
+.vd-progress-xs { --vd-progress-height: 3px; }
+.vd-progress-sm { --vd-progress-height: 5px; }
+.vd-progress-lg { --vd-progress-height: 13px; }
+.vd-progress-xl { --vd-progress-height: 21px; }
 
 /* Labeled (show text) */
 .vd-progress-xl .vd-progress-bar,
 .vd-progress-lg .vd-progress-bar {
-  font-size: var(--font-size-xs, 0.75rem);
+  font-size: var(--vd-font-size-xs, 0.75rem);
   line-height: 1;
 }
 
@@ -97,11 +97,11 @@
 
 /* Dark mode */
 [data-theme="dark"] {
-  --progress-bg: var(--vd-bg-tertiary, #2d3748);
+  --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --progress-bg: var(--vd-bg-tertiary, #2d3748);
+    --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);
   }
 }