@vanduo-oss/framework 1.5.1 → 1.7.0

package/css/core/colors.css

@@ -1,15 +1,22 @@
 /**
  * Vanduo Framework - Color System
  *
- * Color palette based on Open Color (https://yeun.github.io/open-color/)
- * Open Color is MIT licensed, Copyright (c) 2016 Heeyeun Jeong
+ * Palette system: the DEFAULT palette is Fibonacci (golden-angle generated);
+ * Open Color is an opt-in alternative via [data-palette="open-color"]. The raw,
+ * namespaced scales for both palettes live in colors-fib-base.css, and the
+ * active scales + runtime switch live in colors-palette.css (both generated by
+ * @vanduo-oss/core). The literal values below are the legacy Open Color scales;
+ * colors-palette.css rebinds the active --vd-<family>-<step> scales on top.
+ *
+ * Open Color (https://yeun.github.io/open-color/) is MIT licensed,
+ * Copyright (c) 2016 Heeyeun Jeong.
  *
  * @license MIT
  */
 
 :root {
   /* ═══════════════════════════════════════════════════════════════════════
-   * OPEN COLOR PALETTE
+   * OPEN COLOR PALETTE (legacy literals; rebound by colors-palette.css)
    * ═══════════════════════════════════════════════════════════════════════ */
 
   /* --- NEUTRALS: Gray Scale (Open Color Gray 0-9) ---
@@ -452,19 +459,20 @@
   --vd-border-color-light: var(--vd-gray-2);
   --vd-border-color-dark: var(--vd-gray-4);
 
-  /* Alpha Colors (for hover/active states) - indigo */
-  --vd-color-primary-alpha-10: rgba(92, 124, 250, 0.1);
-  --vd-color-primary-alpha-20: rgba(92, 124, 250, 0.2);
-  --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);
-  --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);
-  --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);
-  --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);
-  --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);
-  --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);
-  --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);
-  --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);
-  --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);
-  --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);
+  /* Alpha Colors (for hover/active states) — palette-agnostic via color-mix
+   * so they track whichever palette / data-primary is active. */
+  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 10%, transparent);
+  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 20%, transparent);
+  --vd-color-secondary-alpha-10: color-mix(in srgb, var(--vd-color-secondary) 10%, transparent);
+  --vd-color-secondary-alpha-20: color-mix(in srgb, var(--vd-color-secondary) 20%, transparent);
+  --vd-color-success-alpha-10: color-mix(in srgb, var(--vd-color-success) 10%, transparent);
+  --vd-color-success-alpha-20: color-mix(in srgb, var(--vd-color-success) 20%, transparent);
+  --vd-color-error-alpha-10: color-mix(in srgb, var(--vd-color-error) 10%, transparent);
+  --vd-color-error-alpha-20: color-mix(in srgb, var(--vd-color-error) 20%, transparent);
+  --vd-color-warning-alpha-10: color-mix(in srgb, var(--vd-color-warning) 10%, transparent);
+  --vd-color-warning-alpha-20: color-mix(in srgb, var(--vd-color-warning) 20%, transparent);
+  --vd-color-info-alpha-10: color-mix(in srgb, var(--vd-color-info) 10%, transparent);
+  --vd-color-info-alpha-20: color-mix(in srgb, var(--vd-color-info) 20%, transparent);
 }
 
 /* ═════════════════════════════════════════════════════════════════════════
@@ -653,9 +661,9 @@
   --vd-color-secondary: var(--vd-secondary-4);
   --vd-color-secondary-hover: var(--vd-secondary-5);
 
-  /* Alpha Colors for Dark Mode - indigo */
-  --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
-  --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
+  /* Alpha Colors for Dark Mode — palette-agnostic */
+  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);
+  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 25%, transparent);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -690,9 +698,9 @@
     --vd-color-secondary: var(--vd-secondary-4);
     --vd-color-secondary-hover: var(--vd-secondary-5);
 
-    /* Alpha Colors for Dark Mode - indigo */
-    --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
-    --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
+    /* Alpha Colors for Dark Mode — palette-agnostic */
+    --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);
+    --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 25%, transparent);
   }
 }
 
@@ -702,7 +710,7 @@
  * ═════════════════════════════════════════════════════════════════════════ */
 
 /* Red Primary */
-[data-primary="red"] {
+html[data-primary="red"] {
   --vd-primary-0: var(--vd-red-0);
   --vd-primary-1: var(--vd-red-1);
   --vd-primary-2: var(--vd-red-2);
@@ -716,7 +724,7 @@
 }
 
 /* Orange Primary */
-[data-primary="orange"] {
+html[data-primary="orange"] {
   --vd-primary-0: var(--vd-orange-0);
   --vd-primary-1: var(--vd-orange-1);
   --vd-primary-2: var(--vd-orange-2);
@@ -730,7 +738,7 @@
 }
 
 /* Amber Primary (using yellow with warmer tones) */
-[data-primary="amber"] {
+html[data-primary="amber"] {
   --vd-primary-0: #fffbeb;
   --vd-primary-1: #fef3c7;
   --vd-primary-2: #fde68a;
@@ -744,7 +752,7 @@
 }
 
 /* Yellow Primary */
-[data-primary="yellow"] {
+html[data-primary="yellow"] {
   --vd-primary-0: var(--vd-yellow-0);
   --vd-primary-1: var(--vd-yellow-1);
   --vd-primary-2: var(--vd-yellow-2);
@@ -758,7 +766,7 @@
 }
 
 /* Lime Primary */
-[data-primary="lime"] {
+html[data-primary="lime"] {
   --vd-primary-0: var(--vd-lime-0);
   --vd-primary-1: var(--vd-lime-1);
   --vd-primary-2: var(--vd-lime-2);
@@ -772,7 +780,7 @@
 }
 
 /* Green Primary */
-[data-primary="green"] {
+html[data-primary="green"] {
   --vd-primary-0: var(--vd-green-0);
   --vd-primary-1: var(--vd-green-1);
   --vd-primary-2: var(--vd-green-2);
@@ -786,7 +794,7 @@
 }
 
 /* Emerald Primary (slightly different green) */
-[data-primary="emerald"] {
+html[data-primary="emerald"] {
   --vd-primary-0: #ecfdf5;
   --vd-primary-1: #d1fae5;
   --vd-primary-2: #a7f3d0;
@@ -800,7 +808,7 @@
 }
 
 /* Teal Primary */
-[data-primary="teal"] {
+html[data-primary="teal"] {
   --vd-primary-0: var(--vd-teal-0);
   --vd-primary-1: var(--vd-teal-1);
   --vd-primary-2: var(--vd-teal-2);
@@ -814,7 +822,7 @@
 }
 
 /* Cyan Primary (default - no override needed, but included for completeness) */
-[data-primary="cyan"] {
+html[data-primary="cyan"] {
   --vd-primary-0: var(--vd-cyan-0);
   --vd-primary-1: var(--vd-cyan-1);
   --vd-primary-2: var(--vd-cyan-2);
@@ -828,7 +836,7 @@
 }
 
 /* Sky Primary */
-[data-primary="sky"] {
+html[data-primary="sky"] {
   --vd-primary-0: #f0f9ff;
   --vd-primary-1: #e0f2fe;
   --vd-primary-2: #bae6fd;
@@ -842,7 +850,7 @@
 }
 
 /* Blue Primary */
-[data-primary="blue"] {
+html[data-primary="blue"] {
   --vd-primary-0: var(--vd-blue-0);
   --vd-primary-1: var(--vd-blue-1);
   --vd-primary-2: var(--vd-blue-2);
@@ -856,7 +864,7 @@
 }
 
 /* Indigo Primary */
-[data-primary="indigo"] {
+html[data-primary="indigo"] {
   --vd-primary-0: var(--vd-indigo-0);
   --vd-primary-1: var(--vd-indigo-1);
   --vd-primary-2: var(--vd-indigo-2);
@@ -870,7 +878,7 @@
 }
 
 /* Violet Primary */
-[data-primary="violet"] {
+html[data-primary="violet"] {
   --vd-primary-0: var(--vd-violet-0);
   --vd-primary-1: var(--vd-violet-1);
   --vd-primary-2: var(--vd-violet-2);
@@ -884,7 +892,7 @@
 }
 
 /* Purple Primary (using grape) */
-[data-primary="purple"] {
+html[data-primary="purple"] {
   --vd-primary-0: var(--vd-grape-0);
   --vd-primary-1: var(--vd-grape-1);
   --vd-primary-2: var(--vd-grape-2);
@@ -898,7 +906,7 @@
 }
 
 /* Fuchsia Primary */
-[data-primary="fuchsia"] {
+html[data-primary="fuchsia"] {
   --vd-primary-0: #fdf4ff;
   --vd-primary-1: #fae8ff;
   --vd-primary-2: #f5d0fe;
@@ -912,7 +920,7 @@
 }
 
 /* Pink Primary */
-[data-primary="pink"] {
+html[data-primary="pink"] {
   --vd-primary-0: var(--vd-pink-0);
   --vd-primary-1: var(--vd-pink-1);
   --vd-primary-2: var(--vd-pink-2);
@@ -926,7 +934,7 @@
 }
 
 /* Rose Primary */
-[data-primary="rose"] {
+html[data-primary="rose"] {
   --vd-primary-0: #fff1f2;
   --vd-primary-1: #ffe4e6;
   --vd-primary-2: #fecdd3;
@@ -940,7 +948,7 @@
 }
 
 /* Black Primary (grayscale) */
-[data-primary="black"] {
+html[data-primary="black"] {
   --vd-primary-0: #fafafa;
   --vd-primary-1: #f5f5f5;
   --vd-primary-2: #e5e5e5;
@@ -959,7 +967,7 @@
  * ═════════════════════════════════════════════════════════════════════════ */
 
 /* Charcoal Neutral (default) */
-[data-neutral="charcoal"] {
+html[data-neutral="charcoal"] {
   --vd-gray-0: var(--vd-charcoal-0);
   --vd-gray-1: var(--vd-charcoal-1);
   --vd-gray-2: var(--vd-charcoal-2);
@@ -973,7 +981,7 @@
 }
 
 /* Gray Neutral */
-[data-neutral="gray"] {
+html[data-neutral="gray"] {
   --vd-gray-0: #f8f9fa;
   --vd-gray-1: #f1f3f5;
   --vd-gray-2: #e9ecef;
@@ -987,7 +995,7 @@
 }
 
 /* Slate Neutral */
-[data-neutral="slate"] {
+html[data-neutral="slate"] {
   --vd-gray-0: var(--vd-slate-0);
   --vd-gray-1: var(--vd-slate-1);
   --vd-gray-2: var(--vd-slate-2);
@@ -1001,7 +1009,7 @@
 }
 
 /* Zinc Neutral */
-[data-neutral="zinc"] {
+html[data-neutral="zinc"] {
   --vd-gray-0: var(--vd-zinc-0);
   --vd-gray-1: var(--vd-zinc-1);
   --vd-gray-2: var(--vd-zinc-2);
@@ -1015,7 +1023,7 @@
 }
 
 /* Neutral (true neutral) */
-[data-neutral="neutral"] {
+html[data-neutral="neutral"] {
   --vd-gray-0: var(--vd-neutral-0);
   --vd-gray-1: var(--vd-neutral-1);
   --vd-gray-2: var(--vd-neutral-2);
@@ -1029,7 +1037,7 @@
 }
 
 /* Stone Neutral */
-[data-neutral="stone"] {
+html[data-neutral="stone"] {
   --vd-gray-0: var(--vd-stone-0);
   --vd-gray-1: var(--vd-stone-1);
   --vd-gray-2: var(--vd-stone-2);

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/core/tokens.css

@@ -17,14 +17,14 @@
   --vd-color-primary-hover: var(--vd-primary-6);
   --vd-color-primary-active: var(--vd-primary-7);
   --vd-color-primary-rgb: 92, 124, 250;
-  --vd-color-primary-alpha-5: rgba(92, 124, 250, 0.05);
-  --vd-color-primary-alpha-08: rgba(92, 124, 250, 0.08);
-  --vd-color-primary-alpha-10: rgba(92, 124, 250, 0.1);
-  --vd-color-primary-alpha-15: rgba(92, 124, 250, 0.15);
-  --vd-color-primary-alpha-20: rgba(92, 124, 250, 0.2);
-  --vd-color-primary-alpha-30: rgba(92, 124, 250, 0.3);
-  --vd-color-primary-alpha-40: rgba(92, 124, 250, 0.4);
-  --vd-color-primary-alpha-50: rgba(92, 124, 250, 0.5);
+  --vd-color-primary-alpha-5: color-mix(in srgb, var(--vd-color-primary) 5%, transparent);
+  --vd-color-primary-alpha-08: color-mix(in srgb, var(--vd-color-primary) 8%, transparent);
+  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 10%, transparent);
+  --vd-color-primary-alpha-15: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);
+  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 20%, transparent);
+  --vd-color-primary-alpha-30: color-mix(in srgb, var(--vd-color-primary) 30%, transparent);
+  --vd-color-primary-alpha-40: color-mix(in srgb, var(--vd-color-primary) 40%, transparent);
+  --vd-color-primary-alpha-50: color-mix(in srgb, var(--vd-color-primary) 50%, transparent);
 
   /* Secondary Colors */
   --vd-color-secondary: var(--vd-secondary-5);
@@ -32,8 +32,8 @@
   --vd-color-secondary-dark: var(--vd-secondary-7);
   --vd-color-secondary-hover: var(--vd-secondary-6);
   --vd-color-secondary-active: var(--vd-secondary-7);
-  --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);
-  --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);
+  --vd-color-secondary-alpha-10: color-mix(in srgb, var(--vd-color-secondary) 10%, transparent);
+  --vd-color-secondary-alpha-20: color-mix(in srgb, var(--vd-color-secondary) 20%, transparent);
 
   /* Accent */
   --vd-color-accent: var(--vd-color-primary);
@@ -47,8 +47,8 @@
   --vd-color-success-hover: var(--vd-success-7);
   --vd-color-success-active: var(--vd-success-8);
   --vd-color-success-rgb: 64, 192, 87;
-  --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);
-  --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);
+  --vd-color-success-alpha-10: color-mix(in srgb, var(--vd-color-success) 10%, transparent);
+  --vd-color-success-alpha-20: color-mix(in srgb, var(--vd-color-success) 20%, transparent);
 
   --vd-color-warning: var(--vd-warning-6);
   --vd-color-warning-light: var(--vd-warning-4);
@@ -56,9 +56,9 @@
   --vd-color-warning-hover: var(--vd-warning-7);
   --vd-color-warning-active: var(--vd-warning-8);
   --vd-color-warning-rgb: 250, 176, 5;
-  --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);
-  --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);
-  --vd-color-warning-alpha-30: rgba(250, 176, 5, 0.3);
+  --vd-color-warning-alpha-10: color-mix(in srgb, var(--vd-color-warning) 10%, transparent);
+  --vd-color-warning-alpha-20: color-mix(in srgb, var(--vd-color-warning) 20%, transparent);
+  --vd-color-warning-alpha-30: color-mix(in srgb, var(--vd-color-warning) 30%, transparent);
 
   --vd-color-error: var(--vd-danger-6);
   --vd-color-error-light: var(--vd-danger-4);
@@ -66,8 +66,8 @@
   --vd-color-error-hover: var(--vd-danger-7);
   --vd-color-error-active: var(--vd-danger-8);
   --vd-color-error-rgb: 250, 82, 82;
-  --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);
-  --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);
+  --vd-color-error-alpha-10: color-mix(in srgb, var(--vd-color-error) 10%, transparent);
+  --vd-color-error-alpha-20: color-mix(in srgb, var(--vd-color-error) 20%, transparent);
 
   --vd-color-danger: var(--vd-color-error);
   --vd-color-danger-light: var(--vd-color-error-light);
@@ -83,8 +83,8 @@
   --vd-color-info-hover: var(--vd-info-7);
   --vd-color-info-active: var(--vd-info-8);
   --vd-color-info-rgb: 34, 139, 230;
-  --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);
-  --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);
+  --vd-color-info-alpha-10: color-mix(in srgb, var(--vd-color-info) 10%, transparent);
+  --vd-color-info-alpha-20: color-mix(in srgb, var(--vd-color-info) 20%, transparent);
 
   /* Neutral Colors (Open Color) */
   --vd-color-white: #ffffff;

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

@@ -6,8 +6,14 @@
 /* Layer 0: Reset */
 @import url('core/reset.css');
 
-/* Layer 1: Foundation (vd-prefixed palette and canonical tokens) */
+/* Layer 1: Foundation (vd-prefixed palette and canonical tokens)
+   Palette layering (generated by @vanduo-oss/core):
+     colors-fib-base.css  raw namespaced scales (--vd-oc-* / --vd-fib-*)  [before]
+     colors.css           legacy literals, semantics, theming, hue remaps
+     colors-palette.css   active scales + [data-palette] switch (Fibonacci default) [after] */
+@import url('core/colors-fib-base.css');
 @import url('core/colors.css');
+@import url('core/colors-palette.css');
 @import url('core/fonts.css');
 @import url('core/typography.css');
 @import url('core/tokens.css');
@@ -36,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');
@@ -66,6 +75,7 @@
 @import url('components/draggable.css');
 @import url('components/flow.css');
 @import url('components/bubble.css');
+@import url('components/popover.css');
 @import url('components/waypoint.css');
 @import url('components/ripple.css');
 @import url('components/fab.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.5.1",
-  "builtAt": "2026-06-20T15:00:18.257Z",
-  "commit": "baf8178",
+  "version": "1.7.0",
+  "builtAt": "2026-06-29T06:28:14.462Z",
+  "commit": "c12c685",
   "mode": "development+production"
 }