@vanduo-oss/framework 1.3.3 → 1.3.4

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.3.3
+# Vanduo Framework v1.3.4
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -38,6 +38,16 @@ A lightweight, pure HTML/CSS/JS framework with **46+ components** for designing
 
 ---
 
+## What's New in v1.3.4
+
+v1.3.4 introduces the Glass Effects system — no breaking changes:
+
+- **New `effects/glass.css` module.** Core `.vd-glass` class with `backdrop-filter` blur, translucent background, specular highlight, and noise texture. Size variants (`vd-glass-sm / md / lg / xl`), modifiers (`vd-glass-tinted`, `vd-glass-floating`, `vd-glass-contrast`), and full `prefers-reduced-transparency` / `@supports not (backdrop-filter)` fallbacks.
+- **Glass design tokens.** `--vd-glass-blur`, `--vd-glass-saturate`, `--vd-glass-bg-opacity`, `--vd-glass-bg-light/dark`, `--vd-glass-border-light/dark`, `--vd-glass-shadow`, `--vd-glass-highlight-alpha`, `--vd-glass-noise-opacity` — all with automatic dark-mode overrides and `--vd-glass-*` aliases.
+- **Component glass variants.** Opt-in `.vd-*-glass` modifier added to Navbar, Modal, Dropdown, Tooltip, Toast, Card, and FAB.
+- **Scroll-activated glass.** `initScrollWatcher()` in `navbar.js` activates `.vd-navbar-glass` transparently at rest and frosted on scroll (configurable via `data-scroll-threshold`). Generic `data-glass-scroll` + `data-glass-sentinel` attribute API (new `glass.js`, `IntersectionObserver`) brings the same pattern to any element via `.is-glass-active`.
+- **vd-hex selection fix.** `VdHexGrid` re-syncs `selectedHex` references after grid regeneration, preventing stale coordinates during rotation.
+
 ## What's New in v1.3.3
 
 v1.3.3 is a maintenance release with no breaking changes:
@@ -98,8 +108,8 @@ The quickest way to get started — no install, no build step. Add two lines to
 
 **Pin to a specific version** for production:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.3/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.3/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.4/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.4/dist/vanduo.min.js"></script>
 <script>Vanduo.init();</script>
 ```
 
@@ -162,7 +172,7 @@ This project includes an [`llms.txt`](llms.txt) file — a structured markdown s
 Use the hardened upload script to attach only approved bundle artifacts from `dist/`:
 
 ```bash
-pnpm run release:assets -- v1.3.3
+pnpm run release:assets -- v1.3.4
 ```
 
 Notes:

package/css/components/cards.css

@@ -63,6 +63,14 @@
   box-shadow: var(--card-shadow);
 }
 
+.vd-card-glass {
+  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));
+}
+
 /* Card Variants - Elevated (default) */
 .vd-card-elevated,
 .vd-card {

package/css/components/dropdown.css

@@ -96,6 +96,14 @@
               transform var(--transition-duration-base) var(--transition-ease);
 }
 
+.vd-dropdown-glass .vd-dropdown-menu {
+  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));
+}
+
 .vd-dropdown-menu.is-open {
   display: block;
   opacity: 1;

package/css/components/fab.css

@@ -56,12 +56,26 @@
   transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
+.vd-fab-glass {
+  background: var(--vd-glass-bg-light);
+  color: var(--text-primary);
+  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));
+}
+
 .vd-fab:hover {
   background: var(--fab-hover-bg);
   box-shadow: var(--fab-hover-shadow);
   transform: scale(1.05);
 }
 
+.vd-fab-glass:hover {
+  background: var(--vd-glass-bg-light);
+  box-shadow: var(--vd-glass-float-shadow, var(--vd-glass-shadow));
+}
+
 .vd-fab:active {
   transform: scale(0.95);
 }

package/css/components/modals.css

@@ -55,6 +55,11 @@
   pointer-events: none;
 }
 
+.vd-modal-backdrop.vd-modal-glass-backdrop {
+  backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));
+  -webkit-backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));
+}
+
 .vd-modal-backdrop.is-visible {
   opacity: 1;
   pointer-events: all;
@@ -114,6 +119,14 @@
   outline: 0;
 }
 
+.vd-modal-glass .vd-modal-content {
+  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));
+}
+
 /* Modal Header */
 .vd-modal-header {
   display: flex;

package/css/components/navbar.css

@@ -59,6 +59,29 @@
   min-height: var(--navbar-height);
 }
 
+/* Navbar Variant - Glass */
+.vd-navbar-glass {
+  background: var(--vd-glass-bg-light);
+  border-bottom: 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));
+  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);
+}
+
+/* Scroll-activated: transparent at rest, frosted glass once scrolled */
+.vd-navbar-glass:not(.vd-navbar-scrolled) {
+  background: transparent;
+  border-bottom-color: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 /* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */
 .vd-navbar-container {
   display: flex;
@@ -459,6 +482,13 @@
     z-index: 1000;
     overflow-y: auto;
   }
+
+  .vd-navbar-glass .vd-navbar-menu {
+    background: var(--vd-glass-bg-light);
+    border-left: 1px solid var(--vd-glass-border-light);
+    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));
+  }
   
   .vd-navbar-menu.is-open {
     right: 0;

package/css/components/toast.css

@@ -101,6 +101,14 @@
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
+.vd-toast-glass {
+  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));
+}
+
 /* Toast Visible State */
 .vd-toast.is-visible {
   opacity: 1;

package/css/components/tooltips.css

@@ -78,6 +78,15 @@
   transition: opacity var(--transition-duration-base) var(--transition-ease);
 }
 
+.vd-tooltip-glass {
+  background: var(--vd-glass-bg-light);
+  border: 1px solid var(--vd-glass-border-light);
+  box-shadow: var(--vd-glass-shadow);
+  color: var(--text-primary);
+  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));
+}
+
 .vd-tooltip.is-visible {
   opacity: 1;
 }
@@ -151,6 +160,26 @@
   border-color: transparent var(--tooltip-bg) transparent transparent;
 }
 
+.vd-tooltip-glass.vd-tooltip-top::before,
+.vd-tooltip-glass[data-placement="top"]::before {
+  border-color: var(--vd-glass-bg-light) transparent transparent;
+}
+
+.vd-tooltip-glass.vd-tooltip-bottom::before,
+.vd-tooltip-glass[data-placement="bottom"]::before {
+  border-color: transparent transparent var(--vd-glass-bg-light);
+}
+
+.vd-tooltip-glass.vd-tooltip-left::before,
+.vd-tooltip-glass[data-placement="left"]::before {
+  border-color: transparent transparent transparent var(--vd-glass-bg-light);
+}
+
+.vd-tooltip-glass.vd-tooltip-right::before,
+.vd-tooltip-glass[data-placement="right"]::before {
+  border-color: transparent var(--vd-glass-bg-light) transparent transparent;
+}
+
 /* Tooltip Variants - Light */
 .vd-tooltip-light {
   background-color: var(--tooltip-bg-light);

package/css/core/tokens.css

@@ -142,6 +142,33 @@
   --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --vd-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
 
+  /* ============================================
+   * GLASS TOKENS
+   * ============================================ */
+  --glass-blur: 12px;
+  --glass-saturate: 1.8;
+  --glass-bg-opacity: 0.65;
+  --glass-bg-light: rgba(255, 255, 255, var(--glass-bg-opacity));
+  --glass-bg-dark: rgba(30, 30, 30, var(--glass-bg-opacity));
+  --glass-border-alpha: 0.18;
+  --glass-border-light: rgba(255, 255, 255, var(--glass-border-alpha));
+  --glass-border-dark: rgba(255, 255, 255, 0.08);
+  --glass-highlight-alpha: 0.25;
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --glass-noise-opacity: 0.03;
+
+  --vd-glass-blur: var(--glass-blur);
+  --vd-glass-saturate: var(--glass-saturate);
+  --vd-glass-bg-opacity: var(--glass-bg-opacity);
+  --vd-glass-bg-light: var(--glass-bg-light);
+  --vd-glass-bg-dark: var(--glass-bg-dark);
+  --vd-glass-border-alpha: var(--glass-border-alpha);
+  --vd-glass-border-light: var(--glass-border-light);
+  --vd-glass-border-dark: var(--glass-border-dark);
+  --vd-glass-highlight-alpha: var(--glass-highlight-alpha);
+  --vd-glass-shadow: var(--glass-shadow);
+  --vd-glass-noise-opacity: var(--glass-noise-opacity);
+
   /* ============================================
    * TRANSITION TOKENS
    * ============================================ */
@@ -190,6 +217,11 @@
   --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
   --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+  --glass-bg-light: var(--glass-bg-dark);
+  --glass-border-light: var(--glass-border-dark);
+  --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+  --glass-highlight-alpha: 0.16;
 }
 
 /* Dark mode via prefers-color-scheme */
@@ -209,5 +241,10 @@
     --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
     --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
     --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+    --glass-bg-light: var(--glass-bg-dark);
+    --glass-border-light: var(--glass-border-dark);
+    --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+    --glass-highlight-alpha: 0.16;
   }
 }

package/css/core/vd-aliases.css

@@ -33,6 +33,19 @@
   --vd-shadow-md: var(--shadow-md);
   --vd-shadow-lg: var(--shadow-lg);
 
+  /* Glass */
+  --vd-glass-blur: var(--glass-blur, 12px);
+  --vd-glass-saturate: var(--glass-saturate, 1.8);
+  --vd-glass-bg-opacity: var(--glass-bg-opacity, 0.65);
+  --vd-glass-bg-light: var(--glass-bg-light, rgba(255, 255, 255, var(--vd-glass-bg-opacity)));
+  --vd-glass-bg-dark: var(--glass-bg-dark, rgba(30, 30, 30, var(--vd-glass-bg-opacity)));
+  --vd-glass-border-alpha: var(--glass-border-alpha, 0.18);
+  --vd-glass-border-light: var(--glass-border-light, rgba(255, 255, 255, var(--vd-glass-border-alpha)));
+  --vd-glass-border-dark: var(--glass-border-dark, rgba(255, 255, 255, 0.08));
+  --vd-glass-highlight-alpha: var(--glass-highlight-alpha, 0.25);
+  --vd-glass-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  --vd-glass-noise-opacity: var(--glass-noise-opacity, 0.03);
+
   /* Typography */
   --vd-font-family-base: var(--font-family-sans);
   --vd-font-family-mono: var(--font-family-mono);

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/vanduo.css

@@ -75,6 +75,7 @@
 
 /* Effects - Phase 7 */
 @import url('effects/parallax.css');
+@import url('effects/glass.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.4",
+  "builtAt": "2026-04-14T21:21:55.517Z",
+  "commit": "73e3db5",
   "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.4 | Built: 2026-04-14T21:21:55.517Z | git:73e3db5 | 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.4" : "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,67 @@ 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/flow.js
 (function() {
   "use strict";