@ulu/frontend-vue 0.5.14 → 0.5.16

package/dist/components/systems/scroll-anchors/UluScrollAnchors.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchors.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchors.vue"],"names":[],"mappings":"AAKA;wBAqLqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;mBAUG"}
+{"version":3,"file":"UluScrollAnchors.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchors.vue"],"names":[],"mappings":"AAKA;wBAqMqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;mBAUG"}

package/dist/components/systems/scroll-anchors/UluScrollAnchors.vue.js

@@ -1,4 +1,4 @@
-import { ref as s, provide as n, computed as p, createElementBlock as f, openBlock as m, renderSlot as d } from "vue";
+import { ref as s, provide as l, computed as p, createElementBlock as f, openBlock as m, renderSlot as d } from "vue";
 import { useScrollAnchors as h } from "./useScrollAnchors.js";
 const A = {
   __name: "UluScrollAnchors",
@@ -33,20 +33,28 @@ const A = {
     /**
      * Enable debug logging for the IntersectionObserver
      */
-    debug: Boolean
+    debug: Boolean,
+    /**
+     * If true, the last section will deactivate when scrolling past its bounding box.
+     * By default, the last section remains active until the user scrolls back up.
+     */
+    deactivateLastItem: {
+      type: Boolean,
+      default: !1
+    }
   },
   emits: ["section-change"],
-  setup(r, { emit: c }) {
-    const u = r, a = c, e = s([]), t = s(null);
-    return h({ sections: e, props: u, emit: a, componentElRef: t }), n("uluScrollAnchorsSections", p(() => e.value)), n("uluScrollAnchorsRegister", (o) => {
+  setup(c, { emit: r }) {
+    const a = c, u = r, e = s([]), n = s(null);
+    return h({ sections: e, props: a, emit: u, componentElRef: n }), l("uluScrollAnchorsSections", p(() => e.value)), l("uluScrollAnchorsRegister", (o) => {
       e.value.push(o);
-    }), n("uluScrollAnchorsUnregister", (o) => {
-      const l = e.value.findIndex((i) => i.id === o);
-      l > -1 && e.value.splice(l, 1);
-    }), (o, l) => (m(), f("div", {
+    }), l("uluScrollAnchorsUnregister", (o) => {
+      const t = e.value.findIndex((i) => i.id === o);
+      t > -1 && e.value.splice(t, 1);
+    }), (o, t) => (m(), f("div", {
       class: "scroll-anchors",
       ref_key: "componentEl",
-      ref: t
+      ref: n
     }, [
       d(o.$slots, "default")
     ], 512));

package/dist/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue.d.ts

@@ -6,6 +6,9 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     element: string;
     railWidth: number;
+    trimRailToCenters: boolean;
+    railStartOffset: number;
+    railEndOffset: number;
     indicatorWidth: number;
     indicatorHeight: number;
     indicatorAlignment: string;
@@ -13,13 +16,16 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     $props: {
         readonly element?: string | undefined;
         readonly railWidth?: number | undefined;
+        readonly trimRailToCenters?: boolean | undefined;
+        readonly railStartOffset?: number | undefined;
+        readonly railEndOffset?: number | undefined;
         readonly indicatorWidth?: number | undefined;
         readonly indicatorHeight?: number | undefined;
         readonly indicatorAlignment?: string | undefined;
         readonly indicatorAlignmentOffset?: number | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    indicator: HTMLDivElement;
+    listRef: HTMLUListElement;
 }, any>;
 type __VLS_TemplateResult = {
     attrs: Partial<{}>;
@@ -30,7 +36,7 @@ type __VLS_TemplateResult = {
         }): any;
     };
     refs: {
-        indicator: HTMLDivElement;
+        listRef: HTMLUListElement;
     };
     rootEl: any;
 };

package/dist/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":"AAsCA;wBA4UqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;QAQG"}
+{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":"AAqCA;wBA4eqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;QAQG"}

package/dist/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue.js

@@ -1,7 +1,7 @@
-import { ref as d, computed as N, watch as w, createBlock as $, createCommentVNode as W, unref as f, openBlock as h, resolveDynamicComponent as b, normalizeStyle as _, withCtx as C, createElementVNode as m, createElementBlock as g, Fragment as H, renderList as B, normalizeClass as v, renderSlot as I, createTextVNode as R, toDisplayString as V } from "vue";
-import { runAfterFramePaint as z } from "@ulu/utils/browser/performance.js";
-import { useScrollAnchorSections as D } from "./useScrollAnchorSections.js";
-const E = { class: "scroll-anchors-nav-animated__rail" }, F = ["href"], P = {
+import { ref as c, onMounted as $, onBeforeUnmount as w, computed as N, watch as C, createBlock as z, createCommentVNode as B, unref as p, openBlock as y, resolveDynamicComponent as M, normalizeStyle as g, withCtx as T, createElementVNode as _, createElementBlock as k, Fragment as W, renderList as E, normalizeClass as S, renderSlot as H, createTextVNode as I, toDisplayString as V } from "vue";
+import { runAfterFramePaint as D } from "@ulu/utils/browser/performance.js";
+import { useScrollAnchorSections as F } from "./useScrollAnchorSections.js";
+const L = ["href"], j = {
   __name: "UluScrollAnchorsNavAnimated",
   props: {
     /**
@@ -18,6 +18,26 @@ const E = { class: "scroll-anchors-nav-animated__rail" }, F = ["href"], P = {
       type: Number,
       default: 3
     },
+    /**
+     * Dynamically trims the rail to span exactly from the center of the first indicator to the center of the last indicator. Disabled by default
+     */
+    trimRailToCenters: {
+      type: Boolean
+    },
+    /**
+     * Pixel offset for the start (top) of the dynamic rail.
+     */
+    railStartOffset: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Pixel offset for the end (bottom) of the dynamic rail.
+     */
+    railEndOffset: {
+      type: Number,
+      default: 0
+    },
     /**
      * The width of the indicator, defaults to railWidth
      */
@@ -48,71 +68,96 @@ const E = { class: "scroll-anchors-nav-animated__rail" }, F = ["href"], P = {
       default: 0
     }
   },
-  setup(o) {
-    const i = o, n = D(), p = d({}), c = d(!1), S = d(null), e = N(() => {
-      if (!n || !n.value || !n.value.length)
-        return !1;
-      const t = n.value.findIndex((x) => x.active);
-      if (t === -1)
+  setup(u) {
+    const l = u, a = F(), f = c(null), x = c({}), d = c(!1), h = c(0);
+    let s = null;
+    $(() => {
+      f.value && (s = new ResizeObserver(() => {
+        h.value++;
+      }), s.observe(f.value));
+    }), w(() => {
+      s && (s.disconnect(), s = null);
+    });
+    function v(e) {
+      const t = x.value[e];
+      if (!t) return null;
+      const { offsetTop: n, offsetHeight: r } = t, o = l.indicatorHeight != null, R = l.indicatorWidth ?? l.railWidth, b = o ? l.indicatorHeight : r;
+      let m = n;
+      return l.indicatorAlignment === "center" && (m = n + r / 2 - b / 2), m += l.indicatorAlignmentOffset, { y: m, height: b, width: R };
+    }
+    const i = N(() => {
+      if (h.value, !a || !a.value || !a.value.length)
         return !1;
-      const l = p.value[t];
-      if (!l) return !1;
-      const { offsetTop: a, offsetHeight: r } = l, s = i.indicatorHeight != null, A = i.indicatorWidth ?? i.railWidth, y = s ? i.indicatorHeight : r;
-      let u = a;
-      return i.indicatorAlignment === "center" && (u = a + r / 2 - y / 2), u += i.indicatorAlignmentOffset, { y: u, height: y, width: A };
+      const e = a.value.findIndex((t) => t.active);
+      return e === -1 ? !1 : v(e) || !1;
+    }), A = N(() => {
+      if (h.value, !l.trimRailToCenters) return {};
+      if (!a || !a.value || a.value.length < 1) return {};
+      const e = v(0), t = v(a.value.length - 1);
+      if (!e || !t) return {};
+      let n = e.y + e.height / 2, r = t.y + t.height / 2;
+      n += l.railStartOffset, r += l.railEndOffset;
+      const o = Math.max(0, r - n);
+      return {
+        "--ulu-sa-nav-rail-top": `${n}px`,
+        "--ulu-sa-nav-rail-height": `${o}px`
+      };
     });
-    w(e, (t) => {
-      t && !c.value && z(() => {
-        c.value = !0;
+    C(i, (e) => {
+      e && !d.value && D(() => {
+        d.value = !0;
       });
     });
-    function k(t, l) {
-      l && (p.value[t] = l);
+    function O(e, t) {
+      t && (x.value[e] = t);
     }
-    return (t, l) => f(n) && f(n).length ? (h(), $(b(o.element), {
+    return (e, t) => p(a) && p(a).length ? (y(), z(M(u.element), {
       key: 0,
       class: "scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated",
-      style: _({ "--ulu-sa-nav-rail-width": `${o.railWidth}px` })
+      style: g({ "--ulu-sa-nav-rail-width": `${u.railWidth}px` })
     }, {
-      default: C(() => [
-        m("ul", E, [
-          (h(!0), g(H, null, B(f(n), (a, r) => (h(), g("li", {
+      default: T(() => [
+        _("ul", {
+          class: "scroll-anchors-nav-animated__rail",
+          ref_key: "listRef",
+          ref: f,
+          style: g(A.value)
+        }, [
+          (y(!0), k(W, null, E(p(a), (n, r) => (y(), k("li", {
             key: r,
-            class: v({ "is-active": a.active })
+            class: S({ "is-active": n.active })
           }, [
-            m("a", {
-              class: v({ "is-active": a.active }),
+            _("a", {
+              class: S({ "is-active": n.active }),
               ref_for: !0,
-              ref: (s) => k(r, s),
-              href: `#${a.titleId}`
+              ref: (o) => O(r, o),
+              href: `#${n.titleId}`
             }, [
-              I(t.$slots, "default", {
-                item: a,
+              H(e.$slots, "default", {
+                item: n,
                 index: r
               }, () => [
-                R(V(a.title), 1)
+                I(V(n.title), 1)
               ])
-            ], 10, F)
+            ], 10, L)
           ], 2))), 128))
-        ]),
-        m("div", {
-          class: v(["scroll-anchors-nav-animated__indicator", {
-            "scroll-anchors-nav-animated__indicator--can-transition": c.value
+        ], 4),
+        _("div", {
+          class: S(["scroll-anchors-nav-animated__indicator", {
+            "scroll-anchors-nav-animated__indicator--can-transition": d.value
           }]),
-          ref_key: "indicator",
-          ref: S,
-          style: _({
-            opacity: e.value ? "1" : "0",
-            transform: `translateY(${e.value ? e.value.y : 0}px)`,
-            height: `${e.value ? e.value.height : 0}px`,
-            width: `${e.value ? e.value.width : 0}px`
+          style: g({
+            opacity: i.value ? "1" : "0",
+            transform: `translateY(${i.value ? i.value.y : 0}px)`,
+            height: `${i.value ? i.value.height : 0}px`,
+            width: `${i.value ? i.value.width : 0}px`
           })
         }, null, 6)
       ]),
       _: 3
-    }, 8, ["style"])) : W("", !0);
+    }, 8, ["style"])) : B("", !0);
   }
 };
 export {
-  P as default
+  j as default
 };

package/dist/components/systems/scroll-anchors/useScrollAnchors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QA0KnF"}
+{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QAsTnF"}

package/dist/components/systems/scroll-anchors/useScrollAnchors.js

@@ -1,95 +1,138 @@
-import { onMounted as T, onUnmounted as Y, watch as F, nextTick as O } from "vue";
-import { getScrollParent as C } from "@ulu/utils/browser/dom.js";
-function D({ sections: i, props: e, emit: h, componentElRef: I }) {
-  let r = null;
-  function v(t) {
-    return i.value.findIndex(({ element: l }) => t === l);
+import { onMounted as P, onUnmounted as U, watch as Y, nextTick as L } from "vue";
+import { getScrollParent as M } from "@ulu/utils/browser/dom.js";
+import { debounce as j } from "@ulu/utils/performance.js";
+function J({ sections: r, props: t, emit: T, componentElRef: m }) {
+  let a = null, O = 0, k = "down", d = null, x = !0;
+  function g(e) {
+    return r.value.findIndex(({ element: n }) => e === n);
   }
-  function w(t = null, l = "down") {
-    i.value.forEach((c) => {
-      c !== t && (c.active && (c.inactiveFrom = l === "down" ? "forward" : "reverse", c.activeFrom = null), c.active = !1);
+  function B(e, n, s = "down") {
+    if (!e) return;
+    const v = s === "down" ? "forward" : "reverse";
+    n ? (e.active = !0, e.inactiveFrom = null, e.activeFrom = v) : (e.active && (e.inactiveFrom = v, e.activeFrom = null), e.active = !1);
+  }
+  function $(e = null, n = "down") {
+    r.value.forEach((s) => {
+      s !== e && B(s, !1, n);
     });
   }
-  function A() {
-    let t = 0, l = !0;
-    const c = (a) => {
-      const { root: S } = r, d = S ? S.scrollTop : document.documentElement.scrollTop || window.scrollY;
-      if (e.debug && (console.group("useScrollAnchors: onObserve"), console.log("Observer:", r), console.log("Last/Current Y:", `${t}/${d}`), console.log("Entries:", a.map((n) => ({ el: n.target, is: n.isIntersecting })))), l && e.firstItemActive) {
-        e.debug && console.log("Initial observation, respecting `firstItemActive`."), l = !1, t = d, e.debug && console.groupEnd();
-        return;
-      }
-      l = !1;
-      const s = d > t ? "down" : "up";
-      t = d, e.debug && console.log(`Scroll direction: ${s}`);
-      const f = a.filter((n) => n.isIntersecting);
-      if (e.debug && console.log("Intersecting entries:", f.map((n) => n.target)), f.length > 0) {
-        f.sort((u, m) => v(u.target) - v(m.target));
-        const n = s === "down" ? f[f.length - 1] : f[0];
-        e.debug && console.log("Chosen target entry:", n.target);
-        const o = i.value[v(n.target)];
-        o && !o.active && (e.debug && console.log("Activating section:", o.title), O(() => {
-          w(o, s), o.active = !0, o.inactiveFrom = null, o.activeFrom = s === "down" ? "forward" : "reverse", h("section-change", { section: o, sections: i.value, active: !0 });
-        }));
+  function h(e, n) {
+    e && !e.active && (t.debug && console.log("Activate:", e.title), L(() => {
+      $(e, n), B(e, !0, n), T("section-change", { section: e, sections: r.value, active: !0 });
+    }));
+  }
+  function I(e, n) {
+    const s = r.value.find((v) => v.active);
+    s && (t.debug && n && console.log(n, s.title), L(() => {
+      $(null, e), T("section-change", { section: s, sections: r.value, active: !1 });
+    }));
+  }
+  function y() {
+    let e = null;
+    return t.observerOptions && t.observerOptions.root !== void 0 ? e = t.observerOptions.root : m.value && (e = M(m.value), e === document.scrollingElement && (e = null)), e || window;
+  }
+  const A = j(() => {
+    t.debug && console.log("New Observer (debounced/check)"), a && (a.disconnect(), a = null), E(), w();
+  }, 100);
+  function C() {
+    D(), d = y(), d && d.addEventListener("scroll", A, { passive: !0 });
+  }
+  function D() {
+    d && (d.removeEventListener("scroll", A), d = null);
+  }
+  function E() {
+    x = !0;
+    const e = (u) => {
+      const { root: R } = a, S = R ? R.scrollTop : document.documentElement.scrollTop || window.scrollY;
+      let i = k;
+      S > O ? i = "down" : S < O && (i = "up"), t.debug && (console.groupCollapsed(`Scroll: ${O} -> ${S} (${i})`), console.table(u.map((o) => ({
+        el: o.target.id || o.target.tagName,
+        int: o.isIntersecting,
+        ratio: o.intersectionRatio.toFixed(2)
+      })))), O = S, k = i;
+      const b = u.filter((o) => o.isIntersecting);
+      if (b.length > 0) {
+        b.sort((c, f) => g(c.target) - g(f.target));
+        const o = i === "down" ? b[b.length - 1] : b[0];
+        t.debug && console.log("Target:", o.target.id || o.target.tagName);
+        const l = r.value[g(o.target)];
+        h(l, i);
+      } else if (x) {
+        t.debug && console.log("Fallback: bounds");
+        let o = -1;
+        if (u.forEach((l) => {
+          const c = l.rootBounds ? l.rootBounds.top : 0;
+          if (l.boundingClientRect.top <= c + 1) {
+            const f = g(l.target);
+            f > o && (o = f);
+          }
+        }), o > -1) {
+          const l = o === r.value.length - 1, c = r.value[o];
+          if (l && t.deactivateLastItem) {
+            const f = u.find((H) => H.target === c.element), F = f.rootBounds ? f.rootBounds.bottom : window.innerHeight;
+            f && f.boundingClientRect.bottom < F ? I(i, "Deactivate (last):") : h(c, i);
+          } else
+            h(c, i);
+        } else if (t.debug && console.log("Fallback: top"), !t.firstItemActive)
+          I(i, "Deactivate (top):");
+        else {
+          const l = r.value[0];
+          h(l, i);
+        }
       } else {
-        e.debug && console.log("No intersecting entries. Checking edge cases.");
-        const n = i.value.find((o) => o.active);
-        if (n) {
-          const o = a.find((u) => u.target === n.element);
-          if (o && !o.isIntersecting) {
-            const u = v(o.target), m = u === 0, y = u === i.value.length - 1;
-            (m && s === "up" && !e.firstItemActive || y && s === "down") && (e.debug && console.log("Deactivating section at edge:", n.title), O(() => {
-              w(null, s), h("section-change", { section: n, sections: i.value, active: !1 });
-            }));
+        t.debug && console.log("Check edges");
+        const o = r.value.find((l) => l.active);
+        if (o) {
+          const l = u.find((c) => c.target === o.element);
+          if (l && !l.isIntersecting) {
+            const c = g(l.target), f = c === 0, F = c === r.value.length - 1;
+            (f && i === "up" && !t.firstItemActive || F && i === "down" && t.deactivateLastItem) && I(i, "Deactivate (edge):");
           }
         }
       }
-      e.debug && console.groupEnd();
+      x = !1, t.debug && console.groupEnd();
     };
-    let g = null;
-    e.observerOptions && e.observerOptions.root !== void 0 ? g = e.observerOptions.root : I.value && (g = C(I.value), g === document.scrollingElement && (g = null));
-    let E = {
+    let n = null;
+    t.observerOptions && t.observerOptions.root !== void 0 ? n = t.observerOptions.root : m.value && (n = M(m.value), n === document.scrollingElement && (n = null));
+    let s = {
       rootMargin: "-25% 0px -55% 0px",
       threshold: 0
     };
-    if (e.snapOffset !== !1 && e.snapOffset !== void 0) {
-      const a = e.snapOffset === !0 ? 20 : Number(e.snapOffset);
-      E.rootMargin = `-${a}% 0px -${99 - a}% 0px`;
+    if (t.snapOffset !== !1 && t.snapOffset !== void 0) {
+      const u = t.snapOffset === !0 ? 20 : Number(t.snapOffset);
+      s.rootMargin = `-${u}% 0px -${99 - u}% 0px`;
     }
-    const $ = {
-      ...E,
-      ...e.observerOptions || {},
-      root: g
+    const v = {
+      ...s,
+      ...t.observerOptions || {},
+      root: n
     };
-    r = new IntersectionObserver(c, $);
+    a = new IntersectionObserver(e, v);
   }
-  function b() {
-    r && (r.disconnect(), i.value.forEach(({ element: t }) => {
-      t && r.observe(t);
+  function w() {
+    a && (a.disconnect(), r.value.forEach(({ element: e }) => {
+      e && a.observe(e);
     }));
   }
-  function x() {
-    r && (r.disconnect(), r = null);
+  function N() {
+    a && (a.disconnect(), a = null);
   }
-  T(() => {
-    if (e.firstItemActive && i.value.length > 0) {
-      const t = i.value[0];
-      t && (t.active = !0);
-    }
-    A(), b();
-  }), Y(() => {
-    x();
-  }), F(() => i.value.length, () => {
-    O(() => {
-      b();
+  P(() => {
+    E(), w(), C();
+  }), U(() => {
+    N(), D(), A.cancel();
+  }), Y(() => r.value.length, () => {
+    L(() => {
+      w();
     });
-  }), F(
-    () => [e.snapOffset, e.observerOptions],
+  }), Y(
+    () => [t.snapOffset, t.observerOptions],
     () => {
-      x(), A(), b();
+      N(), E(), w(), C();
     },
     { deep: !0 }
   );
 }
 export {
-  D as useScrollAnchors
+  J as useScrollAnchors
 };

package/lib/components/systems/scroll-anchors/UluScrollAnchors.vue

@@ -39,7 +39,15 @@
     /**
      * Enable debug logging for the IntersectionObserver
      */
-    debug: Boolean
+    debug: Boolean,
+    /**
+     * If true, the last section will deactivate when scrolling past its bounding box.
+     * By default, the last section remains active until the user scrolls back up.
+     */
+    deactivateLastItem: {
+      type: Boolean,
+      default: false
+    }
   });
 
   const emit = defineEmits(["section-change"]);

package/lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue

@@ -5,7 +5,7 @@
     class="scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated"
     :style="{ '--ulu-sa-nav-rail-width': `${ railWidth }px` }"
   >
-    <ul class="scroll-anchors-nav-animated__rail">
+    <ul class="scroll-anchors-nav-animated__rail" ref="listRef" :style="railStyles">
       <li 
         v-for="(item, index) in sections" :key="index"
         :class="{ 'is-active' : item.active }"
@@ -26,7 +26,6 @@
       :class="{
         'scroll-anchors-nav-animated__indicator--can-transition' : indicatorAnimReady
       }"
-      ref="indicator"
       :style="{
         opacity: indicatorStyles ? '1' : '0',
         transform: `translateY(${ indicatorStyles ? indicatorStyles.y : 0 }px)`,
@@ -38,9 +37,9 @@
 </template>
 
 <script setup>
-  import { ref, computed, watch } from 'vue';
+  import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
   import { runAfterFramePaint } from "@ulu/utils/browser/performance.js";
-  import { useScrollAnchorSections } from './useScrollAnchorSections.js';
+  import { useScrollAnchorSections } from "./useScrollAnchorSections.js";
 
   const props = defineProps({
     /**
@@ -57,6 +56,26 @@
       type: Number,
       default: 3
     },
+    /**
+     * Dynamically trims the rail to span exactly from the center of the first indicator to the center of the last indicator. Disabled by default
+     */
+    trimRailToCenters: {
+      type: Boolean
+    },
+    /**
+     * Pixel offset for the start (top) of the dynamic rail.
+     */
+    railStartOffset: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Pixel offset for the end (bottom) of the dynamic rail.
+     */
+    railEndOffset: {
+      type: Number,
+      default: 0
+    },
     /**
      * The width of the indicator, defaults to railWidth
      */
@@ -76,7 +95,7 @@
      */
     indicatorAlignment: {
       type: String,
-      default: 'center' // options: center, top
+      default: "center" // options: center, top
     },
     /**
      * Pixel offset for the indicator's vertical alignment
@@ -87,22 +106,42 @@
     }
   });
 
+  // State from the scroll anchor system
   const sections = useScrollAnchorSections();
 
+  // Template refs for the list and individual links
+  const listRef = ref(null);
   const linkRefs = ref({});
+
+  // Flag to enable CSS transitions only after initial placement
   const indicatorAnimReady = ref(false);
-  const indicator = ref(null);
 
-  const indicatorStyles = computed(() => {
-    if (!sections || !sections.value || !sections.value.length) {
-      return false;
+  // Resize observer to recalculate metrics on layout shifts
+  const resizeTrigger = ref(0);
+  let resizeObserver = null;
+
+  onMounted(() => {
+    if (listRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        resizeTrigger.value++;
+      });
+      resizeObserver.observe(listRef.value);
     }
-    const activeIndex = sections.value.findIndex(s => s.active);
-    if (activeIndex === -1) {
-      return false;
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
     }
-    const link = linkRefs.value[activeIndex];
-    if (!link) return false; // Link might not be rendered yet
+  });
+
+  /**
+   * Helper to calculate the target position/size of the indicator for a specific item
+   */
+  function getIndicatorMetrics(index) {
+    const link = linkRefs.value[index];
+    if (!link) return null;
 
     const { offsetTop, offsetHeight } = link;
     const isStatic = props.indicatorHeight != null;
@@ -110,15 +149,54 @@
     const height = isStatic ? props.indicatorHeight : offsetHeight;
 
     let y = offsetTop; // Default to 'top' alignment
-    if (props.indicatorAlignment === 'center') {
+    if (props.indicatorAlignment === "center") {
       y = offsetTop + (offsetHeight / 2) - (height / 2);
     }
 
     y += props.indicatorAlignmentOffset;
 
     return { y, height, width };
+  }
+
+  // Active indicator styles
+  const indicatorStyles = computed(() => {
+    resizeTrigger.value; // Re-evaluate on resize
+    if (!sections || !sections.value || !sections.value.length) {
+      return false;
+    }
+    const activeIndex = sections.value.findIndex(s => s.active);
+    if (activeIndex === -1) {
+      return false;
+    }
+    return getIndicatorMetrics(activeIndex) || false;
+  });
+
+  // Background rail styles (trimmed to start/end of indicators)
+  const railStyles = computed(() => {
+    resizeTrigger.value; // Re-evaluate on resize
+    if (!props.trimRailToCenters) return {};
+    if (!sections || !sections.value || sections.value.length < 1) return {};
+
+    const firstMetrics = getIndicatorMetrics(0);
+    const lastMetrics = getIndicatorMetrics(sections.value.length - 1);
+
+    if (!firstMetrics || !lastMetrics) return {};
+
+    let top = firstMetrics.y + (firstMetrics.height / 2);
+    let bottom = lastMetrics.y + (lastMetrics.height / 2);
+
+    top += props.railStartOffset;
+    bottom += props.railEndOffset;
+
+    const height = Math.max(0, bottom - top);
+
+    return {
+      "--ulu-sa-nav-rail-top": `${top}px`,
+      "--ulu-sa-nav-rail-height": `${height}px`
+    };
   });
 
+  // Allow transition after initial styles are applied
   watch(indicatorStyles, (val) => {
     if (val && !indicatorAnimReady.value) {
       runAfterFramePaint(() => {
@@ -127,9 +205,10 @@
     }
   });
 
+  // Helper to store link template refs
   function addLinkRef(index, el) {
     if (el) {
       linkRefs.value[index] = el;
     }
   }
-</script>
+</script>

package/lib/components/systems/scroll-anchors/_scroll-anchors-nav-animated.scss

@@ -49,8 +49,18 @@ $config: (
     position: relative;
   }
   #{ $prefix }__rail {
-    border-left: var(--ulu-sa-nav-rail-width, 3px) solid color.get(get("rail-border-color"));
     padding-left: get("rail-padding");
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: var(--ulu-sa-nav-rail-top, 0);
+      height: var(--ulu-sa-nav-rail-height, 100%);
+      width: var(--ulu-sa-nav-rail-width, 3px);
+      background-color: color.get(get("rail-border-color"));
+      z-index: 0;
+    }
   }
   #{ $prefix }__indicator {
     position: absolute;
@@ -58,6 +68,7 @@ $config: (
     left: 0;
     background-color: color.get(get("indicator-color"));
     clip-path: get("indicator-clip-path");
+    z-index: 1;
   }
   #{ $prefix }__indicator--can-transition {
     transition-property: height, transform, width;

package/lib/components/systems/scroll-anchors/useScrollAnchors.js

@@ -1,5 +1,6 @@
 import { onMounted, onUnmounted, nextTick, watch } from "vue";
 import { getScrollParent } from "@ulu/utils/browser/dom.js";
+import { debounce } from "@ulu/utils/performance.js";
 
 /**
  * The main composable that contains the core "engine" for the Scroll Anchors system.
@@ -10,96 +11,236 @@ import { getScrollParent } from "@ulu/utils/browser/dom.js";
  */
 export function useScrollAnchors({ sections, props, emit, componentElRef }) {
   let observer = null;
+  let lastScrollY = 0;
+  let lastScrollDirection = 'down';
+  let scrollRoot = null;
+  let isObserverRefresh = true;
 
+  /**
+   * Helper to quickly get the index of a section by its DOM element
+   */
   function getSectionIndex(el) {
     return sections.value.findIndex(({ element }) => el === element);
   }
 
+  /**
+   * Standardizes state assignments (active, forward/reverse animations) for a specific section
+   */
+  function setSectionState(section, isActive, scrollDirection = 'down') {
+    if (!section) return;
+    const direction = scrollDirection === 'down' ? 'forward' : 'reverse';
+    if (isActive) {
+      section.active = true;
+      section.inactiveFrom = null;
+      section.activeFrom = direction;
+    } else {
+      if (section.active) {
+        section.inactiveFrom = direction;
+        section.activeFrom = null;
+      }
+      section.active = false;
+    }
+  }
+
+  /**
+   * Loops through all sections and forces them to inactive, optionally skipping one target
+   */
   function removeActive(except = null, scrollDirection = 'down') {
     sections.value.forEach(s => {
       if (s !== except) {
-        if (s.active) {
-          s.inactiveFrom = scrollDirection === 'down' ? 'forward' : 'reverse';
-          s.activeFrom = null;
-        }
-        s.active = false;
+        setSectionState(s, false, scrollDirection);
       }
     });
   }
 
+  /**
+   * Safe wrapper to clear other sections, make a new target active, and emit the change event
+   */
+  function setSectionActive(section, scrollDirection) {
+    if (section && !section.active) {
+      if (props.debug) console.log("Activate:", section.title);
+      nextTick(() => {
+        removeActive(section, scrollDirection);
+        setSectionState(section, true, scrollDirection);
+        emit("section-change", { section, sections: sections.value, active: true });
+      });
+    }
+  }
+
+  /**
+   * Clears the currently active item and emits a deactivation event (used at top/bottom scroll edges)
+   */
+  function deactivateAll(scrollDirection, debugMsg) {
+    const activeSection = sections.value.find(s => s.active);
+    if (activeSection) {
+      if (props.debug && debugMsg) console.log(debugMsg, activeSection.title);
+      nextTick(() => {
+        removeActive(null, scrollDirection);
+        emit("section-change", { section: activeSection, sections: sections.value, active: false });
+      });
+    }
+  }
+
+  /**
+   * Resolves the scrolling container element based on options, DOM hierarchy, or defaults to window
+   */
+  function getScrollRoot() {
+    let root = null;
+    if (props.observerOptions && props.observerOptions.root !== undefined) {
+      root = props.observerOptions.root;
+    } else if (componentElRef.value) {
+      root = getScrollParent(componentElRef.value);
+      if (root === document.scrollingElement) {
+        root = null;
+      }
+    }
+    return root || window;
+  }
+
+  /**
+   * Debounced callback attached to the scroll listener.
+   * Rebuilding the observer ensures a fresh set of entries representing the true layout when scrolling stops.
+   */
+  const refreshObserver = debounce(() => {
+    if (props.debug) console.log("New Observer (debounced/check)");
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    createObserver();
+    observeItems();
+  }, 100);
+
+  function setupScrollListener() {
+    removeScrollListener();
+    scrollRoot = getScrollRoot();
+    if (scrollRoot) {
+      scrollRoot.addEventListener('scroll', refreshObserver, { passive: true });
+    }
+  }
+
+  function removeScrollListener() {
+    if (scrollRoot) {
+      scrollRoot.removeEventListener('scroll', refreshObserver);
+      scrollRoot = null;
+    }
+  }
+
+  /**
+   * Primary logic core. Creates the IntersectionObserver and handles state changes.
+   */
   function createObserver() {
-    let lastScrollY = 0;
-    let isInitialObservation = true;
+    isObserverRefresh = true;
 
     const onObserve = (entries) => {
       const { root } = observer;
       const currentScrollY = root ? root.scrollTop : document.documentElement.scrollTop || window.scrollY;
 
-      if (props.debug) {
-        console.group("useScrollAnchors: onObserve");
-        console.log("Observer:", observer);
-        console.log("Last/Current Y:", `${ lastScrollY }/${ currentScrollY }`);
-        console.log("Entries:", entries.map(e => ({ el: e.target, is: e.isIntersecting })));
+      // Determine the direction of the scroll
+      let scrollDirection = lastScrollDirection;
+      if (currentScrollY > lastScrollY) {
+        scrollDirection = 'down';
+      } else if (currentScrollY < lastScrollY) {
+        scrollDirection = 'up';
       }
       
-      if (isInitialObservation && props.firstItemActive) {
-        if (props.debug) console.log("Initial observation, respecting `firstItemActive`.");
-        isInitialObservation = false;
-        lastScrollY = currentScrollY;
-        if (props.debug) console.groupEnd();
-        return;
+      if (props.debug) {
+        console.groupCollapsed(`Scroll: ${lastScrollY} -> ${currentScrollY} (${scrollDirection})`);
+        console.table(entries.map(e => ({ 
+          el: e.target.id || e.target.tagName, 
+          int: e.isIntersecting,
+          ratio: e.intersectionRatio.toFixed(2)
+        })));
       }
-      isInitialObservation = false;
 
-      const scrollDirection = currentScrollY > lastScrollY ? 'down' : 'up';
       lastScrollY = currentScrollY;
-      if (props.debug) console.log(`Scroll direction: ${scrollDirection}`);
+      lastScrollDirection = scrollDirection;
 
       const intersectingEntries = entries.filter(entry => entry.isIntersecting);
-      if (props.debug) console.log("Intersecting entries:", intersectingEntries.map(e => e.target));
 
+      // Strategy 1: Standard intersection detection
       if (intersectingEntries.length > 0) {
         intersectingEntries.sort((a, b) => getSectionIndex(a.target) - getSectionIndex(b.target));
         
+        // Choose the most appropriate intersecting entry based on scroll direction
         const targetEntry = scrollDirection === 'down'
           ? intersectingEntries[intersectingEntries.length - 1]
           : intersectingEntries[0];
-        if (props.debug) console.log("Chosen target entry:", targetEntry.target);
+          
+        if (props.debug) console.log("Target:", targetEntry.target.id || targetEntry.target.tagName);
 
         const sectionToActivate = sections.value[getSectionIndex(targetEntry.target)];
-
-        if (sectionToActivate && !sectionToActivate.active) {
-          if (props.debug) console.log("Activating section:", sectionToActivate.title);
-          nextTick(() => {
-            removeActive(sectionToActivate, scrollDirection);
-            sectionToActivate.active = true;
-            sectionToActivate.inactiveFrom = null;
-            sectionToActivate.activeFrom = scrollDirection === 'down' ? 'forward' : 'reverse';
-            emit("section-change", { section: sectionToActivate, sections: sections.value, active: true });
-          });
-        }
+        setSectionActive(sectionToActivate, scrollDirection);
       } else {
-        if (props.debug) console.log("No intersecting entries. Checking edge cases.");
-        const activeSection = sections.value.find(s => s.active);
-        if (activeSection) {
-          const entryForActive = entries.find(e => e.target === activeSection.element);
-          if (entryForActive && !entryForActive.isIntersecting) {
-            const index = getSectionIndex(entryForActive.target);
-            const isFirst = index === 0;
-            const isLast = index === sections.value.length - 1;
-            if ((isFirst && scrollDirection === 'up' && !props.firstItemActive) || (isLast && scrollDirection === 'down')) {
-              if (props.debug) console.log("Deactivating section at edge:", activeSection.title);
-              nextTick(() => {
-                removeActive(null, scrollDirection);
-                emit("section-change", { section: activeSection, sections: sections.value, active: false });
-              });
+        // Strategy 2: Absolute positioning fallback (fired automatically on fresh observer load)
+        // Used to instantly catch sections we skipped entirely during warp-speed scrolling.
+        if (isObserverRefresh) {
+          if (props.debug) console.log("Fallback: bounds");
+          
+          let highestAboveIndex = -1;
+          entries.forEach(entry => {
+            const rootTop = entry.rootBounds ? entry.rootBounds.top : 0;
+            // +1 buffer for fractional pixels, check if element is above the reading zone
+            if (entry.boundingClientRect.top <= rootTop + 1) {
+              const idx = getSectionIndex(entry.target);
+              if (idx > highestAboveIndex) {
+                highestAboveIndex = idx;
+              }
+            }
+          });
+
+          // Activate the last section that is above the reading zone viewport
+          if (highestAboveIndex > -1) {
+            const isLast = highestAboveIndex === sections.value.length - 1;
+            const targetSection = sections.value[highestAboveIndex];
+
+            // Edge case: User scrolled past the bottom of the very last section into a footer
+            if (isLast && props.deactivateLastItem) {
+              const lastEntry = entries.find(e => e.target === targetSection.element);
+              const rootBottom = lastEntry.rootBounds ? lastEntry.rootBounds.bottom : window.innerHeight;
+              if (lastEntry && lastEntry.boundingClientRect.bottom < rootBottom) {
+                deactivateAll(scrollDirection, "Deactivate (last):");
+              } else {
+                setSectionActive(targetSection, scrollDirection);
+              }
+            } else {
+               setSectionActive(targetSection, scrollDirection);
+            }
+          } else {
+            // No elements are above the reading zone viewport, we are above the first item
+            if (props.debug) console.log("Fallback: top");
+            if (!props.firstItemActive) {
+              deactivateAll(scrollDirection, "Deactivate (top):");
+            } else {
+              const firstSection = sections.value[0];
+              setSectionActive(firstSection, scrollDirection);
+            }
+          }
+        } else {
+          // Strategy 3: Real-time edge deactivation
+          // Fires as user slowly scrolls out of the bounds of the first or last items
+          if (props.debug) console.log("Check edges");
+          const activeSection = sections.value.find(s => s.active);
+          if (activeSection) {
+            const entryForActive = entries.find(e => e.target === activeSection.element);
+            if (entryForActive && !entryForActive.isIntersecting) {
+              const index = getSectionIndex(entryForActive.target);
+              const isFirst = index === 0;
+              const isLast = index === sections.value.length - 1;
+              if ((isFirst && scrollDirection === 'up' && !props.firstItemActive) || (isLast && scrollDirection === 'down' && props.deactivateLastItem)) {
+                deactivateAll(scrollDirection, "Deactivate (edge):");
+              }
             }
           }
         }
       }
+      
+      // Observer refresh cycle completed
+      isObserverRefresh = false;
       if (props.debug) console.groupEnd();
     };
 
+    // Calculate options and margins for the reading zone
     let root = null;
     if (props.observerOptions && props.observerOptions.root !== undefined) {
       root = props.observerOptions.root;
@@ -147,32 +288,32 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
   }
 
   onMounted(() => {
-    if (props.firstItemActive && sections.value.length > 0) {
-      const first = sections.value[0];
-      if (first) {
-        first.active = true;
-      }
-    }
     createObserver();
     observeItems();
+    setupScrollListener();
   });
 
   onUnmounted(() => {
     destroyObserver();
+    removeScrollListener();
+    refreshObserver.cancel();
   });
 
+  // Re-observe items dynamically if the section list grows/shrinks
   watch(() => sections.value.length, () => {
     nextTick(() => {
       observeItems();
     });
   });
 
+  // Hot swap the observer if the developer changes options or snap settings
   watch(
     () => [props.snapOffset, props.observerOptions],
     () => {
       destroyObserver();
       createObserver();
       observeItems();
+      setupScrollListener();
     },
     { deep: true }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [
@@ -65,7 +65,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@headlessui/vue": "^1.7.23",
     "@portabletext/vue": "^1.0.14",
-    "@ulu/frontend": "^0.4.11",
+    "@ulu/frontend": "^0.5.0",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "fuse.js": "^6.6.2",