@vanduo-oss/framework 1.4.0 → 1.4.1

package/css/components/breadcrumbs.css

@@ -5,35 +5,35 @@
 
 :root {
   /* Breadcrumb Spacing (Fibonacci) */
-  --breadcrumb-padding-y: 0.5rem;     /* 8px - fib */
-  --breadcrumb-padding-x: 0;
-  --breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */
+  --vd-breadcrumb-padding-y: 0.5rem;     /* 8px - fib */
+  --vd-breadcrumb-padding-x: 0;
+  --vd-breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */
 
   /* Breadcrumb Separator */
-  --breadcrumb-separator: "/";
-  --breadcrumb-separator-color: var(--vd-text-muted);
-  --breadcrumb-separator-padding: 0.5rem; /* 8px - fib */
+  --vd-breadcrumb-separator: "/";
+  --vd-breadcrumb-separator-color: var(--vd-text-muted);
+  --vd-breadcrumb-separator-padding: 0.5rem; /* 8px - fib */
   
   /* Breadcrumb Colors */
-  --breadcrumb-bg: transparent;
-  --breadcrumb-link-color: var(--vd-color-primary);
-  --breadcrumb-link-hover-color: var(--vd-color-primary-dark);
-  --breadcrumb-active-color: var(--vd-text-secondary);
+  --vd-breadcrumb-bg: transparent;
+  --vd-breadcrumb-link-color: var(--vd-color-primary);
+  --vd-breadcrumb-link-hover-color: var(--vd-color-primary-dark);
+  --vd-breadcrumb-active-color: var(--vd-text-secondary);
 }
 
 /* Dark Theme Overrides - breadcrumbs use CSS variables that already adapt */
-/* No additional overrides needed as --text-secondary and --color-primary update in dark mode */
+/* No additional overrides needed as --vd-text-secondary and --vd-color-primary update in dark mode */
 
 /* Base Breadcrumbs */
 .vd-breadcrumbs,
 .vd-breadcrumb {
   display: flex;
   flex-wrap: wrap;
-  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
-  margin-bottom: var(--breadcrumb-margin-bottom);
+  padding: var(--vd-breadcrumb-padding-y) var(--vd-breadcrumb-padding-x);
+  margin-bottom: var(--vd-breadcrumb-margin-bottom);
   list-style: none;
-  background-color: var(--breadcrumb-bg);
-  border-radius: var(--btn-border-radius);
+  background-color: var(--vd-breadcrumb-bg);
+  border-radius: var(--vd-btn-border-radius);
 }
 
 /* Breadcrumb Item */
@@ -43,28 +43,28 @@
 }
 
 .vd-breadcrumb-item + .vd-breadcrumb-item {
-  padding-left: var(--breadcrumb-separator-padding);
+  padding-left: var(--vd-breadcrumb-separator-padding);
 }
 
 .vd-breadcrumb-item + .vd-breadcrumb-item::before {
-  content: var(--breadcrumb-separator);
+  content: var(--vd-breadcrumb-separator);
   display: inline-block;
-  padding-right: var(--breadcrumb-separator-padding);
-  color: var(--breadcrumb-separator-color);
-  font-weight: var(--font-weight-normal);
+  padding-right: var(--vd-breadcrumb-separator-padding);
+  color: var(--vd-breadcrumb-separator-color);
+  font-weight: var(--vd-font-weight-normal);
 }
 
 /* Breadcrumb Link */
 .vd-breadcrumb-link,
 .vd-breadcrumb-item > a {
-  color: var(--breadcrumb-link-color);
+  color: var(--vd-breadcrumb-link-color);
   text-decoration: none;
   transition: color 0.2s ease;
 }
 
 .vd-breadcrumb-link:hover,
 .vd-breadcrumb-item > a:hover {
-  color: var(--breadcrumb-link-hover-color);
+  color: var(--vd-breadcrumb-link-hover-color);
   text-decoration: underline;
 }
 
@@ -78,12 +78,12 @@
 /* Active/Current Breadcrumb Item */
 .vd-breadcrumb-item.active,
 .vd-breadcrumb-current {
-  color: var(--breadcrumb-active-color);
+  color: var(--vd-breadcrumb-active-color);
 }
 
 .vd-breadcrumb-item.active > a,
 .vd-breadcrumb-current > a {
-  color: var(--breadcrumb-active-color);
+  color: var(--vd-breadcrumb-active-color);
   pointer-events: none;
   cursor: default;
 }
@@ -123,24 +123,24 @@
 
 /* Breadcrumb Sizes */
 .vd-breadcrumb-sm {
-  font-size: var(--font-size-sm);
-  padding: calc(var(--breadcrumb-padding-y) * 0.75) var(--breadcrumb-padding-x);
+  font-size: var(--vd-font-size-sm);
+  padding: calc(var(--vd-breadcrumb-padding-y) * 0.75) var(--vd-breadcrumb-padding-x);
 }
 
 .vd-breadcrumb-lg {
-  font-size: var(--font-size-lg);
-  padding: calc(var(--breadcrumb-padding-y) * 1.25) var(--breadcrumb-padding-x);
+  font-size: var(--vd-font-size-lg);
+  padding: calc(var(--vd-breadcrumb-padding-y) * 1.25) var(--vd-breadcrumb-padding-x);
 }
 
 /* Responsive Behavior */
 @media (max-width: 575.98px) {
   .vd-breadcrumb-item {
-    font-size: var(--font-size-sm);
+    font-size: var(--vd-font-size-sm);
   }
   
   .vd-breadcrumb-item + .vd-breadcrumb-item::before {
-    padding-right: calc(var(--breadcrumb-separator-padding) * 0.75);
-    padding-left: calc(var(--breadcrumb-separator-padding) * 0.75);
+    padding-right: calc(var(--vd-breadcrumb-separator-padding) * 0.75);
+    padding-left: calc(var(--vd-breadcrumb-separator-padding) * 0.75);
   }
 }
 

package/css/components/bubble.css

@@ -6,40 +6,40 @@
 
 :root {
   /* Bubble Colors */
-  --bubble-bg: var(--card-bg, #fff);
-  --bubble-text: var(--vd-text-primary, #212529);
-  --bubble-border-color: var(--vd-border-color, #dee2e6);
-  --bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12); /* 8px 21px - fib */
+  --vd-bubble-bg: var(--vd-card-bg, #fff);
+  --vd-bubble-text: var(--vd-text-primary, #212529);
+  --vd-bubble-border-color: var(--vd-border-color, #dee2e6);
+  --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12); /* 8px 21px - fib */
 
   /* Bubble Spacing (Fibonacci) */
-  --bubble-padding: 0.8125rem; /* 13px - fib */
-  --bubble-header-padding: 0.5rem 0.8125rem; /* 8px 13px */
-  --bubble-arrow-size: 8px; /* fib */
+  --vd-bubble-padding: 0.8125rem; /* 13px - fib */
+  --vd-bubble-header-padding: 0.5rem 0.8125rem; /* 8px 13px */
+  --vd-bubble-arrow-size: 8px; /* fib */
 
   /* Bubble Sizing */
-  --bubble-max-width: 21rem; /* 336px - fib×16 */
-  --bubble-min-width: 8rem;
-  --bubble-border-radius: var(--border-radius, 0.5rem);
+  --vd-bubble-max-width: 21rem; /* 336px - fib×16 */
+  --vd-bubble-min-width: 8rem;
+  --vd-bubble-border-radius: var(--vd-border-radius, 0.5rem);
 
   /* Bubble Z-index */
-  --bubble-z-index: 1060;
+  --vd-bubble-z-index: 1060;
 
   /* Bubble Font */
-  --bubble-font-size: var(--font-size-sm, 0.875rem);
+  --vd-bubble-font-size: var(--vd-font-size-sm, 0.875rem);
 }
 
 /* Dark Theme */
 [data-theme="dark"] {
-  --bubble-bg: var(--card-bg, #2d2d44);
-  --bubble-border-color: var(--vd-border-color, #3d3d5c);
-  --bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
+  --vd-bubble-bg: var(--vd-card-bg, #2d2d44);
+  --vd-bubble-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --bubble-bg: var(--card-bg, #2d2d44);
-    --bubble-border-color: var(--vd-border-color, #3d3d5c);
-    --bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
+    --vd-bubble-bg: var(--vd-card-bg, #2d2d44);
+    --vd-bubble-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -48,15 +48,15 @@
 .vd-bubble-content,
 .vd-popover-content {
   position: absolute;
-  z-index: var(--bubble-z-index);
-  max-width: var(--bubble-max-width);
-  min-width: var(--bubble-min-width);
-  background: var(--bubble-bg);
-  color: var(--bubble-text);
-  border: 1px solid var(--bubble-border-color);
-  border-radius: var(--bubble-border-radius);
-  box-shadow: var(--bubble-shadow);
-  font-size: var(--bubble-font-size);
+  z-index: var(--vd-bubble-z-index);
+  max-width: var(--vd-bubble-max-width);
+  min-width: var(--vd-bubble-min-width);
+  background: var(--vd-bubble-bg);
+  color: var(--vd-bubble-text);
+  border: 1px solid var(--vd-bubble-border-color);
+  border-radius: var(--vd-bubble-border-radius);
+  box-shadow: var(--vd-bubble-shadow);
+  font-size: var(--vd-bubble-font-size);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
@@ -78,15 +78,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--bubble-header-padding);
-  border-bottom: 1px solid var(--bubble-border-color);
+  padding: var(--vd-bubble-header-padding);
+  border-bottom: 1px solid var(--vd-bubble-border-color);
   font-weight: 600;
 }
 
 /* ========== Body ========== */
 
 .vd-bubble-body {
-  padding: var(--bubble-padding);
+  padding: var(--vd-bubble-padding);
 }
 
 /* ========== Close Button ========== */
@@ -102,7 +102,7 @@
   border: none;
   border-radius: 50%;
   background: transparent;
-  color: var(--bubble-text);
+  color: var(--vd-bubble-text);
   font-size: 1.125rem;
   line-height: 1;
   cursor: pointer;
@@ -120,7 +120,7 @@
   position: absolute;
   width: 0;
   height: 0;
-  border: var(--bubble-arrow-size) solid transparent;
+  border: var(--vd-bubble-arrow-size) solid transparent;
 }
 
 /* Arrow: top placement (popover below trigger) */
@@ -128,38 +128,38 @@
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  border-bottom-color: var(--bubble-border-color);
+  border-bottom-color: var(--vd-bubble-border-color);
 }
 
 .vd-bubble-content[data-placement="top"]::before {
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  border-top-color: var(--bubble-border-color);
+  border-top-color: var(--vd-bubble-border-color);
 }
 
 .vd-bubble-content[data-placement="left"]::before {
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
-  border-left-color: var(--bubble-border-color);
+  border-left-color: var(--vd-bubble-border-color);
 }
 
 .vd-bubble-content[data-placement="right"]::before {
   right: 100%;
   top: 50%;
   transform: translateY(-50%);
-  border-right-color: var(--bubble-border-color);
+  border-right-color: var(--vd-bubble-border-color);
 }
 
 /* ========== Size Variants ========== */
 
 .vd-bubble-sm .vd-bubble-body {
-  --bubble-padding: 0.5rem; /* 8px - fib */
-  --bubble-font-size: var(--font-size-xs, 0.75rem);
+  --vd-bubble-padding: 0.5rem; /* 8px - fib */
+  --vd-bubble-font-size: var(--vd-font-size-xs, 0.75rem);
 }
 
 .vd-bubble-lg .vd-bubble-body {
-  --bubble-padding: 1.3125rem; /* 21px - fib */
-  --bubble-max-width: 34rem;
+  --vd-bubble-padding: 1.3125rem; /* 21px - fib */
+  --vd-bubble-max-width: 34rem;
 }

package/css/components/button-group.css

@@ -62,12 +62,12 @@
 
 /* Sizing - inherit from button sizes */
 .vd-btn-group-sm>.vd-btn {
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
   padding: 0.3125rem 0.625rem;
 }
 
 .vd-btn-group-lg>.vd-btn {
-  font-size: var(--font-size-lg);
+  font-size: var(--vd-font-size-lg);
   padding: 0.625rem 1.25rem;
 }
 

package/css/components/buttons.css

@@ -8,52 +8,52 @@
    * sm:  13px/8px  = 1.625 ~ phi
    * base: 21px/13px = 1.615 ~ phi
    * lg:  34px/21px = 1.619 ~ phi */
-  --btn-padding-x-sm: 0.8125rem;
+  --vd-btn-padding-x-sm: 0.8125rem;
   /* 13px - fib */
-  --btn-padding-y-sm: 0.5rem;
+  --vd-btn-padding-y-sm: 0.5rem;
   /* 8px  - fib */
-  --btn-padding-x: 1.3125rem;
+  --vd-btn-padding-x: 1.3125rem;
   /* 21px - fib */
-  --btn-padding-y: 0.8125rem;
+  --vd-btn-padding-y: 0.8125rem;
   /* 13px - fib */
-  --btn-padding-x-lg: 2.125rem;
+  --vd-btn-padding-x-lg: 2.125rem;
   /* 34px - fib */
-  --btn-padding-y-lg: 1.3125rem;
+  --vd-btn-padding-y-lg: 1.3125rem;
   /* 21px - fib */
 
   /* Button Font Sizes */
-  --btn-font-size-sm: var(--font-size-sm);
-  --btn-font-size: var(--font-size-base);
-  --btn-font-size-lg: var(--font-size-lg);
+  --vd-btn-font-size-sm: var(--vd-font-size-sm);
+  --vd-btn-font-size: var(--vd-font-size-base);
+  --vd-btn-font-size-lg: var(--vd-font-size-lg);
 
   /* Button Border Radius (Fibonacci) */
-  --btn-border-radius: var(--radius-fib-5);
+  --vd-btn-border-radius: var(--vd-radius-fib-5);
   /* 5px */
-  --btn-border-radius-sm: var(--radius-fib-3);
+  --vd-btn-border-radius-sm: var(--vd-radius-fib-3);
   /* 3px */
-  --btn-border-radius-lg: var(--radius-fib-8);
+  --vd-btn-border-radius-lg: var(--vd-radius-fib-8);
   /* 8px */
 
   /* Button Transitions */
-  --btn-transition: all 0.2s ease-in-out;
+  --vd-btn-transition: all 0.2s ease-in-out;
 }
 
 /* Base Button */
 .vd-btn {
   display: inline-block;
-  padding: var(--btn-padding-y) var(--btn-padding-x);
-  font-family: var(--font-family-sans);
-  font-size: var(--btn-font-size);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-normal);
+  padding: var(--vd-btn-padding-y) var(--vd-btn-padding-x);
+  font-family: var(--vd-font-family-sans);
+  font-size: var(--vd-btn-font-size);
+  font-weight: var(--vd-font-weight-medium);
+  line-height: var(--vd-line-height-normal);
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
   border: 1px solid transparent;
-  border-radius: var(--btn-border-radius);
-  transition: var(--btn-transition);
+  border-radius: var(--vd-btn-border-radius);
+  transition: var(--vd-btn-transition);
   background-color: transparent;
   color: var(--vd-text-primary);
   margin-bottom: 0.5rem;
@@ -410,28 +410,28 @@
 }
 
 .vd-btn-ghost-subtle:hover:not(:disabled):not(.disabled):not(.is-disabled) {
-  background-color: var(--gray-0);
-  border-color: var(--gray-4);
+  background-color: var(--vd-gray-0);
+  border-color: var(--vd-gray-4);
   color: var(--vd-text-primary);
 }
 
 .vd-btn-ghost-subtle:active:not(:disabled):not(.disabled):not(.is-disabled) {
-  background-color: var(--gray-1);
-  border-color: var(--gray-5);
+  background-color: var(--vd-gray-1);
+  border-color: var(--vd-gray-5);
 }
 
 /* Button Sizes - Small */
 .vd-btn-sm {
-  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
-  font-size: var(--btn-font-size-sm);
-  border-radius: var(--btn-border-radius-sm);
+  padding: var(--vd-btn-padding-y-sm) var(--vd-btn-padding-x-sm);
+  font-size: var(--vd-btn-font-size-sm);
+  border-radius: var(--vd-btn-border-radius-sm);
 }
 
 /* Button Sizes - Large */
 .vd-btn-lg {
-  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
-  font-size: var(--btn-font-size-lg);
-  border-radius: var(--btn-border-radius-lg);
+  padding: var(--vd-btn-padding-y-lg) var(--vd-btn-padding-x-lg);
+  font-size: var(--vd-btn-font-size-lg);
+  border-radius: var(--vd-btn-border-radius-lg);
 }
 
 /* Full Width Button */
@@ -446,7 +446,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--btn-padding-y);
+  padding: var(--vd-btn-padding-y);
   width: auto;
   min-width: 2.125rem;
   /* 34px - fib */
@@ -459,7 +459,7 @@
   /* 34px - fib */
   height: 2.125rem;
   /* 34px - fib */
-  padding: var(--btn-padding-y-sm);
+  padding: var(--vd-btn-padding-y-sm);
 }
 
 .vd-btn-icon.vd-btn-lg {
@@ -467,7 +467,7 @@
   /* 55px - fib */
   height: 3.4375rem;
   /* 55px - fib */
-  padding: var(--btn-padding-y-lg);
+  padding: var(--vd-btn-padding-y-lg);
 }
 
 /* Button with Icon Spacing */