@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/components/image-box.css

@@ -5,27 +5,27 @@
 
 :root {
   /* Image Box Colors */
-  --image-box-backdrop-bg: rgba(0, 0, 0, 0.9);
-  --image-box-backdrop-blur: 8px;
+  --vd-image-box-backdrop-bg: rgba(0, 0, 0, 0.9);
+  --vd-image-box-backdrop-blur: 8px;
 
   /* Image Box Transitions (Fibonacci-inspired timing) */
-  --image-box-transition-duration: 0.3s;
-  --image-box-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --vd-image-box-transition-duration: 0.3s;
+  --vd-image-box-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
   /* Image Box Z-index */
-  --image-box-z-index: 2000;
+  --vd-image-box-z-index: 2000;
 
   /* Image Box Padding */
-  --image-box-padding: 21px;
+  --vd-image-box-padding: 21px;
   /* Fibonacci number */
 
   /* Image Box Scale */
-  --image-box-scale-start: 0.9;
-  --image-box-scale-end: 1;
+  --vd-image-box-scale-start: 0.9;
+  --vd-image-box-scale-end: 1;
 
   /* Image Box Max Size */
-  --image-box-max-width: 50vw;
-  --image-box-max-height: 50vh;
+  --vd-image-box-max-width: 50vw;
+  --vd-image-box-max-height: 50vh;
 }
 
 /* Broken Image Handling for Triggers */
@@ -33,15 +33,18 @@
   position: relative;
   min-height: 60px;
   min-width: 60px;
+  cursor: zoom-in;
+  transition: transform var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),
+    box-shadow var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);
 }
 
 /* Hide broken image alt text and show styled placeholder */
 .vd-image-box-trigger.is-broken {
   /* Gradient background for placeholder */
   background: linear-gradient(135deg,
-      var(--bg-tertiary, rgba(128, 128, 128, 0.1)) 0%,
-      var(--bg-secondary, rgba(128, 128, 128, 0.15)) 100%);
-  border: 1px dashed var(--border-color, rgba(128, 128, 128, 0.3));
+      var(--vd-bg-tertiary, rgba(128, 128, 128, 0.1)) 0%,
+      var(--vd-bg-secondary, rgba(128, 128, 128, 0.15)) 100%);
+  border: 1px dashed var(--vd-border-color, rgba(128, 128, 128, 0.3));
 
   /* Center the icon using background image */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23888888' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H216v94.75l-24.29-24.29a16,16,0,0,0-22.63,0L144,151.51l-25.38-25.38a16,16,0,0,0-22.62,0L40,182.12V56Z'/%3E%3Ccircle cx='100' cy='108' r='20'/%3E%3C/svg%3E");
@@ -54,16 +57,9 @@
   overflow: hidden;
 }
 
-/* Image Box Trigger - Images that can be enlarged */
-.vd-image-box-trigger {
-  cursor: zoom-in;
-  transition: transform var(--image-box-transition-duration) var(--image-box-transition-easing),
-    box-shadow var(--image-box-transition-duration) var(--image-box-transition-easing);
-}
-
 .vd-image-box-trigger:hover {
   transform: scale(1.02);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 /* Image Box Backdrop */
@@ -73,18 +69,18 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: var(--image-box-z-index);
-  background-color: var(--image-box-backdrop-bg);
-  backdrop-filter: blur(var(--image-box-backdrop-blur));
-  -webkit-backdrop-filter: blur(var(--image-box-backdrop-blur));
+  z-index: var(--vd-image-box-z-index);
+  background-color: var(--vd-image-box-backdrop-bg);
+  backdrop-filter: blur(var(--vd-image-box-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--vd-image-box-backdrop-blur));
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--image-box-transition-duration) var(--image-box-transition-easing),
-    visibility var(--image-box-transition-duration) var(--image-box-transition-easing);
+  transition: opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),
+    visibility var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--image-box-padding);
+  padding: var(--vd-image-box-padding);
 }
 
 .vd-image-box-backdrop.is-visible {
@@ -95,19 +91,19 @@
 /* Image Box Container */
 .vd-image-box-container {
   position: relative;
-  max-width: var(--image-box-max-width);
-  max-height: var(--image-box-max-height);
+  max-width: var(--vd-image-box-max-width);
+  max-height: var(--vd-image-box-max-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  transform: scale(var(--image-box-scale-start));
+  transform: scale(var(--vd-image-box-scale-start));
   opacity: 0;
-  transition: transform var(--image-box-transition-duration) var(--image-box-transition-easing),
-    opacity var(--image-box-transition-duration) var(--image-box-transition-easing);
+  transition: transform var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),
+    opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);
 }
 
 .vd-image-box-backdrop.is-visible .vd-image-box-container {
-  transform: scale(var(--image-box-scale-end));
+  transform: scale(var(--vd-image-box-scale-end));
   opacity: 1;
 }
 
@@ -116,8 +112,8 @@
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  border-radius: var(--btn-border-radius);
-  box-shadow: var(--shadow-2xl);
+  border-radius: var(--vd-btn-border-radius);
+  box-shadow: var(--vd-shadow-2xl);
   cursor: zoom-out;
   user-select: none;
   -webkit-user-drag: none;
@@ -133,16 +129,16 @@
   background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 50%;
-  color: var(--color-white);
+  color: var(--vd-color-white);
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color var(--transition-duration-fast) var(--transition-ease),
-    transform var(--transition-duration-fast) var(--transition-ease);
-  z-index: calc(var(--image-box-z-index) + 1);
+  transition: background-color var(--vd-transition-duration-fast) var(--vd-transition-ease),
+    transform var(--vd-transition-duration-fast) var(--vd-transition-ease);
+  z-index: calc(var(--vd-image-box-z-index) + 1);
   opacity: 0;
   transform: translateY(-10px);
 }
@@ -159,7 +155,7 @@
 }
 
 .vd-image-box-close:focus {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
@@ -170,14 +166,14 @@
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.7);
-  color: var(--color-white);
+  color: var(--vd-color-white);
   padding: 8px 16px;
-  border-radius: var(--btn-border-radius);
-  font-size: var(--font-size-sm);
+  border-radius: var(--vd-btn-border-radius);
+  font-size: var(--vd-font-size-sm);
   text-align: center;
   max-width: 80%;
   opacity: 0;
-  transition: opacity var(--image-box-transition-duration) var(--image-box-transition-easing);
+  transition: opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);
 }
 
 .vd-image-box-backdrop.is-visible .vd-image-box-caption {
@@ -188,7 +184,7 @@
 /* Body scroll lock when Image Box is open */
 .body-image-box-open {
   overflow: hidden;
-  padding-right: var(--scrollbar-width, 0);
+  padding-right: var(--vd-scrollbar-width, 0);
 }
 
 /* Reduced Motion Support */
@@ -210,9 +206,9 @@
 /* Mobile Adjustments */
 @media (max-width: 767.98px) {
   :root {
-    --image-box-padding: 13px;
-    --image-box-max-width: 90vw;
-    --image-box-max-height: 80vh;
+    --vd-image-box-padding: 13px;
+    --vd-image-box-max-width: 90vw;
+    --vd-image-box-max-height: 80vh;
   }
 
   .vd-image-box-close {
@@ -243,15 +239,15 @@
 /* Active/selected state for gallery thumbnails */
 .vd-image-box-gallery .vd-image-box-trigger.is-active,
 .vd-image-box-gallery .vd-image-box-trigger[aria-selected="true"] {
-  outline: 3px solid var(--color-primary);
+  outline: 3px solid var(--vd-color-primary);
   outline-offset: 2px;
   transform: scale(1.05);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 /* Keyboard focus for gallery thumbnails */
 .vd-image-box-gallery .vd-image-box-trigger:focus {
-  outline: 3px solid var(--color-primary);
+  outline: 3px solid var(--vd-color-primary);
   outline-offset: 2px;
 }
 
@@ -262,7 +258,7 @@
 
 /* Loading State */
 .vd-image-box-trigger.is-loading {
-  background: var(--bg-secondary);
+  background: var(--vd-bg-secondary);
   animation: image-box-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
@@ -276,4 +272,4 @@
   50% {
     opacity: 0.5;
   }
-}
+}

package/css/components/modals.css

@@ -5,39 +5,39 @@
 
 :root {
   /* Modal Colors */
-  --modal-bg: var(--color-white);
-  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --modal-border-color: var(--border-color);
+  --vd-modal-bg: var(--vd-color-white);
+  --vd-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+  --vd-modal-border-color: var(--vd-border-color);
   
   /* Modal Spacing (Fibonacci: 21px) */
-  --modal-padding: 1.3125rem;
-  --modal-header-padding: 1.3125rem;
-  --modal-body-padding: 1.3125rem;
-  --modal-footer-padding: 1.3125rem;
+  --vd-modal-padding: 1.3125rem;
+  --vd-modal-header-padding: 1.3125rem;
+  --vd-modal-body-padding: 1.3125rem;
+  --vd-modal-footer-padding: 1.3125rem;
 
   /* Modal Sizes (all Fibonacci numbers) */
-  --modal-width-sm: 233px;   /* fib(13) */
-  --modal-width: 377px;      /* fib(14) */
-  --modal-width-lg: 610px;   /* fib(15) */
-  --modal-width-xl: 987px;   /* fib(16) */
+  --vd-modal-width-sm: 233px;   /* fib(13) */
+  --vd-modal-width: 377px;      /* fib(14) */
+  --vd-modal-width-lg: 610px;   /* fib(15) */
+  --vd-modal-width-xl: 987px;   /* fib(16) */
   
   /* Modal Z-index */
-  --modal-z-index: 1050;
-  --modal-backdrop-z-index: 1040;
+  --vd-modal-z-index: 1050;
+  --vd-modal-backdrop-z-index: 1040;
   
   /* Modal Transitions */
-  --modal-transition: opacity var(--transition-duration-base) var(--transition-ease);
-  --modal-dialog-transition: transform var(--transition-duration-base) var(--transition-ease);
+  --vd-modal-transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);
+  --vd-modal-dialog-transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);
 }
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --modal-bg: var(--bg-secondary);
+  --vd-modal-bg: var(--vd-bg-secondary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --modal-bg: var(--bg-secondary);
+    --vd-modal-bg: var(--vd-bg-secondary);
   }
 }
 
@@ -46,12 +46,12 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--modal-backdrop-z-index);
+  z-index: var(--vd-modal-backdrop-z-index);
   width: 100vw;
   height: 100vh;
-  background-color: var(--modal-backdrop-bg);
+  background-color: var(--vd-modal-backdrop-bg);
   opacity: 0;
-  transition: var(--modal-transition);
+  transition: var(--vd-modal-transition);
   pointer-events: none;
 }
 
@@ -70,7 +70,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--modal-z-index);
+  z-index: var(--vd-modal-z-index);
   display: none;
   width: 100%;
   height: 100%;
@@ -78,7 +78,7 @@
   overflow-y: auto;
   outline: 0;
   opacity: 0;
-  transition: var(--modal-transition);
+  transition: var(--vd-modal-transition);
 }
 
 .vd-modal.is-open {
@@ -93,10 +93,10 @@
   position: relative;
   width: auto;
   margin: 1.75rem auto;
-  max-width: var(--modal-width);
+  max-width: var(--vd-modal-width);
   pointer-events: none;
   transform: scale(0.95);
-  transition: var(--modal-dialog-transition);
+  transition: var(--vd-modal-dialog-transition);
   z-index: 1060;
 }
 
@@ -111,11 +111,11 @@
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: var(--modal-bg);
+  background-color: var(--vd-modal-bg);
   background-clip: padding-box;
-  border: 1px solid var(--modal-border-color);
-  border-radius: var(--btn-border-radius-lg);
-  box-shadow: var(--shadow-2xl);
+  border: 1px solid var(--vd-modal-border-color);
+  border-radius: var(--vd-btn-border-radius-lg);
+  box-shadow: var(--vd-shadow-2xl);
   outline: 0;
 }
 
@@ -132,18 +132,18 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  padding: var(--modal-header-padding);
-  border-bottom: 1px solid var(--modal-border-color);
-  border-top-left-radius: calc(var(--btn-border-radius-lg) - 1px);
-  border-top-right-radius: calc(var(--btn-border-radius-lg) - 1px);
+  padding: var(--vd-modal-header-padding);
+  border-bottom: 1px solid var(--vd-modal-border-color);
+  border-top-left-radius: calc(var(--vd-btn-border-radius-lg) - 1px);
+  border-top-right-radius: calc(var(--vd-btn-border-radius-lg) - 1px);
 }
 
 .vd-modal-title {
   margin-bottom: 0;
-  line-height: var(--line-height-normal);
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  line-height: var(--vd-line-height-normal);
+  font-size: var(--vd-font-size-xl);
+  font-weight: var(--vd-font-weight-semibold);
+  color: var(--vd-text-primary);
 }
 
 /* Modal Close Button */
@@ -152,28 +152,28 @@
   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);
-  text-shadow: 0 1px 0 var(--color-white);
-  transition: var(--transition-opacity);
+  color: var(--vd-text-secondary);
+  text-shadow: 0 1px 0 var(--vd-color-white);
+  transition: var(--vd-transition-opacity);
   user-select: none;
 }
 
 .vd-modal-close:hover,
 .vd-modal-close:focus {
-  color: var(--text-primary);
+  color: var(--vd-text-primary);
   text-decoration: none;
   opacity: 0.75;
   outline: none;
 }
 
 .vd-modal-close:focus {
-  outline: 2px solid var(--input-focus-border-color);
+  outline: 2px solid var(--vd-input-focus-border-color);
   outline-offset: 2px;
 }
 
@@ -181,7 +181,7 @@
 .vd-modal-body {
   position: relative;
   flex: 1 1 auto;
-  padding: var(--modal-body-padding);
+  padding: var(--vd-modal-body-padding);
 }
 
 /* Modal Footer */
@@ -190,10 +190,10 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  padding: var(--modal-footer-padding);
-  border-top: 1px solid var(--modal-border-color);
-  border-bottom-left-radius: calc(var(--btn-border-radius-lg) - 1px);
-  border-bottom-right-radius: calc(var(--btn-border-radius-lg) - 1px);
+  padding: var(--vd-modal-footer-padding);
+  border-top: 1px solid var(--vd-modal-border-color);
+  border-bottom-left-radius: calc(var(--vd-btn-border-radius-lg) - 1px);
+  border-bottom-right-radius: calc(var(--vd-btn-border-radius-lg) - 1px);
   gap: 0.5rem;
 }
 
@@ -203,15 +203,15 @@
 
 /* Modal Sizes */
 .vd-modal-sm .vd-modal-dialog {
-  max-width: var(--modal-width-sm);
+  max-width: var(--vd-modal-width-sm);
 }
 
 .vd-modal-lg .vd-modal-dialog {
-  max-width: var(--modal-width-lg);
+  max-width: var(--vd-modal-width-lg);
 }
 
 .vd-modal-xl .vd-modal-dialog {
-  max-width: var(--modal-width-xl);
+  max-width: var(--vd-modal-width-xl);
 }
 
 .vd-modal-fullscreen .vd-modal-dialog {