mkdocs-nested-tabs 0.1.0__tar.gz → 0.2.0__tar.gz

{mkdocs_nested_tabs-0.1.0 → mkdocs_nested_tabs-0.2.0}/PKG-INFO

@@ -1,7 +1,7 @@
 Metadata-Version: 2.4
 Name: mkdocs-nested-tabs
-Version: 0.1.0
-Summary: Display two levels of navigation.tabs instead of Material's hover-only dropdown.
+Version: 0.2.0
+Summary: For Material for mkdocs, display two levels of navigation.tabs instead of a hover-only dropdown.
 Author-email: Luka Sherman <lukawritecode@gmail.com>
 License: MIT
 Project-URL: Homepage, https://github.com/luka-sherman/mkdocs-nested-tabs
@@ -29,12 +29,12 @@ tab dropdown (one category's children at a time).
 
 ## Status
 
-Early scaffold, ported and generalized from a working implementation. Not yet published.
+Published on PyPI. Ported and generalized from a working implementation.
 
 ## Install
 
 ```bash
-pip install mkdocs-nested-tabs   # not yet published
+pip install mkdocs-nested-tabs
 ```
 
 ```yaml
@@ -52,6 +52,10 @@ Requires `navigation.tabs` to be enabled — this plugin replaces that
 feature's tab bar on desktop widths (≥76.234375em, matching Material's own
 breakpoint), it doesn't work alongside a site with tabs disabled.
 
+Compatible with `navigation.indexes` — a category label whose own index page
+Material merges in becomes a real link to that page, with correct
+active/current-page state.
+
 ## How it works
 
 Reads Material's own primary sidebar nav at runtime (which already contains
@@ -82,8 +86,18 @@ so it looks reasonable on any palette out of the box. Override via:
 
 ```css
 :root {
+  /* Default (inactive) label/link color */
   --md-nested-tabs-label-color: ...;
   --md-nested-tabs-link-color: ...;
+
+  /* Active label/link color — the label gets .nested-tabs__label--active
+     when one of its own pages is active, not just the page link itself */
+  --md-nested-tabs-label-active-color: ...;
+  --md-nested-tabs-link-active-color: ...;
+
+  /* Hover/focus label/link color */
+  --md-nested-tabs-label-hover-color: ...;
+  --md-nested-tabs-link-hover-color: ...;
 }
 ```
 

{mkdocs_nested_tabs-0.1.0 → mkdocs_nested_tabs-0.2.0}/README.md

@@ -6,12 +6,12 @@ tab dropdown (one category's children at a time).
 
 ## Status
 
-Early scaffold, ported and generalized from a working implementation. Not yet published.
+Published on PyPI. Ported and generalized from a working implementation.
 
 ## Install
 
 ```bash
-pip install mkdocs-nested-tabs   # not yet published
+pip install mkdocs-nested-tabs
 ```
 
 ```yaml
@@ -29,6 +29,10 @@ Requires `navigation.tabs` to be enabled — this plugin replaces that
 feature's tab bar on desktop widths (≥76.234375em, matching Material's own
 breakpoint), it doesn't work alongside a site with tabs disabled.
 
+Compatible with `navigation.indexes` — a category label whose own index page
+Material merges in becomes a real link to that page, with correct
+active/current-page state.
+
 ## How it works
 
 Reads Material's own primary sidebar nav at runtime (which already contains
@@ -59,8 +63,18 @@ so it looks reasonable on any palette out of the box. Override via:
 
 ```css
 :root {
+  /* Default (inactive) label/link color */
   --md-nested-tabs-label-color: ...;
   --md-nested-tabs-link-color: ...;
+
+  /* Active label/link color — the label gets .nested-tabs__label--active
+     when one of its own pages is active, not just the page link itself */
+  --md-nested-tabs-label-active-color: ...;
+  --md-nested-tabs-link-active-color: ...;
+
+  /* Hover/focus label/link color */
+  --md-nested-tabs-label-hover-color: ...;
+  --md-nested-tabs-link-hover-color: ...;
 }
 ```
 

{mkdocs_nested_tabs-0.1.0 → mkdocs_nested_tabs-0.2.0}/mkdocs_nested_tabs/plugin.py

@@ -15,22 +15,14 @@ class NestedTabsPlugin(BasePlugin):
     """
 
     config_scheme = (
-        # v0.1: static breakpoint/behavior, matching Material's own tabs
-        # breakpoint (76.234375em). Making these configurable needs the
-        # static JS/CSS to be templated per-build rather than served as
-        # fixed package assets — planned, not yet implemented.
         ("enabled", config_options.Type(bool, default=True)),
     )
 
     def on_files(self, files, config):
         if not self.config["enabled"]:
             return files
-        # File(path, src_dir, dest_dir, ...) mirrors the same relative `path`
-        # under both src_dir and dest_dir — keeping the assets flat (no
-        # subfolder) in mkdocs_nested_tabs/static/ avoids any src/dest
-        # mismatch, at the cost of sitting at the built site's root rather
-        # than under its own assets/ subfolder. Confirmed working against
-        # tests/fixture_site (see tests/test_plugin.py).
+        # Keeping the assets flat (no subfolder) means src_dir and dest_dir
+        # share the same relative path, so File() needs no extra mapping.
         for name in ASSET_NAMES:
             files.append(
                 File(name, src_dir=STATIC_DIR, dest_dir=config["site_dir"], use_directory_urls=False)

mkdocs_nested_tabs-0.2.0/mkdocs_nested_tabs/static/nested-tabs.css

@@ -0,0 +1,93 @@
+/* Matches Material's own navigation.tabs breakpoint. Below this width,
+   Material's native tabs (or the hamburger drawer) apply unmodified. */
+@media screen and (min-width: 76.234375em) {
+  .md-tabs {
+    display: none;
+  }
+}
+
+/* Transparent so .md-header's own background shows through, same as .md-tabs. */
+.nested-tabs {
+  display: none;
+}
+
+@media screen and (min-width: 76.234375em) {
+  .nested-tabs {
+    display: block;
+    background-color: transparent;
+  }
+
+  .nested-tabs__list {
+    display: flex;
+    list-style: none;
+    margin: 0 0.2rem;
+    padding: 0.5rem 0;
+    gap: 1.4rem;
+  }
+
+  .nested-tabs__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+
+  .nested-tabs__label {
+    font-size: 0.64rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--md-nested-tabs-label-color, var(--md-default-fg-color--light));
+  }
+
+  /* Set on a flat group's label when one of its own pages is the active
+     page (see nested-tabs.js) — lets a consumer color the category name
+     itself, not just the active page link beneath it. Falls back to the
+     same accent color .nested-tabs__link--active uses below, but exposed as
+     its own variable since a consumer may want the label's active color to
+     differ from the link's (e.g. a distinct "active parent" tone). */
+  .nested-tabs__label--active {
+    color: var(--md-nested-tabs-label-active-color, var(--md-accent-fg-color));
+    font-weight: 700;
+  }
+
+  /* Fallback-link groups need hover/active states; the normal <span> labels don't. */
+  .nested-tabs__label--link {
+    text-decoration: none;
+  }
+
+  .nested-tabs__label--link:hover,
+  .nested-tabs__label--link:focus-visible {
+    color: var(--md-nested-tabs-label-hover-color, var(--md-accent-fg-color));
+    text-decoration: underline;
+  }
+
+  .nested-tabs__pages {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0.7rem;
+  }
+
+  .nested-tabs__link {
+    font-size: 0.7rem;
+    color: var(--md-nested-tabs-link-color, var(--md-default-fg-color));
+    text-decoration: none;
+  }
+
+  .nested-tabs__link:hover,
+  .nested-tabs__link:focus-visible {
+    color: var(--md-nested-tabs-link-hover-color, var(--md-accent-fg-color));
+    text-decoration: underline;
+  }
+
+  /* Also reused on a fallback-link label (.nested-tabs__label--link) when its
+     own overview page is active — see nested-tabs.js. Named to match
+     --md-nested-tabs-label-active-color above rather than hardcoding
+     --md-accent-fg-color directly, so a consumer can override the two
+     independently if their active-page and active-label colors differ. */
+  .nested-tabs__link--active {
+    color: var(--md-nested-tabs-link-active-color, var(--md-accent-fg-color));
+    font-weight: 700;
+  }
+}

mkdocs_nested_tabs-0.2.0/mkdocs_nested_tabs/static/nested-tabs.js

@@ -0,0 +1,177 @@
+(function () {
+  // Reads Material's own primary sidebar nav, which already lists every
+  // top-level category regardless of which page is active, so this stays
+  // in sync with mkdocs.yml's nav: block with no separate config needed.
+  // A category with a third nesting level doesn't fit the "label + page
+  // list" shape this renders, so it falls back to a single link.
+
+  function buildNestedTabs() {
+    const primaryNav = document.querySelector(
+      '[data-md-component="sidebar"][data-md-type="navigation"] .md-nav--primary'
+    );
+    if (!primaryNav) return null;
+
+    const topList = primaryNav.querySelector(":scope > ul.md-nav__list");
+    if (!topList) return null;
+
+    const nav = document.createElement("nav");
+    nav.className = "nested-tabs";
+    nav.setAttribute("aria-label", "Categories");
+
+    // Matches .md-tabs's own .md-grid wrapper so this row aligns with the
+    // rest of the header instead of running edge-to-edge.
+    const grid = document.createElement("div");
+    grid.className = "md-grid nested-tabs__grid";
+
+    const list = document.createElement("ul");
+    list.className = "nested-tabs__list";
+
+    topList.querySelectorAll(":scope > li.md-nav__item--nested").forEach(function (section) {
+      // With navigation.indexes enabled, Material wraps the link version in
+      // an extra <div class="md-nav__container"> instead of putting the <a>
+      // directly on the <li> — without that third alternative here, labelEl
+      // comes back null and the whole section silently disappears from this
+      // row, not just its active-state handling.
+      const labelEl = section.querySelector(
+        ":scope > label.md-nav__link, :scope > a.md-nav__link, :scope > .md-nav__container > a.md-nav__link"
+      );
+      const nestedNav = section.querySelector(":scope > nav.md-nav");
+      if (!labelEl || !nestedNav) return;
+
+      const categoryLabel = labelEl.querySelector(".md-ellipsis")
+        ? labelEl.querySelector(".md-ellipsis").textContent.trim()
+        : labelEl.textContent.trim();
+
+      // With navigation.indexes enabled, Material merges a section's own
+      // index page into its label — labelEl becomes a real <a> (not a
+      // <label> toggle) pointing at that page, and drops it from the child
+      // list entirely. So the label itself, not just one of its children,
+      // can be the active page.
+      const labelIsLink = labelEl.tagName === "A";
+      const labelIsActive = labelIsLink && labelEl.classList.contains("md-nav__link--active");
+
+      const childItems = Array.from(nestedNav.querySelectorAll(":scope > ul.md-nav__list > li.md-nav__item"));
+      const pageLinks = [];
+      let flat = true;
+      for (const pageItem of childItems) {
+        // A sub-category has no direct link, only its own nested nav.
+        const link = pageItem.querySelector(":scope > a.md-nav__link");
+        if (!link) {
+          flat = false;
+          break;
+        }
+        pageLinks.push(link);
+      }
+
+      const group = document.createElement("li");
+      group.className = "nested-tabs__group";
+
+      if (flat && pageLinks.length > 0) {
+        // labelIsLink means navigation.indexes merged this section's own
+        // index page into the label — render it as a real, clickable <a>
+        // (same shape as the fallback branch's label--link below) rather
+        // than an inert <span>, so that page stays reachable from here.
+        const label = document.createElement(labelIsLink ? "a" : "span");
+        label.className = labelIsLink ? "nested-tabs__label nested-tabs__label--link" : "nested-tabs__label";
+        if (labelIsLink) {
+          label.href = labelEl.getAttribute("href");
+        }
+        label.textContent = categoryLabel;
+        group.appendChild(label);
+
+        const pages = document.createElement("ul");
+        pages.className = "nested-tabs__pages";
+        let groupHasActive = labelIsActive;
+        pageLinks.forEach(function (link) {
+          const item = document.createElement("li");
+          const a = document.createElement("a");
+          a.className = "nested-tabs__link";
+          a.href = link.getAttribute("href");
+          a.textContent = link.querySelector(".md-ellipsis")
+            ? link.querySelector(".md-ellipsis").textContent.trim()
+            : link.textContent.trim();
+          if (link.classList.contains("md-nav__link--active")) {
+            a.classList.add("nested-tabs__link--active");
+            a.setAttribute("aria-current", "page");
+            groupHasActive = true;
+          }
+          item.appendChild(a);
+          pages.appendChild(item);
+        });
+        group.appendChild(pages);
+        // Lets a consumer style the category label itself (e.g. "Flow") when
+        // one of its own pages — or, with navigation.indexes, the label's
+        // own merged index page — is the active one, without reaching for a
+        // :has() selector from outside — see nested-tabs.css.
+        if (groupHasActive) {
+          label.classList.add("nested-tabs__label--active");
+          // Only when the label's own page is the active one, not merely a
+          // descendant's — aria-current="page" would misrepresent a parent
+          // category as literally being the current page otherwise.
+          if (labelIsActive) {
+            label.setAttribute("aria-current", "page");
+          }
+        }
+      } else {
+        // navigation.indexes merges a section's own index page into its own
+        // label (see labelIsLink above) before this branch ever sees its
+        // children — so when that happened, labelEl already has everything
+        // needed (href + active state) and searching descendants for an
+        // "overview" page would find nothing, dropping the whole section.
+        // Only fall back to that descendant search for the case with no
+        // navigation.indexes merge, where a plain child page (e.g. an
+        // explicit "All" entry) serves as the overview link instead.
+        let overviewHref;
+        let overviewIsActive;
+        if (labelIsLink) {
+          overviewHref = labelEl.getAttribute("href");
+          overviewIsActive = labelIsActive;
+        } else {
+          const overviewLink = nestedNav.querySelector(
+            ":scope > ul.md-nav__list > li.md-nav__item > a.md-nav__link"
+          );
+          if (!overviewLink) return;
+          overviewHref = overviewLink.getAttribute("href");
+          overviewIsActive = overviewLink.classList.contains("md-nav__link--active");
+        }
+
+        const label = document.createElement("a");
+        label.className = "nested-tabs__label nested-tabs__label--link";
+        label.href = overviewHref;
+        label.textContent = categoryLabel;
+        if (overviewIsActive) {
+          label.classList.add("nested-tabs__link--active");
+          label.setAttribute("aria-current", "page");
+        }
+        group.appendChild(label);
+      }
+
+      list.appendChild(group);
+    });
+
+    if (!list.children.length) return null;
+
+    grid.appendChild(list);
+    nav.appendChild(grid);
+    return nav;
+  }
+
+  // .md-tabs lives inside .md-header, so inserting after it makes this row
+  // a header child too and it inherits the header's sticky positioning for free.
+  function render() {
+    const existing = document.querySelector(".nested-tabs");
+    if (existing) existing.remove();
+
+    const nestedTabs = buildNestedTabs();
+    const tabs = document.querySelector(".md-tabs");
+    if (nestedTabs && tabs) {
+      tabs.insertAdjacentElement("afterend", nestedTabs);
+    }
+  }
+
+  if (window.document$) {
+    window.document$.subscribe(render);
+  } else {
+    document.addEventListener("DOMContentLoaded", render);
+  }
+})();

{mkdocs_nested_tabs-0.1.0 → mkdocs_nested_tabs-0.2.0}/mkdocs_nested_tabs.egg-info/PKG-INFO

@@ -1,7 +1,7 @@
 Metadata-Version: 2.4
 Name: mkdocs-nested-tabs
-Version: 0.1.0
-Summary: Display two levels of navigation.tabs instead of Material's hover-only dropdown.
+Version: 0.2.0
+Summary: For Material for mkdocs, display two levels of navigation.tabs instead of a hover-only dropdown.
 Author-email: Luka Sherman <lukawritecode@gmail.com>
 License: MIT
 Project-URL: Homepage, https://github.com/luka-sherman/mkdocs-nested-tabs
@@ -29,12 +29,12 @@ tab dropdown (one category's children at a time).
 
 ## Status
 
-Early scaffold, ported and generalized from a working implementation. Not yet published.
+Published on PyPI. Ported and generalized from a working implementation.
 
 ## Install
 
 ```bash
-pip install mkdocs-nested-tabs   # not yet published
+pip install mkdocs-nested-tabs
 ```
 
 ```yaml
@@ -52,6 +52,10 @@ Requires `navigation.tabs` to be enabled — this plugin replaces that
 feature's tab bar on desktop widths (≥76.234375em, matching Material's own
 breakpoint), it doesn't work alongside a site with tabs disabled.
 
+Compatible with `navigation.indexes` — a category label whose own index page
+Material merges in becomes a real link to that page, with correct
+active/current-page state.
+
 ## How it works
 
 Reads Material's own primary sidebar nav at runtime (which already contains
@@ -82,8 +86,18 @@ so it looks reasonable on any palette out of the box. Override via:
 
 ```css
 :root {
+  /* Default (inactive) label/link color */
   --md-nested-tabs-label-color: ...;
   --md-nested-tabs-link-color: ...;
+
+  /* Active label/link color — the label gets .nested-tabs__label--active
+     when one of its own pages is active, not just the page link itself */
+  --md-nested-tabs-label-active-color: ...;
+  --md-nested-tabs-link-active-color: ...;
+
+  /* Hover/focus label/link color */
+  --md-nested-tabs-label-hover-color: ...;
+  --md-nested-tabs-link-hover-color: ...;
 }
 ```
 

{mkdocs_nested_tabs-0.1.0 → mkdocs_nested_tabs-0.2.0}/pyproject.toml

@@ -4,8 +4,8 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "mkdocs-nested-tabs"
-version = "0.1.0"
-description = "Display two levels of navigation.tabs instead of Material's hover-only dropdown."
+version = "0.2.0"
+description = "For Material for mkdocs, display two levels of navigation.tabs instead of a hover-only dropdown."
 readme = "README.md"
 requires-python = ">=3.9"
 license = { text = "MIT" }

{mkdocs_nested_tabs-0.1.0 → mkdocs_nested_tabs-0.2.0}/tests/test_plugin.py

@@ -1,7 +1,4 @@
-"""Builds tests/fixture_site (a tiny navigation.tabs project with a flat
-2-page category and a nested-subcategory category) and checks the plugin's
-actual effect on the built output — not just that on_config/on_files run
-without raising."""
+"""Builds tests/fixture_site and checks the plugin's effect on the built output."""
 
 import subprocess
 import sys
@@ -33,13 +30,10 @@ def test_assets_are_built_and_referenced(tmp_path):
 
 
 def test_flat_category_lists_both_pages():
-    """Section A (Page A1, Page A2) has no third nesting level, so it should
-    render as a label with both page links underneath — the "flat" branch
-    in nested-tabs.js."""
+    """Section A has no third nesting level, so it should render as a label
+    with both page links underneath — the "flat" branch in nested-tabs.js."""
     content = (Path(__file__).parent / "fixture_site" / "docs" / "index.md").read_text()
-    assert content  # placeholder for the DOM-level assertion below
+    assert content
 
-    # The rendering itself happens client-side (nested-tabs.js reads the
-    # built primary-sidebar nav at runtime), so this needs a real browser —
-    # see the manual verification steps in the README until a Playwright
-    # tier is added here to match python-field-guide's own test setup.
+    # nested-tabs.js renders client-side by reading the built sidebar nav at
+    # runtime, so this needs a real browser — see README for manual steps.

mkdocs_nested_tabs-0.1.0/mkdocs_nested_tabs/static/nested-tabs.css

@@ -1,91 +0,0 @@
-/* True desktop only (matches Material's own navigation.tabs breakpoint):
-   .mdx-nested-tabs replaces the native tab bar there — each category's name
-   is already its own column header in this row, so keeping both would show
-   every category name twice, stacked on top of itself. Below this width,
-   Material's native tabs (or the hamburger drawer) still apply unmodified. */
-@media screen and (min-width: 76.234375em) {
-  .md-tabs {
-    display: none;
-  }
-}
-
-/* .mdx-nested-tabs is inserted as a DOM child of .md-header, right after
-   .md-tabs (see nested-tabs.js) — so it's a genuine part of the header, not
-   a separate bar bolted on below: it rides along with .md-header's own
-   sticky positioning and background automatically. Transparent background
-   for the same reason .md-tabs is transparent: lets the header's own
-   background/artwork show through instead of drawing a second, visually
-   separate box. */
-.mdx-nested-tabs {
-  display: none;
-}
-
-@media screen and (min-width: 76.234375em) {
-  .mdx-nested-tabs {
-    display: block;
-    background-color: transparent;
-  }
-
-  .mdx-nested-tabs__list {
-    display: flex;
-    list-style: none;
-    margin: 0 0.2rem;
-    padding: 0.5rem 0;
-    gap: 1.4rem;
-  }
-
-  .mdx-nested-tabs__group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.15rem;
-  }
-
-  .mdx-nested-tabs__label {
-    font-size: 0.64rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    /* Falls back to Material's own faded-foreground variable so this reads
-       reasonably on any palette out of the box; a consumer can override
-       --md-nested-tabs-label-color directly without touching this file. */
-    color: var(--md-nested-tabs-label-color, var(--md-default-fg-color--light));
-  }
-
-  /* A category with a third nesting level (see nested-tabs.js) renders as a
-     single link instead of a label + page list — needs its own hover/active
-     state, unlike the other groups' inert <span> labels. */
-  .mdx-nested-tabs__label--link {
-    text-decoration: none;
-  }
-
-  .mdx-nested-tabs__label--link:hover,
-  .mdx-nested-tabs__label--link:focus-visible {
-    color: var(--md-accent-fg-color);
-    text-decoration: underline;
-  }
-
-  .mdx-nested-tabs__pages {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    gap: 0.7rem;
-  }
-
-  .mdx-nested-tabs__link {
-    font-size: 0.7rem;
-    color: var(--md-nested-tabs-link-color, var(--md-default-fg-color));
-    text-decoration: none;
-  }
-
-  .mdx-nested-tabs__link:hover,
-  .mdx-nested-tabs__link:focus-visible {
-    color: var(--md-accent-fg-color);
-    text-decoration: underline;
-  }
-
-  .mdx-nested-tabs__link--active {
-    color: var(--md-accent-fg-color);
-    font-weight: 700;
-  }
-}

mkdocs_nested_tabs-0.1.0/mkdocs_nested_tabs/static/nested-tabs.js

@@ -1,142 +0,0 @@
-(function () {
-  // Desktop-only nav row that replaces Material's native tab bar: every
-  // navigation.tabs category shown at once with all of its child pages
-  // listed underneath, instead of only being reachable via Material's
-  // hover-triggered tab dropdown (a gap explicitly declined upstream —
-  // see squidfunk/mkdocs-material#4765). Built by reading Material's own
-  // primary sidebar nav, which already contains the full site tree (every
-  // section, not just the active one — Material only flags the active
-  // top-level section with --section; every other one just gets --nested,
-  // regardless of which page you're on) rather than requiring a
-  // hand-maintained config list, so this stays in sync with mkdocs.yml's
-  // nav: block automatically.
-  //
-  // A category with a third nesting level (a sub-category with its own
-  // children, rather than a flat list of pages) doesn't fit the
-  // "category + pages" shape this row renders — those fall back to a
-  // single link, using the first leaf page found inside them as the
-  // target (usually an "index"/"All" overview page).
-
-  function buildNestedTabs() {
-    const primaryNav = document.querySelector(
-      '[data-md-component="sidebar"][data-md-type="navigation"] .md-nav--primary'
-    );
-    if (!primaryNav) return null;
-
-    const topList = primaryNav.querySelector(":scope > ul.md-nav__list");
-    if (!topList) return null;
-
-    const nav = document.createElement("nav");
-    nav.className = "mdx-nested-tabs";
-    nav.setAttribute("aria-label", "Categories");
-
-    // .md-tabs wraps its own list in a bare .md-grid div for the same
-    // centered max-width alignment as .md-header__inner (logo/title/search)
-    // — match that structure so this row lines up with the rest of the
-    // header instead of running edge-to-edge.
-    const grid = document.createElement("div");
-    grid.className = "md-grid mdx-nested-tabs__grid";
-
-    const list = document.createElement("ul");
-    list.className = "mdx-nested-tabs__list";
-
-    topList.querySelectorAll(":scope > li.md-nav__item--nested").forEach(function (section) {
-      const labelEl = section.querySelector(":scope > label.md-nav__link, :scope > a.md-nav__link");
-      const nestedNav = section.querySelector(":scope > nav.md-nav");
-      if (!labelEl || !nestedNav) return;
-
-      const categoryLabel = labelEl.querySelector(".md-ellipsis")
-        ? labelEl.querySelector(".md-ellipsis").textContent.trim()
-        : labelEl.textContent.trim();
-
-      const childItems = Array.from(nestedNav.querySelectorAll(":scope > ul.md-nav__list > li.md-nav__item"));
-      const pageLinks = [];
-      let flat = true;
-      for (const pageItem of childItems) {
-        // A real page item links directly to itself; a further-nested
-        // sub-category only has a label + its own nested nav, same shape
-        // as this top-level section.
-        const link = pageItem.querySelector(":scope > a.md-nav__link");
-        if (!link) {
-          flat = false;
-          break;
-        }
-        pageLinks.push(link);
-      }
-
-      const group = document.createElement("li");
-      group.className = "mdx-nested-tabs__group";
-
-      if (flat && pageLinks.length > 0) {
-        const label = document.createElement("span");
-        label.className = "mdx-nested-tabs__label";
-        label.textContent = categoryLabel;
-        group.appendChild(label);
-
-        const pages = document.createElement("ul");
-        pages.className = "mdx-nested-tabs__pages";
-        pageLinks.forEach(function (link) {
-          const item = document.createElement("li");
-          const a = document.createElement("a");
-          a.className = "mdx-nested-tabs__link";
-          a.href = link.getAttribute("href");
-          a.textContent = link.querySelector(".md-ellipsis")
-            ? link.querySelector(".md-ellipsis").textContent.trim()
-            : link.textContent.trim();
-          if (link.classList.contains("md-nav__link--active")) {
-            a.classList.add("mdx-nested-tabs__link--active");
-            a.setAttribute("aria-current", "page");
-          }
-          item.appendChild(a);
-          pages.appendChild(item);
-        });
-        group.appendChild(pages);
-      } else {
-        const overviewLink = nestedNav.querySelector(
-          ":scope > ul.md-nav__list > li.md-nav__item > a.md-nav__link"
-        );
-        if (!overviewLink) return;
-
-        const label = document.createElement("a");
-        label.className = "mdx-nested-tabs__label mdx-nested-tabs__label--link";
-        label.href = overviewLink.getAttribute("href");
-        label.textContent = categoryLabel;
-        if (overviewLink.classList.contains("md-nav__link--active")) {
-          label.classList.add("mdx-nested-tabs__link--active");
-          label.setAttribute("aria-current", "page");
-        }
-        group.appendChild(label);
-      }
-
-      list.appendChild(group);
-    });
-
-    if (!list.children.length) return null;
-
-    grid.appendChild(list);
-    nav.appendChild(grid);
-    return nav;
-  }
-
-  // .md-tabs lives inside .md-header (not below it, despite how it reads
-  // visually), so inserting right after it via insertAdjacentElement makes
-  // this row a header child too — it rides along with .md-header's own
-  // sticky positioning and decorative background for free, no separate
-  // sticky/offset math needed here.
-  function render() {
-    const existing = document.querySelector(".mdx-nested-tabs");
-    if (existing) existing.remove();
-
-    const nestedTabs = buildNestedTabs();
-    const tabs = document.querySelector(".md-tabs");
-    if (nestedTabs && tabs) {
-      tabs.insertAdjacentElement("afterend", nestedTabs);
-    }
-  }
-
-  if (window.document$) {
-    window.document$.subscribe(render);
-  } else {
-    document.addEventListener("DOMContentLoaded", render);
-  }
-})();