vanduo-framework 1.1.8-docs-update

package/css/components/sidenav.css

@@ -0,0 +1,301 @@
+/**
+ * Vanduo Framework - Sidenav
+ * Side navigation drawer component
+ */
+
+:root {
+  /* Sidenav Colors */
+  --sidenav-bg: var(--color-white);
+  --sidenav-overlay-bg: rgba(0, 0, 0, 0.5);
+  --sidenav-border-color: var(--border-color);
+  --sidenav-item-bg-hover: var(--bg-secondary);
+  --sidenav-item-bg-active: var(--color-primary-alpha-10);
+  --sidenav-item-color-active: var(--color-primary);
+  
+  /* Sidenav Dimensions (Fibonacci) */
+  --sidenav-width: 233px;     /* fib */
+  --sidenav-width-sm: 233px;  /* fib */
+  --sidenav-width-lg: 377px;  /* fib */
+
+  /* Sidenav Spacing (Fibonacci) */
+  --sidenav-padding-y: 0.8125rem;      /* 13px - fib */
+  --sidenav-padding-x: 1.3125rem;      /* 21px - fib */
+  --sidenav-item-padding-y: 0.5rem;    /* 8px  - fib */
+  --sidenav-item-padding-x: 0.8125rem; /* 13px - fib */
+  
+  /* Sidenav Z-index */
+  --sidenav-z-index: 1040;
+  --sidenav-overlay-z-index: 1030;
+  
+  /* Sidenav Transitions */
+  --sidenav-transition: transform var(--transition-duration-slow) var(--transition-ease);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --sidenav-bg: var(--bg-secondary);
+  --sidenav-item-bg-hover: var(--bg-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --sidenav-bg: var(--bg-secondary);
+    --sidenav-item-bg-hover: var(--bg-primary);
+  }
+}
+
+/* Sidenav Overlay */
+.vd-sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--sidenav-overlay-z-index);
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--sidenav-overlay-bg);
+  opacity: 0;
+  transition: opacity var(--transition-duration-base) var(--transition-ease);
+  pointer-events: none;
+}
+
+.vd-sidenav-overlay.is-visible {
+  opacity: 1;
+  pointer-events: all;
+}
+
+/* Base Sidenav */
+.vd-sidenav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--sidenav-z-index);
+  width: var(--sidenav-width);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sidenav-bg);
+  box-shadow: var(--shadow-lg);
+  transform: translateX(-100%);
+  transition: var(--sidenav-transition);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.vd-sidenav.is-open {
+  transform: translateX(0);
+}
+
+/* Sidenav Right */
+.vd-sidenav-right {
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+
+.vd-sidenav-right.is-open {
+  transform: translateX(0);
+}
+
+/* Sidenav Variants */
+.vd-sidenav-overlay-variant {
+  /* Overlay variant - slides over content */
+}
+
+.vd-sidenav-push {
+  /* Push variant - pushes content */
+}
+
+.vd-sidenav-push.is-open ~ * {
+  margin-left: var(--sidenav-width);
+  transition: margin-left var(--transition-duration-slow) var(--transition-ease);
+}
+
+.vd-sidenav-push.vd-sidenav-right.is-open ~ * {
+  margin-left: 0;
+  margin-right: var(--sidenav-width);
+}
+
+.vd-sidenav-fixed {
+  position: fixed;
+  transform: translateX(0);
+}
+
+.vd-sidenav-fixed.is-open {
+  transform: translateX(0);
+}
+
+/* Sidenav Header */
+.vd-sidenav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sidenav-padding-y) var(--sidenav-padding-x);
+  border-bottom: 1px solid var(--sidenav-border-color);
+  flex-shrink: 0;
+}
+
+.vd-sidenav-title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.vd-sidenav-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);
+  transition: var(--transition-opacity);
+}
+
+.vd-sidenav-close:hover,
+.vd-sidenav-close:focus {
+  opacity: 0.75;
+  outline: none;
+}
+
+/* Sidenav Body */
+.vd-sidenav-body {
+  flex: 1 1 auto;
+  padding: var(--sidenav-padding-y) 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Sidenav Footer */
+.vd-sidenav-footer {
+  padding: var(--sidenav-padding-y) var(--sidenav-padding-x);
+  border-top: 1px solid var(--sidenav-border-color);
+  flex-shrink: 0;
+}
+
+/* Sidenav Navigation */
+.vd-sidenav-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Sidenav Section */
+.vd-sidenav-section {
+  padding: 0.5rem var(--sidenav-padding-x);
+  margin-top: 0.5rem;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.vd-sidenav-section:first-child {
+  margin-top: 0;
+}
+
+/* Sidenav Item */
+.vd-sidenav-item {
+  display: block;
+}
+
+.vd-sidenav-link {
+  display: flex;
+  align-items: center;
+  padding: var(--sidenav-item-padding-y) var(--sidenav-item-padding-x);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: var(--transition-bg);
+  cursor: pointer;
+}
+
+.vd-sidenav-link:hover {
+  background-color: var(--sidenav-item-bg-hover);
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.vd-sidenav-link:focus {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: -2px;
+}
+
+.vd-sidenav-item.active .vd-sidenav-link {
+  background-color: var(--sidenav-item-bg-active);
+  color: var(--sidenav-item-color-active);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Sidenav Divider */
+.vd-sidenav-divider {
+  height: 0;
+  margin: 0.5rem var(--sidenav-padding-x);
+  overflow: hidden;
+  border-top: 1px solid var(--sidenav-border-color);
+}
+
+/* Sidenav Sizes */
+.vd-sidenav-sm {
+  width: var(--sidenav-width-sm);
+}
+
+.vd-sidenav-sm.vd-sidenav-push.is-open ~ * {
+  margin-left: var(--sidenav-width-sm);
+}
+
+.vd-sidenav-sm.vd-sidenav-push.vd-sidenav-right.is-open ~ * {
+  margin-right: var(--sidenav-width-sm);
+}
+
+.vd-sidenav-lg {
+  width: var(--sidenav-width-lg);
+}
+
+.vd-sidenav-lg.vd-sidenav-push.is-open ~ * {
+  margin-left: var(--sidenav-width-lg);
+}
+
+.vd-sidenav-lg.vd-sidenav-push.vd-sidenav-right.is-open ~ * {
+  margin-right: var(--sidenav-width-lg);
+}
+
+/* Body Scroll Lock */
+.body-sidenav-open {
+  overflow: hidden;
+}
+
+/* Responsive Behavior */
+@media (max-width: 991.98px) {
+  .vd-sidenav {
+    /* On mobile, sidenav is always overlay */
+    position: fixed;
+  }
+  
+  .vd-sidenav-fixed {
+    /* Fixed sidenav becomes overlay on mobile */
+    position: fixed;
+    transform: translateX(-100%);
+  }
+  
+  .vd-sidenav-fixed.vd-sidenav-right {
+    transform: translateX(100%);
+  }
+  
+  .vd-sidenav-fixed.is-open {
+    transform: translateX(0);
+  }
+  
+  .vd-sidenav-push.is-open ~ * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+

package/css/components/skeleton.css

@@ -0,0 +1,241 @@
+/**
+ * Vanduo Framework - Skeleton
+ * Loading placeholder animations
+ */
+
+:root {
+  /* Skeleton Colors */
+  --skeleton-bg: var(--color-gray-200);
+  --skeleton-shimmer: var(--color-gray-100);
+  --skeleton-border-radius: var(--btn-border-radius);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --skeleton-bg: var(--color-gray-700);
+  --skeleton-shimmer: var(--color-gray-600);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --skeleton-bg: var(--color-gray-700);
+    --skeleton-shimmer: var(--color-gray-600);
+  }
+}
+
+/* Base Skeleton */
+.vd-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--skeleton-bg);
+  border-radius: var(--skeleton-border-radius);
+}
+
+/* Shimmer Animation */
+.vd-skeleton::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--skeleton-shimmer),
+    transparent
+  );
+  animation: skeleton-shimmer 1.5s infinite;
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Skeleton Text (single line) */
+.vd-skeleton-text {
+  height: 1rem;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.vd-skeleton-text:last-child {
+  width: 80%;
+  margin-bottom: 0;
+}
+
+/* Skeleton Text Sizes */
+.vd-skeleton-text-xs { height: 0.75rem; }
+.vd-skeleton-text-sm { height: 0.875rem; }
+.vd-skeleton-text-lg { height: 1.25rem; }
+.vd-skeleton-text-xl { height: 1.5rem; }
+
+/* Skeleton Heading */
+.vd-skeleton-heading {
+  height: 1.5rem;
+  width: 60%;
+  margin-bottom: 1rem;
+}
+
+.vd-skeleton-heading-lg {
+  height: 2rem;
+  width: 50%;
+}
+
+/* Skeleton Circle (for avatars) */
+.vd-skeleton-circle {
+  border-radius: 50%;
+}
+
+.vd-skeleton-circle-xs { width: 1.5rem; height: 1.5rem; }
+.vd-skeleton-circle-sm { width: 2rem; height: 2rem; }
+.vd-skeleton-circle-md { width: 2.5rem; height: 2.5rem; }
+.vd-skeleton-circle { width: 3rem; height: 3rem; }
+.vd-skeleton-circle-lg { width: 4rem; height: 4rem; }
+.vd-skeleton-circle-xl { width: 5rem; height: 5rem; }
+
+/* Skeleton Rectangle (for images/thumbnails) */
+.vd-skeleton-rect {
+  width: 100%;
+  height: 200px;
+}
+
+.vd-skeleton-rect-sm { height: 100px; }
+.vd-skeleton-rect-lg { height: 300px; }
+
+/* Skeleton Button */
+.vd-skeleton-button {
+  height: 2.5rem;
+  width: 6rem;
+  border-radius: var(--btn-border-radius);
+}
+
+.vd-skeleton-button-sm {
+  height: 2rem;
+  width: 4rem;
+}
+
+.vd-skeleton-button-lg {
+  height: 3rem;
+  width: 8rem;
+}
+
+/* Skeleton Card */
+.vd-skeleton-card {
+  padding: 1rem;
+  border-radius: var(--btn-border-radius);
+  border: 1px solid var(--border-color);
+}
+
+/* Skeleton Input */
+.vd-skeleton-input {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--btn-border-radius);
+}
+
+/* Skeleton Paragraph (multiple lines) */
+.vd-skeleton-paragraph {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.vd-skeleton-paragraph .vd-skeleton-text {
+  margin-bottom: 0;
+}
+
+.vd-skeleton-paragraph .vd-skeleton-text:nth-child(1) { width: 100%; }
+.vd-skeleton-paragraph .vd-skeleton-text:nth-child(2) { width: 95%; }
+.vd-skeleton-paragraph .vd-skeleton-text:nth-child(3) { width: 90%; }
+.vd-skeleton-paragraph .vd-skeleton-text:nth-child(4) { width: 70%; }
+
+/* Skeleton List */
+.vd-skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.vd-skeleton-list-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.vd-skeleton-list-item .vd-skeleton-circle {
+  flex-shrink: 0;
+}
+
+.vd-skeleton-list-item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Skeleton Grid */
+.vd-skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+/* Skeleton Table Row */
+.vd-skeleton-table-row {
+  display: flex;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.vd-skeleton-table-row .vd-skeleton-text {
+  margin-bottom: 0;
+}
+
+/* Width Variants */
+.vd-skeleton-w-full { width: 100%; }
+.vd-skeleton-w-3-4 { width: 75%; }
+.vd-skeleton-w-2-3 { width: 66.666667%; }
+.vd-skeleton-w-1-2 { width: 50%; }
+.vd-skeleton-w-1-3 { width: 33.333333%; }
+.vd-skeleton-w-1-4 { width: 25%; }
+
+/* No Animation Variant */
+.vd-skeleton-static::after {
+  display: none;
+}
+
+/* Pulse Animation Variant */
+.vd-skeleton-pulse {
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.vd-skeleton-pulse::after {
+  display: none;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .vd-skeleton::after {
+    animation: none;
+    transform: none;
+    background: transparent;
+  }
+
+  .vd-skeleton-pulse {
+    animation: none;
+  }
+}

package/css/components/spinner.css

@@ -0,0 +1,144 @@
+/**
+ * Vanduo Framework - Spinner Component
+ * Loading indicators with variants and sizes
+ */
+
+:root {
+  --spinner-size: 2rem;
+  --spinner-border-width: 3px;
+  --spinner-color: var(--color-primary);
+  --spinner-speed: 0.65s;
+}
+
+/* Border Spinner */
+.vd-spinner {
+  display: inline-block;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border: var(--spinner-border-width) solid var(--border-color, #e9ecef);
+  border-top-color: var(--spinner-color);
+  border-radius: 50%;
+  animation: spinner-rotate var(--spinner-speed) linear infinite;
+}
+
+@keyframes spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+/* Dot Spinner */
+.vd-spinner-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.vd-spinner-dots::before,
+.vd-spinner-dots::after,
+.vd-spinner-dots span {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--spinner-color);
+  animation: spinner-dots-bounce 1.4s ease-in-out infinite both;
+}
+
+.vd-spinner-dots::before {
+  animation-delay: -0.32s;
+}
+
+.vd-spinner-dots span {
+  animation-delay: -0.16s;
+}
+
+@keyframes spinner-dots-bounce {
+  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Growing Spinner */
+.vd-spinner-grow {
+  display: inline-block;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  background-color: var(--spinner-color);
+  border-radius: 50%;
+  opacity: 0;
+  animation: spinner-grow 0.75s linear infinite;
+}
+
+@keyframes spinner-grow {
+  0% { transform: scale(0); }
+  50% { opacity: 1; }
+}
+
+/* Size Variants */
+.vd-spinner-xs { --spinner-size: 1rem; --spinner-border-width: 2px; }
+.vd-spinner-sm { --spinner-size: 1.5rem; --spinner-border-width: 2px; }
+.vd-spinner-lg { --spinner-size: 3rem; --spinner-border-width: 4px; }
+.vd-spinner-xl { --spinner-size: 4rem; --spinner-border-width: 5px; }
+
+/* Color Variants */
+.vd-spinner-success { --spinner-color: var(--color-success); }
+.vd-spinner-warning { --spinner-color: var(--color-warning); }
+.vd-spinner-error { --spinner-color: var(--color-error); }
+.vd-spinner-info { --spinner-color: var(--color-info); }
+.vd-spinner-light { --spinner-color: #fff; }
+.vd-spinner-dark { --spinner-color: var(--text-primary); }
+
+/* Centering Helper */
+.vd-spinner-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-5, 1rem);
+}
+
+/* Quad-Spinner Loader — signature Vanduo 2x2 grid loader */
+.vd-dynamic-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1rem;
+  gap: 1rem;
+}
+
+.vd-dynamic-loader-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.vd-dynamic-loader-text {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm, 0.8125rem);
+}
+
+/* Quad-Spinner overlaying a skeleton card */
+.vd-dynamic-loader-card {
+  position: relative;
+  min-height: 300px;
+  padding: 2rem;
+  overflow: hidden;
+  border-radius: var(--btn-border-radius, 0.5rem);
+  border: 1px solid var(--border-color);
+}
+
+.vd-dynamic-loader-card > .vd-dynamic-loader {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .vd-spinner,
+  .vd-spinner-dots::before,
+  .vd-spinner-dots::after,
+  .vd-spinner-dots span,
+  .vd-spinner-grow {
+    animation-duration: 1.5s;
+  }
+}