@vanduo-oss/framework 1.5.1 → 1.7.0

package/css/components/forms.css

@@ -197,9 +197,11 @@ textarea.textarea-lg {
   border-radius: var(--vd-input-border-radius-lg);
 }
 
-/* Input States - Error */
+/* Input States - Error (`.vd-input-danger` is the canonical alias, added 1.7.0) */
 .vd-input-error,
 input.vd-input-error,
+.vd-input-danger,
+input.vd-input-danger,
 .vd-input.is-error,
 input.is-error {
   border-color: var(--vd-color-error);
@@ -212,6 +214,8 @@ input.vd-input-invalid {
 
 .vd-input-error:focus,
 input.vd-input-error:focus,
+.vd-input-danger:focus,
+input.vd-input-danger:focus,
 .vd-input.is-error:focus,
 input.is-error:focus {
   border-color: var(--vd-color-error);
@@ -283,6 +287,7 @@ textarea.is-success:focus {
 
 /* Labels */
 .label,
+.vd-form-label,
 label {
   display: inline-block;
   margin-bottom: 0.5rem;
@@ -298,6 +303,12 @@ label.required::after {
   color: var(--vd-color-error);
 }
 
+/* Icon inside a radio/check label (added 1.7.0; used by @vanduo-oss/vue) */
+.vd-form-radio-icon {
+  margin-right: 0.375rem;
+  vertical-align: -0.125em;
+}
+
 .label-sm,
 label.label-sm {
   font-size: var(--vd-font-size-xs);

package/css/components/modals.css

@@ -300,3 +300,72 @@
   overflow: hidden;
   padding-right: 0;
 }
+
+/* ==========================================================================
+   @vanduo-oss/vue panel-based modal markup (additive; added in 1.6.1)
+   VdModal renders `.vd-modal.vd-modal-open > .vd-modal-backdrop +
+   .vd-modal-panel.vd-modal-panel-{sm|md|lg}` with header/body/footer directly
+   inside the panel (no .vd-modal-dialog / .vd-modal-content split, and the
+   backdrop carries no .is-visible state). These aliases style that DOM without
+   touching the legacy .is-open / .vd-modal-dialog / .vd-modal-content rules.
+   ========================================================================== */
+
+/* Container open state (mirror of .vd-modal.is-open) */
+.vd-modal.vd-modal-open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+}
+
+/* Backdrop becomes visible when the container is open (mirror of .is-visible) */
+.vd-modal-open .vd-modal-backdrop {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Panel merges .vd-modal-dialog (sizing/positioning) + .vd-modal-content (box) */
+.vd-modal-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(calc(100% - 3.5rem), var(--vd-modal-dialog-max-width));
+  max-width: var(--vd-modal-dialog-max-width);
+  margin: 1.75rem auto;
+  pointer-events: auto;
+  background-color: var(--vd-modal-bg);
+  background-clip: padding-box;
+  border: 1px solid var(--vd-modal-border-color);
+  border-radius: var(--vd-btn-border-radius-lg);
+  box-shadow: var(--vd-shadow-2xl);
+  outline: 0;
+  transform: scale(0.95);
+  transition: var(--vd-modal-dialog-transition);
+  z-index: 1060;
+}
+
+.vd-modal.vd-modal-open .vd-modal-panel {
+  transform: scale(1);
+}
+
+/* Panel sizes (md = default width) */
+.vd-modal-panel-sm { --vd-modal-dialog-max-width: var(--vd-modal-width-sm); }
+.vd-modal-panel-md { --vd-modal-dialog-max-width: var(--vd-modal-width); }
+.vd-modal-panel-lg { --vd-modal-dialog-max-width: var(--vd-modal-width-lg); }
+
+/* Glass variant parity with .vd-modal-glass .vd-modal-content */
+.vd-modal-glass .vd-modal-panel {
+  background: var(--vd-glass-bg-light);
+  border-color: var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));
+}
+
+@media (max-width: 575.98px) {
+  .vd-modal-panel {
+    margin: 0.5rem;
+    width: calc(100% - 1rem);
+    max-width: calc(100% - 1rem);
+  }
+}

package/css/components/navbar.css

@@ -82,6 +82,17 @@
   -webkit-backdrop-filter: none;
 }
 
+/* Strong frosted surface once scroll activates glass (beyond vd-glass-xl) */
+.vd-navbar-glass.vd-navbar-scrolled {
+  --vd-glass-blur: 80px;
+  --vd-glass-saturate: 2.6;
+}
+
+.vd-navbar-fixed.vd-navbar-glass.vd-navbar-scrolled,
+.vd-navbar-fixed-top.vd-navbar-glass.vd-navbar-scrolled {
+  box-shadow: var(--vd-glass-shadow);
+}
+
 /* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */
 .vd-navbar-container {
   display: flex;

package/css/components/popover.css

@@ -0,0 +1,97 @@
+/**
+ * Vanduo Framework - Popover Component
+ * Multi-trigger (click | hover | focus) popover with auto-placement flip.
+ * Sibling to .vd-bubble (which is click-only rich HTML); this is the general
+ * primitive documented in docs/sections/components/popover.html.
+ */
+
+:root {
+  --vd-popover-bg: var(--vd-card-bg, #fff);
+  --vd-popover-text: var(--vd-text-primary, #212529);
+  --vd-popover-border-color: var(--vd-border-color, #dee2e6);
+  --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12);
+  --vd-popover-padding: 0.8125rem;
+  --vd-popover-radius: var(--vd-border-radius, 0.5rem);
+  --vd-popover-max-width: 21rem;
+  --vd-popover-min-width: 8rem;
+  --vd-popover-z-index: 1060;
+  --vd-popover-arrow-size: 8px;
+  --vd-popover-font-size: var(--vd-font-size-sm, 0.875rem);
+}
+
+[data-theme="dark"] {
+  --vd-popover-bg: var(--vd-card-bg, #2d2d44);
+  --vd-popover-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --vd-popover-bg: var(--vd-card-bg, #2d2d44);
+    --vd-popover-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
+  }
+}
+
+.vd-popover-panel {
+  position: absolute;
+  z-index: var(--vd-popover-z-index);
+  min-width: var(--vd-popover-min-width);
+  max-width: var(--vd-popover-max-width);
+  padding: var(--vd-popover-padding);
+  background: var(--vd-popover-bg);
+  color: var(--vd-popover-text);
+  border: 1px solid var(--vd-popover-border-color);
+  border-radius: var(--vd-popover-radius);
+  box-shadow: var(--vd-popover-shadow);
+  font-size: var(--vd-popover-font-size);
+  animation: vd-popover-enter 0.18s ease-out;
+}
+
+.vd-popover-panel[hidden] {
+  display: none !important;
+}
+
+.vd-popover-panel::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: var(--vd-popover-arrow-size) solid transparent;
+}
+
+.vd-popover-panel[data-placement="bottom"]::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--vd-popover-border-color);
+}
+
+.vd-popover-panel[data-placement="top"]::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--vd-popover-border-color);
+}
+
+.vd-popover-panel[data-placement="left"]::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--vd-popover-border-color);
+}
+
+.vd-popover-panel[data-placement="right"]::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--vd-popover-border-color);
+}
+
+.vd-popover-sm { --vd-popover-padding: 0.5rem; --vd-popover-font-size: var(--vd-font-size-xs, 0.75rem); }
+.vd-popover-lg { --vd-popover-padding: 1.3125rem; --vd-popover-max-width: 34rem; }
+
+@keyframes vd-popover-enter {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}

package/css/components/preloader.css

@@ -54,3 +54,34 @@
   }
 }
 
+/* ==========================================================================
+   @vanduo-oss/vue VdPreloader nested spinner (additive; added in 1.6.1)
+   VdPreloader nests `.vd-preloader > .vd-preloader-spinner`; when the inner
+   element is present the spinner visual moves to it (legacy bare .vd-preloader
+   keeps spinning on its own). Size/color vars set on .vd-preloader inherit down.
+   ========================================================================== */
+.vd-preloader:has(.vd-preloader-spinner) {
+  width: auto;
+  height: auto;
+  border: none;
+  border-radius: 0;
+  animation: none;
+  display: inline-flex;
+}
+
+.vd-preloader-spinner {
+  display: inline-block;
+  width: var(--vd-spinner-size, 2rem);
+  height: var(--vd-spinner-size, 2rem);
+  border: var(--vd-spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);
+  border-top-color: var(--vd-spinner-color, var(--vd-color-primary));
+  border-radius: 50%;
+  animation: spinner-rotate var(--vd-spinner-speed, 0.65s) linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-preloader-spinner {
+    animation-duration: 1.5s;
+  }
+}
+

package/css/components/progress.css

@@ -105,3 +105,49 @@
     --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);
   }
 }
+
+/* ==========================================================================
+   @vanduo-oss/vue VdProgress markup (additive; added in 1.6.1)
+   VdProgress renders `.vd-progress > .vd-progress-track > .vd-progress-fill`
+   plus an optional `.vd-progress-label`, and uses `.is-indeterminate` (vs the
+   legacy `.vd-progress-bar` / `.vd-progress-indeterminate`). Scoped with :has()
+   so the legacy single-bar progress is untouched.
+   ========================================================================== */
+.vd-progress:has(.vd-progress-track) {
+  display: block;
+  height: auto;
+  overflow: visible;
+  background-color: transparent;
+}
+
+.vd-progress-track {
+  display: flex;
+  height: var(--vd-progress-height);
+  overflow: hidden;
+  background-color: var(--vd-progress-bg);
+  border-radius: var(--vd-progress-border-radius);
+}
+
+.vd-progress-fill {
+  display: block;
+  height: 100%;
+  background-color: var(--vd-progress-bar-bg);
+  border-radius: var(--vd-progress-border-radius);
+  transition: width 0.4s ease;
+}
+
+.vd-progress.is-indeterminate .vd-progress-fill {
+  width: 30%;
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+.vd-progress-label {
+  display: block;
+  margin-top: 0.375rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-progress.is-indeterminate .vd-progress-fill {
+    animation: none;
+  }
+}

package/css/components/separator.css

@@ -0,0 +1,50 @@
+/**
+ * Vanduo Framework - Separator / Divider
+ * Added in 1.7.0 to back @vanduo-oss/vue's VdSeparator.
+ */
+
+:root {
+  --vd-separator-color: var(--vd-border-color);
+  --vd-separator-spacing: 1.3125rem; /* 21px - fib */
+}
+
+.vd-separator {
+  width: 100%;
+  height: 0;
+  margin: var(--vd-separator-spacing) 0;
+  border: none;
+  border-top: 1px solid var(--vd-separator-color);
+}
+
+.vd-separator-vertical {
+  width: 0;
+  height: auto;
+  min-height: 1em;
+  margin: 0 var(--vd-separator-spacing);
+  border-top: none;
+  border-left: 1px solid var(--vd-separator-color);
+  align-self: stretch;
+}
+
+/* Labeled separator: a horizontal rule with centered text. */
+.vd-separator-labeled {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  margin: var(--vd-separator-spacing) 0;
+  border: none;
+  color: var(--vd-text-muted);
+  font-size: var(--vd-font-size-sm);
+}
+
+.vd-separator-labeled::before,
+.vd-separator-labeled::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--vd-separator-color);
+}
+
+.vd-separator-label {
+  flex-shrink: 0;
+}

package/css/components/skeleton.css

@@ -240,3 +240,45 @@
     animation: none;
   }
 }
+
+/* ==========================================================================
+   @vanduo-oss/vue VdSkeleton additions (additive; added in 1.6.1)
+   VdSkeleton renders multi-line (`.vd-skeleton-lines`) and card shapes
+   (`.vd-skeleton-card.vd-skeleton-card-{size} > .vd-skeleton-card-header +
+   .vd-skeleton-card-body`), plus a `.vd-skeleton-text-short` last line.
+   ========================================================================== */
+.vd-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.vd-skeleton-lines .vd-skeleton-text {
+  margin-bottom: 0;
+}
+
+.vd-skeleton-text-short {
+  width: 60%;
+}
+
+.vd-skeleton-card-header {
+  height: 8rem;
+  width: 100%;
+  margin-bottom: 0.8125rem;
+}
+
+.vd-skeleton-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.vd-skeleton-card-body .vd-skeleton-text {
+  margin-bottom: 0;
+}
+
+/* Card size variants scale the header placeholder height */
+.vd-skeleton-card-sm .vd-skeleton-card-header { height: 5rem; }
+.vd-skeleton-card-md .vd-skeleton-card-header { height: 8rem; }
+.vd-skeleton-card-lg .vd-skeleton-card-header { height: 12rem; }
+.vd-skeleton-card-xl .vd-skeleton-card-header { height: 16rem; }

package/css/components/slider.css

@@ -0,0 +1,92 @@
+/**
+ * Vanduo Framework - Slider (range input)
+ * Added in 1.7.0 to back @vanduo-oss/vue's VdSlider.
+ */
+
+:root {
+  --vd-slider-track-height: 0.375rem;  /* 6px */
+  --vd-slider-track-bg: var(--vd-bg-tertiary, #e9ecef);
+  --vd-slider-thumb-size: 1.125rem;    /* 18px */
+  --vd-slider-thumb-bg: var(--vd-color-primary);
+}
+
+.vd-slider-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+}
+
+.vd-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.vd-slider-value {
+  flex-shrink: 0;
+  min-width: 3ch;
+  text-align: right;
+  font-size: var(--vd-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--vd-text-secondary);
+}
+
+.vd-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--vd-slider-track-height);
+  border-radius: calc(var(--vd-slider-track-height) / 2);
+  background-color: var(--vd-slider-track-bg);
+  cursor: pointer;
+  outline-offset: 4px;
+}
+
+.vd-slider:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vd-slider:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+}
+
+/* WebKit / Blink thumb */
+.vd-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--vd-slider-thumb-size);
+  height: var(--vd-slider-thumb-size);
+  border: 2px solid var(--vd-color-white);
+  border-radius: 50%;
+  background-color: var(--vd-slider-thumb-bg);
+  box-shadow: var(--vd-shadow-sm);
+  transition: transform 0.1s ease;
+}
+
+.vd-slider::-webkit-slider-thumb:active {
+  transform: scale(1.15);
+}
+
+/* Firefox thumb + track */
+.vd-slider::-moz-range-thumb {
+  width: var(--vd-slider-thumb-size);
+  height: var(--vd-slider-thumb-size);
+  border: 2px solid var(--vd-color-white);
+  border-radius: 50%;
+  background-color: var(--vd-slider-thumb-bg);
+  box-shadow: var(--vd-shadow-sm);
+}
+
+.vd-slider::-moz-range-track {
+  height: var(--vd-slider-track-height);
+  border-radius: calc(var(--vd-slider-track-height) / 2);
+  background-color: var(--vd-slider-track-bg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-slider::-webkit-slider-thumb {
+    transition: none;
+  }
+}

package/css/components/tabs.css

@@ -327,3 +327,49 @@
     transition: none;
   }
 }
+
+/* ==========================================================================
+   @vanduo-oss/vue VdTabs markup (additive; added in 1.6.1)
+   VdTabs renders `.vd-tabs > .vd-tab-list > button.vd-tab.is-active` and a
+   `.vd-tab-panels` wrapper (vs the legacy .vd-tab-link / .vd-tab-content).
+   ========================================================================== */
+.vd-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: var(--vd-tab-padding-y) var(--vd-tab-padding-x);
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-tab-text);
+  background: transparent;
+  border: none;
+  border-bottom: var(--vd-tab-border-width) solid transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+
+.vd-tab:hover {
+  color: var(--vd-tab-text-hover);
+  background-color: var(--vd-tab-bg-hover);
+}
+
+.vd-tab:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: -2px;
+}
+
+.vd-tab.is-active {
+  color: var(--vd-tab-text-active);
+  border-bottom-color: var(--vd-tab-border-active);
+}
+
+.vd-tab-panels {
+  padding-top: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-tab {
+    transition: none;
+  }
+}

package/css/components/theme-customizer.css

@@ -223,6 +223,57 @@ body > .vd-theme-customizer-panel.is-open {
   z-index: 1;
 }
 
+/* Palette toggle (Fibonacci default / Open Color optional) */
+.tc-palette-group {
+  display: flex;
+  gap: 0;
+}
+
+.tc-palette-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.5rem;
+  background: transparent;
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tc-palette-btn:first-child {
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);
+}
+
+.tc-palette-btn:last-child {
+  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;
+}
+
+.tc-palette-btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+.tc-palette-btn:hover {
+  background-color: var(--vd-bg-secondary);
+  z-index: 1;
+}
+
+.tc-palette-btn:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: 1px;
+  z-index: 2;
+}
+
+.tc-palette-btn.is-active {
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
+  z-index: 1;
+}
+
 /* Font Select */
 .tc-font-select {
   width: 100%;
@@ -647,6 +698,7 @@ body > .vd-theme-customizer-panel.is-open {
 [data-theme="dark"] .customizer-radius-btn.is-active,
 [data-theme="dark"] .customizer-mode-btn.is-active,
 [data-theme="dark"] .tc-radius-btn.is-active,
+[data-theme="dark"] .tc-palette-btn.is-active,
 [data-theme="dark"] .tc-mode-btn.is-active {
   background-color: var(--vd-gray-2);
   border-color: var(--vd-gray-2);
@@ -667,6 +719,7 @@ body > .vd-theme-customizer-panel.is-open {
   :root:not([data-theme]) .customizer-radius-btn.is-active,
   :root:not([data-theme]) .customizer-mode-btn.is-active,
   :root:not([data-theme]) .tc-radius-btn.is-active,
+  :root:not([data-theme]) .tc-palette-btn.is-active,
   :root:not([data-theme]) .tc-mode-btn.is-active {
     background-color: var(--vd-gray-2);
     border-color: var(--vd-gray-2);