@vanduo-oss/framework 1.6.0 → 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/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/core/helpers.css

@@ -2203,3 +2203,20 @@
   --vd-radius-fib-13: 1.625rem;   /* 26px */
   --vd-radius-fib-21: 2.625rem;   /* 42px */
 }
+
+/* Muted text + visually-hidden utilities (added in 1.6.1; used by @vanduo-oss/vue) */
+.vd-muted {
+  color: var(--vd-text-muted);
+}
+
+.vd-visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/css/utilities/table.css

@@ -32,6 +32,15 @@
   border-collapse: collapse;
 }
 
+/* @vanduo-oss/vue VdTable <caption> (additive; added in 1.6.1) */
+.vd-table-caption {
+  padding: var(--vd-table-padding-y) var(--vd-table-padding-x);
+  color: var(--vd-text-muted);
+  font-size: var(--vd-font-size-sm);
+  text-align: left;
+  caption-side: top;
+}
+
 .vd-table th,
 .vd-table td,
 .table th,

package/css/vanduo.css

@@ -42,6 +42,9 @@
 @import url('components/buttons.css');
 @import url('components/forms.css');
 @import url('components/cards.css');
+@import url('components/accordion.css');
+@import url('components/separator.css');
+@import url('components/slider.css');
 @import url('components/expanding-cards.css');
 @import url('components/navbar.css');
 @import url('components/footer.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.6.0",
-  "builtAt": "2026-06-27T15:48:08.659Z",
-  "commit": "9384f14",
+  "version": "1.7.0",
+  "builtAt": "2026-06-29T06:28:14.462Z",
+  "commit": "c12c685",
   "mode": "development+production"
 }