@eric-emg/symphiq-components 1.2.110 → 1.2.111

package/fesm2022/symphiq-components.mjs

@@ -24146,27 +24146,47 @@ class FloatingTocComponent {
     isSectionExpanded(sectionId) {
         return this.expandedSections().has(sectionId);
     }
-    scrollToSection(sectionId) {
-        console.log('[FloatingTOC] scrollToSection called', {
-            sectionId,
+    getScrollOffset() {
+        return this.HEADER_OFFSET + this.parentHeaderOffset;
+    }
+    scrollToElement(element) {
+        const offset = this.getScrollOffset();
+        console.log('[FloatingTOC] scrollToElement', {
             embedded: this.embedded,
             hasScrollElement: !!this.scrollElement,
-            scrollElementTag: this.scrollElement?.tagName,
-            hasContainerElement: !!this.containerElement,
-            containerElementTag: this.containerElement?.tagName,
+            offset,
+            headerOffset: this.HEADER_OFFSET,
             parentHeaderOffset: this.parentHeaderOffset
         });
+        if (this.embedded && this.scrollElement) {
+            const scrollContainer = this.scrollElement;
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            const relativeTop = elementRect.top - containerRect.top;
+            const targetScrollTop = scrollContainer.scrollTop + relativeTop - offset;
+            console.log('[FloatingTOC] Scrolling container', {
+                containerScrollTop: scrollContainer.scrollTop,
+                relativeTop,
+                targetScrollTop
+            });
+            scrollContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+        }
+        else {
+            const elementRect = element.getBoundingClientRect();
+            const targetScrollTop = window.scrollY + elementRect.top - offset;
+            console.log('[FloatingTOC] Scrolling window', {
+                windowScrollY: window.scrollY,
+                elementTop: elementRect.top,
+                targetScrollTop
+            });
+            window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+        }
+    }
+    scrollToSection(sectionId) {
+        console.log('[FloatingTOC] scrollToSection called', { sectionId });
         const element = document.getElementById(`section-${sectionId}`);
-        console.log('[FloatingTOC] Target element', {
-            elementId: `section-${sectionId}`,
-            found: !!element,
-            elementRect: element?.getBoundingClientRect(),
-            elementOffsetTop: element?.offsetTop,
-            elementOffsetParent: element?.offsetParent?.tagName
-        });
         if (element) {
-            console.log('[FloatingTOC] Calling scrollIntoView on element');
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            this.scrollToElement(element);
         }
         else {
             console.warn('[FloatingTOC] Element not found for section:', sectionId);
@@ -24176,26 +24196,10 @@ class FloatingTocComponent {
         }
     }
     scrollToSubsection(subsectionId) {
-        console.log('[FloatingTOC] scrollToSubsection called', {
-            subsectionId,
-            embedded: this.embedded,
-            hasScrollElement: !!this.scrollElement,
-            scrollElementTag: this.scrollElement?.tagName,
-            hasContainerElement: !!this.containerElement,
-            containerElementTag: this.containerElement?.tagName,
-            parentHeaderOffset: this.parentHeaderOffset
-        });
+        console.log('[FloatingTOC] scrollToSubsection called', { subsectionId });
         const element = document.getElementById(`subsection-${subsectionId}`);
-        console.log('[FloatingTOC] Target element', {
-            elementId: `subsection-${subsectionId}`,
-            found: !!element,
-            elementRect: element?.getBoundingClientRect(),
-            elementOffsetTop: element?.offsetTop,
-            elementOffsetParent: element?.offsetParent?.tagName
-        });
         if (element) {
-            console.log('[FloatingTOC] Calling scrollIntoView on element');
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            this.scrollToElement(element);
         }
         else {
             console.warn('[FloatingTOC] Element not found for subsection:', subsectionId);
@@ -24205,18 +24209,11 @@ class FloatingTocComponent {
         }
     }
     scrollToTop() {
-        console.log('[FloatingTOC] scrollToTop called', {
-            embedded: this.embedded,
-            hasScrollElement: !!this.scrollElement,
-            scrollElementTag: this.scrollElement?.tagName,
-            scrollElementScrollTop: this.scrollElement?.scrollTop
-        });
+        console.log('[FloatingTOC] scrollToTop called', { embedded: this.embedded });
         if (this.embedded && this.scrollElement) {
-            console.log('[FloatingTOC] Scrolling scrollElement to top');
             this.scrollElement.scrollTo({ top: 0, behavior: 'smooth' });
         }
         else {
-            console.log('[FloatingTOC] Scrolling window to top');
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
         if (!this.isPinned()) {