@ulu/frontend-vue 0.2.0-beta.2 → 0.2.0-beta.4

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

@@ -0,0 +1,47 @@
+import { ref as n, provide as r, computed as a, createElementBlock as m, openBlock as d, renderSlot as f } from "vue";
+import { useScrollAnchors as h } from "./useScrollAnchors.js";
+const A = {
+  __name: "UluScrollAnchors",
+  props: {
+    /**
+     * Make the first item active by default on load
+     */
+    firstItemActive: Boolean,
+    /**
+     * IntersectionObserver options
+     * - Defaults: { root: null, threshold: 0, rootMargin: "-25% 0px -55% 0px" }
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
+     */
+    observerOptions: {
+      type: Object,
+      default: () => ({
+        root: null,
+        threshold: 0,
+        rootMargin: "-25% 0px -55% 0px"
+      })
+    },
+    /**
+     * Enable debug logging for the IntersectionObserver
+     */
+    debug: Boolean
+  },
+  emits: ["section-change"],
+  setup(c, { emit: s }) {
+    const u = c, i = s, e = n([]), t = n(null);
+    return h({ sections: e, props: u, emit: i, componentElRef: t }), r("uluScrollAnchorsSections", a(() => e.value)), r("uluScrollAnchorsRegister", (o) => {
+      e.value.push(o);
+    }), r("uluScrollAnchorsUnregister", (o) => {
+      const l = e.value.findIndex((p) => p.id === o);
+      l > -1 && e.value.splice(l, 1);
+    }), (o, l) => (d(), m("div", {
+      class: "scroll-anchors",
+      ref_key: "componentEl",
+      ref: t
+    }, [
+      f(o.$slots, "default")
+    ], 512));
+  }
+};
+export {
+  A as default
+};

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

@@ -0,0 +1,35 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    title: string;
+    element: string;
+    customTitleId?: string | undefined;
+    $props: {
+        readonly title?: string | undefined;
+        readonly element?: string | undefined;
+        readonly customTitleId?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    sectionRef: unknown;
+}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            isActive: any;
+            titleId: any;
+            section: any;
+            inactiveFrom: any;
+            activeFrom: any;
+            sectionState: string | null;
+        }): any;
+    };
+    refs: {
+        sectionRef: unknown;
+    };
+    rootEl: any;
+};
+//# sourceMappingURL=UluScrollAnchorsHeadlessSection.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UluScrollAnchorsHeadlessSection.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue"],"names":[],"mappings":"AAaA;wBA4KqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;QASG"}

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

@@ -0,0 +1,57 @@
+import { computed as m, createBlock as v, openBlock as f, resolveDynamicComponent as d, normalizeClass as p, unref as e, withCtx as S, renderSlot as _ } from "vue";
+import { useScrollAnchorSection as h } from "./useScrollAnchorSection.js";
+const g = {
+  __name: "UluScrollAnchorsHeadlessSection",
+  props: {
+    /**
+     * The title of the section, used for navigation and generating a default ID
+     */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * A custom ID to use for the section anchor, overriding the auto-generated one
+     */
+    customTitleId: String,
+    /**
+     * Element to use
+     */
+    element: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(i) {
+    const n = i, { sectionRef: c, titleId: s, isActive: t, inactiveFrom: o, activeFrom: r, section: a } = h(n), l = m(() => {
+      if (t.value) {
+        if (r.value) return `enter-${r.value}`;
+      } else if (o.value) return `exit-${o.value}`;
+      return null;
+    });
+    return (u, y) => (f(), v(d(i.element), {
+      class: p([
+        "scroll-anchors__section",
+        { "is-active": e(t) }
+      ]),
+      "data-scrollpoint-state": l.value,
+      ref_key: "sectionRef",
+      ref: c
+    }, {
+      default: S(() => [
+        _(u.$slots, "default", {
+          isActive: e(t),
+          titleId: e(s),
+          section: e(a),
+          inactiveFrom: e(o),
+          activeFrom: e(r),
+          sectionState: l.value
+        })
+      ]),
+      _: 3
+    }, 8, ["class", "data-scrollpoint-state"]));
+  }
+};
+export {
+  g as default
+};

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

@@ -0,0 +1,23 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    element: string;
+    $props: {
+        readonly element?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            item: never;
+            index: never;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+//# sourceMappingURL=UluScrollAnchorsNav.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UluScrollAnchorsNav.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNav.vue"],"names":[],"mappings":"AAuBA;wBAkIqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;2OAOG"}

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

@@ -0,0 +1,46 @@
+import { createBlock as u, createCommentVNode as m, unref as r, openBlock as l, resolveDynamicComponent as d, withCtx as f, createElementVNode as o, createElementBlock as a, Fragment as p, renderList as _, normalizeClass as c, renderSlot as h, createTextVNode as v, toDisplayString as S } from "vue";
+import { useScrollAnchorSections as k } from "./useScrollAnchorSections.js";
+const y = ["href"], x = {
+  __name: "UluScrollAnchorsNav",
+  props: {
+    /**
+     * The HTML element to use for the navigation root
+     */
+    element: {
+      type: String,
+      default: "nav"
+    }
+  },
+  setup(s) {
+    const t = k();
+    return (i, g) => r(t) && r(t).length ? (l(), u(d(s.element), {
+      key: 0,
+      class: "scroll-anchors__nav"
+    }, {
+      default: f(() => [
+        o("ul", null, [
+          (l(!0), a(p, null, _(r(t), (e, n) => (l(), a("li", {
+            key: n,
+            class: c({ "is-active": e.active })
+          }, [
+            o("a", {
+              class: c({ "is-active": e.active }),
+              href: `#${e.titleId}`
+            }, [
+              h(i.$slots, "default", {
+                item: e,
+                index: n
+              }, () => [
+                v(S(e.title), 1)
+              ])
+            ], 10, y)
+          ], 2))), 128))
+        ])
+      ]),
+      _: 3
+    })) : m("", !0);
+  }
+};
+export {
+  x as default
+};

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

@@ -0,0 +1,37 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    element: string;
+    railWidth: number;
+    indicatorWidth: number;
+    indicatorHeight: number;
+    indicatorAlignment: string;
+    indicatorAlignmentOffset: number;
+    $props: {
+        readonly element?: string | undefined;
+        readonly railWidth?: 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;
+}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            item: never;
+            index: never;
+        }): any;
+    };
+    refs: {
+        indicator: HTMLDivElement;
+    };
+    rootEl: any;
+};
+//# sourceMappingURL=UluScrollAnchorsNavAnimated.vue.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,118 @@
+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 = {
+  __name: "UluScrollAnchorsNavAnimated",
+  props: {
+    /**
+     * The HTML element to use for the navigation root
+     */
+    element: {
+      type: String,
+      default: "nav"
+    },
+    /**
+     * The width of the navigation rail
+     */
+    railWidth: {
+      type: Number,
+      default: 3
+    },
+    /**
+     * The width of the indicator, defaults to railWidth
+     */
+    indicatorWidth: {
+      type: Number,
+      default: null
+    },
+    /**
+     * If set, creates a static height, centered indicator
+     */
+    indicatorHeight: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Vertical alignment of the indicator relative to the link
+     */
+    indicatorAlignment: {
+      type: String,
+      default: "center"
+      // options: center, top
+    },
+    /**
+     * Pixel offset for the indicator's vertical alignment
+     */
+    indicatorAlignmentOffset: {
+      type: Number,
+      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)
+        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 };
+    });
+    w(e, (t) => {
+      t && !c.value && z(() => {
+        c.value = !0;
+      });
+    });
+    function k(t, l) {
+      l && (p.value[t] = l);
+    }
+    return (t, l) => f(n) && f(n).length ? (h(), $(b(o.element), {
+      key: 0,
+      class: "scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated",
+      style: _({ "--ulu-sa-nav-rail-width": `${o.railWidth}px` })
+    }, {
+      default: C(() => [
+        m("ul", E, [
+          (h(!0), g(H, null, B(f(n), (a, r) => (h(), g("li", {
+            key: r,
+            class: v({ "is-active": a.active })
+          }, [
+            m("a", {
+              class: v({ "is-active": a.active }),
+              ref_for: !0,
+              ref: (s) => k(r, s),
+              href: `#${a.titleId}`
+            }, [
+              I(t.$slots, "default", {
+                item: a,
+                index: r
+              }, () => [
+                R(V(a.title), 1)
+              ])
+            ], 10, F)
+          ], 2))), 128))
+        ]),
+        m("div", {
+          class: v(["scroll-anchors-nav-animated__indicator", {
+            "scroll-anchors-nav-animated__indicator--can-transition": c.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`
+          })
+        }, null, 6)
+      ]),
+      _: 3
+    }, 8, ["style"])) : W("", !0);
+  }
+};
+export {
+  P as default
+};

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

@@ -0,0 +1,39 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    activeClass: string;
+    element: string;
+    titleElement: string;
+    titleClass: string;
+    wrapperClass: string;
+    title?: string | undefined;
+    customTitleId?: string | undefined;
+    $props: {
+        readonly activeClass?: string | undefined;
+        readonly element?: string | undefined;
+        readonly titleElement?: string | undefined;
+        readonly titleClass?: string | undefined;
+        readonly wrapperClass?: string | undefined;
+        readonly title?: string | undefined;
+        readonly customTitleId?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    sectionRef: unknown;
+}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        title?(_: {}): any;
+        default?(_: {
+            section: any;
+        }): any;
+    };
+    refs: {
+        sectionRef: unknown;
+    };
+    rootEl: any;
+};
+//# sourceMappingURL=UluScrollAnchorsSection.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":"AAeA;wBAmOqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;QASG"}

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

@@ -0,0 +1,83 @@
+import { computed as p, createBlock as n, openBlock as r, resolveDynamicComponent as c, normalizeClass as o, unref as t, withCtx as u, renderSlot as f, createTextVNode as g, toDisplayString as y } from "vue";
+import { useScrollAnchorSection as h } from "./useScrollAnchorSection.js";
+const x = {
+  __name: "UluScrollAnchorsSection",
+  props: {
+    /**
+     * The title of the section, used for navigation and generating a default ID
+     */
+    title: String,
+    /**
+     * The HTML element to use for the title
+     */
+    titleElement: {
+      type: String,
+      default: "h2"
+    },
+    /**
+     * The class to apply to the title element
+     */
+    titleClass: {
+      type: String,
+      default: "h2"
+    },
+    /**
+     * A custom ID to use for the section anchor, overriding the auto-generated one
+     */
+    customTitleId: String,
+    /**
+     * The class to apply to the section's wrapper div
+     */
+    wrapperClass: {
+      type: String,
+      default: "scroll-anchors__section"
+    },
+    /**
+     * The class to apply to the wrapper div when the section is active
+     */
+    activeClass: {
+      type: String,
+      default: "is-active"
+    },
+    /**
+     * The HTML element to use for the section root
+     */
+    element: {
+      type: String,
+      default: "section"
+    }
+  },
+  setup(e) {
+    const d = e, { sectionRef: m, titleId: v, isActive: l, inactiveFrom: a, activeFrom: i, section: S } = h(d), C = p(() => {
+      if (l.value) {
+        if (i.value) return `enter-${i.value}`;
+      } else if (a.value) return `exit-${a.value}`;
+      return null;
+    });
+    return (s, $) => (r(), n(c(e.element), {
+      class: o([e.wrapperClass, { [e.activeClass]: e.activeClass && t(l) }]),
+      "data-scrollpoint-state": C.value,
+      ref_key: "sectionRef",
+      ref: m
+    }, {
+      default: u(() => [
+        (r(), n(c(e.titleElement), {
+          class: o(e.titleClass),
+          id: t(v)
+        }, {
+          default: u(() => [
+            f(s.$slots, "title", {}, () => [
+              g(y(e.title), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["class", "id"])),
+        f(s.$slots, "default", { section: t(S) })
+      ]),
+      _: 3
+    }, 8, ["class", "data-scrollpoint-state"]));
+  }
+};
+export {
+  x as default
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollAnchorSection.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/useScrollAnchorSection.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,8CAHW,MAAM,GACJ,MAAM,CAmDlB"}

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

@@ -0,0 +1,34 @@
+import { ref as a, inject as m, computed as l, reactive as d, watch as s, onMounted as v, onUnmounted as f } from "vue";
+import { urlize as I } from "@ulu/utils/string.js";
+function g(e) {
+  const c = a(null), o = m("uluScrollAnchorsRegister"), u = m("uluScrollAnchorsUnregister"), n = (i) => `ulu-sa-${I(i)}`, r = l(() => e.customTitleId || n(e.title)), t = d({
+    id: Symbol("section-id"),
+    title: e.title,
+    titleId: r.value,
+    element: null,
+    // will be set on mount
+    active: !1,
+    inactiveFrom: null,
+    activeFrom: null
+  });
+  return s(() => e.title, (i) => {
+    t.title = i, t.titleId = e.customTitleId || n(i);
+  }), s(() => e.customTitleId, (i) => {
+    t.titleId = i || n(e.title);
+  }), v(() => {
+    o && c.value && (t.element = c.value, o(t));
+  }), f(() => {
+    u && u(t.id);
+  }), {
+    sectionRef: c,
+    // the ref for the user to attach
+    titleId: r,
+    isActive: l(() => t.active),
+    inactiveFrom: l(() => t.inactiveFrom),
+    activeFrom: l(() => t.activeFrom),
+    section: t
+  };
+}
+export {
+  g as useScrollAnchorSection
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollAnchorSections.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/useScrollAnchorSections.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,2CAFa,MAAM,CAQlB"}

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

@@ -0,0 +1,8 @@
+import { inject as n } from "vue";
+function r() {
+  const o = n("uluScrollAnchorsSections");
+  return o || console.warn("useScrollAnchorSections() must be used within an UluScrollAnchors component provider."), o;
+}
+export {
+  r as useScrollAnchorSections
+};

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

@@ -0,0 +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,QAqJnF"}

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

@@ -0,0 +1,80 @@
+import { onMounted as y, onUnmounted as T, watch as Y, nextTick as m } 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);
+  }
+  function O(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 E() {
+    let t = 0, l = !0;
+    const c = (d) => {
+      const { root: A } = r, f = A ? A.scrollTop : document.documentElement.scrollTop || window.scrollY;
+      if (e.debug && (console.group("useScrollAnchors: onObserve"), console.log("Observer:", r), console.log("Last/Current Y:", `${t}/${f}`), console.log("Entries:", d.map((n) => ({ el: n.target, is: n.isIntersecting })))), l && e.firstItemActive) {
+        e.debug && console.log("Initial observation, respecting `firstItemActive`."), l = !1, t = f, e.debug && console.groupEnd();
+        return;
+      }
+      l = !1;
+      const s = f > t ? "down" : "up";
+      t = f, e.debug && console.log(`Scroll direction: ${s}`);
+      const a = d.filter((n) => n.isIntersecting);
+      if (e.debug && console.log("Intersecting entries:", a.map((n) => n.target)), a.length > 0) {
+        a.sort((u, b) => v(u.target) - v(b.target));
+        const n = s === "down" ? a[a.length - 1] : a[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), m(() => {
+          O(o, s), o.active = !0, o.inactiveFrom = null, o.activeFrom = s === "down" ? "forward" : "reverse", h("section-change", { section: o, sections: i.value, active: !0 });
+        }));
+      } else {
+        e.debug && console.log("No intersecting entries. Checking edge cases.");
+        const n = i.value.find((o) => o.active);
+        if (n) {
+          const o = d.find((u) => u.target === n.element);
+          if (o && !o.isIntersecting) {
+            const u = v(o.target), b = u === 0, x = u === i.value.length - 1;
+            (b && s === "up" && !e.firstItemActive || x && s === "down") && (e.debug && console.log("Deactivating section at edge:", n.title), m(() => {
+              O(null, s), h("section-change", { section: n, sections: i.value, active: !1 });
+            }));
+          }
+        }
+      }
+      e.debug && console.groupEnd();
+    };
+    let g = null;
+    e.observerOptions && e.observerOptions.root ? g = e.observerOptions.root : I.value && (g = C(I.value), g === document.scrollingElement && (g = null));
+    const F = {
+      ...e.observerOptions,
+      root: g
+    };
+    r = new IntersectionObserver(c, F);
+  }
+  function w() {
+    r && (r.disconnect(), i.value.forEach(({ element: t }) => {
+      t && r.observe(t);
+    }));
+  }
+  function S() {
+    r && (r.disconnect(), r = null);
+  }
+  y(() => {
+    if (e.firstItemActive && i.value.length > 0) {
+      const t = i.value[0];
+      t && (t.active = !0);
+    }
+    E(), w();
+  }), T(() => {
+    S();
+  }), Y(() => i.value.length, () => {
+    m(() => {
+      w();
+    });
+  });
+}
+export {
+  D as useScrollAnchors
+};

package/dist/components/systems/skeleton/UluShowSkeleton.vue.d.ts

@@ -0,0 +1,20 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    when: boolean;
+    $props: {
+        readonly when?: boolean | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+//# sourceMappingURL=UluShowSkeleton.vue.d.ts.map

package/dist/components/systems/skeleton/UluShowSkeleton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluShowSkeleton.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/skeleton/UluShowSkeleton.vue"],"names":[],"mappings":"AAIA;wBAkFqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;2OAOG"}