@vanduo-oss/framework 1.4.0 → 1.4.2

package/css/components/draggable.css

@@ -5,51 +5,51 @@
 
 :root {
   /* Draggable Colors */
-  --draggable-bg: var(--vd-color-white);
-  --draggable-border-color: var(--vd-border-color);
-  --draggable-hover-bg: var(--vd-bg-secondary);
-  --draggable-hover-border-color: var(--vd-color-primary);
-  --draggable-dragging-bg: var(--vd-bg-secondary);
-  --draggable-dragging-border-color: var(--vd-color-primary);
-  --draggable-dragging-shadow: var(--shadow-lg);
+  --vd-draggable-bg: var(--vd-color-white);
+  --vd-draggable-border-color: var(--vd-border-color);
+  --vd-draggable-hover-bg: var(--vd-bg-secondary);
+  --vd-draggable-hover-border-color: var(--vd-color-primary);
+  --vd-draggable-dragging-bg: var(--vd-bg-secondary);
+  --vd-draggable-dragging-border-color: var(--vd-color-primary);
+  --vd-draggable-dragging-shadow: var(--vd-shadow-lg);
   
   /* Drop Zone Colors */
-  --drop-zone-bg: var(--vd-color-primary-alpha-5);
-  --drop-zone-border-color: var(--vd-color-primary-alpha-30);
-  --drop-zone-hover-bg: var(--vd-color-primary-alpha-10);
-  --drop-zone-hover-border-color: var(--vd-color-primary);
-  --drop-zone-active-bg: var(--vd-color-primary-alpha-15);
-  --drop-zone-active-border-color: var(--vd-color-primary);
+  --vd-drop-zone-bg: var(--vd-color-primary-alpha-5);
+  --vd-drop-zone-border-color: var(--vd-color-primary-alpha-30);
+  --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-10);
+  --vd-drop-zone-hover-border-color: var(--vd-color-primary);
+  --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-15);
+  --vd-drop-zone-active-border-color: var(--vd-color-primary);
   
   /* Spacing */
-  --draggable-padding: 0.8125rem; /* 13px - fib */
-  --draggable-margin: 0.5rem; /* 8px - fib */
-  --drop-zone-padding: 1.3125rem; /* 21px - fib */
+  --vd-draggable-padding: 0.8125rem; /* 13px - fib */
+  --vd-draggable-margin: 0.5rem; /* 8px - fib */
+  --vd-drop-zone-padding: 1.3125rem; /* 21px - fib */
   
   /* Transitions */
-  --draggable-transition: all var(--transition-duration-base) var(--transition-ease);
+  --vd-draggable-transition: all var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --draggable-bg: var(--vd-bg-secondary);
-  --draggable-hover-bg: var(--vd-bg-primary);
-  --draggable-dragging-bg: var(--vd-bg-primary);
-  --drop-zone-bg: var(--vd-color-primary-alpha-10);
-  --drop-zone-border-color: var(--vd-color-primary-alpha-40);
-  --drop-zone-hover-bg: var(--vd-color-primary-alpha-15);
-  --drop-zone-active-bg: var(--vd-color-primary-alpha-20);
+  --vd-draggable-bg: var(--vd-bg-secondary);
+  --vd-draggable-hover-bg: var(--vd-bg-primary);
+  --vd-draggable-dragging-bg: var(--vd-bg-primary);
+  --vd-drop-zone-bg: var(--vd-color-primary-alpha-10);
+  --vd-drop-zone-border-color: var(--vd-color-primary-alpha-40);
+  --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-15);
+  --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-20);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --draggable-bg: var(--vd-bg-secondary);
-    --draggable-hover-bg: var(--vd-bg-primary);
-    --draggable-dragging-bg: var(--vd-bg-primary);
-    --drop-zone-bg: var(--vd-color-primary-alpha-10);
-    --drop-zone-border-color: var(--vd-color-primary-alpha-40);
-    --drop-zone-hover-bg: var(--vd-color-primary-alpha-15);
-    --drop-zone-active-bg: var(--vd-color-primary-alpha-20);
+    --vd-draggable-bg: var(--vd-bg-secondary);
+    --vd-draggable-hover-bg: var(--vd-bg-primary);
+    --vd-draggable-dragging-bg: var(--vd-bg-primary);
+    --vd-drop-zone-bg: var(--vd-color-primary-alpha-10);
+    --vd-drop-zone-border-color: var(--vd-color-primary-alpha-40);
+    --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-15);
+    --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-20);
   }
 }
 
@@ -57,20 +57,20 @@
 .vd-draggable {
   position: relative;
   display: inline-block;
-  padding: var(--draggable-padding);
-  margin: var(--draggable-margin);
-  background-color: var(--draggable-bg);
-  border: 1px solid var(--draggable-border-color);
-  border-radius: var(--btn-border-radius);
+  padding: var(--vd-draggable-padding);
+  margin: var(--vd-draggable-margin);
+  background-color: var(--vd-draggable-bg);
+  border: 1px solid var(--vd-draggable-border-color);
+  border-radius: var(--vd-btn-border-radius);
   cursor: grab;
   user-select: none;
-  transition: var(--draggable-transition);
+  transition: var(--vd-draggable-transition);
   touch-action: none;
 }
 
 .vd-draggable:hover {
-  background-color: var(--draggable-hover-bg);
-  border-color: var(--draggable-hover-border-color);
+  background-color: var(--vd-draggable-hover-bg);
+  border-color: var(--vd-draggable-hover-border-color);
 }
 
 .vd-draggable:active {
@@ -89,9 +89,9 @@
 .vd-draggable.is-dragging {
   opacity: 0.7;
   transform: scale(1.02);
-  background-color: var(--draggable-dragging-bg);
-  border-color: var(--draggable-dragging-border-color);
-  box-shadow: var(--draggable-dragging-shadow);
+  background-color: var(--vd-draggable-dragging-bg);
+  border-color: var(--vd-draggable-dragging-border-color);
+  box-shadow: var(--vd-draggable-dragging-shadow);
   cursor: grabbing;
   z-index: 1000;
 }
@@ -106,7 +106,7 @@
   margin-right: 0.5rem; /* 8px */
   color: var(--vd-text-muted);
   cursor: grab;
-  transition: var(--draggable-transition);
+  transition: var(--vd-draggable-transition);
 }
 
 .vd-draggable-handle:hover {
@@ -121,22 +121,22 @@
 .vd-drop-zone {
   position: relative;
   min-height: 3rem; /* 48px */
-  padding: var(--drop-zone-padding);
-  margin: var(--draggable-margin);
-  background-color: var(--drop-zone-bg);
-  border: 2px dashed var(--drop-zone-border-color);
-  border-radius: var(--btn-border-radius);
-  transition: var(--draggable-transition);
+  padding: var(--vd-drop-zone-padding);
+  margin: var(--vd-draggable-margin);
+  background-color: var(--vd-drop-zone-bg);
+  border: 2px dashed var(--vd-drop-zone-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  transition: var(--vd-draggable-transition);
 }
 
 .vd-drop-zone:hover {
-  background-color: var(--drop-zone-hover-bg);
-  border-color: var(--drop-zone-hover-border-color);
+  background-color: var(--vd-drop-zone-hover-bg);
+  border-color: var(--vd-drop-zone-hover-border-color);
 }
 
 .vd-drop-zone.is-drag-over {
-  background-color: var(--drop-zone-active-bg);
-  border-color: var(--drop-zone-active-border-color);
+  background-color: var(--vd-drop-zone-active-bg);
+  border-color: var(--vd-drop-zone-active-border-color);
   border-style: solid;
   transform: scale(1.01);
 }
@@ -157,7 +157,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--vd-font-weight-medium);
   color: var(--vd-color-primary);
   pointer-events: none;
 }
@@ -166,11 +166,11 @@
 .vd-draggable-container {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--draggable-margin);
-  padding: var(--draggable-padding);
+  gap: var(--vd-draggable-margin);
+  padding: var(--vd-draggable-padding);
   background-color: var(--vd-bg-secondary);
   border: 1px solid var(--vd-border-color);
-  border-radius: var(--btn-border-radius);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 .vd-draggable-container.vd-draggable-container-vertical {
@@ -182,27 +182,27 @@
 .vd-draggable-item {
   flex: 0 0 auto;
   min-width: 8rem; /* 128px */
-  padding: var(--draggable-padding);
-  background-color: var(--draggable-bg);
-  border: 1px solid var(--draggable-border-color);
-  border-radius: var(--btn-border-radius);
+  padding: var(--vd-draggable-padding);
+  background-color: var(--vd-draggable-bg);
+  border: 1px solid var(--vd-draggable-border-color);
+  border-radius: var(--vd-btn-border-radius);
   cursor: grab;
   user-select: none;
   touch-action: none;
-  transition: var(--draggable-transition);
+  transition: var(--vd-draggable-transition);
 }
 
 .vd-draggable-item:hover {
-  background-color: var(--draggable-hover-bg);
-  border-color: var(--draggable-hover-border-color);
+  background-color: var(--vd-draggable-hover-bg);
+  border-color: var(--vd-draggable-hover-border-color);
 }
 
 .vd-draggable-item.is-dragging {
   opacity: 0.7;
   transform: scale(1.02);
-  background-color: var(--draggable-dragging-bg);
-  border-color: var(--draggable-dragging-border-color);
-  box-shadow: var(--draggable-dragging-shadow);
+  background-color: var(--vd-draggable-dragging-bg);
+  border-color: var(--vd-draggable-dragging-border-color);
+  box-shadow: var(--vd-draggable-dragging-shadow);
   cursor: grabbing;
   z-index: 1000;
 }
@@ -216,8 +216,8 @@
 .vd-draggable-item[aria-grabbed="true"] {
   outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
-  background-color: var(--draggable-dragging-bg);
-  border-color: var(--draggable-dragging-border-color);
+  background-color: var(--vd-draggable-dragging-bg);
+  border-color: var(--vd-draggable-dragging-border-color);
 }
 
 /* Drag Feedback */

package/css/components/dropdown.css

@@ -5,40 +5,40 @@
 
 :root {
   /* Dropdown Colors */
-  --dropdown-bg: var(--vd-color-white);
-  --dropdown-border-color: var(--vd-border-color);
-  --dropdown-item-color: var(--vd-text-primary);
-  --dropdown-item-hover-bg: var(--vd-bg-secondary);
-  --dropdown-item-hover-color: var(--vd-text-primary);
-  --dropdown-item-active-bg: var(--vd-color-primary-alpha-10);
-  --dropdown-item-active-color: var(--vd-color-primary);
-  --dropdown-item-disabled-color: var(--vd-text-muted);
+  --vd-dropdown-bg: var(--vd-color-white);
+  --vd-dropdown-border-color: var(--vd-border-color);
+  --vd-dropdown-item-color: var(--vd-text-primary);
+  --vd-dropdown-item-hover-bg: var(--vd-bg-secondary);
+  --vd-dropdown-item-hover-color: var(--vd-text-primary);
+  --vd-dropdown-item-active-bg: var(--vd-color-primary-alpha-10);
+  --vd-dropdown-item-active-color: var(--vd-color-primary);
+  --vd-dropdown-item-disabled-color: var(--vd-text-muted);
   
   /* Dropdown Spacing (Fibonacci) */
-  --dropdown-padding-y: 0.5rem;          /* 8px - fib */
-  --dropdown-padding-x: 0;
-  --dropdown-item-padding-y: 0.5rem;     /* 8px  - fib */
-  --dropdown-item-padding-x: 0.8125rem;  /* 13px - fib */
-  --dropdown-header-padding-y: 0.5rem;   /* 8px  - fib */
-  --dropdown-header-padding-x: 0.8125rem;/* 13px - fib */
+  --vd-dropdown-padding-y: 0.5rem;          /* 8px - fib */
+  --vd-dropdown-padding-x: 0;
+  --vd-dropdown-item-padding-y: 0.5rem;     /* 8px  - fib */
+  --vd-dropdown-item-padding-x: 0.8125rem;  /* 13px - fib */
+  --vd-dropdown-header-padding-y: 0.5rem;   /* 8px  - fib */
+  --vd-dropdown-header-padding-x: 0.8125rem;/* 13px - fib */
 
   /* Dropdown Z-index */
-  --dropdown-z-index: 1000;
+  --vd-dropdown-z-index: 1000;
 
   /* Dropdown Min Width */
-  --dropdown-min-width: 13rem; /* ~208px, Fibonacci-inspired */
+  --vd-dropdown-min-width: 13rem; /* ~208px, Fibonacci-inspired */
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --dropdown-bg: var(--vd-bg-secondary);
-  --dropdown-item-hover-bg: var(--vd-bg-primary);
+  --vd-dropdown-bg: var(--vd-bg-secondary);
+  --vd-dropdown-item-hover-bg: var(--vd-bg-primary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --dropdown-bg: var(--vd-bg-secondary);
-    --dropdown-item-hover-bg: var(--vd-bg-primary);
+    --vd-dropdown-bg: var(--vd-bg-secondary);
+    --vd-dropdown-item-hover-bg: var(--vd-bg-primary);
   }
 }
 
@@ -68,7 +68,7 @@
   border-right: 0.3em solid transparent;
   border-bottom: 0;
   border-left: 0.3em solid transparent;
-  transition: transform var(--transition-duration-base) var(--transition-ease);
+  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 .vd-dropdown.is-open .vd-dropdown-toggle::after {
@@ -80,20 +80,20 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: var(--dropdown-z-index);
+  z-index: var(--vd-dropdown-z-index);
   display: none;
-  min-width: var(--dropdown-min-width);
-  padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
+  min-width: var(--vd-dropdown-min-width);
+  padding: var(--vd-dropdown-padding-y) var(--vd-dropdown-padding-x);
   margin: 0.125rem 0 0;
-  background-color: var(--dropdown-bg);
-  border: 1px solid var(--dropdown-border-color);
-  border-radius: var(--btn-border-radius);
-  box-shadow: var(--shadow-lg);
+  background-color: var(--vd-dropdown-bg);
+  border: 1px solid var(--vd-dropdown-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  box-shadow: var(--vd-shadow-lg);
   list-style: none;
   opacity: 0;
   transform: translateY(-10px);
-  transition: opacity var(--transition-duration-base) var(--transition-ease),
-              transform var(--transition-duration-base) var(--transition-ease);
+  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease),
+              transform var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 .vd-dropdown-glass .vd-dropdown-menu {
@@ -177,24 +177,24 @@
 .vd-dropdown-item {
   display: block;
   width: 100%;
-  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+  padding: var(--vd-dropdown-item-padding-y) var(--vd-dropdown-item-padding-x);
   clear: both;
-  font-weight: var(--font-weight-normal);
-  color: var(--dropdown-item-color);
+  font-weight: var(--vd-font-weight-normal);
+  color: var(--vd-dropdown-item-color);
   text-align: inherit;
   text-decoration: none;
   white-space: nowrap;
   background-color: transparent;
   border: 0;
   cursor: pointer;
-  transition: var(--transition-bg);
+  transition: var(--vd-transition-bg);
   user-select: none;
 }
 
 .vd-dropdown-item:hover,
 .vd-dropdown-item:focus {
-  color: var(--dropdown-item-hover-color);
-  background-color: var(--dropdown-item-hover-bg);
+  color: var(--vd-dropdown-item-hover-color);
+  background-color: var(--vd-dropdown-item-hover-bg);
   text-decoration: none;
 }
 
@@ -205,14 +205,14 @@
 
 .vd-dropdown-item.active,
 .vd-dropdown-item.is-active {
-  color: var(--dropdown-item-active-color);
-  background-color: var(--dropdown-item-active-bg);
-  font-weight: var(--font-weight-medium);
+  color: var(--vd-dropdown-item-active-color);
+  background-color: var(--vd-dropdown-item-active-bg);
+  font-weight: var(--vd-font-weight-medium);
 }
 
 .vd-dropdown-item.disabled,
 .vd-dropdown-item.is-disabled {
-  color: var(--dropdown-item-disabled-color);
+  color: var(--vd-dropdown-item-disabled-color);
   pointer-events: none;
   cursor: not-allowed;
   opacity: 0.6;
@@ -223,16 +223,16 @@
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid var(--dropdown-border-color);
+  border-top: 1px solid var(--vd-dropdown-border-color);
 }
 
 /* Dropdown Header */
 .vd-dropdown-header {
   display: block;
-  padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
+  padding: var(--vd-dropdown-header-padding-y) var(--vd-dropdown-header-padding-x);
   margin-bottom: 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--vd-font-size-sm);
+  font-weight: var(--vd-font-weight-semibold);
   color: var(--vd-text-muted);
   white-space: nowrap;
   text-transform: uppercase;
@@ -253,20 +253,20 @@
 /* Dropdown Sizes */
 .vd-dropdown-sm .vd-dropdown-menu {
   min-width: 8rem;
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
 }
 
 .vd-dropdown-sm .vd-dropdown-item {
-  padding: calc(var(--dropdown-item-padding-y) * 0.75) calc(var(--dropdown-item-padding-x) * 0.75);
+  padding: calc(var(--vd-dropdown-item-padding-y) * 0.75) calc(var(--vd-dropdown-item-padding-x) * 0.75);
 }
 
 .vd-dropdown-lg .vd-dropdown-menu {
   min-width: 15rem;
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
 }
 
 .vd-dropdown-lg .vd-dropdown-item {
-  padding: calc(var(--dropdown-item-padding-y) * 1.25) calc(var(--dropdown-item-padding-x) * 1.25);
+  padding: calc(var(--vd-dropdown-item-padding-y) * 1.25) calc(var(--vd-dropdown-item-padding-x) * 1.25);
 }
 
 /* Dropdown with Button Toggle */

package/css/components/fab.css

@@ -5,35 +5,35 @@
 
 :root {
   /* FAB Dimensions (Fibonacci) */
-  --fab-size: 3.5rem;           /* 56px */
-  --fab-size-sm: 2.5rem;        /* 40px */
-  --fab-size-lg: 4.5rem;        /* 72px */
-  --fab-icon-size: 1.5rem;
+  --vd-fab-size: 3.5rem;           /* 56px */
+  --vd-fab-size-sm: 2.5rem;        /* 40px */
+  --vd-fab-size-lg: 4.5rem;        /* 72px */
+  --vd-fab-icon-size: 1.5rem;
 
   /* FAB Colors */
-  --fab-bg: var(--vd-color-primary, #0d6efd);
-  --fab-color: #fff;
-  --fab-hover-bg: var(--vd-color-primary-dark, #0b5ed7);
-  --fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
-  --fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
+  --vd-fab-bg: var(--vd-color-primary, #0d6efd);
+  --vd-fab-color: #fff;
+  --vd-fab-hover-bg: var(--vd-color-primary-dark, #0b5ed7);
+  --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
+  --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
 
   /* FAB Position */
-  --fab-offset: 1.3125rem;      /* 21px - fib */
-  --fab-z-index: 1030;
+  --vd-fab-offset: 1.3125rem;      /* 21px - fib */
+  --vd-fab-z-index: 1030;
 
   /* FAB Menu */
-  --fab-menu-gap: 0.8125rem;    /* 13px - fib */
+  --vd-fab-menu-gap: 0.8125rem;    /* 13px - fib */
 }
 
 [data-theme="dark"] {
-  --fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
-  --fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);
+  --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
+  --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
-    --fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);
+    --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
+    --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);
   }
 }
 
@@ -43,15 +43,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--fab-size);
-  height: var(--fab-size);
+  width: var(--vd-fab-size);
+  height: var(--vd-fab-size);
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: var(--fab-bg);
-  color: var(--fab-color);
-  font-size: var(--fab-icon-size);
-  box-shadow: var(--fab-shadow);
+  background: var(--vd-fab-bg);
+  color: var(--vd-fab-color);
+  font-size: var(--vd-fab-icon-size);
+  box-shadow: var(--vd-fab-shadow);
   cursor: pointer;
   transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
@@ -66,8 +66,8 @@
 }
 
 .vd-fab:hover {
-  background: var(--fab-hover-bg);
-  box-shadow: var(--fab-hover-shadow);
+  background: var(--vd-fab-hover-bg);
+  box-shadow: var(--vd-fab-hover-shadow);
   transform: scale(1.05);
 }
 
@@ -81,21 +81,21 @@
 }
 
 .vd-fab:focus-visible {
-  outline: 2px solid var(--fab-bg);
+  outline: 2px solid var(--vd-fab-bg);
   outline-offset: 3px;
 }
 
 /* ========== Sizes ========== */
 
 .vd-fab-sm {
-  width: var(--fab-size-sm);
-  height: var(--fab-size-sm);
+  width: var(--vd-fab-size-sm);
+  height: var(--vd-fab-size-sm);
   font-size: 1.125rem;
 }
 
 .vd-fab-lg {
-  width: var(--fab-size-lg);
-  height: var(--fab-size-lg);
+  width: var(--vd-fab-size-lg);
+  height: var(--vd-fab-size-lg);
   font-size: 2rem;
 }
 
@@ -112,42 +112,42 @@
 
 .vd-fab-fixed {
   position: fixed;
-  bottom: var(--fab-offset);
-  right: var(--fab-offset);
-  z-index: var(--fab-z-index);
+  bottom: var(--vd-fab-offset);
+  right: var(--vd-fab-offset);
+  z-index: var(--vd-fab-z-index);
 }
 
 /* ========== Position Variants (all include position: fixed) ========== */
 
 .vd-fab-bottom-left {
   position: fixed;
-  z-index: var(--fab-z-index);
-  bottom: var(--fab-offset);
+  z-index: var(--vd-fab-z-index);
+  bottom: var(--vd-fab-offset);
   right: auto;
-  left: var(--fab-offset);
+  left: var(--vd-fab-offset);
 }
 
 .vd-fab-top-right {
   position: fixed;
-  z-index: var(--fab-z-index);
+  z-index: var(--vd-fab-z-index);
   bottom: auto;
-  right: var(--fab-offset);
-  top: var(--fab-offset);
+  right: var(--vd-fab-offset);
+  top: var(--vd-fab-offset);
 }
 
 .vd-fab-top-left {
   position: fixed;
-  z-index: var(--fab-z-index);
+  z-index: var(--vd-fab-z-index);
   bottom: auto;
   right: auto;
-  top: var(--fab-offset);
-  left: var(--fab-offset);
+  top: var(--vd-fab-offset);
+  left: var(--vd-fab-offset);
 }
 
 .vd-fab-center {
   position: fixed;
-  z-index: var(--fab-z-index);
-  bottom: var(--fab-offset);
+  z-index: var(--vd-fab-z-index);
+  bottom: var(--vd-fab-offset);
   right: 50%;
   transform: translateX(50%);
 }
@@ -159,18 +159,18 @@
 /* ========== Color Variants ========== */
 
 .vd-fab-secondary {
-  --fab-bg: var(--vd-color-gray-600, #6c757d);
-  --fab-hover-bg: var(--vd-color-gray-700, #5c636a);
+  --vd-fab-bg: var(--vd-color-gray-600, #6c757d);
+  --vd-fab-hover-bg: var(--vd-color-gray-700, #5c636a);
 }
 
 .vd-fab-success {
-  --fab-bg: var(--vd-color-success, #198754);
-  --fab-hover-bg: #157347;
+  --vd-fab-bg: var(--vd-color-success, #198754);
+  --vd-fab-hover-bg: #157347;
 }
 
 .vd-fab-danger {
-  --fab-bg: var(--vd-color-danger, #dc3545);
-  --fab-hover-bg: #bb2d3b;
+  --vd-fab-bg: var(--vd-color-danger, #dc3545);
+  --vd-fab-hover-bg: #bb2d3b;
 }
 
 /* ========== Speed Dial Menu ========== */
@@ -180,14 +180,14 @@
   display: inline-flex;
   flex-direction: column-reverse;
   align-items: center;
-  gap: var(--fab-menu-gap);
+  gap: var(--vd-fab-menu-gap);
 }
 
 .vd-fab-menu .vd-fab-actions {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--fab-menu-gap);
+  gap: var(--vd-fab-menu-gap);
   opacity: 0;
   visibility: hidden;
   transform: translateY(0.5rem);
@@ -202,30 +202,30 @@
 
 .vd-fab-menu.vd-fab-fixed {
   position: fixed;
-  bottom: var(--fab-offset);
-  right: var(--fab-offset);
-  z-index: var(--fab-z-index);
+  bottom: var(--vd-fab-offset);
+  right: var(--vd-fab-offset);
+  z-index: var(--vd-fab-z-index);
 }
 
 .vd-fab-menu .vd-fab-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--fab-size-sm);
-  height: var(--fab-size-sm);
+  width: var(--vd-fab-size-sm);
+  height: var(--vd-fab-size-sm);
   border: none;
   border-radius: 50%;
-  background: var(--fab-bg);
-  color: var(--fab-color);
+  background: var(--vd-fab-bg);
+  color: var(--vd-fab-color);
   font-size: 1rem;
-  box-shadow: var(--fab-shadow);
+  box-shadow: var(--vd-fab-shadow);
   cursor: pointer;
   transition: background 0.15s ease, transform 0.15s ease;
 }
 
 .vd-fab-menu .vd-fab-action:hover {
   transform: scale(1.1);
-  background: var(--fab-hover-bg);
+  background: var(--vd-fab-hover-bg);
 }
 
 /* Staggered entrance for action buttons */