@vanduo-oss/framework 1.2.6 → 1.2.8

package/css/components/sidenav.css

@@ -267,6 +267,76 @@
   margin-right: var(--sidenav-width-lg);
 }
 
+/* ========== Offcanvas Alias ========== */
+
+.vd-offcanvas {
+  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-offcanvas.is-open {
+  transform: translateX(0) translateY(0);
+}
+
+/* Top direction */
+.vd-sidenav-top,
+.vd-offcanvas-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  width: 100%;
+  height: auto;
+  max-height: 80vh;
+  transform: translateY(-100%);
+}
+
+.vd-sidenav-top.is-open,
+.vd-offcanvas-top.is-open {
+  transform: translateY(0);
+}
+
+/* Bottom direction */
+.vd-sidenav-bottom,
+.vd-offcanvas-bottom {
+  top: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: auto;
+  max-height: 80vh;
+  transform: translateY(100%);
+}
+
+.vd-sidenav-bottom.is-open,
+.vd-offcanvas-bottom.is-open {
+  transform: translateY(0);
+}
+
+/* Right alias for offcanvas */
+.vd-offcanvas-right {
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+
+.vd-offcanvas-right.is-open {
+  transform: translateX(0);
+}
+
 /* Body Scroll Lock */
 .body-sidenav-open {
   overflow: hidden;

package/css/components/spotlight.css

@@ -0,0 +1,119 @@
+/**
+ * Vanduo Framework - Spotlight (Feature Discovery)
+ * Overlay highlight + tooltip tour system
+ */
+
+:root {
+  --spotlight-overlay-bg: rgba(0, 0, 0, 0.5);
+  --spotlight-tooltip-bg: var(--card-bg, #fff);
+  --spotlight-tooltip-color: var(--text-primary, #212529);
+  --spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.15);
+  --spotlight-tooltip-padding: 1.3125rem; /* 21px - fib */
+  --spotlight-tooltip-radius: var(--border-radius, 0.5rem);
+  --spotlight-tooltip-max-width: 21rem; /* 336px - fib×16 */
+  --spotlight-highlight-padding: 0.5rem; /* 8px - fib */
+  --spotlight-z-index: 1080;
+}
+
+[data-theme="dark"] {
+  --spotlight-tooltip-bg: var(--card-bg, #2d2d44);
+  --spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.35);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --spotlight-tooltip-bg: var(--card-bg, #2d2d44);
+    --spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.35);
+  }
+}
+
+/* ========== Overlay ========== */
+
+.vd-spotlight-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--spotlight-z-index);
+  pointer-events: auto;
+  transition: opacity 0.3s ease;
+}
+
+/* ========== Tooltip ========== */
+
+.vd-spotlight-tooltip {
+  position: absolute;
+  z-index: calc(var(--spotlight-z-index) + 2);
+  background: var(--spotlight-tooltip-bg);
+  color: var(--spotlight-tooltip-color);
+  padding: var(--spotlight-tooltip-padding);
+  border-radius: var(--spotlight-tooltip-radius);
+  box-shadow: var(--spotlight-tooltip-shadow);
+  max-width: var(--spotlight-tooltip-max-width);
+}
+
+.vd-spotlight-title {
+  margin: 0 0 0.5rem;
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+
+.vd-spotlight-description {
+  margin: 0 0 0.8125rem; /* 13px - fib */
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* ========== Footer (nav buttons) ========== */
+
+.vd-spotlight-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.vd-spotlight-counter {
+  font-size: 0.75rem;
+  color: var(--text-muted, #6c757d);
+}
+
+.vd-spotlight-actions {
+  display: flex;
+  gap: 0.3125rem; /* 5px - fib */
+}
+
+.vd-spotlight-btn {
+  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
+  border: 1px solid var(--border-color, #dee2e6);
+  border-radius: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  transition: background 0.15s ease;
+}
+
+.vd-spotlight-btn:hover {
+  background: var(--bg-secondary, #f8f9fa);
+}
+
+.vd-spotlight-btn-primary {
+  background: var(--color-primary, #0d6efd);
+  color: #fff;
+  border-color: var(--color-primary, #0d6efd);
+}
+
+.vd-spotlight-btn-primary:hover {
+  background: var(--color-primary-dark, #0b5ed7);
+}
+
+/* ========== Highlighted Target ========== */
+
+.vd-spotlight-target {
+  position: relative;
+  z-index: calc(var(--spotlight-z-index) + 1);
+  box-shadow: 0 0 0 var(--spotlight-highlight-padding) rgba(13, 110, 253, 0.25),
+              0 0 0 9999px var(--spotlight-overlay-bg);
+  border-radius: 0.25rem;
+}

package/css/components/stepper.css

@@ -0,0 +1,176 @@
+/**
+ * Vanduo Framework - Stepper
+ * Multi-step progress indicator with states
+ */
+
+:root {
+  /* Stepper Colors */
+  --stepper-active-color: var(--color-primary, #0d6efd);
+  --stepper-completed-color: var(--color-success, #198754);
+  --stepper-error-color: var(--color-danger, #dc3545);
+  --stepper-pending-color: var(--color-gray-400, #ced4da);
+  --stepper-text-color: var(--text-primary, #212529);
+  --stepper-line-color: var(--border-color, #dee2e6);
+
+  /* Stepper Dimensions (Fibonacci) */
+  --stepper-circle-size: 2.125rem; /* 34px ~ fib */
+  --stepper-line-width: 2px;
+  --stepper-gap: 0.5rem;          /* 8px - fib */
+  --stepper-connector-gap: 0.8125rem; /* 13px - fib */
+}
+
+[data-theme="dark"] {
+  --stepper-pending-color: var(--color-gray-600, #6c757d);
+  --stepper-line-color: var(--color-gray-600, #6c757d);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --stepper-pending-color: var(--color-gray-600, #6c757d);
+    --stepper-line-color: var(--color-gray-600, #6c757d);
+  }
+}
+
+/* ========== Horizontal (default) ========== */
+
+.vd-stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  counter-reset: step;
+}
+
+.vd-stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+  text-align: center;
+}
+
+/* Connector line */
+.vd-stepper-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--stepper-circle-size) / 2);
+  left: calc(50% + var(--stepper-circle-size) / 2 + var(--stepper-connector-gap));
+  right: calc(-50% + var(--stepper-circle-size) / 2 + var(--stepper-connector-gap));
+  height: var(--stepper-line-width);
+  background: var(--stepper-line-color);
+  z-index: 0;
+}
+
+/* Circle indicator */
+.vd-stepper-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stepper-circle-size);
+  height: var(--stepper-circle-size);
+  border-radius: 50%;
+  border: var(--stepper-line-width) solid var(--stepper-pending-color);
+  background: var(--bg-primary, #fff);
+  font-weight: 600;
+  font-size: 0.875rem;
+  z-index: 1;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  counter-increment: step;
+}
+
+.vd-stepper-label {
+  margin-top: var(--stepper-gap);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-muted, #6c757d);
+}
+
+.vd-stepper-description {
+  font-size: 0.75rem;
+  color: var(--text-muted, #6c757d);
+  margin-top: 0.125rem;
+}
+
+/* ========== States ========== */
+
+.vd-stepper-item.is-active .vd-stepper-circle {
+  border-color: var(--stepper-active-color);
+  background: var(--stepper-active-color);
+  color: #fff;
+}
+
+.vd-stepper-item.is-active .vd-stepper-label {
+  color: var(--stepper-active-color);
+  font-weight: 600;
+}
+
+.vd-stepper-item.is-completed .vd-stepper-circle {
+  border-color: var(--stepper-completed-color);
+  background: var(--stepper-completed-color);
+  color: #fff;
+}
+
+.vd-stepper-item.is-completed::after {
+  background: var(--stepper-completed-color);
+}
+
+.vd-stepper-item.is-completed .vd-stepper-label {
+  color: var(--stepper-text-color);
+}
+
+.vd-stepper-item.is-error .vd-stepper-circle {
+  border-color: var(--stepper-error-color);
+  background: var(--stepper-error-color);
+  color: #fff;
+}
+
+.vd-stepper-item.is-error .vd-stepper-label {
+  color: var(--stepper-error-color);
+}
+
+/* ========== Vertical ========== */
+
+.vd-stepper-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.vd-stepper-vertical .vd-stepper-item {
+  flex-direction: row;
+  align-items: flex-start;
+  flex: none;
+  text-align: left;
+  padding-bottom: 1.3125rem; /* 21px - fib */
+}
+
+.vd-stepper-vertical .vd-stepper-item:not(:last-child)::after {
+  top: calc(var(--stepper-circle-size) + var(--stepper-connector-gap));
+  left: calc(var(--stepper-circle-size) / 2);
+  right: auto;
+  bottom: 0;
+  width: var(--stepper-line-width);
+  height: auto;
+}
+
+.vd-stepper-vertical .vd-stepper-label,
+.vd-stepper-vertical .vd-stepper-description {
+  margin-top: 0;
+  margin-left: 0.8125rem; /* 13px - fib */
+}
+
+.vd-stepper-vertical .vd-stepper-content {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.8125rem;
+}
+
+/* ========== Clickable ========== */
+
+.vd-stepper-clickable .vd-stepper-item {
+  cursor: pointer;
+}
+
+.vd-stepper-clickable .vd-stepper-circle:hover {
+  transform: scale(1.1);
+  transition: transform 0.15s ease;
+}

package/css/components/suggest.css

@@ -0,0 +1,119 @@
+/**
+ * Vanduo Framework - Suggest (Autocomplete)
+ * Dropdown suggestion list for text inputs
+ * Primary: .vd-suggest | Alias: .vd-autocomplete
+ */
+
+:root {
+  /* Suggest Colors */
+  --suggest-bg: var(--card-bg, #fff);
+  --suggest-border-color: var(--border-color, #dee2e6);
+  --suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.1); /* 4px 13px - fib */
+  --suggest-item-hover-bg: var(--bg-secondary, #f8f9fa);
+  --suggest-item-active-bg: var(--color-primary, #0d6efd);
+  --suggest-item-active-color: #fff;
+  --suggest-highlight-color: var(--color-primary, #0d6efd);
+
+  /* Suggest Spacing (Fibonacci) */
+  --suggest-padding: 0.3125rem 0; /* 5px - fib */
+  --suggest-item-padding: 0.5rem 0.8125rem; /* 8px 13px - fib */
+  --suggest-max-height: 15rem;
+  --suggest-border-radius: var(--border-radius, 0.5rem);
+
+  /* Suggest Z-index */
+  --suggest-z-index: 1050;
+}
+
+[data-theme="dark"] {
+  --suggest-bg: var(--card-bg, #2d2d44);
+  --suggest-border-color: var(--border-color, #3d3d5c);
+  --suggest-item-hover-bg: var(--bg-primary, #1a1a2e);
+  --suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --suggest-bg: var(--card-bg, #2d2d44);
+    --suggest-border-color: var(--border-color, #3d3d5c);
+    --suggest-item-hover-bg: var(--bg-primary, #1a1a2e);
+    --suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* ========== Wrapper ========== */
+
+.vd-suggest-wrapper,
+.vd-autocomplete-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+/* ========== Dropdown List ========== */
+
+.vd-suggest-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: var(--suggest-z-index);
+  margin-top: 2px;
+  padding: var(--suggest-padding);
+  max-height: var(--suggest-max-height);
+  overflow-y: auto;
+  background: var(--suggest-bg);
+  border: 1px solid var(--suggest-border-color);
+  border-radius: var(--suggest-border-radius);
+  box-shadow: var(--suggest-shadow);
+  list-style: none;
+  display: none;
+}
+
+.vd-suggest-list.is-open {
+  display: block;
+}
+
+/* ========== Items ========== */
+
+.vd-suggest-item {
+  padding: var(--suggest-item-padding);
+  cursor: pointer;
+  transition: background 0.15s ease;
+  font-size: var(--font-size-base, 1rem);
+}
+
+.vd-suggest-item:hover,
+.vd-suggest-item.is-highlighted {
+  background: var(--suggest-item-hover-bg);
+}
+
+.vd-suggest-item.is-active {
+  background: var(--suggest-item-active-bg);
+  color: var(--suggest-item-active-color);
+}
+
+/* Match highlight */
+.vd-suggest-match {
+  font-weight: 600;
+  color: var(--suggest-highlight-color);
+}
+
+.vd-suggest-item.is-active .vd-suggest-match {
+  color: inherit;
+}
+
+/* ========== No Results ========== */
+
+.vd-suggest-empty {
+  padding: var(--suggest-item-padding);
+  color: var(--text-muted, #6c757d);
+  font-style: italic;
+}
+
+/* ========== Loading ========== */
+
+.vd-suggest-loading {
+  padding: var(--suggest-item-padding);
+  text-align: center;
+  color: var(--text-muted, #6c757d);
+}

package/css/components/timeline.css

@@ -0,0 +1,201 @@
+/**
+ * Vanduo Framework - Timeline
+ * CSS-only vertical timeline layout
+ */
+
+:root {
+  /* Timeline Colors */
+  --timeline-line-color: var(--border-color, #dee2e6);
+  --timeline-marker-bg: var(--color-primary, #0d6efd);
+  --timeline-marker-color: #fff;
+  --timeline-content-bg: var(--card-bg, #fff);
+  --timeline-content-border: var(--border-color, #dee2e6);
+
+  /* Timeline Dimensions (Fibonacci) */
+  --timeline-line-width: 2px;
+  --timeline-marker-size: 0.8125rem; /* 13px - fib */
+  --timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */
+  --timeline-spacing: 1.3125rem;  /* 21px - fib */
+  --timeline-content-padding: 0.8125rem; /* 13px - fib */
+  --timeline-border-radius: var(--border-radius, 0.5rem);
+}
+
+[data-theme="dark"] {
+  --timeline-line-color: var(--color-gray-600, #6c757d);
+  --timeline-content-bg: var(--card-bg, #2d2d44);
+  --timeline-content-border: var(--border-color, #3d3d5c);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --timeline-line-color: var(--color-gray-600, #6c757d);
+    --timeline-content-bg: var(--card-bg, #2d2d44);
+    --timeline-content-border: var(--border-color, #3d3d5c);
+  }
+}
+
+/* ========== Base (Vertical Left) ========== */
+
+.vd-timeline {
+  position: relative;
+  padding-left: calc(var(--timeline-marker-size) / 2 + var(--timeline-spacing));
+  list-style: none;
+  margin: 0;
+}
+
+/* Vertical line */
+.vd-timeline::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--timeline-marker-size) / 2 - var(--timeline-line-width) / 2);
+  width: var(--timeline-line-width);
+  background: var(--timeline-line-color);
+}
+
+/* ========== Item ========== */
+
+.vd-timeline-item {
+  position: relative;
+  padding-bottom: var(--timeline-spacing);
+}
+
+.vd-timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+/* ========== Marker ========== */
+
+.vd-timeline-marker {
+  position: absolute;
+  left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size) / 2);
+  top: 0.25rem;
+  width: var(--timeline-marker-size);
+  height: var(--timeline-marker-size);
+  border-radius: 50%;
+  background: var(--timeline-marker-bg);
+  border: 2px solid var(--timeline-content-bg);
+  box-shadow: 0 0 0 2px var(--timeline-marker-bg);
+}
+
+/* Large marker with icon/text */
+.vd-timeline-marker-lg {
+  width: var(--timeline-marker-size-lg);
+  height: var(--timeline-marker-size-lg);
+  left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size-lg) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--timeline-marker-color);
+  font-size: 0.875rem;
+}
+
+/* ========== Content ========== */
+
+.vd-timeline-content {
+  background: var(--timeline-content-bg);
+  border: 1px solid var(--timeline-content-border);
+  border-radius: var(--timeline-border-radius);
+  padding: var(--timeline-content-padding);
+}
+
+.vd-timeline-title {
+  margin: 0 0 0.3125rem; /* 5px - fib */
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.vd-timeline-date {
+  font-size: 0.75rem;
+  color: var(--text-muted, #6c757d);
+  margin-bottom: 0.3125rem;
+}
+
+.vd-timeline-text {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+/* ========== Color Variants ========== */
+
+.vd-timeline-item.vd-timeline-success .vd-timeline-marker {
+  background: var(--color-success, #198754);
+  box-shadow: 0 0 0 2px var(--color-success, #198754);
+}
+
+.vd-timeline-item.vd-timeline-warning .vd-timeline-marker {
+  background: var(--color-warning, #ffc107);
+  box-shadow: 0 0 0 2px var(--color-warning, #ffc107);
+}
+
+.vd-timeline-item.vd-timeline-danger .vd-timeline-marker {
+  background: var(--color-danger, #dc3545);
+  box-shadow: 0 0 0 2px var(--color-danger, #dc3545);
+}
+
+/* ========== Alternating Mode ========== */
+
+.vd-timeline-alternating {
+  padding-left: 0;
+}
+
+.vd-timeline-alternating::before {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.vd-timeline-alternating .vd-timeline-item {
+  width: 50%;
+  padding-right: var(--timeline-spacing);
+  padding-left: 0;
+}
+
+.vd-timeline-alternating .vd-timeline-item:nth-child(odd) {
+  margin-left: 0;
+  text-align: right;
+}
+
+.vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker {
+  left: auto;
+  right: calc(-1 * var(--timeline-marker-size) / 2 - 1px);
+}
+
+.vd-timeline-alternating .vd-timeline-item:nth-child(even) {
+  margin-left: 50%;
+  padding-left: var(--timeline-spacing);
+  padding-right: 0;
+}
+
+.vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {
+  left: calc(-1 * var(--timeline-marker-size) / 2 - 1px);
+}
+
+/* ========== Responsive ========== */
+
+@media (max-width: 768px) {
+  .vd-timeline-alternating {
+    padding-left: calc(var(--timeline-marker-size) / 2 + var(--timeline-spacing));
+  }
+
+  .vd-timeline-alternating::before {
+    left: calc(var(--timeline-marker-size) / 2 - var(--timeline-line-width) / 2);
+    transform: none;
+  }
+
+  .vd-timeline-alternating .vd-timeline-item,
+  .vd-timeline-alternating .vd-timeline-item:nth-child(odd),
+  .vd-timeline-alternating .vd-timeline-item:nth-child(even) {
+    width: 100%;
+    margin-left: 0;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: left;
+  }
+
+  .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker,
+  .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {
+    left: calc(-1 * var(--timeline-spacing) - var(--timeline-marker-size) / 2);
+    right: auto;
+  }
+}