@vanduo-oss/framework 1.3.3 → 1.3.5

package/css/effects/glass.css

@@ -0,0 +1,154 @@
+/**
+ * Vanduo Framework - Glass Effects
+ * Frosted glass utility surfaces and modifiers
+ */
+
+:root {
+  --vd-glass-float-shadow: 0 14px 42px rgba(0, 0, 0, 0.2);
+  --vd-glass-float-translate-y: -2px;
+}
+
+.vd-glass,
+.vd-glass-md {
+  position: relative;
+  overflow: hidden;
+  background: var(--vd-glass-bg-light);
+  border: 1px solid 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));
+  isolation: isolate;
+}
+
+.vd-glass::before,
+.vd-glass-md::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, var(--vd-glass-highlight-alpha)) 0%,
+    rgba(255, 255, 255, 0) 45%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+.vd-glass::after,
+.vd-glass-md::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
+  opacity: var(--vd-glass-noise-opacity);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.vd-glass > *,
+.vd-glass-md > * {
+  position: relative;
+  z-index: 3;
+}
+
+.vd-glass-sm {
+  --vd-glass-blur: 6px;
+  --vd-glass-saturate: 1.4;
+  --vd-glass-bg-opacity: 0.55;
+}
+
+.vd-glass-lg {
+  --vd-glass-blur: 20px;
+  --vd-glass-saturate: 2;
+  --vd-glass-bg-opacity: 0.72;
+}
+
+.vd-glass-xl {
+  --vd-glass-blur: 28px;
+  --vd-glass-saturate: 2.2;
+  --vd-glass-bg-opacity: 0.78;
+}
+
+.vd-glass-tinted {
+  background: linear-gradient(
+      135deg,
+      var(--vd-glass-tint, var(--vd-color-primary-alpha-10)) 0%,
+      transparent 70%
+    ),
+    var(--vd-glass-bg-light);
+}
+
+.vd-glass-floating {
+  transition: transform var(--vd-transition-normal), box-shadow var(--vd-transition-normal);
+}
+
+.vd-glass-floating:hover,
+.vd-glass-floating:focus-within {
+  transform: translateY(var(--vd-glass-float-translate-y));
+  box-shadow: var(--vd-glass-float-shadow);
+}
+
+.vd-glass-contrast {
+  --vd-glass-bg-opacity: 0.82;
+  --vd-glass-border-alpha: 0.26;
+}
+
+/* Scroll-activated glass: inactive until .is-glass-active is set by glass.js */
+[data-glass-scroll] {
+  transition:
+    background var(--vd-transition-normal, 0.25s ease),
+    border-color var(--vd-transition-normal, 0.25s ease),
+    box-shadow var(--vd-transition-normal, 0.25s ease),
+    backdrop-filter var(--vd-transition-normal, 0.25s ease);
+}
+
+[data-glass-scroll]:not(.is-glass-active) {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+[data-glass-scroll]:not(.is-glass-active)::before,
+[data-glass-scroll]:not(.is-glass-active)::after {
+  opacity: 0;
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .vd-glass,
+  .vd-glass-md {
+    background: var(--vd-bg-primary);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .vd-glass,
+  .vd-glass-sm,
+  .vd-glass-md,
+  .vd-glass-lg,
+  .vd-glass-xl {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--vd-bg-primary);
+    border-color: var(--vd-border-color);
+  }
+
+  .vd-glass::before,
+  .vd-glass::after,
+  .vd-glass-md::before,
+  .vd-glass-md::after {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-glass-floating {
+    transition: none;
+  }
+
+  .vd-glass-floating:hover,
+  .vd-glass-floating:focus-within {
+    transform: none;
+  }
+}

package/css/effects/morph.css

@@ -0,0 +1,259 @@
+/**
+ * Vanduo Framework - Water Morph Effect
+ * Liquid wave content-swap animation on click
+ *
+ * Usage:
+ *   Add `.vd-morph` (or `data-vd-morph`) to any element.
+ *   Inside it, place:
+ *     .vd-morph-wave     — radial wave layer (auto-created by JS if missing)
+ *     .vd-morph-shine    — light-sweep layer (auto-created by JS if missing)
+ *     .vd-morph-content.vd-morph-current — visible state
+ *     .vd-morph-content.vd-morph-next    — hidden next state
+ */
+
+:root {
+  --morph-duration: 0.75s;
+  --morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1);
+  --morph-blur-peak: 11px;
+  --morph-wave-color: var(--color-primary, #3b82f6);
+}
+
+/* ========== Base ========== */
+
+.vd-morph,
+[data-vd-morph] {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ========== Wave Layer ========== */
+
+.vd-morph-wave {
+  position: absolute;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 32% 28%,
+      color-mix(in srgb, #fff 55%, transparent) 0%,
+      color-mix(in srgb, #fff 18%, transparent) 18%,
+      transparent 38%),
+    radial-gradient(circle at 68% 70%,
+      color-mix(in srgb, #fff 30%, transparent) 0%,
+      transparent 30%),
+    radial-gradient(circle at 50% 50%,
+      color-mix(in srgb, var(--morph-wave-color) 96%, #a8d8ff) 0%,
+      color-mix(in srgb, var(--morph-wave-color) 82%, #7ec8ff) 35%,
+      color-mix(in srgb, var(--morph-wave-color) 70%, #5ba4f5) 65%,
+      color-mix(in srgb, var(--morph-wave-color) 90%, #4478f0) 100%);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  will-change: width, height, opacity, filter;
+}
+
+.vd-morph.is-morphing .vd-morph-wave {
+  animation: vd-morph-expand var(--morph-duration) var(--morph-easing) forwards;
+}
+
+.vd-morph.is-morphing .vd-morph-wave::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%,
+      color-mix(in srgb, var(--morph-wave-color) 70%, #b0e0ff) 0%,
+      color-mix(in srgb, var(--morph-wave-color) 50%, #88c0ff) 45%,
+      transparent 80%);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  animation: vd-morph-expand2 var(--morph-duration) var(--morph-easing) 0.08s forwards;
+}
+
+@keyframes vd-morph-expand {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    filter: blur(0px) saturate(2);
+  }
+  6% {
+    opacity: 1;
+    filter: blur(1px) saturate(2.2);
+  }
+  35% {
+    opacity: 0.92;
+    filter: blur(6px) saturate(1.7);
+  }
+  68% {
+    width: 360%;
+    height: 360%;
+    opacity: 0.6;
+    filter: blur(var(--morph-blur-peak)) saturate(1.3);
+  }
+  100% {
+    width: 360%;
+    height: 360%;
+    opacity: 0;
+    filter: blur(7px) saturate(1);
+  }
+}
+
+@keyframes vd-morph-expand2 {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    filter: blur(0px);
+  }
+  10% {
+    opacity: 0.7;
+    filter: blur(3px);
+  }
+  60% {
+    width: 280%;
+    height: 280%;
+    opacity: 0.38;
+    filter: blur(14px);
+  }
+  100% {
+    width: 280%;
+    height: 280%;
+    opacity: 0;
+    filter: blur(10px);
+  }
+}
+
+/* ========== Shine Sweep ========== */
+
+.vd-morph-shine {
+  position: absolute;
+  top: 0;
+  left: -110%;
+  width: 80%;
+  height: 100%;
+  background: linear-gradient(
+    105deg,
+    transparent 0%,
+    color-mix(in srgb, #fff 10%, transparent) 35%,
+    color-mix(in srgb, #fff 52%, transparent) 50%,
+    color-mix(in srgb, #fff 10%, transparent) 65%,
+    transparent 100%
+  );
+  pointer-events: none;
+  opacity: 0;
+  transform: skewX(-12deg);
+  will-change: left, opacity;
+}
+
+.vd-morph.is-morphing .vd-morph-shine {
+  animation: vd-morph-shine 0.72s cubic-bezier(0.3, 0.65, 0.5, 1) 0.04s forwards;
+}
+
+@keyframes vd-morph-shine {
+  0% {
+    left: -110%;
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.9;
+  }
+  72% {
+    opacity: 0.4;
+  }
+  100% {
+    left: 130%;
+    opacity: 0;
+  }
+}
+
+/* ========== Completion Bounce ========== */
+
+.vd-morph.morph-done {
+  animation: vd-morph-bounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes vd-morph-bounce {
+  0%   { transform: scale(0.97); }
+  60%  { transform: scale(1.025); }
+  100% { transform: scale(1); }
+}
+
+/* ========== Content Layers ========== */
+
+.vd-morph-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  pointer-events: none;
+  will-change: opacity, transform, filter;
+}
+
+.vd-morph-current {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  filter: blur(0px);
+  z-index: 2;
+  transition:
+    opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1),
+    transform 0.28s cubic-bezier(0.4, 0, 0.6, 1),
+    filter 0.28s ease;
+}
+
+.vd-morph-next {
+  opacity: 0;
+  transform: scale(0.86) translateY(4px);
+  filter: blur(3px);
+  z-index: 1;
+  transition:
+    opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0, 0, 0.2, 1),
+    filter 0.3s ease;
+}
+
+.vd-morph.is-morphing .vd-morph-current {
+  opacity: 0;
+  transform: scale(0.82) translateY(-4px);
+  filter: blur(4px);
+  transition-duration: 0.2s;
+  transition-delay: 0s;
+}
+
+.vd-morph.is-morphing .vd-morph-next {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  filter: blur(0px);
+  transition-duration: 0.3s;
+  transition-delay: 0.25s;
+}
+
+/* ========== Size Variants ========== */
+
+.vd-morph-sm {
+  --morph-duration: 0.5s;
+  --morph-blur-peak: 7px;
+}
+
+.vd-morph-lg {
+  --morph-duration: 1s;
+  --morph-blur-peak: 16px;
+}
+
+/* ========== Accessibility ========== */
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-morph,
+  .vd-morph-content,
+  .vd-morph-wave,
+  .vd-morph-shine {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/css/vanduo.css

@@ -75,6 +75,8 @@
 
 /* Effects - Phase 7 */
 @import url('effects/parallax.css');
+@import url('effects/glass.css');
+@import url('effects/morph.css');
 
 /* Components - Phase 9 (New) */
 @import url('components/draggable.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.3.3",
-  "builtAt": "2026-04-10T21:45:12.664Z",
-  "commit": "281f4f6",
+  "version": "1.3.5",
+  "builtAt": "2026-04-15T18:39:53.955Z",
+  "commit": "3ca4f62",
   "mode": "development+production"
 }

package/dist/vanduo.cjs.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.3.3 | Built: 2026-04-10T21:45:12.664Z | git:281f4f6 | development */
+/*! Vanduo v1.3.5 | Built: 2026-04-15T18:39:53.955Z | git:3ca4f62 | development */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -132,7 +132,7 @@ module.exports = __toCommonJS(index_exports);
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.3.3" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.3.5" : "0.0.0-dev";
   const Vanduo2 = {
     version: VANDUO_VERSION,
     components: {},
@@ -2182,6 +2182,31 @@ module.exports = __toCommonJS(index_exports);
         this.initNavbar(navbar);
       });
     },
+    /**
+     * Initialize scroll-aware glass/transparent behaviour for a navbar.
+     * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.
+     * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.
+     * @param {HTMLElement} navbar - Navbar element
+     * @returns {Function|null} Cleanup function, or null if not applicable
+     */
+    initScrollWatcher: function(navbar) {
+      const isGlass = navbar.classList.contains("vd-navbar-glass");
+      const isTransparent = navbar.classList.contains("vd-navbar-transparent");
+      if (!isGlass && !isTransparent) {
+        return null;
+      }
+      const getThreshold = () => {
+        const attr = parseInt(navbar.dataset.scrollThreshold, 10);
+        return isNaN(attr) ? navbar.offsetHeight || 60 : attr;
+      };
+      const onScroll = () => {
+        const scrolled = window.scrollY > getThreshold();
+        navbar.classList.toggle("vd-navbar-scrolled", scrolled);
+      };
+      onScroll();
+      window.addEventListener("scroll", onScroll, { passive: true });
+      return () => window.removeEventListener("scroll", onScroll);
+    },
     /**
      * Initialize a single navbar
      * @param {HTMLElement} navbar - Navbar element
@@ -2190,10 +2215,17 @@ module.exports = __toCommonJS(index_exports);
       const toggle = navbar.querySelector(".vd-navbar-toggle, .vd-navbar-burger");
       const menu = navbar.querySelector(".vd-navbar-menu");
       const overlay = navbar.querySelector(".vd-navbar-overlay") || this.createOverlay(navbar);
+      const cleanupFunctions = [];
+      const scrollWatcherCleanup = this.initScrollWatcher(navbar);
+      if (scrollWatcherCleanup) {
+        cleanupFunctions.push(scrollWatcherCleanup);
+      }
       if (!toggle || !menu) {
+        if (cleanupFunctions.length) {
+          this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });
+        }
         return;
       }
-      const cleanupFunctions = [];
       const toggleClickHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -6504,6 +6536,178 @@ module.exports = __toCommonJS(index_exports);
   window.VanduoLazyLoad = VanduoLazyLoad;
 })();
 
+// js/components/glass.js
+(function() {
+  "use strict";
+  const GlassScroll = {
+    /** @type {Map<Element, IntersectionObserver>} */
+    observers: /* @__PURE__ */ new Map(),
+    init: function() {
+      document.querySelectorAll("[data-glass-scroll]").forEach((el) => {
+        if (this.observers.has(el)) return;
+        this.initElement(el);
+      });
+    },
+    /**
+     * Wire up a single scroll-activated glass element.
+     * @param {HTMLElement} el
+     */
+    initElement: function(el) {
+      const sentinelSelector = el.dataset.glassSentinel;
+      let sentinel;
+      if (sentinelSelector) {
+        sentinel = document.querySelector(sentinelSelector);
+      }
+      if (!sentinel) {
+        sentinel = el.previousElementSibling;
+      }
+      if (!sentinel) {
+        el.classList.add("is-glass-active");
+        return;
+      }
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            el.classList.toggle("is-glass-active", !entry.isIntersecting);
+          });
+        },
+        { threshold: 0, rootMargin: "0px" }
+      );
+      observer.observe(sentinel);
+      this.observers.set(el, observer);
+    },
+    /**
+     * Disconnect and remove a single element's observer.
+     * @param {HTMLElement} el
+     */
+    destroy: function(el) {
+      const observer = this.observers.get(el);
+      if (observer) {
+        observer.disconnect();
+        this.observers.delete(el);
+      }
+    },
+    destroyAll: function() {
+      this.observers.forEach((observer, el) => this.destroy(el));
+    }
+  };
+  if (typeof window.Vanduo !== "undefined") {
+    window.Vanduo.register("glassScroll", GlassScroll);
+  }
+  window.VanduoGlassScroll = GlassScroll;
+})();
+
+// js/components/morph.js
+(function() {
+  "use strict";
+  const MORPH_DURATION_MS = 750;
+  const Morph = {
+    instances: /* @__PURE__ */ new Map(),
+    init: function() {
+      const elements = document.querySelectorAll(".vd-morph, [data-vd-morph]");
+      elements.forEach(function(el) {
+        if (Morph.instances.has(el)) return;
+        if (el.getAttribute("data-vd-morph") === "manual") return;
+        Morph.initInstance(el);
+      });
+    },
+    initInstance: function(el) {
+      Morph._ensureLayers(el);
+      const cleanup = [];
+      let morphing = false;
+      const handleClick = function(e) {
+        if (morphing) return;
+        Morph._runMorph(el, e, function() {
+          morphing = false;
+        });
+        morphing = true;
+      };
+      el.addEventListener("click", handleClick);
+      cleanup.push(function() {
+        el.removeEventListener("click", handleClick);
+      });
+      this.instances.set(el, { cleanup });
+    },
+    morph: function(el) {
+      if (!el) return;
+      if (!this.instances.has(el)) this.initInstance(el);
+      this._runMorph(el, null, null);
+    },
+    destroy: function(el) {
+      const instance = this.instances.get(el);
+      if (!instance) return;
+      instance.cleanup.forEach(function(fn) {
+        fn();
+      });
+      this.instances.delete(el);
+    },
+    destroyAll: function() {
+      this.instances.forEach(function(_, el) {
+        Morph.destroy(el);
+      });
+    },
+    /* ── Internal helpers ── */
+    _ensureLayers: function(el) {
+      if (!el.querySelector(".vd-morph-wave")) {
+        const wave = document.createElement("span");
+        wave.className = "vd-morph-wave";
+        wave.setAttribute("aria-hidden", "true");
+        el.insertBefore(wave, el.firstChild);
+      }
+      if (!el.querySelector(".vd-morph-shine")) {
+        const shine = document.createElement("span");
+        shine.className = "vd-morph-shine";
+        shine.setAttribute("aria-hidden", "true");
+        const waveEl = el.querySelector(".vd-morph-wave");
+        if (waveEl && waveEl.nextSibling) {
+          el.insertBefore(shine, waveEl.nextSibling);
+        } else {
+          el.insertBefore(shine, el.firstChild);
+        }
+      }
+    },
+    _runMorph: function(el, pointerEvent, onComplete) {
+      const wave = el.querySelector(".vd-morph-wave");
+      if (wave) {
+        const rect = el.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const px = pointerEvent ? pointerEvent.clientX || cx : cx;
+        const py = pointerEvent ? pointerEvent.clientY || cy : cy;
+        wave.style.left = px - rect.left + "px";
+        wave.style.top = py - rect.top + "px";
+      }
+      el.classList.add("is-morphing");
+      let duration = MORPH_DURATION_MS;
+      const custom = getComputedStyle(el).getPropertyValue("--morph-duration");
+      if (custom) {
+        const parsed = parseFloat(custom);
+        if (!isNaN(parsed)) duration = parsed * (custom.indexOf("ms") !== -1 ? 1 : 1e3);
+      }
+      setTimeout(function() {
+        el.classList.remove("is-morphing");
+        const current = el.querySelector(".vd-morph-current");
+        const next = el.querySelector(".vd-morph-next");
+        if (current && next) {
+          current.classList.remove("vd-morph-current");
+          current.classList.add("vd-morph-next");
+          next.classList.remove("vd-morph-next");
+          next.classList.add("vd-morph-current");
+        }
+        el.classList.add("morph-done");
+        setTimeout(function() {
+          el.classList.remove("morph-done");
+        }, 350);
+        if (typeof onComplete === "function") onComplete();
+      }, duration);
+    }
+  };
+  if (typeof window.Vanduo !== "undefined") {
+    window.Vanduo.register("morph", Morph);
+  }
+  window.VanduoMorph = Morph;
+})();
+
 // js/components/flow.js
 (function() {
   "use strict";