@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/draggable.css

@@ -5,51 +5,51 @@
 
 :root {
   /* Draggable Colors */
-  --draggable-bg: var(--color-white);
-  --draggable-border-color: var(--border-color);
-  --draggable-hover-bg: var(--bg-secondary);
-  --draggable-hover-border-color: var(--color-primary);
-  --draggable-dragging-bg: var(--bg-secondary);
-  --draggable-dragging-border-color: var(--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(--color-primary-alpha-5);
-  --drop-zone-border-color: var(--color-primary-alpha-30);
-  --drop-zone-hover-bg: var(--color-primary-alpha-10);
-  --drop-zone-hover-border-color: var(--color-primary);
-  --drop-zone-active-bg: var(--color-primary-alpha-15);
-  --drop-zone-active-border-color: var(--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(--bg-secondary);
-  --draggable-hover-bg: var(--bg-primary);
-  --draggable-dragging-bg: var(--bg-primary);
-  --drop-zone-bg: var(--color-primary-alpha-10);
-  --drop-zone-border-color: var(--color-primary-alpha-40);
-  --drop-zone-hover-bg: var(--color-primary-alpha-15);
-  --drop-zone-active-bg: var(--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(--bg-secondary);
-    --draggable-hover-bg: var(--bg-primary);
-    --draggable-dragging-bg: var(--bg-primary);
-    --drop-zone-bg: var(--color-primary-alpha-10);
-    --drop-zone-border-color: var(--color-primary-alpha-40);
-    --drop-zone-hover-bg: var(--color-primary-alpha-15);
-    --drop-zone-active-bg: var(--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;
 }
@@ -104,13 +104,13 @@
   width: 1.25rem; /* 20px */
   height: 1.25rem; /* 20px */
   margin-right: 0.5rem; /* 8px */
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   cursor: grab;
-  transition: var(--draggable-transition);
+  transition: var(--vd-draggable-transition);
 }
 
 .vd-draggable-handle:hover {
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
 }
 
 .vd-draggable:active .vd-draggable-handle {
@@ -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);
 }
@@ -147,7 +147,7 @@
   display: block;
   text-align: center;
   padding: 1rem;
-  color: var(--text-muted);
+  color: var(--vd-text-muted);
   font-style: italic;
 }
 
@@ -157,8 +157,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-primary);
+  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);
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--btn-border-radius);
+  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(--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;
 }
@@ -214,10 +214,10 @@
 /* Keyboard-activated grab state (via aria-grabbed) */
 .vd-draggable[aria-grabbed="true"],
 .vd-draggable-item[aria-grabbed="true"] {
-  outline: 2px solid var(--color-primary);
+  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 */
@@ -268,7 +268,7 @@
 /* Accessibility */
 .vd-draggable:focus-visible,
 .vd-draggable-item:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 

package/css/components/dropdown.css

@@ -5,40 +5,40 @@
 
 :root {
   /* Dropdown Colors */
-  --dropdown-bg: var(--color-white);
-  --dropdown-border-color: var(--border-color);
-  --dropdown-item-color: var(--text-primary);
-  --dropdown-item-hover-bg: var(--bg-secondary);
-  --dropdown-item-hover-color: var(--text-primary);
-  --dropdown-item-active-bg: var(--color-primary-alpha-10);
-  --dropdown-item-active-color: var(--color-primary);
-  --dropdown-item-disabled-color: var(--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(--bg-secondary);
-  --dropdown-item-hover-bg: var(--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(--bg-secondary);
-    --dropdown-item-hover-bg: var(--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,42 +177,42 @@
 .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;
 }
 
 .vd-dropdown-item:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: -2px;
 }
 
 .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,17 +223,17 @@
   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);
-  color: var(--text-muted);
+  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;
   letter-spacing: 0.05em;
@@ -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/expanding-cards.css

@@ -136,7 +136,7 @@
   height: 40px;
   border-radius: 100%;
   background-color: #fff;
-  color: var(--vd-expanding-card-bg-default, var(--color-primary, #3b82f6));
+  color: var(--vd-expanding-card-bg-default, var(--vd-color-primary, #3b82f6));
 }
 
 .vd-expanding-card-info {