starlight-cannoli-plugins 2.10.2 → 2.10.4

package/dist/{chunk-RHYQUYJ3.js → chunk-PPNIMJPX.js}

@@ -3,6 +3,57 @@ import { fileURLToPath } from "url";
 var css = String.raw;
 var js = String.raw;
 var CONDITIONAL_CSS = {
+  offerTabbedContent: {
+    enabled: css`
+      /* Suppress the default crossfade for the named panel transition. */
+      ::view-transition-old(tabbed-panel),
+      ::view-transition-new(tabbed-panel) {
+        animation: none;
+        mix-blend-mode: normal;
+      }
+
+      /* Slide animation — only when the user has no motion preference. */
+      @media (prefers-reduced-motion: no-preference) {
+        :root[data-tab-direction="next"]::view-transition-old(tabbed-panel) {
+          animation: tabbed-slide-out-to-left 250ms ease both;
+        }
+        :root[data-tab-direction="next"]::view-transition-new(tabbed-panel) {
+          animation: tabbed-slide-in-from-right 250ms ease both;
+        }
+        :root[data-tab-direction="prev"]::view-transition-old(tabbed-panel) {
+          animation: tabbed-slide-out-to-right 250ms ease both;
+        }
+        :root[data-tab-direction="prev"]::view-transition-new(tabbed-panel) {
+          animation: tabbed-slide-in-from-left 250ms ease both;
+        }
+      }
+
+      @keyframes tabbed-slide-out-to-left {
+        to {
+          transform: translateX(-30%);
+          opacity: 0;
+        }
+      }
+      @keyframes tabbed-slide-in-from-right {
+        from {
+          transform: translateX(30%);
+          opacity: 0;
+        }
+      }
+      @keyframes tabbed-slide-out-to-right {
+        to {
+          transform: translateX(30%);
+          opacity: 0;
+        }
+      }
+      @keyframes tabbed-slide-in-from-left {
+        from {
+          transform: translateX(-30%);
+          opacity: 0;
+        }
+      }
+    `
+  },
   limitDetailsElementHeight: {
     enabled: css`
       .main-pane details[open] {

package/dist/index.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-NCXV367P.js";
 import {
   starlightDomPatches
-} from "./chunk-RHYQUYJ3.js";
+} from "./chunk-PPNIMJPX.js";
 import "./chunk-4VNS5WPM.js";
 
 // src/plugins/starlight-index-sourced-sidebar/index.ts

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

@@ -146,16 +146,40 @@ function tabbedH2Content() {
   contentContainer.appendChild(tabbedWrapper);
   contentContainer.appendChild(paginationBar);
   let activeTabIndex = 0;
-  function activateTab(targetIndex, updateHash = true) {
-    activeTabIndex = targetIndex;
-    tabButtons.forEach((tabButton, buttonIndex) => {
-      tabButton.dataset.active = String(buttonIndex === targetIndex);
-    });
-    tabPanels.forEach((tabPanel, panelIndex) => {
-      tabPanel.hidden = panelIndex !== targetIndex;
+  function isTabNavVisible() {
+    const rect = tabNav.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0;
+  }
+  function activateTab(targetIndex, updateHash = true, scrollToNav = false) {
+    const applySwitch = () => {
+      tabPanels[activeTabIndex].style.viewTransitionName = "";
+      activeTabIndex = targetIndex;
+      tabButtons.forEach((tabButton, buttonIndex) => {
+        tabButton.dataset.active = String(buttonIndex === targetIndex);
+      });
+      tabPanels.forEach((tabPanel, panelIndex) => {
+        tabPanel.hidden = panelIndex !== targetIndex;
+      });
+      tabPanels[targetIndex].style.viewTransitionName = "tabbed-panel";
+      prevTabButton.disabled = targetIndex === 0;
+      nextTabButton.disabled = targetIndex === allSections.length - 1;
+    };
+    if (targetIndex !== activeTabIndex && "startViewTransition" in document) {
+      document.documentElement.dataset.tabDirection = targetIndex > activeTabIndex ? "next" : "prev";
+      tabPanels[activeTabIndex].style.viewTransitionName = "tabbed-panel";
+      document.startViewTransition(applySwitch);
+    } else {
+      applySwitch();
+    }
+    const scrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+    tabButtons[targetIndex].scrollIntoView({
+      behavior: scrollBehavior,
+      block: "nearest",
+      inline: "nearest"
     });
-    prevTabButton.disabled = targetIndex === 0;
-    nextTabButton.disabled = targetIndex === allSections.length - 1;
+    if (scrollToNav) {
+      tabNav.scrollIntoView({ behavior: scrollBehavior, block: "nearest" });
+    }
     if (updateHash) {
       const targetHeadingId = allSections[targetIndex].headingId;
       if (targetHeadingId) {
@@ -169,12 +193,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 +214,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/dist/plugins/starlight-dom-patches.js

@@ -1,6 +1,6 @@
 import {
   starlightDomPatches
-} from "../chunk-RHYQUYJ3.js";
+} from "../chunk-PPNIMJPX.js";
 import "../chunk-4VNS5WPM.js";
 export {
   starlightDomPatches

package/package.json

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