starlight-cannoli-plugins 2.10.2 → 2.10.3

package/dist/plugins/starlight-dom-patches/page-script.js

@@ -146,7 +146,11 @@ function tabbedH2Content() {
   contentContainer.appendChild(tabbedWrapper);
   contentContainer.appendChild(paginationBar);
   let activeTabIndex = 0;
-  function activateTab(targetIndex, updateHash = true) {
+  function isTabNavVisible() {
+    const rect = tabNav.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0;
+  }
+  function activateTab(targetIndex, updateHash = true, scrollToNav = false) {
     activeTabIndex = targetIndex;
     tabButtons.forEach((tabButton, buttonIndex) => {
       tabButton.dataset.active = String(buttonIndex === targetIndex);
@@ -156,6 +160,15 @@ function tabbedH2Content() {
     });
     prevTabButton.disabled = targetIndex === 0;
     nextTabButton.disabled = targetIndex === allSections.length - 1;
+    const scrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+    tabButtons[targetIndex].scrollIntoView({
+      behavior: scrollBehavior,
+      block: "nearest",
+      inline: "nearest"
+    });
+    if (scrollToNav) {
+      tabNav.scrollIntoView({ behavior: scrollBehavior, block: "nearest" });
+    }
     if (updateHash) {
       const targetHeadingId = allSections[targetIndex].headingId;
       if (targetHeadingId) {
@@ -169,12 +182,19 @@ function tabbedH2Content() {
       }
     }
   }
+  function findPanelIndexForHash(urlHash) {
+    const targetHeadingId = urlHash.startsWith("#") ? urlHash.slice(1) : urlHash;
+    return tabPanels.findIndex(
+      (tabPanel) => tabPanel.querySelector(`#${CSS.escape(targetHeadingId)}`)
+    );
+  }
   function setEnabled(enabled) {
     tabbedWrapper.dataset.enabled = String(enabled);
     tabNav.hidden = !enabled;
     paginationBar.hidden = !enabled;
     if (enabled) {
-      activateTab(activeTabIndex, false);
+      const hashPanelIndex = window.location.hash ? findPanelIndexForHash(window.location.hash) : -1;
+      activateTab(hashPanelIndex >= 0 ? hashPanelIndex : activeTabIndex, false);
     } else {
       tabPanels.forEach((tabPanel) => {
         tabPanel.hidden = false;
@@ -183,19 +203,22 @@ function tabbedH2Content() {
   }
   function navigateToHash(urlHash) {
     if (!urlHash || tabbedWrapper.dataset.enabled !== "true") return;
-    const targetHeadingId = urlHash.startsWith("#") ? urlHash.slice(1) : urlHash;
-    tabPanels.forEach((tabPanel, panelIndex) => {
-      if (tabPanel.querySelector(`#${CSS.escape(targetHeadingId)}`) && panelIndex !== activeTabIndex)
-        activateTab(panelIndex, false);
-    });
+    const targetPanelIndex = findPanelIndexForHash(urlHash);
+    if (targetPanelIndex >= 0 && targetPanelIndex !== activeTabIndex)
+      activateTab(targetPanelIndex, false);
   }
   function wireInteractions(viewToggleCheckbox2) {
     prevTabButton.addEventListener("click", () => {
-      if (activeTabIndex > 0) activateTab(activeTabIndex - 1);
+      if (activeTabIndex > 0) {
+        const scrollToNav = !isTabNavVisible();
+        activateTab(activeTabIndex - 1, true, scrollToNav);
+      }
     });
     nextTabButton.addEventListener("click", () => {
-      if (activeTabIndex < allSections.length - 1)
-        activateTab(activeTabIndex + 1);
+      if (activeTabIndex < allSections.length - 1) {
+        const scrollToNav = !isTabNavVisible();
+        activateTab(activeTabIndex + 1, true, scrollToNav);
+      }
     });
     tabButtons.forEach((tabButton, buttonIndex) => {
       tabButton.addEventListener("click", () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-cannoli-plugins",
   "type": "module",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "Starlight plugins for automatic sidebar generation and link validation",
   "license": "ISC",
   "main": "./dist/index.js",