@vanduo-oss/framework 1.4.0 → 1.4.2

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 */
@@ -34,8 +34,8 @@
   min-height: 60px;
   min-width: 60px;
   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);
+  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 */
@@ -59,7 +59,7 @@
 
 .vd-image-box-trigger:hover {
   transform: scale(1.02);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 /* Image Box Backdrop */
@@ -69,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 {
@@ -91,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;
 }
 
@@ -112,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;
@@ -136,9 +136,9 @@
   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);
 }
@@ -168,12 +168,12 @@
   background: rgba(0, 0, 0, 0.7);
   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 {
@@ -184,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 */
@@ -206,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 {
@@ -242,7 +242,7 @@
   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 */

package/css/components/modals.css

@@ -5,39 +5,39 @@
 
 :root {
   /* Modal Colors */
-  --modal-bg: var(--vd-color-white);
-  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --modal-border-color: var(--vd-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(--vd-bg-secondary);
+  --vd-modal-bg: var(--vd-bg-secondary);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --modal-bg: var(--vd-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,8 @@
   overflow-y: auto;
   outline: 0;
   opacity: 0;
-  transition: var(--modal-transition);
+  transition: var(--vd-modal-transition);
+  --vd-modal-dialog-max-width: var(--vd-modal-width);
 }
 
 .vd-modal.is-open {
@@ -91,12 +92,12 @@
 /* Modal Dialog */
 .vd-modal-dialog {
   position: relative;
-  width: auto;
+  width: min(calc(100% - 3.5rem), var(--vd-modal-dialog-max-width));
   margin: 1.75rem auto;
-  max-width: var(--modal-width);
+  max-width: var(--vd-modal-dialog-max-width);
   pointer-events: none;
   transform: scale(0.95);
-  transition: var(--modal-dialog-transition);
+  transition: var(--vd-modal-dialog-transition);
   z-index: 1060;
 }
 
@@ -111,11 +112,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,17 +133,17 @@
   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);
+  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);
 }
 
@@ -152,15 +153,15 @@
   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);
   text-shadow: 0 1px 0 var(--vd-color-white);
-  transition: var(--transition-opacity);
+  transition: var(--vd-transition-opacity);
   user-select: none;
 }
 
@@ -173,7 +174,7 @@
 }
 
 .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 +182,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 +191,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;
 }
 
@@ -202,16 +203,19 @@
 }
 
 /* Modal Sizes */
+.vd-modal-dialog.vd-modal-sm,
 .vd-modal-sm .vd-modal-dialog {
-  max-width: var(--modal-width-sm);
+  --vd-modal-dialog-max-width: var(--vd-modal-width-sm);
 }
 
+.vd-modal-dialog.vd-modal-lg,
 .vd-modal-lg .vd-modal-dialog {
-  max-width: var(--modal-width-lg);
+  --vd-modal-dialog-max-width: var(--vd-modal-width-lg);
 }
 
+.vd-modal-dialog.vd-modal-xl,
 .vd-modal-xl .vd-modal-dialog {
-  max-width: var(--modal-width-xl);
+  --vd-modal-dialog-max-width: var(--vd-modal-width-xl);
 }
 
 .vd-modal-fullscreen .vd-modal-dialog {
@@ -256,6 +260,7 @@
 @media (max-width: 575.98px) {
   .vd-modal-dialog {
     margin: 0.5rem;
+    width: calc(100% - 1rem);
     max-width: calc(100% - 1rem);
   }
   
@@ -295,4 +300,3 @@
   overflow: hidden;
   padding-right: 0;
 }
-