@ulu/frontend-vue 0.1.3-beta.10 → 0.1.3-beta.11

package/dist/types/components/layout/UluDataGrid.vue.d.ts

@@ -1,3 +1,18 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    element: string;
+    hidden: boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const props: {
+    readonly element: string;
+    readonly hidden: boolean;
+};
 //# sourceMappingURL=UluDataGrid.vue.d.ts.map

package/dist/types/components/layout/UluDataGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/layout/UluDataGrid.vue"],"names":[],"mappings":""}
+{"version":3,"file":"UluDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/layout/UluDataGrid.vue"],"names":[],"mappings":"wBA0KqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;2OAErC;;;;AA9FD;;;EAaG"}

package/dist/types/components/systems/index.d.ts

@@ -10,10 +10,14 @@ export { default as UluFacetsSearch } from "./facets/UluFacetsSearch.vue";
 export { default as UluFacetsSidebarLayout } from "./facets/UluFacetsSidebarLayout.vue";
 export { default as UluFacetsSort } from "./facets/UluFacetsSort.vue";
 export { default as UluFacetsList } from "./facets/UluFacetsList.vue";
+export { useScrollAnchors } from "./scroll-anchors/useScrollAnchors.js";
+export { useScrollAnchorSection } from "./scroll-anchors/useScrollAnchorSection.js";
+export { useScrollAnchorSections } from "./scroll-anchors/useScrollAnchorSections.js";
 export { default as UluScrollAnchors } from "./scroll-anchors/UluScrollAnchors.vue";
 export { default as UluScrollAnchorsNav } from "./scroll-anchors/UluScrollAnchorsNav.vue";
 export { default as UluScrollAnchorsNavAnimated } from "./scroll-anchors/UluScrollAnchorsNavAnimated.vue";
 export { default as UluScrollAnchorsSection } from "./scroll-anchors/UluScrollAnchorsSection.vue";
+export { default as UluScrollAnchorsHeadlessSection } from "./scroll-anchors/UluScrollAnchorsHeadlessSection.vue";
 export { default as UluShowSkeleton } from "./skeleton/UluShowSkeleton.vue";
 export { default as UluSkeletonContent } from "./skeleton/UluSkeletonContent.vue";
 export { default as UluSkeletonMedia } from "./skeleton/UluSkeletonMedia.vue";

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

@@ -1,60 +1,22 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    firstItemActive: BooleanConstructor;
-    /**
-     * Observe
-     */
-    observerOptions: {
-        type: ObjectConstructor;
-        default: () => {
-            root: null;
-            threshhold: number[];
-            rootMargin: string;
-        };
-    };
-}>, {}, {
-    isMounted: boolean;
-    sections: never[];
-}, {}, {
-    update(): void;
-    getSectionIndex(el: any): number;
-    /**
-     * Sets up a new observer to watch the section visibility
-     */
-    createObserver(): void;
-    /**
-     * Add all slide elements as targets in observer
-     */
-    observeItems(): void;
-    removeActive(except?: null): void;
-    /**
-     * Remove observer and it's internal DOM references (GC)
-     */
-    destroyObserver(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "section-change"[], "section-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    firstItemActive: BooleanConstructor;
-    /**
-     * Observe
-     */
-    observerOptions: {
-        type: ObjectConstructor;
-        default: () => {
-            root: null;
-            threshhold: number[];
-            rootMargin: string;
-        };
-    };
-}>> & Readonly<{
-    "onSection-change"?: ((...args: any[]) => any) | undefined;
-}>, {
-    firstItemActive: boolean;
-    observerOptions: Record<string, any>;
-}, {}, {}, {}, string, () => {
-    [SECTIONS]: import("vue").ComputedRef<never[]>;
-    [REGISTER]: (instance: any) => void;
-    [UNREGISTER]: (instance: any) => void;
-}, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-import { SECTIONS } from "./symbols.js";
-import { REGISTER } from "./symbols.js";
-import { UNREGISTER } from "./symbols.js";
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    observerOptions: Record<string, any>;
+    debug: boolean;
+    firstItemActive: boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const emit: (event: "section-change", ...args: any[]) => void;
+declare const props: {
+    readonly observerOptions: Record<string, any>;
+    readonly debug: boolean;
+    readonly firstItemActive: boolean;
+};
 //# sourceMappingURL=UluScrollAnchors.vue.d.ts.map

package/dist/types/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":";;IAiKM;;OAEG;;;;;;;;;;;;;;;IAyDH;;OAEG;;IAoCH;;OAEG;;;IAiBH;;OAEG;;;;IAtHH;;OAEG;;;;;;;;;;;;;;;;;;;;yBARwC,cAAc;yBAAd,cAAc;2BAAd,cAAc"}
+{"version":3,"file":"UluScrollAnchors.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchors.vue"],"names":[],"mappings":"wBAwJqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;2OAGrC;;;;AApED,sEAA6C;AAxB7C;;;;EAsBG"}

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

@@ -0,0 +1,24 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    title: string;
+    element: string;
+    customTitleId?: string | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {
+        isActive: any;
+        titleId: any;
+        section: any;
+    }) => any) | undefined;
+};
+declare const props: {
+    readonly title: string;
+    readonly element: string;
+    readonly customTitleId?: string | undefined;
+};
+//# sourceMappingURL=UluScrollAnchorsHeadlessSection.vue.d.ts.map

package/dist/types/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":"wBAgIqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;2OAErC;;;;;;;;AAvFD;;;;EAmBG"}

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

@@ -1,15 +1,19 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    element: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    element: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    element: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    element: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {
+        item: never;
+        index: never;
+    }) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly element: string;
+};
 //# sourceMappingURL=UluScrollAnchorsNav.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsNav.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNav.vue"],"names":[],"mappings":""}
+{"version":3,"file":"UluScrollAnchorsNav.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNav.vue"],"names":[],"mappings":"wBAkIqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;2OAE3C;;;;;;;AAtFD;;EAQG"}

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

@@ -1,32 +1,29 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * Element to use for container
-     */
-    element: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {
-    linkRefs: {};
-    indicatorAnimReady: boolean;
-}, {
-    indicatorStyles(): false | {
-        y: any;
-        height: any;
-        initial: any;
-    };
-}, {
-    addLinkRef(index: any, el: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Element to use for container
-     */
-    element: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    element: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    element: string;
+    railWidth: number;
+    indicatorWidth: number;
+    indicatorHeight: number;
+    indicatorAlignment: string;
+    indicatorAlignmentOffset: number;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {
+        item: never;
+        index: never;
+    }) => any) | undefined;
+};
+declare const props: {
+    readonly element: string;
+    readonly railWidth: number;
+    readonly indicatorWidth: number;
+    readonly indicatorHeight: number;
+    readonly indicatorAlignment: string;
+    readonly indicatorAlignmentOffset: number;
+};
 //# sourceMappingURL=UluScrollAnchorsNavAnimated.vue.d.ts.map

package/dist/types/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":";IAwIM;;OAEG;;;;;;;;;;;;;;;;;IAFH;;OAEG"}
+{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":"wBAmVqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;2OAErC;;;;;;;AArMD;;;;;;;EA2CG"}

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

@@ -1,50 +1,32 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    title: StringConstructor;
-    titleElement: {
-        type: StringConstructor;
-        default: string;
-    };
-    titleClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    anchorId: StringConstructor;
-    wrapperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    activeClass: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {
-    titleId: string;
-}, {
-    section(): any;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: StringConstructor;
-    titleElement: {
-        type: StringConstructor;
-        default: string;
-    };
-    titleClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    anchorId: StringConstructor;
-    wrapperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    activeClass: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
     activeClass: string;
+    element: string;
     titleElement: string;
     titleClass: string;
     wrapperClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
+    title?: string | undefined;
+    customTitleId?: string | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    title?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {
+        section: any;
+    }) => any) | undefined;
+};
+declare const props: {
+    readonly activeClass: string;
+    readonly element: string;
+    readonly titleElement: string;
+    readonly titleClass: string;
+    readonly wrapperClass: string;
+    readonly title?: string | undefined;
+    readonly customTitleId?: string | undefined;
+};
 //# sourceMappingURL=UluScrollAnchorsSection.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":""}
+{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":"wBAuMqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAErC;;;;;;;;AAhID;;;;;;;;EA4CG"}

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

@@ -0,0 +1,9 @@
+/**
+ * Composable for a component that acts as a section within the Scroll Anchors system.
+ * It handles registering the section with the parent `UluScrollAnchors` component,
+ * manages its active state, and provides reactive properties for use in the template.
+ * @param {object} props The component props, requires `title` and optional `customTitleId`.
+ * @returns {object} An object with reactive properties for the section: `sectionRef` (the ref to bind), `titleId`, `isActive`, and the raw `section` object.
+ */
+export function useScrollAnchorSection(props: object): object;
+//# sourceMappingURL=useScrollAnchorSection.d.ts.map

package/dist/types/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,CA+ClB"}

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

@@ -0,0 +1,8 @@
+/**
+ * Composable that provides a reactive list of all registered scroll anchor sections.
+ * This is the recommended way to access section data for building custom navigation.
+ * Must be used within a component that is a descendant of `UluScrollAnchors`.
+ * @returns {object} A reactive ref containing an array of section objects.
+ */
+export function useScrollAnchorSections(): object;
+//# sourceMappingURL=useScrollAnchorSections.d.ts.map

package/dist/types/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/types/components/systems/scroll-anchors/useScrollAnchors.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The main composable that contains the core "engine" for the Scroll Anchors system.
+ * It encapsulates the IntersectionObserver logic to track sections and manage their active state.
+ * This is intended for advanced use cases where a developer needs to build a custom provider
+ * component instead of using the default `UluScrollAnchors`.
+ * @param {{sections: object, props: object, emit: Function, componentElRef: object}} options
+ */
+export function useScrollAnchors({ sections, props, emit, componentElRef }: {
+    sections: object;
+    props: object;
+    emit: Function;
+    componentElRef: object;
+}): void;
+//# sourceMappingURL=useScrollAnchors.d.ts.map

package/dist/types/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,QA+InF"}

package/lib/components/_index.scss

@@ -5,3 +5,4 @@
 
 @forward "systems/table-sticky/table-sticky" as table-sticky-*;
 @forward "systems/facets/facets-sidebar" as facets-sidebar-*;
+@forward "systems/scroll-anchors/scroll-anchors-nav-animated" as scroll-anchors-nav-animated-*;

package/lib/components/layout/UluDataGrid.vue

@@ -16,26 +16,55 @@
 -->
 
 <template>
-  <div>
+  <component :is="element" ref="rootElement">
     <slot />
-  </div>
+  </component>
 </template>
 
-<script>
-  import { setPositionClasses } from "@ulu/frontend/js/utils/dom.js";
+<script setup>
+  import { ref, onMounted, onBeforeUnmount, watch } from "vue";
   import { debounce } from "@ulu/utils/performance.js";
-  export default {
-    name: "UluDataGrid",
-    async mounted() {
-      const setClasses = () => setPositionClasses(this.$el);
-      setClasses();
-      this.resizeHandler = debounce(setClasses, 200, false, this);
-      window.addEventListener("resize", this.resizeHandler);
+  import { setPositionClasses } from "@ulu/frontend/js/utils/dom.js";
+
+  const props = defineProps({
+    /**
+     * The element to use on data-grid container
+     */
+    element: {
+      type: String,
+      default: "div"
     },
-    beforeUnmount() {
-      if (this.resizeHandler) {
-        window.removeEventListener("resize", this.resizeHandler);
-      }
+    /**
+     * Tell the component when this grid is actually in a hidden container 
+     * - When value changes the component will properly update position classes
+     */
+    hidden: Boolean // New prop from SSR version
+  });
+
+  const rootElement = ref(null); // Ref for the template root element
+  let setThisPositionClasses = null; // To store the setPositionClasses function
+  let resizeHandler = null; // To store the debounced resize handler
+
+  onMounted(async () => {
+    setThisPositionClasses = () => setPositionClasses(rootElement.value);
+    setThisPositionClasses(); // Initial call
+    resizeHandler = debounce(setThisPositionClasses, 200, false); // `this` context is not needed in setup
+    window.addEventListener("resize", resizeHandler);
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeHandler) {
+      window.removeEventListener("resize", resizeHandler);
+      resizeHandler = null;
+      setThisPositionClasses = null; // Clear the function reference
+    }
+  });
+
+  // Watcher for the hidden prop
+  watch(() => props.hidden, (newVal, oldVal) => {
+    // Only run setClasses if it was hidden and now it's not, and the function exists
+    if (oldVal && !newVal && setThisPositionClasses) {
+      setThisPositionClasses();
     }
-  };
+  });
 </script>

package/lib/components/systems/index.js

@@ -11,10 +11,14 @@ export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayo
 export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
 
+export { useScrollAnchors } from './scroll-anchors/useScrollAnchors.js';
+export { useScrollAnchorSection } from './scroll-anchors/useScrollAnchorSection.js';
+export { useScrollAnchorSections } from './scroll-anchors/useScrollAnchorSections.js';
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';
 export { default as UluScrollAnchorsNavAnimated } from './scroll-anchors/UluScrollAnchorsNavAnimated.vue';
 export { default as UluScrollAnchorsSection } from './scroll-anchors/UluScrollAnchorsSection.vue';
+export { default as UluScrollAnchorsHeadlessSection } from './scroll-anchors/UluScrollAnchorsHeadlessSection.vue';
 
 export { default as UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
 export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';