@vanduo-oss/framework 1.4.0 → 1.4.1

package/css/components/rating.css

@@ -5,24 +5,24 @@
 
 :root {
   /* Rating Colors */
-  --rating-active-color: #f59e0b;
-  --rating-inactive-color: var(--vd-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(--vd-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(--vd-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 ========== */

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(--vd-color-white);
-  --sidenav-overlay-bg: rgba(0, 0, 0, 0.35);
-  --sidenav-border-color: var(--vd-border-color);
-  --sidenav-item-bg-hover: var(--vd-bg-secondary);
-  --sidenav-item-bg-active: var(--vd-color-primary-alpha-10);
-  --sidenav-item-color-active: var(--vd-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(--vd-bg-secondary);
-  --sidenav-item-bg-hover: var(--vd-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(--vd-bg-secondary);
-    --sidenav-item-bg-hover: var(--vd-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,15 +129,15 @@
   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);
+  font-size: var(--vd-font-size-lg);
+  font-weight: var(--vd-font-weight-semibold);
   color: var(--vd-text-primary);
 }
 
@@ -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(--vd-text-secondary);
-  transition: var(--transition-opacity);
+  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,10 +186,10 @@
 
 /* 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);
+  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);
+  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);
+  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(--vd-color-gray-200);
-  --skeleton-shimmer: var(--vd-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(--vd-color-gray-700);
-  --skeleton-shimmer: var(--vd-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(--vd-color-gray-700);
-    --skeleton-shimmer: var(--vd-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;
@@ -111,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 {
@@ -127,7 +127,7 @@
 /* Skeleton Card */
 .vd-skeleton-card {
   padding: 1rem;
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
   border: 1px solid var(--vd-border-color);
 }
 
@@ -135,7 +135,7 @@
 .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) */

package/css/components/spinner.css

@@ -4,21 +4,21 @@
  */
 
 :root {
-  --spinner-size: 2rem;
-  --spinner-border-width: 3px;
-  --spinner-color: var(--vd-color-primary);
-  --spinner-speed: 0.65s;
+  --vd-spinner-size: 2rem;
+  --vd-spinner-border-width: 3px;
+  --vd-spinner-color: var(--vd-color-primary);
+  --vd-spinner-speed: 0.65s;
 }
 
 /* Border Spinner */
 .vd-spinner {
   display: inline-block;
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-  border: var(--spinner-border-width) solid var(--vd-border-color, #e9ecef);
-  border-top-color: var(--spinner-color);
+  width: var(--vd-spinner-size);
+  height: var(--vd-spinner-size);
+  border: var(--vd-spinner-border-width) solid var(--vd-border-color, #e9ecef);
+  border-top-color: var(--vd-spinner-color);
   border-radius: 50%;
-  animation: spinner-rotate var(--spinner-speed) linear infinite;
+  animation: spinner-rotate var(--vd-spinner-speed) linear infinite;
 }
 
 @keyframes spinner-rotate {
@@ -40,7 +40,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--spinner-color);
+  background-color: var(--vd-spinner-color);
   animation: spinner-dots-bounce 1.4s ease-in-out infinite both;
 }
 
@@ -60,9 +60,9 @@
 /* Growing Spinner */
 .vd-spinner-grow {
   display: inline-block;
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-  background-color: var(--spinner-color);
+  width: var(--vd-spinner-size);
+  height: var(--vd-spinner-size);
+  background-color: var(--vd-spinner-color);
   border-radius: 50%;
   opacity: 0;
   animation: spinner-grow 0.75s linear infinite;
@@ -74,25 +74,25 @@
 }
 
 /* Size Variants */
-.vd-spinner-xs { --spinner-size: 1rem; --spinner-border-width: 2px; }
-.vd-spinner-sm { --spinner-size: 1.5rem; --spinner-border-width: 2px; }
-.vd-spinner-lg { --spinner-size: 3rem; --spinner-border-width: 4px; }
-.vd-spinner-xl { --spinner-size: 4rem; --spinner-border-width: 5px; }
+.vd-spinner-xs { --vd-spinner-size: 1rem; --vd-spinner-border-width: 2px; }
+.vd-spinner-sm { --vd-spinner-size: 1.5rem; --vd-spinner-border-width: 2px; }
+.vd-spinner-lg { --vd-spinner-size: 3rem; --vd-spinner-border-width: 4px; }
+.vd-spinner-xl { --vd-spinner-size: 4rem; --vd-spinner-border-width: 5px; }
 
 /* Color Variants */
-.vd-spinner-success { --spinner-color: var(--vd-color-success); }
-.vd-spinner-warning { --spinner-color: var(--vd-color-warning); }
-.vd-spinner-error { --spinner-color: var(--vd-color-error); }
-.vd-spinner-info { --spinner-color: var(--vd-color-info); }
-.vd-spinner-light { --spinner-color: #fff; }
-.vd-spinner-dark { --spinner-color: var(--vd-text-primary); }
+.vd-spinner-success { --vd-spinner-color: var(--vd-color-success); }
+.vd-spinner-warning { --vd-spinner-color: var(--vd-color-warning); }
+.vd-spinner-error { --vd-spinner-color: var(--vd-color-error); }
+.vd-spinner-info { --vd-spinner-color: var(--vd-color-info); }
+.vd-spinner-light { --vd-spinner-color: #fff; }
+.vd-spinner-dark { --vd-spinner-color: var(--vd-text-primary); }
 
 /* Centering Helper */
 .vd-spinner-center {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: var(--spacing-5, 1rem);
+  padding: var(--vd-spacing-5, 1rem);
 }
 
 /* Quad-Spinner Loader — signature Vanduo 2x2 grid loader */
@@ -114,12 +114,12 @@
 }
 
 .vd-dynamic-loader-grid .vd-spinner {
-  --spinner-size: 1.125rem;
-  --spinner-border-width: 2px;
-  --spinner-speed: 0.9s;
+  --vd-spinner-size: 1.125rem;
+  --vd-spinner-border-width: 2px;
+  --vd-spinner-speed: 0.9s;
 
   border-color: var(--vd-border-color, #d9d9d9);
-  border-top-color: var(--spinner-color);
+  border-top-color: var(--vd-spinner-color);
 }
 
 .vd-dynamic-loader-grid .vd-spinner:nth-child(1) {
@@ -140,7 +140,7 @@
 
 .vd-dynamic-loader-text {
   color: var(--vd-text-muted);
-  font-size: var(--font-size-sm, 0.8125rem);
+  font-size: var(--vd-font-size-sm, 0.8125rem);
 }
 
 /* Quad-Spinner overlaying a skeleton card */
@@ -149,7 +149,7 @@
   min-height: 300px;
   padding: 2rem;
   overflow: hidden;
-  border-radius: var(--btn-border-radius, 0.5rem);
+  border-radius: var(--vd-btn-border-radius, 0.5rem);
   border: 1px solid var(--vd-border-color);
 }