vanduo-framework 1.1.8

package/css/components/image-box.css

@@ -0,0 +1,279 @@
+/**
+ * Vanduo Framework - Image Box Component
+ * Lightbox-style image enlargement with smooth transitions
+ */
+
+:root {
+  /* Image Box Colors */
+  --image-box-backdrop-bg: rgba(0, 0, 0, 0.9);
+  --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);
+
+  /* Image Box Z-index */
+  --image-box-z-index: 2000;
+
+  /* Image Box Padding */
+  --image-box-padding: 21px;
+  /* Fibonacci number */
+
+  /* Image Box Scale */
+  --image-box-scale-start: 0.9;
+  --image-box-scale-end: 1;
+
+  /* Image Box Max Size */
+  --image-box-max-width: 50vw;
+  --image-box-max-height: 50vh;
+}
+
+/* Broken Image Handling for Triggers */
+.vd-image-box-trigger {
+  position: relative;
+  min-height: 60px;
+  min-width: 60px;
+}
+
+/* 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));
+
+  /* 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");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 32px 32px;
+
+  /* Hide the broken image icon and alt text */
+  color: transparent;
+  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);
+}
+
+/* Image Box Backdrop */
+.vd-image-box-backdrop {
+  position: fixed;
+  top: 0;
+  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));
+  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);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--image-box-padding);
+}
+
+.vd-image-box-backdrop.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Image Box Container */
+.vd-image-box-container {
+  position: relative;
+  max-width: var(--image-box-max-width);
+  max-height: var(--image-box-max-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(var(--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);
+}
+
+.vd-image-box-backdrop.is-visible .vd-image-box-container {
+  transform: scale(var(--image-box-scale-end));
+  opacity: 1;
+}
+
+/* Image Box Image */
+.vd-image-box-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--btn-border-radius);
+  box-shadow: var(--shadow-2xl);
+  cursor: zoom-out;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* Image Box Close Button (optional) */
+.vd-image-box-close {
+  position: absolute;
+  top: 21px;
+  right: 21px;
+  width: 44px;
+  height: 44px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  color: var(--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);
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.vd-image-box-backdrop.is-visible .vd-image-box-close {
+  opacity: 1;
+  transform: translateY(0);
+  transition-delay: 0.1s;
+}
+
+.vd-image-box-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.vd-image-box-close:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Image Box Caption */
+.vd-image-box-caption {
+  position: absolute;
+  bottom: 21px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.7);
+  color: var(--color-white);
+  padding: 8px 16px;
+  border-radius: var(--btn-border-radius);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  max-width: 80%;
+  opacity: 0;
+  transition: opacity var(--image-box-transition-duration) var(--image-box-transition-easing);
+}
+
+.vd-image-box-backdrop.is-visible .vd-image-box-caption {
+  opacity: 1;
+  transition-delay: 0.15s;
+}
+
+/* Body scroll lock when Image Box is open */
+.body-image-box-open {
+  overflow: hidden;
+  padding-right: var(--scrollbar-width, 0);
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+
+  .vd-image-box-trigger,
+  .vd-image-box-backdrop,
+  .vd-image-box-container,
+  .vd-image-box-close,
+  .vd-image-box-caption {
+    transition: none;
+  }
+
+  .vd-image-box-trigger:hover {
+    transform: none;
+  }
+}
+
+/* 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-close {
+    top: 13px;
+    right: 13px;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+}
+
+/* Gallery Grid Support */
+.vd-image-box-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 13px;
+  margin-top: 21px;
+}
+
+.vd-image-box-gallery .vd-image-box-trigger {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  aspect-ratio: 4 / 3;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.15s ease;
+}
+
+/* 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-offset: 2px;
+  transform: scale(1.05);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Keyboard focus for gallery thumbnails */
+.vd-image-box-gallery .vd-image-box-trigger:focus {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Portrait orientation gallery item */
+.vd-image-box-gallery .vd-image-box-trigger[data-orientation="portrait"] {
+  aspect-ratio: 3 / 4;
+}
+
+/* Loading State */
+.vd-image-box-trigger.is-loading {
+  background: var(--bg-secondary);
+  animation: image-box-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes image-box-pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}

package/css/components/modals.css

@@ -0,0 +1,285 @@
+/**
+ * Vanduo Framework - Modals
+ * Modal dialog component
+ */
+
+:root {
+  /* Modal Colors */
+  --modal-bg: var(--color-white);
+  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+  --modal-border-color: var(--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;
+
+  /* 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) */
+  
+  /* Modal Z-index */
+  --modal-z-index: 1050;
+  --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);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --modal-bg: var(--bg-secondary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --modal-bg: var(--bg-secondary);
+  }
+}
+
+/* Modal Backdrop */
+.vd-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--modal-backdrop-z-index);
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--modal-backdrop-bg);
+  opacity: 0;
+  transition: var(--modal-transition);
+  pointer-events: none;
+}
+
+.vd-modal-backdrop.is-visible {
+  opacity: 1;
+  pointer-events: all;
+}
+
+/* Base Modal */
+.vd-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--modal-z-index);
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  opacity: 0;
+  transition: var(--modal-transition);
+}
+
+.vd-modal.is-open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+}
+
+/* Modal Dialog */
+.vd-modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 1.75rem auto;
+  max-width: var(--modal-width);
+  pointer-events: none;
+  transform: scale(0.95);
+  transition: var(--modal-dialog-transition);
+  z-index: 1060;
+}
+
+.vd-modal.is-open .vd-modal-dialog {
+  transform: scale(1);
+}
+
+/* Modal Content */
+.vd-modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: var(--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);
+  outline: 0;
+}
+
+/* Modal Header */
+.vd-modal-header {
+  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);
+}
+
+.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);
+}
+
+/* Modal Close Button */
+.vd-modal-close {
+  padding: 0.5rem;
+  margin: -0.5rem -0.5rem -0.5rem auto;
+  background: transparent;
+  border: 0;
+  border-radius: var(--btn-border-radius);
+  opacity: 0.5;
+  cursor: pointer;
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  color: var(--text-secondary);
+  text-shadow: 0 1px 0 var(--color-white);
+  transition: var(--transition-opacity);
+  user-select: none;
+}
+
+.vd-modal-close:hover,
+.vd-modal-close:focus {
+  color: var(--text-primary);
+  text-decoration: none;
+  opacity: 0.75;
+  outline: none;
+}
+
+.vd-modal-close:focus {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 2px;
+}
+
+/* Modal Body */
+.vd-modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--modal-body-padding);
+}
+
+/* Modal Footer */
+.vd-modal-footer {
+  display: flex;
+  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);
+  gap: 0.5rem;
+}
+
+.vd-modal-footer > * {
+  margin: 0;
+}
+
+/* Modal Sizes */
+.vd-modal-sm .vd-modal-dialog {
+  max-width: var(--modal-width-sm);
+}
+
+.vd-modal-lg .vd-modal-dialog {
+  max-width: var(--modal-width-lg);
+}
+
+.vd-modal-xl .vd-modal-dialog {
+  max-width: var(--modal-width-xl);
+}
+
+.vd-modal-fullscreen .vd-modal-dialog {
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: 0;
+}
+
+.vd-modal-fullscreen .vd-modal-content {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+
+/* Modal Positioning */
+.vd-modal-top .vd-modal-dialog {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+
+.vd-modal-bottom .vd-modal-dialog {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
+/* Modal Scrollable */
+.vd-modal-scrollable .vd-modal-body {
+  overflow-y: auto;
+  max-height: calc(100vh - 200px);
+}
+
+/* Modal Centered */
+.vd-modal-centered .vd-modal-dialog {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - 3.5rem);
+}
+
+/* Responsive Behavior */
+@media (max-width: 575.98px) {
+  .vd-modal-dialog {
+    margin: 0.5rem;
+    max-width: calc(100% - 1rem);
+  }
+  
+  .vd-modal-fullscreen-sm-down {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100%;
+    margin: 0;
+  }
+  
+  .vd-modal-fullscreen-sm-down .vd-modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+}
+
+/* Modal Animation Variants */
+.vd-modal-fade .vd-modal-dialog {
+  transform: translateY(-50px);
+}
+
+.vd-modal.is-open.vd-modal-fade .vd-modal-dialog {
+  transform: translateY(0);
+}
+
+.vd-modal-zoom .vd-modal-dialog {
+  transform: scale(0.8);
+}
+
+.vd-modal.is-open.vd-modal-zoom .vd-modal-dialog {
+  transform: scale(1);
+}
+
+/* Body Scroll Lock */
+.body-modal-open {
+  overflow: hidden;
+  padding-right: 0;
+}
+