vanduo-framework 1.1.8-docs-update

package/css/components/toast.css

@@ -0,0 +1,357 @@
+/**
+ * Vanduo Framework - Toast Notifications
+ * Popup notifications for user feedback
+ */
+
+:root {
+  /* Toast Sizing (Fibonacci) */
+  --toast-width: 377px;             /* fib */
+  --toast-max-width: 90vw;
+  --toast-padding-x: 1.3125rem;     /* 21px - fib */
+  --toast-padding-y: 0.8125rem;     /* 13px - fib */
+  --toast-border-radius: var(--radius-fib-5);
+  --toast-gap: 0.8125rem;           /* 13px - fib */
+
+  /* Toast Colors */
+  --toast-bg: var(--color-white);
+  --toast-text: var(--text-primary);
+  --toast-border: var(--border-color);
+  --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --toast-bg: var(--color-gray-800);
+  --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --toast-bg: var(--color-gray-800);
+    --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Toast Container - Positions toasts on screen */
+.vd-toast-container {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-gap);
+  pointer-events: none;
+  padding: 1rem;
+}
+
+/* Container Positions */
+.vd-toast-container-top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.vd-toast-container-top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.vd-toast-container-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.vd-toast-container-bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.vd-toast-container-bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.vd-toast-container-bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+/* Base Toast */
+.vd-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  width: var(--toast-width);
+  max-width: var(--toast-max-width);
+  padding: var(--toast-padding-y) var(--toast-padding-x);
+  background-color: var(--toast-bg);
+  color: var(--toast-text);
+  border: 1px solid var(--toast-border);
+  border-radius: var(--toast-border-radius);
+  box-shadow: var(--toast-shadow);
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* Toast Visible State */
+.vd-toast.is-visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Toast Exiting State */
+.vd-toast.is-exiting {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+/* Left-side containers animate from left */
+.vd-toast-container-top-left .vd-toast,
+.vd-toast-container-bottom-left .vd-toast {
+  transform: translateX(-100%);
+}
+
+.vd-toast-container-top-left .vd-toast.is-visible,
+.vd-toast-container-bottom-left .vd-toast.is-visible {
+  transform: translateX(0);
+}
+
+.vd-toast-container-top-left .vd-toast.is-exiting,
+.vd-toast-container-bottom-left .vd-toast.is-exiting {
+  transform: translateX(-100%);
+}
+
+/* Center containers animate from top/bottom */
+.vd-toast-container-top-center .vd-toast {
+  transform: translateY(-100%);
+}
+
+.vd-toast-container-top-center .vd-toast.is-visible {
+  transform: translateY(0);
+}
+
+.vd-toast-container-top-center .vd-toast.is-exiting {
+  transform: translateY(-100%);
+}
+
+.vd-toast-container-bottom-center .vd-toast {
+  transform: translateY(100%);
+}
+
+.vd-toast-container-bottom-center .vd-toast.is-visible {
+  transform: translateY(0);
+}
+
+.vd-toast-container-bottom-center .vd-toast.is-exiting {
+  transform: translateY(100%);
+}
+
+/* Toast Icon */
+.vd-toast-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+/* Toast Content */
+.vd-toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Toast Title */
+.vd-toast-title {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 0.25rem;
+}
+
+/* Toast Message */
+.vd-toast-message {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+/* Toast Close Button */
+.vd-toast-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: -0.25rem -0.25rem -0.25rem 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--btn-border-radius);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.vd-toast-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .vd-toast-close:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vd-toast-close::before {
+  content: '\00D7';
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+/* Toast Color Variants */
+.vd-toast-success {
+  border-left: 4px solid var(--color-success);
+}
+
+.vd-toast-success .vd-toast-icon {
+  color: var(--color-success);
+}
+
+.vd-toast-warning {
+  border-left: 4px solid var(--color-warning);
+}
+
+.vd-toast-warning .vd-toast-icon {
+  color: var(--color-warning);
+}
+
+.vd-toast-error {
+  border-left: 4px solid var(--color-error);
+}
+
+.vd-toast-error .vd-toast-icon {
+  color: var(--color-error);
+}
+
+.vd-toast-info {
+  border-left: 4px solid var(--color-info);
+}
+
+.vd-toast-info .vd-toast-icon {
+  color: var(--color-info);
+}
+
+/* Solid Variants */
+.vd-toast-solid.vd-toast-success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--color-white);
+}
+
+.vd-toast-solid.vd-toast-success .vd-toast-message {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.vd-toast-solid.vd-toast-success .vd-toast-icon {
+  color: var(--color-white);
+}
+
+.vd-toast-solid.vd-toast-warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+  color: var(--color-gray-900);
+}
+
+.vd-toast-solid.vd-toast-warning .vd-toast-message {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.vd-toast-solid.vd-toast-warning .vd-toast-icon {
+  color: var(--color-gray-900);
+}
+
+.vd-toast-solid.vd-toast-error {
+  background-color: var(--color-error);
+  border-color: var(--color-error);
+  color: var(--color-white);
+}
+
+.vd-toast-solid.vd-toast-error .vd-toast-message {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.vd-toast-solid.vd-toast-error .vd-toast-icon {
+  color: var(--color-white);
+}
+
+.vd-toast-solid.vd-toast-info {
+  background-color: var(--color-info);
+  border-color: var(--color-info);
+  color: var(--color-white);
+}
+
+.vd-toast-solid.vd-toast-info .vd-toast-message {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.vd-toast-solid.vd-toast-info .vd-toast-icon {
+  color: var(--color-white);
+}
+
+/* Toast Progress Bar (auto-dismiss indicator) */
+.vd-toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background-color: currentColor;
+  opacity: 0.3;
+  border-radius: 0 0 var(--toast-border-radius) var(--toast-border-radius);
+  animation: toast-progress linear forwards;
+}
+
+@keyframes toast-progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+/* Toast with Progress */
+.vd-toast-with-progress {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Stacked Toasts Animation */
+.vd-toast-container .vd-toast:not(:first-child) {
+  margin-top: 0;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .vd-toast {
+    transition: opacity 0.15s ease;
+    transform: none !important;
+  }
+
+  .vd-toast.is-visible {
+    transform: none !important;
+  }
+
+  .vd-toast.is-exiting {
+    transform: none !important;
+  }
+
+  .vd-toast-progress {
+    animation: none;
+  }
+}

package/css/components/tooltips.css

@@ -0,0 +1,270 @@
+/**
+ * Vanduo Framework - Tooltips
+ * Tooltip component for contextual information
+ */
+
+:root {
+  /* Tooltip Colors */
+  --tooltip-bg: var(--color-gray-900);
+  --tooltip-bg-light: var(--color-white);
+  --tooltip-bg-dark: var(--color-gray-900);
+  --tooltip-text-color: var(--color-white);
+  --tooltip-text-color-light: var(--color-gray-900);
+  --tooltip-text-color-dark: var(--color-white);
+  
+  /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */
+  --tooltip-padding-y: 0.5rem;        /* 8px - fib */
+  --tooltip-padding-x: 0.8125rem;     /* 13px - fib (13/8 ~ phi) */
+  --tooltip-padding-y-sm: 0.3125rem;  /* 5px - fib */
+  --tooltip-padding-x-sm: 0.5rem;     /* 8px - fib (8/5 = 1.6 ~ phi) */
+  --tooltip-padding-y-lg: 0.8125rem;  /* 13px - fib */
+  --tooltip-padding-x-lg: 1.3125rem;  /* 21px - fib (21/13 ~ phi) */
+
+  /* Tooltip Font */
+  --tooltip-font-size: var(--font-size-sm);
+  --tooltip-font-size-sm: var(--font-size-xs);
+  --tooltip-font-size-lg: var(--font-size-base);
+
+  /* Tooltip Arrow (Fibonacci) */
+  --tooltip-arrow-size: 5px;     /* fib */
+  --tooltip-arrow-size-sm: 3px;  /* fib */
+  --tooltip-arrow-size-lg: 8px;  /* fib */
+
+  /* Tooltip Z-index */
+  --tooltip-z-index: 1070;
+
+  /* Tooltip Max Width */
+  --tooltip-max-width: 233px; /* fib */
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --tooltip-bg: var(--color-gray-100);
+  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-bg-light: var(--color-gray-800);
+  --tooltip-text-color-light: var(--color-gray-100);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --tooltip-bg: var(--color-gray-100);
+    --tooltip-text-color: var(--color-gray-900);
+    --tooltip-bg-light: var(--color-gray-800);
+    --tooltip-text-color-light: var(--color-gray-100);
+  }
+}
+
+/* Base Tooltip */
+.vd-tooltip {
+  position: absolute;
+  z-index: var(--tooltip-z-index);
+  display: block;
+  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--tooltip-font-size);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+  color: var(--tooltip-text-color);
+  text-align: center;
+  white-space: normal;
+  word-wrap: break-word;
+  background-color: var(--tooltip-bg);
+  border-radius: var(--btn-border-radius);
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  pointer-events: none;
+  max-width: var(--tooltip-max-width);
+  transition: opacity var(--transition-duration-base) var(--transition-ease);
+}
+
+.vd-tooltip.is-visible {
+  opacity: 1;
+}
+
+/* Tooltip Arrow */
+.vd-tooltip::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Tooltip Positioning - Top */
+.vd-tooltip-top,
+.vd-tooltip[data-placement="top"] {
+  margin-bottom: var(--tooltip-arrow-size);
+}
+
+.vd-tooltip-top::before,
+.vd-tooltip[data-placement="top"]::before {
+  bottom: calc(var(--tooltip-arrow-size) * -1);
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
+  border-color: var(--tooltip-bg) transparent transparent;
+}
+
+/* Tooltip Positioning - Bottom */
+.vd-tooltip-bottom,
+.vd-tooltip[data-placement="bottom"] {
+  margin-top: var(--tooltip-arrow-size);
+}
+
+.vd-tooltip-bottom::before,
+.vd-tooltip[data-placement="bottom"]::before {
+  top: calc(var(--tooltip-arrow-size) * -1);
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
+  border-color: transparent transparent var(--tooltip-bg);
+}
+
+/* Tooltip Positioning - Left */
+.vd-tooltip-left,
+.vd-tooltip[data-placement="left"] {
+  margin-right: var(--tooltip-arrow-size);
+}
+
+.vd-tooltip-left::before,
+.vd-tooltip[data-placement="left"]::before {
+  right: calc(var(--tooltip-arrow-size) * -1);
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
+  border-color: transparent transparent transparent var(--tooltip-bg);
+}
+
+/* Tooltip Positioning - Right */
+.vd-tooltip-right,
+.vd-tooltip[data-placement="right"] {
+  margin-left: var(--tooltip-arrow-size);
+}
+
+.vd-tooltip-right::before,
+.vd-tooltip[data-placement="right"]::before {
+  left: calc(var(--tooltip-arrow-size) * -1);
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
+  border-color: transparent var(--tooltip-bg) transparent transparent;
+}
+
+/* Tooltip Variants - Light */
+.vd-tooltip-light {
+  background-color: var(--tooltip-bg-light);
+  color: var(--tooltip-text-color-light);
+  box-shadow: var(--shadow-md);
+}
+
+.vd-tooltip-light.vd-tooltip-top::before,
+.vd-tooltip-light[data-placement="top"]::before {
+  border-color: var(--tooltip-bg-light) transparent transparent;
+}
+
+.vd-tooltip-light.vd-tooltip-bottom::before,
+.vd-tooltip-light[data-placement="bottom"]::before {
+  border-color: transparent transparent var(--tooltip-bg-light);
+}
+
+.vd-tooltip-light.vd-tooltip-left::before,
+.vd-tooltip-light[data-placement="left"]::before {
+  border-color: transparent transparent transparent var(--tooltip-bg-light);
+}
+
+.vd-tooltip-light.vd-tooltip-right::before,
+.vd-tooltip-light[data-placement="right"]::before {
+  border-color: transparent var(--tooltip-bg-light) transparent transparent;
+}
+
+/* Tooltip Variants - Dark */
+.vd-tooltip-dark {
+  background-color: var(--tooltip-bg-dark);
+  color: var(--tooltip-text-color-dark);
+}
+
+.vd-tooltip-dark.vd-tooltip-top::before,
+.vd-tooltip-dark[data-placement="top"]::before {
+  border-color: var(--tooltip-bg-dark) transparent transparent;
+}
+
+.vd-tooltip-dark.vd-tooltip-bottom::before,
+.vd-tooltip-dark[data-placement="bottom"]::before {
+  border-color: transparent transparent var(--tooltip-bg-dark);
+}
+
+.vd-tooltip-dark.vd-tooltip-left::before,
+.vd-tooltip-dark[data-placement="left"]::before {
+  border-color: transparent transparent transparent var(--tooltip-bg-dark);
+}
+
+.vd-tooltip-dark.vd-tooltip-right::before,
+.vd-tooltip-dark[data-placement="right"]::before {
+  border-color: transparent var(--tooltip-bg-dark) transparent transparent;
+}
+
+/* Tooltip Sizes */
+.vd-tooltip-sm {
+  padding: var(--tooltip-padding-y-sm) var(--tooltip-padding-x-sm);
+  font-size: var(--tooltip-font-size-sm);
+  max-width: 150px;
+}
+
+.vd-tooltip-sm.vd-tooltip-top::before,
+.vd-tooltip-sm[data-placement="top"]::before {
+  border-width: var(--tooltip-arrow-size-sm) var(--tooltip-arrow-size-sm) 0;
+}
+
+.vd-tooltip-sm.vd-tooltip-bottom::before,
+.vd-tooltip-sm[data-placement="bottom"]::before {
+  border-width: 0 var(--tooltip-arrow-size-sm) var(--tooltip-arrow-size-sm);
+}
+
+.vd-tooltip-sm.vd-tooltip-left::before,
+.vd-tooltip-sm[data-placement="left"]::before {
+  border-width: var(--tooltip-arrow-size-sm) 0 var(--tooltip-arrow-size-sm) var(--tooltip-arrow-size-sm);
+}
+
+.vd-tooltip-sm.vd-tooltip-right::before,
+.vd-tooltip-sm[data-placement="right"]::before {
+  border-width: var(--tooltip-arrow-size-sm) var(--tooltip-arrow-size-sm) var(--tooltip-arrow-size-sm) 0;
+}
+
+.vd-tooltip-lg {
+  padding: var(--tooltip-padding-y-lg) var(--tooltip-padding-x-lg);
+  font-size: var(--tooltip-font-size-lg);
+  max-width: 300px;
+}
+
+.vd-tooltip-lg.vd-tooltip-top::before,
+.vd-tooltip-lg[data-placement="top"]::before {
+  border-width: var(--tooltip-arrow-size-lg) var(--tooltip-arrow-size-lg) 0;
+}
+
+.vd-tooltip-lg.vd-tooltip-bottom::before,
+.vd-tooltip-lg[data-placement="bottom"]::before {
+  border-width: 0 var(--tooltip-arrow-size-lg) var(--tooltip-arrow-size-lg);
+}
+
+.vd-tooltip-lg.vd-tooltip-left::before,
+.vd-tooltip-lg[data-placement="left"]::before {
+  border-width: var(--tooltip-arrow-size-lg) 0 var(--tooltip-arrow-size-lg) var(--tooltip-arrow-size-lg);
+}
+
+.vd-tooltip-lg.vd-tooltip-right::before,
+.vd-tooltip-lg[data-placement="right"]::before {
+  border-width: var(--tooltip-arrow-size-lg) var(--tooltip-arrow-size-lg) var(--tooltip-arrow-size-lg) 0;
+}
+
+/* Tooltip with HTML Content */
+.vd-tooltip-html {
+  text-align: left;
+}
+
+/* Tooltip Wrapper (for positioning) */
+.vd-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+