@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/progress.css

@@ -4,19 +4,19 @@
  */
 
 :root {
-  --progress-height: 8px;
-  --progress-bg: var(--bg-tertiary, #e9ecef);
-  --progress-bar-bg: var(--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,27 +27,27 @@
   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 */
-.vd-progress-bar.vd-progress-success { background-color: var(--color-success); }
-.vd-progress-bar.vd-progress-warning { background-color: var(--color-warning); }
-.vd-progress-bar.vd-progress-error { background-color: var(--color-error); }
-.vd-progress-bar.vd-progress-info { background-color: var(--color-info); }
+.vd-progress-bar.vd-progress-success { background-color: var(--vd-color-success); }
+.vd-progress-bar.vd-progress-warning { background-color: var(--vd-color-warning); }
+.vd-progress-bar.vd-progress-error { background-color: var(--vd-color-error); }
+.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(--bg-tertiary, #2d3748);
+  --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --progress-bg: var(--bg-tertiary, #2d3748);
+    --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);
   }
 }

package/css/components/rating.css

@@ -5,24 +5,24 @@
 
 :root {
   /* Rating Colors */
-  --rating-active-color: #f59e0b;
-  --rating-inactive-color: var(--color-gray-300, #dee2e6);
-  --rating-hover-color: #fbbf24;
+  --vd-rating-active-color: #f59e0b;
+  --vd-rating-inactive-color: var(--vd-color-gray-300, #dee2e6);
+  --vd-rating-hover-color: #fbbf24;
 
   /* Rating Dimensions (Fibonacci) */
-  --rating-size: 1.3125rem;  /* 21px - fib */
-  --rating-size-sm: 1rem;
-  --rating-size-lg: 2.125rem; /* 34px ~ fib */
-  --rating-gap: 0.125rem;     /* 2px */
+  --vd-rating-size: 1.3125rem;  /* 21px - fib */
+  --vd-rating-size-sm: 1rem;
+  --vd-rating-size-lg: 2.125rem; /* 34px ~ fib */
+  --vd-rating-gap: 0.125rem;     /* 2px */
 }
 
 [data-theme="dark"] {
-  --rating-inactive-color: var(--color-gray-600, #6c757d);
+  --vd-rating-inactive-color: var(--vd-color-gray-600, #6c757d);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --rating-inactive-color: var(--color-gray-600, #6c757d);
+    --vd-rating-inactive-color: var(--vd-color-gray-600, #6c757d);
   }
 }
 
@@ -31,15 +31,15 @@
 .vd-rating {
   display: inline-flex;
   align-items: center;
-  gap: var(--rating-gap);
+  gap: var(--vd-rating-gap);
 }
 
 .vd-rating-star {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--rating-size);
-  color: var(--rating-inactive-color);
+  font-size: var(--vd-rating-size);
+  color: var(--vd-rating-inactive-color);
   cursor: pointer;
   transition: color 0.15s ease, transform 0.15s ease;
   user-select: none;
@@ -58,17 +58,17 @@
 }
 
 .vd-rating-star.is-active {
-  color: var(--rating-active-color);
+  color: var(--vd-rating-active-color);
 }
 
 .vd-rating-star.is-hovered {
-  color: var(--rating-hover-color);
+  color: var(--vd-rating-hover-color);
 }
 
 /* Half-star support */
 .vd-rating-star.is-half {
   position: relative;
-  color: var(--rating-inactive-color);
+  color: var(--vd-rating-inactive-color);
 }
 
 .vd-rating-star.is-half::after {
@@ -78,7 +78,7 @@
   top: 0;
   width: 50%;
   overflow: hidden;
-  color: var(--rating-active-color);
+  color: var(--vd-rating-active-color);
 }
 
 /* ========== Read-only ========== */
@@ -95,11 +95,11 @@
 /* ========== Sizes ========== */
 
 .vd-rating-sm .vd-rating-star {
-  font-size: var(--rating-size-sm);
+  font-size: var(--vd-rating-size-sm);
 }
 
 .vd-rating-lg .vd-rating-star {
-  font-size: var(--rating-size-lg);
+  font-size: var(--vd-rating-size-lg);
 }
 
 /* ========== Value Display ========== */
@@ -108,5 +108,5 @@
   margin-left: 0.5rem;
   font-size: 0.875rem;
   font-weight: 600;
-  color: var(--text-primary, #212529);
+  color: var(--vd-text-primary, #212529);
 }

package/css/components/ripple.css

@@ -4,18 +4,18 @@
  */
 
 :root {
-  --ripple-color: rgba(255, 255, 255, 0.35);
-  --ripple-duration: 0.6s;
-  --ripple-timing: cubic-bezier(0, 0, 0.2, 1);
+  --vd-ripple-color: rgba(255, 255, 255, 0.35);
+  --vd-ripple-duration: 0.6s;
+  --vd-ripple-timing: cubic-bezier(0, 0, 0.2, 1);
 }
 
 [data-theme="dark"] {
-  --ripple-color: rgba(255, 255, 255, 0.2);
+  --vd-ripple-color: rgba(255, 255, 255, 0.2);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --ripple-color: rgba(255, 255, 255, 0.2);
+    --vd-ripple-color: rgba(255, 255, 255, 0.2);
   }
 }
 
@@ -32,9 +32,9 @@
 .vd-ripple-wave {
   position: absolute;
   border-radius: 50%;
-  background: var(--ripple-color);
+  background: var(--vd-ripple-color);
   transform: scale(0);
-  animation: vd-ripple-expand var(--ripple-duration) var(--ripple-timing) forwards;
+  animation: vd-ripple-expand var(--vd-ripple-duration) var(--vd-ripple-timing) forwards;
   pointer-events: none;
 }
 
@@ -49,15 +49,15 @@
 
 .vd-ripple-dark,
 [data-vd-ripple="dark"] {
-  --ripple-color: rgba(0, 0, 0, 0.15);
+  --vd-ripple-color: rgba(0, 0, 0, 0.15);
 }
 
 .vd-ripple-primary,
 [data-vd-ripple="primary"] {
-  --ripple-color: rgba(13, 110, 253, 0.3);
+  --vd-ripple-color: rgba(13, 110, 253, 0.3);
 }
 
 .vd-ripple-light,
 [data-vd-ripple="light"] {
-  --ripple-color: rgba(255, 255, 255, 0.5);
+  --vd-ripple-color: rgba(255, 255, 255, 0.5);
 }

package/css/components/sidenav.css

@@ -5,42 +5,42 @@
 
 :root {
   /* Sidenav Colors */
-  --sidenav-bg: var(--color-white);
-  --sidenav-overlay-bg: rgba(0, 0, 0, 0.35);
-  --sidenav-border-color: var(--border-color);
-  --sidenav-item-bg-hover: var(--bg-secondary);
-  --sidenav-item-bg-active: var(--color-primary-alpha-10);
-  --sidenav-item-color-active: var(--color-primary);
+  --vd-sidenav-bg: var(--vd-color-white);
+  --vd-sidenav-overlay-bg: rgba(0, 0, 0, 0.35);
+  --vd-sidenav-border-color: var(--vd-border-color);
+  --vd-sidenav-item-bg-hover: var(--vd-bg-secondary);
+  --vd-sidenav-item-bg-active: var(--vd-color-primary-alpha-10);
+  --vd-sidenav-item-color-active: var(--vd-color-primary);
   
   /* Sidenav Dimensions (Fibonacci) */
-  --sidenav-width: 233px;     /* fib */
-  --sidenav-width-sm: 233px;  /* fib */
-  --sidenav-width-lg: 377px;  /* fib */
+  --vd-sidenav-width: 233px;     /* fib */
+  --vd-sidenav-width-sm: 233px;  /* fib */
+  --vd-sidenav-width-lg: 377px;  /* fib */
 
   /* Sidenav Spacing (Fibonacci) */
-  --sidenav-padding-y: 0.8125rem;      /* 13px - fib */
-  --sidenav-padding-x: 1.3125rem;      /* 21px - fib */
-  --sidenav-item-padding-y: 0.5rem;    /* 8px  - fib */
-  --sidenav-item-padding-x: 0.8125rem; /* 13px - fib */
+  --vd-sidenav-padding-y: 0.8125rem;      /* 13px - fib */
+  --vd-sidenav-padding-x: 1.3125rem;      /* 21px - fib */
+  --vd-sidenav-item-padding-y: 0.5rem;    /* 8px  - fib */
+  --vd-sidenav-item-padding-x: 0.8125rem; /* 13px - fib */
   
   /* Sidenav Z-index */
-  --sidenav-z-index: 1040;
-  --sidenav-overlay-z-index: 1030;
+  --vd-sidenav-z-index: 1040;
+  --vd-sidenav-overlay-z-index: 1030;
   
   /* Sidenav Transitions */
-  --sidenav-transition: transform var(--transition-duration-slow) var(--transition-ease);
+  --vd-sidenav-transition: transform var(--vd-transition-duration-slow) var(--vd-transition-ease);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --sidenav-bg: var(--bg-secondary);
-  --sidenav-item-bg-hover: var(--bg-primary);
+  --vd-sidenav-bg: var(--vd-bg-secondary);
+  --vd-sidenav-item-bg-hover: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --sidenav-bg: var(--bg-secondary);
-    --sidenav-item-bg-hover: var(--bg-primary);
+    --vd-sidenav-bg: var(--vd-bg-secondary);
+    --vd-sidenav-item-bg-hover: var(--vd-bg-primary);
   }
 }
 
@@ -49,12 +49,12 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--sidenav-overlay-z-index);
+  z-index: var(--vd-sidenav-overlay-z-index);
   width: 100vw;
   height: 100vh;
-  background-color: var(--sidenav-overlay-bg);
+  background-color: var(--vd-sidenav-overlay-bg);
   opacity: 0;
-  transition: opacity var(--transition-duration-base) var(--transition-ease);
+  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);
   pointer-events: none;
 }
 
@@ -68,15 +68,15 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--sidenav-z-index);
-  width: var(--sidenav-width);
+  z-index: var(--vd-sidenav-z-index);
+  width: var(--vd-sidenav-width);
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background-color: var(--sidenav-bg);
-  box-shadow: var(--shadow-lg);
+  background-color: var(--vd-sidenav-bg);
+  box-shadow: var(--vd-shadow-lg);
   transform: translateX(-100%);
-  transition: var(--sidenav-transition);
+  transition: var(--vd-sidenav-transition);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -106,13 +106,13 @@
 }
 
 .vd-sidenav-push.is-open ~ * {
-  margin-left: var(--sidenav-width);
-  transition: margin-left var(--transition-duration-slow) var(--transition-ease);
+  margin-left: var(--vd-sidenav-width);
+  transition: margin-left var(--vd-transition-duration-slow) var(--vd-transition-ease);
 }
 
 .vd-sidenav-push.vd-sidenav-right.is-open ~ * {
   margin-left: 0;
-  margin-right: var(--sidenav-width);
+  margin-right: var(--vd-sidenav-width);
 }
 
 .vd-sidenav-fixed {
@@ -129,16 +129,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--sidenav-padding-y) var(--sidenav-padding-x);
-  border-bottom: 1px solid var(--sidenav-border-color);
+  padding: var(--vd-sidenav-padding-y) var(--vd-sidenav-padding-x);
+  border-bottom: 1px solid var(--vd-sidenav-border-color);
   flex-shrink: 0;
 }
 
 .vd-sidenav-title {
   margin: 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  font-size: var(--vd-font-size-lg);
+  font-weight: var(--vd-font-weight-semibold);
+  color: var(--vd-text-primary);
 }
 
 .vd-sidenav-close {
@@ -146,14 +146,14 @@
   margin: -0.5rem -0.5rem -0.5rem auto;
   background: transparent;
   border: 0;
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
   opacity: 0.5;
   cursor: pointer;
   font-size: 1.5rem;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--vd-font-weight-bold);
   line-height: 1;
-  color: var(--text-secondary);
-  transition: var(--transition-opacity);
+  color: var(--vd-text-secondary);
+  transition: var(--vd-transition-opacity);
 }
 
 .vd-sidenav-close:hover,
@@ -165,15 +165,15 @@
 /* Sidenav Body */
 .vd-sidenav-body {
   flex: 1 1 auto;
-  padding: var(--sidenav-padding-y) 0;
+  padding: var(--vd-sidenav-padding-y) 0;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 /* Sidenav Footer */
 .vd-sidenav-footer {
-  padding: var(--sidenav-padding-y) var(--sidenav-padding-x);
-  border-top: 1px solid var(--sidenav-border-color);
+  padding: var(--vd-sidenav-padding-y) var(--vd-sidenav-padding-x);
+  border-top: 1px solid var(--vd-sidenav-border-color);
   flex-shrink: 0;
 }
 
@@ -186,11 +186,11 @@
 
 /* Sidenav Section */
 .vd-sidenav-section {
-  padding: 0.5rem var(--sidenav-padding-x);
+  padding: 0.5rem var(--vd-sidenav-padding-x);
   margin-top: 0.5rem;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-muted);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-semibold);
+  color: var(--vd-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -207,64 +207,64 @@
 .vd-sidenav-link {
   display: flex;
   align-items: center;
-  padding: var(--sidenav-item-padding-y) var(--sidenav-item-padding-x);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-normal);
-  line-height: var(--line-height-normal);
-  color: var(--text-primary);
+  padding: var(--vd-sidenav-item-padding-y) var(--vd-sidenav-item-padding-x);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-normal);
+  line-height: var(--vd-line-height-normal);
+  color: var(--vd-text-primary);
   text-decoration: none;
-  transition: var(--transition-bg);
+  transition: var(--vd-transition-bg);
   cursor: pointer;
 }
 
 .vd-sidenav-link:hover {
-  background-color: var(--sidenav-item-bg-hover);
-  color: var(--text-primary);
+  background-color: var(--vd-sidenav-item-bg-hover);
+  color: var(--vd-text-primary);
   text-decoration: none;
 }
 
 .vd-sidenav-link:focus {
-  outline: 2px solid var(--input-focus-border-color);
+  outline: 2px solid var(--vd-input-focus-border-color);
   outline-offset: -2px;
 }
 
 .vd-sidenav-item.active .vd-sidenav-link {
-  background-color: var(--sidenav-item-bg-active);
-  color: var(--sidenav-item-color-active);
-  font-weight: var(--font-weight-medium);
+  background-color: var(--vd-sidenav-item-bg-active);
+  color: var(--vd-sidenav-item-color-active);
+  font-weight: var(--vd-font-weight-medium);
 }
 
 /* Sidenav Divider */
 .vd-sidenav-divider {
   height: 0;
-  margin: 0.5rem var(--sidenav-padding-x);
+  margin: 0.5rem var(--vd-sidenav-padding-x);
   overflow: hidden;
-  border-top: 1px solid var(--sidenav-border-color);
+  border-top: 1px solid var(--vd-sidenav-border-color);
 }
 
 /* Sidenav Sizes */
 .vd-sidenav-sm {
-  width: var(--sidenav-width-sm);
+  width: var(--vd-sidenav-width-sm);
 }
 
 .vd-sidenav-sm.vd-sidenav-push.is-open ~ * {
-  margin-left: var(--sidenav-width-sm);
+  margin-left: var(--vd-sidenav-width-sm);
 }
 
 .vd-sidenav-sm.vd-sidenav-push.vd-sidenav-right.is-open ~ * {
-  margin-right: var(--sidenav-width-sm);
+  margin-right: var(--vd-sidenav-width-sm);
 }
 
 .vd-sidenav-lg {
-  width: var(--sidenav-width-lg);
+  width: var(--vd-sidenav-width-lg);
 }
 
 .vd-sidenav-lg.vd-sidenav-push.is-open ~ * {
-  margin-left: var(--sidenav-width-lg);
+  margin-left: var(--vd-sidenav-width-lg);
 }
 
 .vd-sidenav-lg.vd-sidenav-push.vd-sidenav-right.is-open ~ * {
-  margin-right: var(--sidenav-width-lg);
+  margin-right: var(--vd-sidenav-width-lg);
 }
 
 /* ========== Offcanvas Alias ========== */
@@ -273,15 +273,15 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--sidenav-z-index);
-  width: var(--sidenav-width);
+  z-index: var(--vd-sidenav-z-index);
+  width: var(--vd-sidenav-width);
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background-color: var(--sidenav-bg);
-  box-shadow: var(--shadow-lg);
+  background-color: var(--vd-sidenav-bg);
+  box-shadow: var(--vd-shadow-lg);
   transform: translateX(-100%);
-  transition: var(--sidenav-transition);
+  transition: var(--vd-sidenav-transition);
   overflow-y: auto;
   overflow-x: hidden;
 }

package/css/components/skeleton.css

@@ -5,21 +5,21 @@
 
 :root {
   /* Skeleton Colors */
-  --skeleton-bg: var(--color-gray-200);
-  --skeleton-shimmer: var(--color-gray-100);
-  --skeleton-border-radius: var(--btn-border-radius);
+  --vd-skeleton-bg: var(--vd-color-gray-200);
+  --vd-skeleton-shimmer: var(--vd-color-gray-100);
+  --vd-skeleton-border-radius: var(--vd-btn-border-radius);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --skeleton-bg: var(--color-gray-700);
-  --skeleton-shimmer: var(--color-gray-600);
+  --vd-skeleton-bg: var(--vd-color-gray-700);
+  --vd-skeleton-shimmer: var(--vd-color-gray-600);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --skeleton-bg: var(--color-gray-700);
-    --skeleton-shimmer: var(--color-gray-600);
+    --vd-skeleton-bg: var(--vd-color-gray-700);
+    --vd-skeleton-shimmer: var(--vd-color-gray-600);
   }
 }
 
@@ -27,8 +27,8 @@
 .vd-skeleton {
   position: relative;
   overflow: hidden;
-  background-color: var(--skeleton-bg);
-  border-radius: var(--skeleton-border-radius);
+  background-color: var(--vd-skeleton-bg);
+  border-radius: var(--vd-skeleton-border-radius);
 }
 
 /* Shimmer Animation */
@@ -43,7 +43,7 @@
   background: linear-gradient(
     90deg,
     transparent,
-    var(--skeleton-shimmer),
+    var(--vd-skeleton-shimmer),
     transparent
   );
   animation: skeleton-shimmer 1.5s infinite;
@@ -88,12 +88,13 @@
 /* Skeleton Circle (for avatars) */
 .vd-skeleton-circle {
   border-radius: 50%;
+  width: 3rem;
+  height: 3rem;
 }
 
 .vd-skeleton-circle-xs { width: 1.5rem; height: 1.5rem; }
 .vd-skeleton-circle-sm { width: 2rem; height: 2rem; }
 .vd-skeleton-circle-md { width: 2.5rem; height: 2.5rem; }
-.vd-skeleton-circle { width: 3rem; height: 3rem; }
 .vd-skeleton-circle-lg { width: 4rem; height: 4rem; }
 .vd-skeleton-circle-xl { width: 5rem; height: 5rem; }
 
@@ -110,7 +111,7 @@
 .vd-skeleton-button {
   height: 2.5rem;
   width: 6rem;
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 .vd-skeleton-button-sm {
@@ -126,15 +127,15 @@
 /* Skeleton Card */
 .vd-skeleton-card {
   padding: 1rem;
-  border-radius: var(--btn-border-radius);
-  border: 1px solid var(--border-color);
+  border-radius: var(--vd-btn-border-radius);
+  border: 1px solid var(--vd-border-color);
 }
 
 /* Skeleton Input */
 .vd-skeleton-input {
   height: 2.5rem;
   width: 100%;
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 /* Skeleton Paragraph (multiple lines) */
@@ -189,7 +190,7 @@
   display: flex;
   gap: 1rem;
   padding: 0.75rem 0;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--vd-border-color);
 }
 
 .vd-skeleton-table-row .vd-skeleton-text {