@leed-ai/cli 0.0.0-stage → 6.19.0

package/dist/static/javascript/documentation.js

@@ -0,0 +1,2781 @@
+// Configuration and constants
+const CONFIG = {
+  NOTIFICATION_TIMEOUT: 2000,
+  DEBOUNCE_DELAYS: {
+    FAST: 30,
+    MEDIUM: 50,
+    SLOW: 100,
+    // Announcements only: a live region has to wait for a pause in typing, well
+    // past the point where the thing it describes has finished moving.
+    ANNOUNCE: 500,
+  },
+  BREAKPOINTS: {
+    SMALLEST: 640,
+    MOBILE: 768,
+    DESKTOP: 1024,
+  },
+  SELECTORS: {
+    CODE_BLOCKS: "pre code:not(.math)",
+    TABS: '[role="tab"]',
+    MENU_ITEMS: ".leed-menu__item, .leed-submenu__item",
+    SIDEBAR: ".docs-sidebar",
+    TOC_LINKS: ".leed-nav-toc a",
+    MERMAID_DIAGRAMS: "pre.mermaid",
+    MATH_ELEMENTS: "code.math",
+  },
+  ARIA: {
+    EXPANDED: "aria-expanded",
+    HIDDEN: "aria-hidden",
+    CURRENT: "aria-current",
+    CONTROLS: "aria-controls",
+    HASPOPUP: "aria-haspopup",
+  },
+  CLASSES: {
+    NOT_PROSE: "not-prose",
+    COPIED: "copied",
+    JUST_COPIED: "just-copied",
+    HIDDEN: "hidden",
+    BLOCK: "block",
+    WITH_ANCHOR: "docs-with-anchor",
+  },
+};
+
+// Utility functions
+const Utils = {
+  debounce(func, wait) {
+    let timeout;
+    return (...args) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => func(...args), wait);
+    };
+  },
+
+  isSmallest() {
+    return window.innerWidth < CONFIG.BREAKPOINTS.SMALLEST;
+  },
+
+  isMobile() {
+    return window.innerWidth < CONFIG.BREAKPOINTS.MOBILE;
+  },
+
+  isSmallerThanDesktop() {
+    return window.innerWidth < CONFIG.BREAKPOINTS.DESKTOP;
+  },
+
+  isDesktop() {
+    return window.innerWidth >= CONFIG.BREAKPOINTS.DESKTOP;
+  },
+};
+
+// Notification system
+const Notification = {
+  show(element, message, className = "notification", timeout = CONFIG.NOTIFICATION_TIMEOUT) {
+    // Remove any existing notifications of the same class
+    const existingNotification = element.querySelector(`.${className}`);
+    if (existingNotification) {
+      existingNotification.remove();
+    }
+
+    const notification = document.createElement("span");
+    notification.className = className;
+    notification.textContent = message;
+    element.appendChild(notification);
+
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.parentNode.removeChild(notification);
+      }
+    }, timeout);
+  },
+};
+
+// ARIA state management
+const AriaManager = {
+  setExpanded(element, expanded) {
+    element.setAttribute(CONFIG.ARIA.EXPANDED, expanded);
+  },
+
+  setHidden(element, hidden) {
+    element.setAttribute(CONFIG.ARIA.HIDDEN, hidden);
+  },
+
+  setCurrent(element, current) {
+    element.setAttribute(CONFIG.ARIA.CURRENT, current);
+  },
+
+  removeCurrent(element) {
+    element.removeAttribute(CONFIG.ARIA.CURRENT);
+  },
+};
+
+// DOM cache for performance
+const DOMCache = {
+  elements: {},
+
+  get(selector) {
+    if (!this.elements[selector]) {
+      this.elements[selector] = document.querySelector(selector);
+    }
+    return this.elements[selector];
+  },
+
+  getAll(selector) {
+    if (!this.elements[selector]) {
+      this.elements[selector] = document.querySelectorAll(selector);
+    }
+    return this.elements[selector];
+  },
+
+  clear() {
+    this.elements = {};
+  },
+};
+
+// Mermaid diagram manager
+const MermaidManager = {
+  init() {
+    if (typeof mermaid === "undefined") return;
+
+    this.setupTheme();
+    this.ensureThemeRenders().then(() => this.renderDiagrams());
+    this.setupThemeListener();
+  },
+
+  /**
+   * A site can put its own palette on diagrams by shipping
+   * `static/js/mermaid.theme.json`, which the build publishes as
+   * `window.leedMermaidTheme` — one Mermaid config per scheme.
+   *
+   * It is applied here rather than where it is published because this is the
+   * `initialize()` that wins: it runs after the bootstrap, and again on every
+   * scheme change. That is also what makes a themed site switch live — the
+   * diagrams were already being redrawn, so they are redrawn in the other
+   * palette rather than waiting for a reload.
+   *
+   * `theme` comes first so a site's own `theme` (usually `"base"`, which is
+   * what makes `themeVariables` take effect at all) replaces our default.
+   * `startOnLoad` comes last and cannot be overridden — we render below, and a
+   * site turning it back on would get every diagram drawn twice.
+   */
+  setupTheme() {
+    const prefersDarkMode = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+    const theme = prefersDarkMode ? "dark" : "default";
+    const site = window.leedMermaidTheme?.[prefersDarkMode ? "dark" : "light"];
+
+    mermaid.initialize({
+      theme,
+      ...site,
+      startOnLoad: false,
+    });
+  },
+
+  /**
+   * Prove the site's palette can render anything at all, before the real
+   * diagrams are drawn.
+   *
+   * A palette may name a color Mermaid cannot parse — `var(--token)` is the
+   * useful case, and Mermaid accepts it in the variables it uses verbatim but
+   * throws on the handful it derives other colors from. Which are which is
+   * internal to Mermaid and can move in a minor version, so a palette that
+   * worked can start throwing on an upgrade, and the throw would otherwise
+   * take every diagram on the page down to raw source.
+   *
+   * A probe rather than a reaction, deliberately. Reacting to the first render
+   * failure cannot tell a bad palette from one badly written diagram, and
+   * guessing "palette" there means a single typo'd diagram silently strips the
+   * colors from every other one on the page. This asks the question directly,
+   * on a diagram known to be valid, and costs one render of two nodes.
+   */
+  async ensureThemeRenders() {
+    if (!window.leedMermaidTheme) return;
+    try {
+      await mermaid.render("leed-mermaid-theme-probe", "flowchart LR\n  a --> b");
+    } catch (error) {
+      const prefersDarkMode = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+      console.error(
+        "Mermaid rejected this site's palette from static/js/mermaid.theme.json; rendering in Mermaid's own colors instead.",
+        error,
+      );
+      mermaid.initialize({ theme: prefersDarkMode ? "dark" : "default", startOnLoad: false });
+    }
+  },
+
+  renderDiagrams() {
+    const diagrams = document.querySelectorAll(CONFIG.SELECTORS.MERMAID_DIAGRAMS);
+    let counter = 0;
+
+    diagrams.forEach((diagram) => {
+      const id = `mermaid-${counter++}`;
+
+      if (diagram.originalCode === undefined) {
+        diagram.originalCode = diagram.textContent.trim();
+      }
+
+      mermaid
+        .render(id, diagram.originalCode)
+        .then(({ svg }) => {
+          diagram.innerHTML = svg;
+        })
+        .catch((err) => {
+          // This diagram's own problem. The palette was already proven in
+          // ensureThemeRenders, so one bad diagram never costs the others
+          // their colors.
+          console.error("Mermaid rendering failed:", err);
+        });
+    });
+  },
+
+  setupThemeListener() {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      this.setupTheme();
+      this.ensureThemeRenders().then(() => this.renderDiagrams());
+    });
+  },
+};
+
+// Code block manager
+const CodeBlockManager = {
+  init() {
+    this.setupCodeHighlighting();
+    this.setupCopyButtons();
+  },
+
+  setupCodeHighlighting() {
+    document.querySelectorAll("pre > code").forEach((element) => {
+      element.classList.add(CONFIG.CLASSES.NOT_PROSE);
+      element.parentElement.classList.add(CONFIG.CLASSES.NOT_PROSE);
+    });
+
+    if (typeof hljs !== "undefined") {
+      document.querySelectorAll("pre > code").forEach((element) => {
+        if (!element.classList.contains("math")) {
+          hljs.highlightElement(element);
+        }
+      });
+    }
+
+    if (typeof katex !== "undefined") {
+      const mathElements = document.querySelectorAll(CONFIG.SELECTORS.MATH_ELEMENTS);
+      mathElements.forEach((element) => {
+        katex.render(element.textContent, element, { strict: false });
+      });
+    }
+  },
+
+  setupCopyButtons() {
+    const codeBlocks = document.querySelectorAll(CONFIG.SELECTORS.CODE_BLOCKS);
+
+    codeBlocks.forEach((codeBlock) => {
+      const pre = codeBlock.parentElement;
+      const wrapper = document.createElement("div");
+      wrapper.className = "code-block-wrapper";
+
+      pre.parentNode.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+
+      const copyButton = document.createElement("button");
+      copyButton.className = "copy-code-button";
+      copyButton.setAttribute("aria-label", "Copy code to clipboard");
+      copyButton.innerHTML = '<i class="copy"></i>';
+
+      wrapper.appendChild(copyButton);
+
+      copyButton.addEventListener("click", async () => {
+        try {
+          await navigator.clipboard.writeText(codeBlock.textContent);
+
+          copyButton.classList.add(CONFIG.CLASSES.COPIED);
+          wrapper.classList.add(CONFIG.CLASSES.JUST_COPIED);
+
+          Notification.show(copyButton, "Copied!", "code-copied-notification");
+
+          setTimeout(() => {
+            copyButton.classList.remove(CONFIG.CLASSES.COPIED);
+            wrapper.classList.remove(CONFIG.CLASSES.JUST_COPIED);
+          }, CONFIG.NOTIFICATION_TIMEOUT);
+        } catch (err) {
+          console.error("Failed to copy: ", err);
+        }
+      });
+    });
+  },
+};
+
+// Tab manager
+const TabManager = {
+  init() {
+    document.querySelectorAll(".leed-tabs__container").forEach((container) => {
+      this.initializeTabs(container);
+    });
+    this.restoreTabStates();
+  },
+
+  initializeTabs(container) {
+    const tabs = Array.from(container.querySelectorAll(CONFIG.SELECTORS.TABS));
+    const tabList = container.querySelector('[role="tablist"]');
+    tabList.classList.add(CONFIG.CLASSES.NOT_PROSE);
+
+    tabs.forEach((tab, index) => {
+      tab.setAttribute("data-tab-index", index);
+      tab.addEventListener("click", () => this.activateTabGroup(tab));
+      tab.addEventListener("keydown", this.handleTabKeydown);
+    });
+
+    if (tabList) {
+      tabList.addEventListener("keydown", this.handleTablistKeydown);
+    }
+
+    const activeTab = tabs.find((tab) => tab.getAttribute("aria-selected") === "true");
+    if (!activeTab && tabs.length > 0) {
+      this.activateTab(tabs[0]);
+    }
+  },
+
+  activateTabGroup(clickedTab) {
+    const clickedTabIndex = parseInt(clickedTab.getAttribute("data-tab-index"), 10);
+    const tabContainer = clickedTab.closest(".leed-tabs__container");
+    const groupId = tabContainer.getAttribute("data-tabs-groupId");
+
+    if (!groupId) {
+      this.activateTab(clickedTab);
+      return;
+    }
+
+    this.saveTabStateByIndex(groupId, clickedTabIndex);
+
+    const containersInGroup = document.querySelectorAll(`.leed-tabs__container[data-tabs-groupId="${groupId}"]`);
+
+    containersInGroup.forEach((container) => {
+      const tabsInContainer = Array.from(container.querySelectorAll(CONFIG.SELECTORS.TABS));
+      if (clickedTabIndex < tabsInContainer.length) {
+        this.activateTab(tabsInContainer[clickedTabIndex]);
+      }
+    });
+  },
+
+  handleTabKeydown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      TabManager.activateTabGroup(event.currentTarget);
+    }
+  },
+
+  handleTablistKeydown(event) {
+    const tabs = Array.from(event.currentTarget.querySelectorAll(CONFIG.SELECTORS.TABS));
+    const currentTab = document.activeElement;
+
+    if (!tabs.includes(currentTab)) return;
+
+    const currentIndex = tabs.indexOf(currentTab);
+    let targetTab;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        targetTab = tabs[(currentIndex + 1) % tabs.length];
+        targetTab.focus();
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        targetTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+        targetTab.focus();
+        break;
+      case "Home":
+        event.preventDefault();
+        tabs[0].focus();
+        break;
+      case "End":
+        event.preventDefault();
+        tabs[tabs.length - 1].focus();
+        break;
+    }
+  },
+
+  activateTab(tab) {
+    const tabContainer = tab.closest(".leed-tabs__container");
+    const tabs = Array.from(tab.closest('[role="tablist"]').querySelectorAll(CONFIG.SELECTORS.TABS));
+    const panelId = tab.getAttribute(CONFIG.ARIA.CONTROLS);
+    const panel = document.getElementById(panelId);
+
+    tabs.forEach((tab) => {
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+    });
+
+    tabContainer.querySelectorAll('[role="tabpanel"]').forEach((tabPanel) => {
+      tabPanel.classList.add(CONFIG.CLASSES.HIDDEN);
+      tabPanel.classList.remove(CONFIG.CLASSES.BLOCK);
+    });
+
+    tab.setAttribute("aria-selected", "true");
+    tab.setAttribute("tabindex", "0");
+
+    if (panel) {
+      panel.classList.remove(CONFIG.CLASSES.HIDDEN);
+      panel.classList.add(CONFIG.CLASSES.BLOCK);
+    }
+  },
+
+  saveTabStateByIndex(groupId, tabIndex) {
+    if (!groupId) return false;
+
+    try {
+      const storageKey = `leed-tabs-${groupId}`;
+      localStorage.setItem(storageKey, tabIndex.toString());
+      return true;
+    } catch (e) {
+      console.warn("Unable to save tab state:", e);
+      return false;
+    }
+  },
+
+  restoreTabStates() {
+    const groupIds = new Set();
+    document.querySelectorAll(".leed-tabs__container[data-tabs-groupId]").forEach((container) => {
+      const groupId = container.getAttribute("data-tabs-groupId");
+      if (groupId) {
+        groupIds.add(groupId);
+      }
+    });
+
+    groupIds.forEach((groupId) => {
+      try {
+        const storageKey = `leed-tabs-${groupId}`;
+        const savedTabIndex = localStorage.getItem(storageKey);
+
+        if (savedTabIndex !== null) {
+          const tabIndex = parseInt(savedTabIndex, 10);
+
+          document.querySelectorAll(`.leed-tabs__container[data-tabs-groupId="${groupId}"]`).forEach((container) => {
+            const tabs = container.querySelectorAll(CONFIG.SELECTORS.TABS);
+            if (tabIndex < tabs.length) {
+              this.activateTab(tabs[tabIndex]);
+            }
+          });
+        }
+      } catch (e) {
+        console.warn(`Unable to restore tab state for group ${groupId}:`, e);
+      }
+    });
+  },
+};
+
+// Menu manager
+const MenuManager = {
+  createComponent() {
+    return {
+      openDropdowns: {},
+
+      init() {
+        this.setupMenuStructure();
+        this.markActivePageAndExpandMenus();
+        this.setupMenuToggle();
+        this.setupKeyboardNavigation();
+      },
+
+      isTopLevelMenuItem(item) {
+        // Check if this is a top-level menu item (direct child of .leed-menu)
+        return item.closest(".leed-menu") === item.parentElement;
+      },
+
+      shouldItemBeExpanded(item) {
+        // Check if the item itself has data-expanded="true"
+        if (item.getAttribute("data-expanded") === "true") {
+          return true;
+        }
+
+        // Check if the parent .leed-menu has data-expanded="true"
+        const parentMenu = item.closest(".leed-menu");
+        if (parentMenu && parentMenu.getAttribute("data-expanded") === "true") {
+          return true;
+        }
+
+        return false;
+      },
+
+      setupMenuStructure() {
+        this.$el.querySelectorAll(".leed-menu__item--toggle").forEach((toggle) => {
+          toggle.setAttribute("aria-hidden", "false");
+        });
+
+        this.$el.querySelectorAll(".leed-menu").forEach((menu) => {
+          menu.setAttribute("role", "menu");
+          menu.setAttribute("aria-orientation", "vertical");
+        });
+
+        this.$el.querySelectorAll(CONFIG.SELECTORS.MENU_ITEMS).forEach((item) => {
+          item.setAttribute("role", "menuitem");
+
+          const submenu = item.querySelector(".leed-submenu");
+          if (submenu) {
+            // Check if this is a top-level menu item (direct child of .leed-menu)
+            const isTopLevel = this.isTopLevelMenuItem(item);
+
+            if (isTopLevel) {
+              // Top-level menus are always expanded and not collapsible
+              item.setAttribute(CONFIG.ARIA.EXPANDED, "true");
+              item.setAttribute("aria-disabled", "true"); // Prevent interaction
+
+              const submenuId = submenu.id || `submenu-${item.dataset.submenuId}`;
+              submenu.id = submenuId;
+              item.setAttribute(CONFIG.ARIA.CONTROLS, submenuId);
+
+              submenu.setAttribute(CONFIG.ARIA.HIDDEN, "false");
+              submenu.setAttribute("role", "menu");
+
+              // Store the submenu ID as always open
+              const id = item.dataset.submenuId;
+              if (id) {
+                this.openDropdowns[id] = true;
+              }
+            } else {
+              // Nested menus are collapsible, but preserve items if they should be expanded
+              const shouldBeExpanded = this.shouldItemBeExpanded(item);
+
+              // Only set to collapsed if item should not be expanded
+              if (!shouldBeExpanded) {
+                item.setAttribute(CONFIG.ARIA.EXPANDED, "false");
+                // Remove focus from any focused elements within the submenu before hiding
+                const focusedElement = submenu.querySelector(":focus");
+                if (focusedElement) {
+                  focusedElement.blur();
+                }
+                submenu.setAttribute(CONFIG.ARIA.HIDDEN, "true");
+              }
+
+              const submenuId = submenu.id || `submenu-${item.dataset.submenuId}`;
+              submenu.id = submenuId;
+              item.setAttribute(CONFIG.ARIA.CONTROLS, submenuId);
+
+              submenu.setAttribute("role", "menu");
+
+              // Store the submenu ID as open if it should be expanded
+              if (shouldBeExpanded) {
+                const id = item.dataset.submenuId;
+                if (id) {
+                  this.openDropdowns[id] = true;
+                }
+              }
+            }
+          }
+        });
+
+        // Prevent sidebar from closing when clicking on menu links
+        this.$el.querySelectorAll("a").forEach((link) => {
+          link.addEventListener("click", (e) => {
+            // Stop the click event from bubbling up to the sidebar's @click.away
+            e.stopPropagation();
+          });
+        });
+      },
+
+      // Center the active item in the sidebar's own scroller. scrollIntoView
+      // would scroll every scrollable ancestor up to and including the
+      // viewport, so an item near the bottom of the menu — past what the
+      // sidebar can scroll on its own — leaves the remainder to the document
+      // and the page loads scrolled down. The sidebar is sticky, so that
+      // scroll does not even move the item.
+      centerInSidebar(item) {
+        const scroller = item.closest(CONFIG.SELECTORS.SIDEBAR);
+        if (!scroller || scroller.scrollHeight <= scroller.clientHeight) {
+          return;
+        }
+
+        const offset = item.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+        // The browser clamps scrollTop to the scrollable range.
+        scroller.scrollTop += offset - (scroller.clientHeight - item.offsetHeight) / 2;
+      },
+
+      markActivePageAndExpandMenus() {
+        const currentPath = window.location.pathname;
+        let foundActive = false;
+
+        this.$el.querySelectorAll("a").forEach((link) => {
+          const href = link.getAttribute("href");
+
+          if (href && (href === currentPath || currentPath.endsWith(href))) {
+            foundActive = true;
+
+            const activeItem = link.closest(CONFIG.SELECTORS.MENU_ITEMS);
+            if (activeItem) {
+              AriaManager.setCurrent(activeItem, "page");
+              this.expandParentMenus(activeItem);
+              // After Alpine has applied the expansion above, so the item is
+              // measured at its final position.
+              this.$nextTick(() => this.centerInSidebar(activeItem));
+
+              if (activeItem.hasAttribute(CONFIG.ARIA.HASPOPUP)) {
+                const id = activeItem.dataset.submenuId;
+                if (id) {
+                  this.openDropdowns[id] = true;
+                }
+
+                AriaManager.setExpanded(activeItem, true);
+                const submenuId = activeItem.getAttribute(CONFIG.ARIA.CONTROLS);
+                if (submenuId) {
+                  const submenu = document.getElementById(submenuId);
+                  if (submenu) {
+                    AriaManager.setHidden(submenu, false);
+                  }
+                }
+              }
+
+              // Make current page link not clickable
+              link.addEventListener("click", (e) => {
+                e.preventDefault();
+              });
+
+              // Add visual indication that this is the current page
+              link.classList.add("cursor-default");
+            }
+          }
+        });
+      },
+
+      expandParentMenus(item) {
+        let parent = item.parentElement;
+
+        while (parent) {
+          if (parent.classList.contains("leed-submenu")) {
+            const parentMenuItem = parent.parentElement;
+
+            if (parentMenuItem?.hasAttribute(CONFIG.ARIA.HASPOPUP)) {
+              const id = parentMenuItem.dataset.submenuId;
+              if (id) {
+                this.openDropdowns[id] = true;
+              }
+
+              AriaManager.setExpanded(parentMenuItem, true);
+              AriaManager.setHidden(parent, false);
+            }
+          }
+
+          parent = parent.parentElement;
+        }
+      },
+
+      setupMenuToggle() {
+        this.$el.querySelectorAll(`[${CONFIG.ARIA.HASPOPUP}='menu']`).forEach((item) => {
+          // Skip top-level menu items - they should not be collapsible
+          const isTopLevel = this.isTopLevelMenuItem(item);
+          if (isTopLevel) {
+            return; // Skip setting up toggle functionality for top-level items
+          }
+
+          const submenuId = item.getAttribute(CONFIG.ARIA.CONTROLS);
+          const submenu = document.getElementById(submenuId);
+          const id = item.dataset.submenuId;
+
+          if (submenu && id) {
+            Alpine.bind(item, {
+              "x-data"() {
+                return { id };
+              },
+              "@click.stop"() {
+                const isExpanded = item.getAttribute(CONFIG.ARIA.EXPANDED) === "true";
+                const newState = !isExpanded;
+
+                this.openDropdowns[id] = newState;
+                AriaManager.setExpanded(item, newState);
+                // Remove focus from any focused elements within the submenu before hiding
+                if (!newState) {
+                  const focusedElement = submenu.querySelector(":focus");
+                  if (focusedElement) {
+                    focusedElement.blur();
+                  }
+                }
+                AriaManager.setHidden(submenu, !newState);
+              },
+            });
+          }
+        });
+      },
+
+      setupKeyboardNavigation() {
+        this.$el.addEventListener("keydown", (e) => {
+          const activeElement = document.activeElement;
+          const menuItem = activeElement.closest("[role='menuitem']");
+
+          if (!menuItem) return;
+
+          // Skip keyboard navigation for top-level menu items
+          const isTopLevel = this.isTopLevelMenuItem(menuItem);
+          if (isTopLevel && menuItem.hasAttribute(CONFIG.ARIA.HASPOPUP)) {
+            return; // Skip keyboard toggle for top-level items
+          }
+
+          switch (e.key) {
+            case "Enter":
+            case " ":
+              if (menuItem.hasAttribute(CONFIG.ARIA.HASPOPUP)) {
+                e.preventDefault();
+                const isExpanded = menuItem.getAttribute(CONFIG.ARIA.EXPANDED) === "true";
+                const newState = !isExpanded;
+
+                AriaManager.setExpanded(menuItem, newState);
+
+                const submenuId = menuItem.getAttribute(CONFIG.ARIA.CONTROLS);
+                const submenu = document.getElementById(submenuId);
+                if (submenu) {
+                  // Remove focus from any focused elements within the submenu before hiding
+                  if (!newState) {
+                    const focusedElement = submenu.querySelector(":focus");
+                    if (focusedElement) {
+                      focusedElement.blur();
+                    }
+                  }
+                  AriaManager.setHidden(submenu, !newState);
+
+                  const id = menuItem.dataset.submenuId;
+                  if (id) this.openDropdowns[id] = newState;
+                }
+              }
+              break;
+
+            case "Escape": {
+              e.preventDefault();
+              const parentMenu = menuItem.closest(".leed-submenu");
+              if (parentMenu) {
+                const parentItem = parentMenu.closest(`[${CONFIG.ARIA.HASPOPUP}='menu']`);
+                if (parentItem) {
+                  // Don't collapse if it's a top-level menu
+                  const isParentTopLevel = this.isTopLevelMenuItem(parentItem);
+                  if (!isParentTopLevel) {
+                    AriaManager.setExpanded(parentItem, false);
+                    // Remove focus from any focused elements within the submenu before hiding
+                    const focusedElement = parentMenu.querySelector(":focus");
+                    if (focusedElement) {
+                      focusedElement.blur();
+                    }
+                    AriaManager.setHidden(parentMenu, true);
+
+                    const id = parentItem.dataset.submenuId;
+                    if (id) this.openDropdowns[id] = false;
+
+                    parentItem.focus();
+                  }
+                }
+              }
+              break;
+            }
+          }
+        });
+      },
+    };
+  },
+};
+
+// Left navigation filter. Deliberately a plain manager rather than an Alpine
+// component: it runs on its own attribute channel — `data-filtering` on
+// #docs-navigation, `data-filter-hidden` on the items — and never writes
+// aria-expanded or MenuManager's openDropdowns, which stay Alpine's exclusively.
+//
+// The one exception is aria-hidden on a submenu the filter reveals. Revealing a
+// collapsed section with CSS alone would paint tabbable links that are absent
+// from the accessibility tree (WCAG 4.1.2), so the reveal is done in aria and
+// marked with data-filter-revealed. Nothing is stashed: aria-hidden on a submenu
+// is derivable, always the negation of its controlling <li>'s aria-expanded, so
+// clearing recomputes it. A section the reader toggles mid-filter therefore
+// keeps the reader's choice, and the two systems cannot end up disagreeing.
+//
+// The two systems never run at the same time either: a click on a section
+// header exits filter mode in the capture phase, so MenuManager's toggle only
+// ever reads a menu the filter has already handed back (see bindEvents).
+const NavFilterManager = {
+  items: [],
+  pending: "",
+  query: "",
+  // The debounced writer for the live region, built in bindEvents.
+  setStatus: null,
+
+  // Case- and diacritic-insensitive, with the &nbsp; before an external-link
+  // icon folded into ordinary whitespace. A slug's word separators fold here
+  // rather than in slugOf, so the reader's query goes through the same fold the
+  // slug haystack does: fold one side only and typing the slug the way the URL
+  // spells it — "plans_and-pricing" — is the one query the fallback cannot
+  // answer, which is the fallback's own headline case.
+  normalize(value) {
+    return value
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .toLowerCase()
+      .replace(/[-_]/g, " ")
+      .replace(/\s+/g, " ")
+      .trim();
+  },
+
+  // The text the slug fallback matches on: the last non-empty path segment of
+  // an href, and nothing else. A docs site can be served under any prefix — a
+  // whole site under /docs/ would otherwise match every item on "docs", and the
+  // prefix is the customer's, so it cannot be known here and subtracted. The
+  // query and the fragment are dropped first (neither is part of the path), then
+  // the scheme and authority, so the host of an absolute URL is never matched
+  // either. An href with no path segments — an external link to a bare origin,
+  // or a parent with no href at all — yields "" and is simply never matched.
+  slugOf(href) {
+    const raw = (href || "").split(/[?#]/)[0];
+
+    // An opaque scheme — mailto:, tel: — has no path at all, so there is
+    // nothing to take a slug from. Slugging the whole href instead would answer
+    // a query with an address the menu never shows, announced as a link match.
+    if (/^[a-z][a-z0-9+.-]*:(?!\/\/)/i.test(raw)) {
+      return "";
+    }
+
+    // Scheme and authority come off together, and the scheme is optional so a
+    // protocol-relative "//host/…" loses its host the same way an absolute URL
+    // does — it is an authority, not a path segment.
+    const path = raw.replace(/^([a-z][a-z0-9+.-]*:)?\/\/[^/]*/i, "");
+    const segments = path.split("/").filter(Boolean);
+    const segment = segments[segments.length - 1];
+
+    if (!segment) {
+      return "";
+    }
+
+    // The same normalization a name gets — including the `-`/`_` fold, which
+    // lives there so the reader's query is folded the same way.
+    return this.normalize(this.decodeSegment(segment));
+  },
+
+  // decodeURIComponent throws a URIError on a malformed escape (`%E0%A4%A`).
+  // One bad href in a menu must not cost the reader the whole filter, so the
+  // raw segment stands in — still matchable, just not decoded.
+  decodeSegment(segment) {
+    try {
+      return decodeURIComponent(segment);
+    } catch {
+      return segment;
+    }
+  },
+
+  init() {
+    this.nav = DOMCache.get("#docs-navigation");
+    this.container = DOMCache.get("#docs-nav-filter");
+    this.input = DOMCache.get("#docs-nav-filter-input");
+    this.clearButton = DOMCache.get("#docs-nav-filter-clear");
+    this.empty = DOMCache.get("#docs-nav-filter-empty");
+    this.status = DOMCache.get("#docs-nav-filter-status");
+
+    if (!this.nav || !this.container || !this.input || !this.clearButton || !this.empty || !this.status) {
+      return;
+    }
+
+    // A left menu that does not resolve renders no list at all, which would
+    // leave the box an orphan control. Remove it rather than hide it: any
+    // `display` on #docs-nav-filter outranks the user agent's [hidden] rule.
+    if (!this.nav.querySelector(".leed-menu")) {
+      this.container.remove();
+      this.empty.remove();
+      return;
+    }
+
+    this.cacheItems();
+    this.bindEvents();
+  },
+
+  // Names are read once. Scoped to the item's own wrapper so a parent never
+  // picks up a child's label, and to the name span so the API method badge —
+  // a CSS ::before on a sibling icon — contributes nothing. The subtree and the
+  // controlled submenu are resolved here too: querying them per match inside the
+  // match loop is O(items × matches) of DOM work on every keystroke.
+  //
+  // Slugs are cached in the same pass, for the same reason: the fallback runs on
+  // a keystroke like any other pass, and re-deriving a slug there would put a
+  // getAttribute, a split and a decode per item behind every character.
+  cacheItems() {
+    this.items = Array.from(this.nav.querySelectorAll(CONFIG.SELECTORS.MENU_ITEMS)).map((li) => {
+      const name = li.querySelector(":scope > .leed-menu__item--wrapper .leed-menu__item--name");
+      // The wrapper is an <a> only when the href resolved; a no-link parent
+      // renders a <div>, which has no href and so has no slug.
+      const wrapper = li.querySelector(":scope > .leed-menu__item--wrapper");
+      return {
+        li,
+        name: this.normalize(name ? name.textContent : ""),
+        slug: this.slugOf(wrapper?.getAttribute("href")),
+        descendants: Array.from(li.querySelectorAll(CONFIG.SELECTORS.MENU_ITEMS)),
+        submenu: li.querySelector(":scope > .leed-submenu"),
+      };
+    });
+  },
+
+  bindEvents() {
+    const runFilter = Utils.debounce(() => this.applyFilter(this.pending), CONFIG.DEBOUNCE_DELAYS.FAST);
+    // A debounce of its own, an order of magnitude longer than the filter's: the
+    // tree has to keep up with the keystroke, but a polite live region that
+    // speaks on every one queues an announcement per character — about eleven
+    // for "page editor". Clearing routes through the same debounced setter, so a
+    // queued announcement can never outlive the query that produced it.
+    this.setStatus = Utils.debounce((message) => {
+      this.status.textContent = message;
+    }, CONFIG.DEBOUNCE_DELAYS.ANNOUNCE);
+    // Read from the event: some engines clear a type="search" input themselves,
+    // so the element's value cannot be trusted once the handler has yielded.
+    const onQuery = (e) => {
+      this.pending = e.target.value;
+      runFilter();
+    };
+
+    this.input.addEventListener("input", onQuery);
+    // Safari fires `search` on Escape and Enter as well as `input`. Not for its
+    // native clear affordance — navigation.css removes that with
+    // `::-webkit-search-cancel-button { appearance: none }` so the explicit
+    // clear button is the only one on screen.
+    this.input.addEventListener("search", onQuery);
+
+    this.input.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape") {
+        return;
+      }
+      // No preventDefault — a native search-input clear reaches the same end
+      // state. stopPropagation keeps Escape away from the shell's window-level
+      // handler; MenuManager's own handler already early-returns because the
+      // input has no [role="menuitem"] ancestor, so no section can collapse.
+      e.stopPropagation();
+      this.reset();
+    });
+
+    this.clearButton.addEventListener("click", () => {
+      this.reset();
+      this.input.focus();
+    });
+
+    // A section header is a live control while filtering, not a dead one.
+    // MenuManager's toggle derives its next state from the <li>'s aria-expanded,
+    // which the reveal deliberately leaves at "false" — so a click on a revealed
+    // section would compute "expand" on a section already on screen, move
+    // nothing, and leak that flipped state out when the query is cleared.
+    // Capture phase runs ahead of MenuManager's @click.stop handler: the filter
+    // exits first, the menu is back at its pre-filter state, and the toggle then
+    // reads an aria-expanded that matches what the reader is looking at.
+    //
+    // Only for a click that would actually reach that toggle. aria-haspopup
+    // sits on the section <li>, which wraps the whole submenu, so asking for
+    // that ancestor alone would reset on every result in the section too — and
+    // a target="_blank" or ctrl-clicked result leaves the reader here with
+    // their list gone, having bought nothing.
+    this.nav.addEventListener(
+      "click",
+      (e) => {
+        if ((this.query || this.pending) && !e.target.closest("a") && this.sectionToggleOf(e.target)) {
+          this.reset();
+        }
+      },
+      true,
+    );
+
+    // The keyboard reaches the same toggle by another route, and nothing on the
+    // click path guards it: setupKeyboardNavigation listens on this same node
+    // and acts on the focused item, so Enter on a revealed header hits exactly
+    // the dead-control case above, and Escape on a filtered result collapses
+    // the section out from under the reader while data-filtering is still set
+    // and the live region still says the result matched. Capture here lands
+    // ahead of that handler's bubble-phase listener, same as the click.
+    this.nav.addEventListener(
+      "keydown",
+      (e) => {
+        if ((this.query || this.pending) && this.keyTogglesSection(e.target, e.key)) {
+          this.reset();
+        }
+      },
+      true,
+    );
+
+    // The box can be hidden three ways — a site's own media query, the drawer's
+    // inline display:none, and .docs-sidebar[aria-hidden="true"] — and only the
+    // first is a window resize, so watch the element itself as well.
+    if (typeof ResizeObserver === "function") {
+      new ResizeObserver(() => this.clearWhenHidden()).observe(this.container);
+    }
+    ResizeManager.addListener(() => this.clearWhenHidden());
+  },
+
+  // isTopLevelMenuItem's own test, on the component that owns the toggles: a
+  // direct child of the root .leed-menu. MenuManager binds no toggle there at
+  // all — not on click and not on a key — so there is nothing to get out of the
+  // way of, and resetting would only cost the reader the query.
+  isTopLevelItem(item) {
+    return item.closest(".leed-menu") === item.parentElement;
+  },
+
+  // The section <li> whose toggle an event on this target reaches, or null.
+  sectionToggleOf(target) {
+    const item = target.closest(`[${CONFIG.ARIA.HASPOPUP}='menu']`);
+    return item && !this.isTopLevelItem(item) ? item : null;
+  },
+
+  // Which keydowns setupKeyboardNavigation actually acts on, mirrored rather
+  // than approximated: a key it ignores must not cost the reader the query
+  // either — Space on a focused result scrolls the page and moves no section.
+  // Enter and Space toggle the focused section; Escape collapses the section
+  // the focused item sits inside, which is why an ordinary result is an Escape
+  // target while it is not a click target.
+  keyTogglesSection(target, key) {
+    const item = target.closest("[role='menuitem']");
+
+    if (!item || (item.hasAttribute(CONFIG.ARIA.HASPOPUP) && this.isTopLevelItem(item))) {
+      return false;
+    }
+
+    if (key === "Enter" || key === " ") {
+      return item.hasAttribute(CONFIG.ARIA.HASPOPUP);
+    }
+
+    return key === "Escape" && Boolean(this.sectionToggleOf(item.parentElement));
+  },
+
+  // Not offsetParent === null, the usual idiom in this file: that reports a
+  // visible element as hidden through the fixed drawer panel.
+  isHidden() {
+    return this.container.getClientRects().length === 0;
+  },
+
+  // `pending` as well as `query`: a keystroke inside the debounce window has not
+  // reached applyFilter yet, so gating on the applied query alone would let the
+  // queued run land on a box that is already gone.
+  clearWhenHidden() {
+    if ((this.query || this.pending) && this.isHidden()) {
+      this.reset();
+    }
+  },
+
+  reset() {
+    this.input.value = "";
+    this.pending = "";
+    this.applyFilter("");
+  },
+
+  applyFilter(value) {
+    const tokens = this.normalize(value).split(" ").filter(Boolean);
+
+    if (tokens.length === 0) {
+      this.clearFilter();
+      return;
+    }
+
+    // Names own the normal case. The slug fallback runs only where the reader
+    // would otherwise be looking at "No matches", so a query that finds a title
+    // never consults a URL and the ordinary result cannot regress — while a page
+    // retitled away from its slug stays reachable by the slug.
+    let { visible, matches } = this.collectMatches(tokens, "name");
+    const byLink = matches === 0;
+
+    if (byLink) {
+      ({ visible, matches } = this.collectMatches(tokens, "slug"));
+    }
+
+    for (const item of this.items) {
+      if (visible.has(item.li)) {
+        item.li.removeAttribute("data-filter-hidden");
+        this.revealSubmenu(item);
+      } else {
+        item.li.setAttribute("data-filter-hidden", "");
+        this.restoreSubmenu(item);
+      }
+    }
+
+    this.query = tokens.join(" ");
+    this.nav.setAttribute("data-filtering", "true");
+    this.clearButton.hidden = false;
+    this.empty.hidden = matches > 0;
+    this.announce(matches, byLink);
+  },
+
+  // One pass, parameterized only by which cached text it reads — `name` or
+  // `slug`. Ancestor and subtree visibility live here rather than in the caller
+  // precisely so the fallback cannot grow rules of its own: the two passes are
+  // the same code over a different field, and an item with no text in that field
+  // (a no-link parent's slug, say) is skipped rather than matched by everything.
+  collectMatches(tokens, field) {
+    const visible = new Set();
+    let matches = 0;
+
+    for (const item of this.items) {
+      const haystack = item[field];
+      if (!haystack || !tokens.every((token) => haystack.includes(token))) {
+        continue;
+      }
+
+      matches += 1;
+      visible.add(item.li);
+
+      // Ancestors keep the match reachable — including ancestors that could
+      // never match themselves, which is how a no-link parent stays on screen.
+      let parent = item.li.parentElement;
+      while (parent && parent !== this.nav) {
+        if (parent.matches(CONFIG.SELECTORS.MENU_ITEMS)) {
+          visible.add(parent);
+        }
+        parent = parent.parentElement;
+      }
+
+      // ...and a matching parent keeps its whole subtree.
+      for (const descendant of item.descendants) {
+        visible.add(descendant);
+      }
+    }
+
+    return { visible, matches };
+  },
+
+  // A section kept visible has to be reachable, not merely painted: a submenu
+  // left at aria-hidden="true" holds focusable links that assistive technology
+  // cannot see. The marker records only that the filter did this, never what the
+  // value was — restoreSubmenu derives that again.
+  revealSubmenu(item) {
+    if (item.submenu?.getAttribute(CONFIG.ARIA.HIDDEN) !== "true") {
+      return;
+    }
+
+    item.submenu.setAttribute("data-filter-revealed", "");
+    item.submenu.setAttribute(CONFIG.ARIA.HIDDEN, "false");
+  },
+
+  // Recomputed from the controlling <li>, not restored from a stashed value, so
+  // a section the reader collapsed while filtering stays collapsed afterwards.
+  restoreSubmenu(item) {
+    if (!item.submenu?.hasAttribute("data-filter-revealed")) {
+      return;
+    }
+
+    const expanded = item.li.getAttribute(CONFIG.ARIA.EXPANDED) === "true";
+    item.submenu.removeAttribute("data-filter-revealed");
+    item.submenu.setAttribute(CONFIG.ARIA.HIDDEN, expanded ? "false" : "true");
+  },
+
+  // Counting self-matches rather than the ancestors and subtrees kept for
+  // context is the honest number. textContent only — the reader's query is
+  // never used to build markup.
+  //
+  // A fallback result says so. Every item on screen then matched on its link and
+  // not on any word the reader can see, and a bare "2 items match" would leave a
+  // screen reader user hunting a highlight that is not there.
+  announce(matches, byLink) {
+    if (matches === 0) {
+      this.setStatus("No items match");
+      return;
+    }
+    if (byLink) {
+      this.setStatus(`No title matches — ${matches} ${matches === 1 ? "page" : "pages"} matched by link`);
+      return;
+    }
+    this.setStatus(matches === 1 ? "1 item matches" : `${matches} items match`);
+  },
+
+  clearFilter() {
+    this.nav.removeAttribute("data-filtering");
+    for (const item of this.items) {
+      item.li.removeAttribute("data-filter-hidden");
+      this.restoreSubmenu(item);
+    }
+
+    // `pending` too, not only the applied query: a whitespace-only query filters
+    // nothing and lands here with a populated field and a hidden clear button,
+    // and a pending query left standing would make the next click on a section
+    // header reset — silently emptying a field the reader is still typing in.
+    this.query = "";
+    this.pending = "";
+    this.clearButton.hidden = true;
+    this.empty.hidden = true;
+    this.setStatus("");
+  },
+};
+
+// Centralized resize manager to avoid multiple event listeners
+const ResizeManager = {
+  listeners: [],
+
+  addListener(callback, delay = CONFIG.DEBOUNCE_DELAYS.MEDIUM) {
+    const debouncedCallback = Utils.debounce(callback, delay);
+    this.listeners.push(debouncedCallback);
+    return debouncedCallback;
+  },
+
+  init() {
+    const debouncedResize = Utils.debounce(() => {
+      this.listeners.forEach((listener) => {
+        listener();
+      });
+    }, CONFIG.DEBOUNCE_DELAYS.MEDIUM);
+
+    window.addEventListener("resize", debouncedResize);
+    window.addEventListener("load", debouncedResize);
+  },
+};
+
+// TOC manager
+const TOCManager = {
+  init() {
+    const tocSidebar = DOMCache.get("#leed-toc");
+    if (!tocSidebar) return;
+
+    this.tocSidebar = tocSidebar;
+    this.desktopTocContainer = DOMCache.get("#leed-toc");
+    this.mobileTocContainer = DOMCache.get("#leed-mobile-toc-container");
+    this.miniTocButton = DOMCache.get("#leed-mini-toc-button-text");
+    this.miniTocCurrent = DOMCache.get("#leed-mini-toc-current");
+    this.miniTocDropdown = DOMCache.get("#docs-mini-toc");
+
+    this.setupTOC();
+    this.setupResponsiveBehavior();
+    this.setupScrollTracking();
+    this.setupMobileTocWatcher();
+  },
+
+  setupTOC() {
+    const tocHeading = this.tocSidebar.querySelector("#leed-toc-heading");
+    const headingText = tocHeading ? tocHeading.textContent : "On this page";
+
+    if (this.miniTocButton && this.miniTocButton.textContent === "") {
+      this.miniTocButton.textContent = headingText;
+    }
+
+    this.originalTocParent = null;
+    this.navTocElement = null;
+    this.initializeIcons();
+  },
+
+  initializeIcons() {
+    const tocListItems = document.querySelectorAll(".leed-nav-toc li");
+
+    tocListItems.forEach((li) => {
+      if (!li.querySelector(".current-item")) {
+        const icon = document.createElement("i");
+        icon.className = "current-item";
+
+        const anchor = li.querySelector("a");
+        if (anchor) {
+          li.insertBefore(icon, anchor);
+        }
+      }
+    });
+  },
+
+  setupResponsiveBehavior() {
+    ResizeManager.addListener(() => {
+      this.handleTocPosition();
+      if (Utils.isDesktop() && window.Alpine?.store("sidebar")) {
+        Alpine.store("sidebar").open = false;
+      }
+    });
+    this.handleTocPosition();
+  },
+
+  handleTocPosition() {
+    if (!this.mobileTocContainer) return;
+
+    if (!this.navTocElement) {
+      this.navTocElement = this.tocSidebar.querySelector(".leed-nav-toc");
+      if (!this.navTocElement) return;
+      this.originalTocParent = this.navTocElement.parentNode;
+    }
+
+    if (Utils.isMobile() || Utils.isSmallerThanDesktop()) {
+      if (this.navTocElement.parentNode !== this.mobileTocContainer) {
+        this.mobileTocContainer.appendChild(this.navTocElement);
+      }
+    } else {
+      if (this.navTocElement.parentNode !== this.originalTocParent) {
+        this.originalTocParent.appendChild(this.navTocElement);
+      }
+    }
+
+    this.updateCurrentSection();
+  },
+
+  setupScrollTracking() {
+    const debouncedSetActiveLink = Utils.debounce(() => {
+      this.setActiveLink();
+    }, CONFIG.DEBOUNCE_DELAYS.FAST);
+
+    window.addEventListener("scroll", debouncedSetActiveLink);
+
+    const scrollableDiv = document.querySelector(".fixed-content-layout");
+    if (scrollableDiv) {
+      scrollableDiv.addEventListener("scroll", debouncedSetActiveLink);
+    }
+    this.setActiveLink();
+  },
+
+  setActiveLink() {
+    const tocLinks = document.querySelectorAll(CONFIG.SELECTORS.TOC_LINKS);
+    const sections = Array.from(tocLinks)
+      .map((link) => {
+        const id = link.getAttribute("href")?.substring(1);
+        return id ? document.getElementById(id) : null;
+      })
+      .filter(Boolean);
+
+    let currentSectionIndex = 0;
+
+    sections.forEach((section, index) => {
+      if (!section) return;
+
+      const rect = section.getBoundingClientRect();
+
+      // Get header and TOC heights from HeaderManager
+      const triggerOffset = HeaderManager.getHeaderHeight() + HeaderManager.getTocHeight();
+
+      if (rect.top <= triggerOffset) {
+        currentSectionIndex = index;
+      }
+    });
+
+    tocLinks.forEach((link) => {
+      AriaManager.removeCurrent(link);
+
+      const parentLi = link.closest("li");
+      const icon = parentLi?.querySelector(".current-item");
+      if (icon) {
+        AriaManager.removeCurrent(icon);
+      }
+    });
+
+    if (tocLinks[currentSectionIndex]) {
+      AriaManager.setCurrent(tocLinks[currentSectionIndex], "location");
+
+      const activeLi = tocLinks[currentSectionIndex].closest("li");
+      const activeIcon = activeLi?.querySelector(".current-item");
+      if (activeIcon) {
+        AriaManager.setCurrent(activeIcon, "location");
+      }
+
+      if (this.navTocElement && this.navTocElement.parentNode === this.desktopTocContainer) {
+        this.scrollTocItemIntoView(activeLi, this.desktopTocContainer, "center");
+      } else if (this.navTocElement && this.navTocElement.parentNode === this.mobileTocContainer) {
+        // Check if mobile TOC is visible/open
+        const isMobileTocVisible =
+          this.mobileTocContainer.offsetParent !== null && this.mobileTocContainer.scrollHeight > 0;
+
+        if (isMobileTocVisible) {
+          this.scrollTocItemIntoView(activeLi, this.mobileTocContainer, "start");
+        } else {
+          // Store the active item for when TOC is opened
+          this.pendingMobileScrollItem = activeLi;
+        }
+      }
+    }
+
+    this.updateCurrentSection();
+  },
+
+  updateCurrentSection() {
+    if (!this.miniTocCurrent) return;
+
+    const activeLink = document.querySelector(`${CONFIG.SELECTORS.TOC_LINKS}[${CONFIG.ARIA.CURRENT}="location"]`);
+    if (activeLink) {
+      this.miniTocCurrent.textContent = activeLink.textContent;
+    } else {
+      this.miniTocCurrent.textContent = "Overview";
+    }
+  },
+
+  scrollTocItemIntoView(activeLi, container, block) {
+    if (!activeLi || !container) return;
+
+    // Find the actual scrollable element within the container
+    let scrollableElement = container;
+
+    // Check if the container itself is scrollable
+    if (container.scrollHeight <= container.clientHeight || container.scrollHeight === 0) {
+      // Look for a scrollable child element
+      const scrollableChildren = Array.from(container.querySelectorAll("*")).filter(
+        (el) => el.scrollHeight > el.clientHeight && getComputedStyle(el).overflowY !== "visible",
+      );
+
+      if (scrollableChildren.length > 0) {
+        scrollableElement = scrollableChildren[0];
+      } else {
+        // For mobile, look for the docs-mini-toc element which is the actual scrollable container
+        const docsMiniToc = document.getElementById("docs-mini-toc");
+
+        if (docsMiniToc && docsMiniToc.scrollHeight > docsMiniToc.clientHeight) {
+          scrollableElement = docsMiniToc;
+        } else {
+          return;
+        }
+      }
+    }
+
+    // Calculate the current scroll position within the scrollable element
+    const currentScrollTop = scrollableElement.scrollTop;
+
+    // Calculate the item's position relative to the scrollable element
+    const itemRect = activeLi.getBoundingClientRect();
+    const containerRect = scrollableElement.getBoundingClientRect();
+    const itemTop = itemRect.top - containerRect.top + scrollableElement.scrollTop;
+    const itemHeight = activeLi.offsetHeight;
+    const containerHeight = scrollableElement.clientHeight;
+
+    let targetScrollTop;
+
+    if (block === "center") {
+      // Center the item in the container
+      targetScrollTop = itemTop - containerHeight / 2 + itemHeight / 2;
+    } else if (block === "start") {
+      // Align item to the top of the container
+      targetScrollTop = itemTop;
+    } else {
+      // Default to start
+      targetScrollTop = itemTop;
+    }
+
+    // Ensure we don't scroll beyond the container bounds
+    const maxScrollTop = scrollableElement.scrollHeight - containerHeight;
+    targetScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
+
+    // Only scroll if the item is not already visible and we need to scroll
+    if (Math.abs(currentScrollTop - targetScrollTop) > 1) {
+      scrollableElement.scrollTop = targetScrollTop;
+    }
+  },
+
+  // Method to handle mobile TOC opening - call this when mobile TOC becomes visible
+  handleMobileTocOpen() {
+    if (this.pendingMobileScrollItem && this.mobileTocContainer) {
+      // Small delay to ensure the TOC is fully rendered
+      setTimeout(() => {
+        this.scrollTocItemIntoView(this.pendingMobileScrollItem, this.mobileTocContainer, "start");
+        this.pendingMobileScrollItem = null;
+      }, 100);
+    }
+  },
+
+  setupMobileTocWatcher() {
+    // Watch for Alpine.js isOpen changes on the mobile TOC
+    if (window.Alpine && this.mobileTocContainer) {
+      // Find the Alpine component that controls the mobile TOC
+      const alpineComponent = Alpine.$data(this.mobileTocContainer.closest("[x-data]"));
+
+      if (alpineComponent && alpineComponent.isOpen !== undefined) {
+        // Watch for changes to isOpen
+        Alpine.effect(() => {
+          if (alpineComponent.isOpen) {
+            this.handleMobileTocOpen();
+          }
+        });
+      }
+    }
+  },
+};
+
+// Header manager - handles header state, responsive behavior, and height calculations
+const HeaderManager = {
+  init(params = {}) {
+    this.hasScrollBar = params.scrollBarId?.length > 1 || false;
+    this.topMenuOpen = false;
+    this.headerHeight = 0;
+    this.tocHeight = 0;
+    this.isSmallerThanDesktop = Utils.isSmallerThanDesktop();
+    this.isSmallest = Utils.isSmallest();
+    this.headerSearchShow = false;
+
+    this.setupHeaderComponent();
+  },
+
+  setupHeaderComponent() {
+    // Calculate initial heights
+    this.calculateHeaderHeight();
+    this.calculateTocHeight();
+
+    // Setup responsive behavior
+    ResizeManager.addListener(() => {
+      this.handleResize();
+    });
+  },
+
+  calculateTocHeight() {
+    const docsMiniBar = document.getElementById("docs-mini-bar");
+    if (!docsMiniBar) {
+      this.tocHeight = 0;
+      return;
+    }
+
+    this.tocHeight = docsMiniBar.offsetHeight;
+    document.documentElement.style.setProperty("--height-toc", `${this.tocHeight}px`);
+  },
+
+  calculateHeaderHeight() {
+    const header = document.getElementById("docs-header-wrapper");
+    if (!header) {
+      this.headerHeight = 0;
+      return;
+    }
+
+    // --height-header is an OUTPUT of this function and never an input to it.
+    //
+    // Two different jobs had been collapsed onto that one name:
+    //   SEED      the pre-JS estimate a site declares, e.g.
+    //             `@theme { --height-header: 6rem; }`. Tailwind v4 also mints a
+    //             `.h-header` utility (`height: var(--height-header)`) from it.
+    //   MEASURED  what this function publishes after looking at the rendered bar,
+    //             and what every offset consumes: the docs shell's
+    //             `mt-(--height-header)`, `scroll-padding-top` (defaults.css),
+    //             the TOC's `top`/`max-h` (components/toc.css), the sidebar.
+    //
+    // A site that puts `h-header` on its fixed header wrapper — leed.ai did —
+    // therefore SIZES that wrapper from the token. The wrapper is out of flow, so
+    // the fallback below measured its children, i.e. the very box the token had
+    // just sized: seed sizes box, box is measured, measurement rewrites seed.
+    // And because that wrapper also carries a `transition: all 200ms`, its height
+    // ANIMATES towards each new value, so the read lands mid-flight; whatever is
+    // sampled becomes the next target, the transition retargets from where it
+    // already is, and the pair sticks at an arbitrary fixed point somewhere
+    // between the seed and the truth. Measured on leed.ai with a 96px seed and a
+    // 73px header: 89px published on /docs/, 73px on a content page, 57px and
+    // 96px in other sessions. The reader sees the whole reading column sitting
+    // up to 39px too low, by a different amount on different loads.
+    //
+    // Clearing the token for the duration of the measurement breaks that loop for
+    // ANY markup: while it is unset, `.h-header` — and anything else derived from
+    // it — computes to `auto`, so every box reports its own content height and
+    // the stale value cannot feed itself back in. The clear and the restore
+    // happen in one synchronous task, so the browser never paints the in-between
+    // state; `height: auto` is not an interpolable endpoint either, so the
+    // transition jumps rather than animating through it.
+    //
+    // Do NOT reorder this to measure first and clear afterwards, and do not merge
+    // the seed and the measured value back under a single name.
+    const root = document.documentElement;
+    const publishedValue = root.style.getPropertyValue("--height-header");
+    root.style.setProperty("--height-header", "auto");
+
+    let height;
+    try {
+      // The wrapper is what the layouts position and what the page body offsets
+      // against via --height-header. A site-supplied header (docs-header.hbs) may
+      // position itself fixed or absolute, which takes it out of the wrapper's
+      // flow and collapses offsetHeight to 0 — measure the children in that case,
+      // or the whole page slides up underneath the header.
+      height = header.offsetHeight;
+      if (!height) {
+        for (const child of header.children) {
+          height = Math.max(height, child.getBoundingClientRect().height);
+        }
+      }
+    } finally {
+      // Put the page back exactly as it was before anything can paint, whatever
+      // happened above. Restoring "" would leave an empty inline declaration
+      // rather than falling through to the site's seed, hence removeProperty.
+      if (publishedValue) {
+        root.style.setProperty("--height-header", publishedValue);
+      } else {
+        root.style.removeProperty("--height-header");
+      }
+    }
+
+    this.headerHeight = height;
+    document.documentElement.style.setProperty("--height-header", `${this.headerHeight}px`);
+  },
+
+  handleResize() {
+    this.calculateTocHeight();
+    this.calculateHeaderHeight();
+    this.topMenuOpen = false;
+    this.isSmallerThanDesktop = Utils.isSmallerThanDesktop();
+    this.isSmallest = Utils.isSmallest();
+  },
+
+  // Public methods for external access
+  setTopMenuOpen(open) {
+    this.topMenuOpen = open;
+  },
+
+  setHeaderSearchShow(show) {
+    this.headerSearchShow = show;
+  },
+
+  getHeaderHeight() {
+    return this.headerHeight;
+  },
+
+  getTocHeight() {
+    return this.tocHeight;
+  },
+};
+
+// Anchor link manager
+const AnchorLinkManager = {
+  init() {
+    const contentArea = DOMCache.get("#leed-docs-copy");
+    if (!contentArea) return;
+
+    const headings = contentArea.querySelectorAll("h2, h3, h4");
+
+    headings.forEach((heading) => {
+      if (heading.classList.contains("no-anchor") || !heading.id) return;
+
+      this.createAnchorLink(heading);
+    });
+  },
+
+  createAnchorLink(heading) {
+    // Nothing should run twice over the same heading: a second pass would nest
+    // another wrapper and append a second anchor.
+    if (heading.classList.contains(CONFIG.CLASSES.WITH_ANCHOR)) return;
+
+    const anchorLink = document.createElement("a");
+    anchorLink.href = `#${heading.id}`;
+    anchorLink.classList.add("docs-heading-anchor");
+    anchorLink.setAttribute("aria-label", "Copy link to section");
+
+    const linkIcon = document.createElement("i");
+    anchorLink.appendChild(linkIcon);
+
+    anchorLink.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const newUrl = `${window.location.pathname}${window.location.search}#${heading.id}`;
+      window.history.pushState(null, "", newUrl);
+
+      navigator.clipboard
+        .writeText(window.location.href)
+        .then(() => {
+          anchorLink.classList.add(CONFIG.CLASSES.COPIED);
+          heading.classList.add(CONFIG.CLASSES.JUST_COPIED);
+
+          Notification.show(anchorLink, "Link copied!", "anchor-copied-notification");
+
+          setTimeout(() => {
+            anchorLink.classList.remove(CONFIG.CLASSES.COPIED);
+            heading.classList.remove(CONFIG.CLASSES.JUST_COPIED);
+          }, CONFIG.NOTIFICATION_TIMEOUT);
+        })
+        .catch((err) => {
+          console.error("Failed to copy link:", err);
+          alert("Failed to copy link. Please try again.");
+        });
+    });
+
+    /**
+     * Collect the heading's own content into a single element before the
+     * heading becomes a flex row.
+     *
+     * `.docs-with-anchor` is `flex items-baseline gap-2`, and its rule grows
+     * `> :not(.docs-heading-anchor)` so the text takes the width and wraps
+     * normally. That assumes the heading has exactly one child, which is true
+     * only of a heading made of plain text. Write `## Where the \`@font-face\`
+     * rules come from` and the h2 holds three nodes — text, `<code>`, text.
+     * Flex then lays out each as its own item: the `<code>` matches the
+     * `:not()` and stretches, the two bare text runs do not, and an 8px gap
+     * opens on either side of it. The sentence comes apart across the line.
+     *
+     * Wrapping first means there is one thing to grow no matter what the
+     * heading contains, and the inline markup inside it is laid out as inline
+     * content again rather than as flex children.
+     */
+    const headingText = document.createElement("span");
+    headingText.className = "docs-heading-text";
+    while (heading.firstChild) {
+      headingText.appendChild(heading.firstChild);
+    }
+    heading.appendChild(headingText);
+
+    heading.classList.add(CONFIG.CLASSES.WITH_ANCHOR);
+    heading.appendChild(anchorLink);
+  },
+};
+
+// Select manager for API documentation
+const SelectManager = {
+  createResponseSelector() {
+    return {
+      selectedStatus: "",
+      selectedContentType: "",
+      availableContentTypes: [],
+      statusOpen: false,
+      contentTypeOpen: false,
+      statusOptionsCount: 0,
+      contentTypeOptionsCount: 0,
+
+      init() {
+        this.$nextTick(() => {
+          // Get status options from the custom dropdown options
+          const statusOptions = this.$el.querySelectorAll(".api-item[data-value]");
+          const availableStatuses = Array.from(statusOptions).map((option) => option.getAttribute("data-value"));
+          this.statusOptionsCount = availableStatuses.length;
+
+          const storageKey = "leed-tabs-responses";
+          const savedTabIndex = localStorage.getItem(storageKey);
+
+          let initialStatus = "";
+          if (savedTabIndex !== null && savedTabIndex !== undefined) {
+            const arrayIndex = parseInt(savedTabIndex, 10);
+            if (arrayIndex >= 0 && arrayIndex < availableStatuses.length) {
+              initialStatus = availableStatuses[arrayIndex];
+            } else if (availableStatuses.length > 0) {
+              initialStatus = availableStatuses[0];
+            }
+          } else if (availableStatuses.length > 0) {
+            initialStatus = availableStatuses[0];
+          }
+
+          if (initialStatus && availableStatuses.includes(initialStatus)) {
+            this.selectedStatus = initialStatus;
+            this.updateContentTypes();
+          }
+        });
+
+        this.setupTabClickListener();
+        this.$watch("selectedStatus", (value, oldValue) => {
+          if (value && value !== oldValue) {
+            this.updateContentTypes();
+            this.handleStatusChange();
+          }
+        });
+      },
+
+      updateContentTypes() {
+        // Get all content type options and filter by selected status
+        const allOptions = this.$el.querySelectorAll(".api-item[data-status-code]");
+        this.availableContentTypes = Array.from(allOptions)
+          .filter((option) => option.getAttribute("data-status-code") === this.selectedStatus)
+          .map((option) => option.getAttribute("data-value"));
+
+        this.contentTypeOptionsCount = this.availableContentTypes.length;
+        this.selectedContentType = this.availableContentTypes.length > 0 ? this.availableContentTypes[0] : "";
+      },
+
+      setupTabClickListener() {
+        setTimeout(() => {
+          const tabs = document.querySelectorAll('[data-tabs-groupId="responses"] li[role="tab"]');
+          tabs.forEach((tab) => {
+            tab.addEventListener("click", (event) => {
+              const tabIndex = tab.getAttribute("data-tab-index");
+              if (tabIndex !== null) {
+                const arrayIndex = parseInt(tabIndex, 10);
+                const statusOptions = this.$el.querySelectorAll(".api-item[data-value]");
+                const availableStatuses = Array.from(statusOptions).map((option) => option.getAttribute("data-value"));
+                if (arrayIndex >= 0 && arrayIndex < availableStatuses.length) {
+                  const targetStatus = availableStatuses[arrayIndex];
+                  this.selectedStatus = targetStatus;
+                  this.updateContentTypes();
+                }
+              }
+            });
+          });
+        }, CONFIG.DEBOUNCE_DELAYS.SLOW);
+      },
+
+      handleStatusChange() {
+        const statusOptions = this.$el.querySelectorAll(".api-item[data-value]");
+        const availableStatuses = Array.from(statusOptions).map((option) => option.getAttribute("data-value"));
+        const statusIndex = availableStatuses.indexOf(this.selectedStatus);
+        if (statusIndex !== -1) {
+          setTimeout(() => {
+            const tabs = document.querySelectorAll('[data-tabs-groupId="responses"] li[role="tab"]');
+            const targetTab = Array.from(tabs).find((tab) => {
+              const tabIndexAttr = tab.getAttribute("data-tab-index");
+              return tabIndexAttr && parseInt(tabIndexAttr, 10) === statusIndex;
+            });
+            if (targetTab) {
+              if (typeof activateTabGroup === "function") {
+                activateTabGroup(targetTab);
+              } else {
+                targetTab.click();
+              }
+            }
+          }, 50);
+        }
+      },
+    };
+  },
+
+  createRequestBodySelector() {
+    return {
+      selectedContentType: "",
+      contentTypes: [],
+      contentTypeOpen: false,
+      contentTypeOptionsCount: 0,
+
+      init() {
+        // Get content types from the custom dropdown options
+        const options = this.$el.querySelectorAll(".api-item[data-value]");
+        this.contentTypes = Array.from(options).map((option) => option.getAttribute("data-value"));
+        this.contentTypeOptionsCount = this.contentTypes.length;
+        this.selectedContentType = this.contentTypes.length > 0 ? this.contentTypes[0] : "";
+      },
+    };
+  },
+
+  createSecuritySelector() {
+    return {
+      selectedSecurity: "",
+      securityOptions: [],
+      securityOpen: false,
+      securityOptionsCount: 0,
+
+      init() {
+        this.$nextTick(() => {
+          // Get security options from the custom dropdown options
+          const options = this.$el.querySelectorAll(".api-item[data-value]");
+          this.securityOptions = Array.from(options).map((option) => option.getAttribute("data-value"));
+          this.securityOptionsCount = this.securityOptions.length;
+          const savedSecurity = localStorage.getItem("api-security-selection");
+
+          if (savedSecurity && this.securityOptions.includes(savedSecurity)) {
+            this.selectedSecurity = savedSecurity;
+          } else if (this.securityOptions.length > 0) {
+            this.selectedSecurity = this.securityOptions[0];
+          }
+
+          if (this.selectedSecurity) {
+            localStorage.setItem("api-security-selection", this.selectedSecurity);
+          }
+        });
+      },
+
+      getSelectedSecurityName() {
+        return this.selectedSecurity;
+      },
+
+      showSecurity() {
+        if (this.selectedSecurity) {
+          localStorage.setItem("api-security-selection", this.selectedSecurity);
+        }
+      },
+    };
+  },
+};
+
+// Sidebar manager
+const SidebarManager = {
+  init() {
+    Alpine.store("sidebar", {
+      open: false,
+    });
+
+    Alpine.data("sidebarNav", () => ({
+      open: false,
+      isSmallerThanDesktop: Utils.isSmallerThanDesktop(),
+      // Tracked separately from `isSmallerThanDesktop`: the undebounced listener
+      // in init() has already updated that by the time the debounced template
+      // handler runs, so it cannot be compared against to detect a crossing.
+      wasSmallerThanDesktop: Utils.isSmallerThanDesktop(),
+
+      init() {
+        this.$watch("$store.sidebar.open", (value) => {
+          this.open = value;
+        });
+
+        window.addEventListener("resize", () => {
+          // Deliberately does NOT touch wasSmallerThanDesktop: this listener is
+          // undebounced, so syncing here would make the debounced handleResize()
+          // always compare equal and never detect a crossing.
+          this.isSmallerThanDesktop = Utils.isSmallerThanDesktop();
+        });
+        window.addEventListener("load", () => {
+          this.isSmallerThanDesktop = Utils.isSmallerThanDesktop();
+          // No resize fires for `load`, so handleResize() never runs to resync.
+          // Without this the tracker keeps the pre-load side and the next real
+          // crossing compares equal, skipping the close().
+          this.wasSmallerThanDesktop = this.isSmallerThanDesktop;
+        });
+      },
+
+      toggle() {
+        this.open = !this.open;
+        this.$store.sidebar.open = this.open;
+      },
+
+      close() {
+        this.open = false;
+        this.$store.sidebar.open = false;
+      },
+
+      // Closing on every window resize also closed the drawer when a mobile
+      // soft keyboard opened, which made the nav filter unusable there. Only an
+      // actual breakpoint crossing — the handler's real intent — closes it.
+      handleResize() {
+        const isSmaller = Utils.isSmallerThanDesktop();
+        this.isSmallerThanDesktop = isSmaller;
+
+        if (isSmaller === this.wasSmallerThanDesktop) {
+          return;
+        }
+
+        this.wasSmallerThanDesktop = isSmaller;
+        this.close();
+      },
+
+      isVisible() {
+        return this.open || !this.isSmallerThanDesktop;
+      },
+    }));
+  },
+};
+
+// Alpine.js components initialization
+document.addEventListener("alpine:init", () => {
+  Alpine.data("leedDocsNavigation", () => MenuManager.createComponent());
+  Alpine.data("responseSelector", () => SelectManager.createResponseSelector());
+  Alpine.data("requestBodySelector", () => SelectManager.createRequestBodySelector());
+  Alpine.data("securitySelector", () => SelectManager.createSecuritySelector());
+
+  // Register the header component immediately when Alpine is available
+  Alpine.data("documentationHeaderComponent", (params = {}) => ({
+    hasScrollBar: params.scrollBarId?.length > 1 || false,
+    topMenuOpen: false,
+    headerHeight: 0,
+    tocHeight: 0,
+    isSmallerThanDesktop: Utils.isSmallerThanDesktop(),
+    isSmallest: Utils.isSmallest(),
+    headerSearchShow: false,
+
+    calculateTOCHeight() {
+      HeaderManager.calculateTocHeight();
+      this.tocHeight = HeaderManager.getTocHeight();
+    },
+
+    calculateHeaderHeight() {
+      HeaderManager.calculateHeaderHeight();
+      this.headerHeight = HeaderManager.getHeaderHeight();
+    },
+
+    handleResize() {
+      HeaderManager.handleResize();
+      this.topMenuOpen = HeaderManager.topMenuOpen;
+      this.isSmallerThanDesktop = HeaderManager.isSmallerThanDesktop;
+      this.isSmallest = HeaderManager.isSmallest;
+      this.headerHeight = HeaderManager.getHeaderHeight();
+      this.tocHeight = HeaderManager.getTocHeight();
+    },
+
+    init() {
+      this.handleResize();
+    },
+  }));
+
+  SidebarManager.init();
+});
+
+// API Tab Dropdown Manager - converts tablists in .api-sidebar-content to dropdowns
+const ApiTabDropdownManager = {
+  dropdowns: [],
+
+  init() {
+    const apiSidebarContent = document.querySelector(".api-sidebar-content");
+    if (!apiSidebarContent) return;
+
+    // Find all tab containers
+    const tabContainers = apiSidebarContent.querySelectorAll(".leed-tabs__container");
+
+    tabContainers.forEach((container, index) => {
+      const tablist = container.querySelector('ul[role="tablist"]');
+      if (!tablist) return;
+
+      // First tablist always converts, others check width
+      if (index === 0) {
+        this.createDropdown(tablist, container);
+      } else {
+        // Check if tablist overflows (exceeds 80% of container width)
+        if (this.shouldConvertToDropdown(tablist, container)) {
+          this.createDropdown(tablist, container);
+        }
+      }
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener("click", (e) => {
+      if (!e.target.closest(".api-tab-dropdown")) {
+        this.closeAllDropdowns();
+      }
+    });
+
+    // Listen for tab changes to update dropdown display
+    this.observeTabChanges();
+
+    // Recheck on resize for non-first tablists
+    ResizeManager.addListener(() => {
+      this.handleResize();
+    });
+  },
+
+  shouldConvertToDropdown(tablist, container) {
+    // Temporarily show tablist if it's hidden to get accurate measurements
+    const wasHidden = tablist.style.display === "none";
+    const originalStyles = {
+      display: tablist.style.display,
+      visibility: tablist.style.visibility,
+      position: tablist.style.position,
+      overflow: tablist.style.overflow,
+      width: tablist.style.width,
+      maxWidth: tablist.style.maxWidth,
+    };
+
+    if (wasHidden) {
+      // Make it invisible but still in layout for measurement
+      tablist.style.display = "";
+      tablist.style.visibility = "hidden";
+      tablist.style.position = "absolute";
+      tablist.style.overflow = "visible";
+      tablist.style.width = "auto";
+      tablist.style.maxWidth = "none";
+    } else {
+      // Temporarily remove any width constraints to get natural width
+      tablist.style.width = "auto";
+      tablist.style.maxWidth = "none";
+    }
+
+    // Force a reflow to ensure accurate measurements
+    void tablist.offsetWidth;
+
+    // Get the natural width of the tablist (all tabs laid out without constraints)
+    // Use scrollWidth which gives the full content width
+    const tablistNaturalWidth = tablist.scrollWidth;
+
+    // Check if there's a wrapper (like .leed-tabs__container) that constrains the width
+    const wrapper = tablist.closest(".leed-tabs__container");
+    let availableWidth;
+
+    if (wrapper) {
+      // Use wrapper's available width if it exists
+      const wrapperRect = wrapper.getBoundingClientRect();
+      availableWidth = wrapperRect.width;
+    } else {
+      // Use container's available width
+      const containerRect = container.getBoundingClientRect();
+      availableWidth = containerRect.width;
+    }
+
+    const threshold = (80 / 100) * availableWidth;
+
+    // Restore original styles
+    Object.keys(originalStyles).forEach((key) => {
+      tablist.style[key] = originalStyles[key] || "";
+    });
+
+    // Check if tablist natural width exceeds 80% of the available width
+    const shouldConvert = tablistNaturalWidth > threshold;
+
+    return shouldConvert;
+  },
+
+  createDropdown(tablist, container) {
+    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+    if (tabs.length === 0) return;
+
+    // Find the active tab
+    const activeTab = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") || tabs[0];
+
+    // Create dropdown wrapper
+    const dropdown = document.createElement("div");
+    dropdown.className = "api-tab-dropdown";
+
+    // Create button
+    const button = document.createElement("button");
+    button.className = "api-tab-dropdown-button";
+    button.setAttribute("type", "button");
+    button.setAttribute("aria-expanded", "false");
+    button.setAttribute("aria-haspopup", "true");
+    button.setAttribute("aria-controls", `api-tab-dropdown-menu-${this.dropdowns.length}`);
+
+    // Get button content from active tab
+    const buttonContent = this.getTabContent(activeTab);
+    button.innerHTML = buttonContent;
+
+    // Create menu
+    const menu = document.createElement("div");
+    menu.className = "api-tab-dropdown-menu";
+    menu.id = `api-tab-dropdown-menu-${this.dropdowns.length}`;
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-hidden", "true");
+
+    // Create menu items from tabs
+    tabs.forEach((tab) => {
+      const menuItem = document.createElement("div");
+      menuItem.className = "api-tab-dropdown-item";
+      menuItem.setAttribute("role", "menuitem");
+      menuItem.setAttribute("tabindex", "-1");
+      menuItem.setAttribute("data-tab-id", tab.id);
+      menuItem.setAttribute("aria-selected", tab.getAttribute("aria-selected") === "true" ? "true" : "false");
+
+      const tabContent = this.getTabContent(tab);
+      menuItem.innerHTML = tabContent;
+
+      menuItem.addEventListener("click", () => {
+        this.selectTab(tab, button, menu);
+      });
+
+      menu.appendChild(menuItem);
+    });
+
+    // Button click handler
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isExpanded = button.getAttribute("aria-expanded") === "true";
+      this.toggleDropdown(button, menu, !isExpanded);
+    });
+
+    // Keyboard navigation
+    button.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const isExpanded = button.getAttribute("aria-expanded") === "true";
+        this.toggleDropdown(button, menu, !isExpanded);
+      } else if (e.key === "Escape") {
+        this.toggleDropdown(button, menu, false);
+      }
+    });
+
+    menu.addEventListener("keydown", (e) => {
+      const items = Array.from(menu.querySelectorAll(".api-tab-dropdown-item"));
+      const currentIndex = items.indexOf(e.target);
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const nextIndex = (currentIndex + 1) % items.length;
+        items[nextIndex].focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prevIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+        items[prevIndex].focus();
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const tabId = e.target.getAttribute("data-tab-id");
+        const tab = document.getElementById(tabId);
+        if (tab) {
+          this.selectTab(tab, button, menu);
+        }
+      } else if (e.key === "Escape") {
+        this.toggleDropdown(button, menu, false);
+        button.focus();
+      }
+    });
+
+    dropdown.appendChild(button);
+    dropdown.appendChild(menu);
+
+    // Insert dropdown before the tablist
+    tablist.parentNode.insertBefore(dropdown, tablist);
+
+    // Hide the original tablist by adding a class and setting display
+    tablist.classList.add("converted-to-dropdown");
+    tablist.style.display = "none";
+
+    // Store reference
+    this.dropdowns.push({ dropdown, button, menu, tablist, tabs, container });
+  },
+
+  getTabContent(tab) {
+    // Clone the tab content (including icons, text, and any nested elements)
+    const clone = tab.cloneNode(true);
+    // Remove any classes that might interfere with styling
+    clone.className = "";
+    // Remove any attributes that might interfere
+    clone.removeAttribute("role");
+    clone.removeAttribute("aria-selected");
+    clone.removeAttribute("aria-controls");
+    clone.removeAttribute("tabindex");
+    clone.removeAttribute("id");
+    clone.removeAttribute("data-tab-index");
+    // Return the innerHTML which includes all content dynamically
+    return clone.innerHTML;
+  },
+
+  toggleDropdown(button, menu, isOpen) {
+    button.setAttribute("aria-expanded", isOpen.toString());
+    menu.setAttribute("aria-hidden", (!isOpen).toString());
+
+    if (isOpen) {
+      // Focus first item when opening
+      const firstItem = menu.querySelector(".api-tab-dropdown-item");
+      if (firstItem) {
+        firstItem.setAttribute("tabindex", "0");
+        firstItem.focus();
+        // Set other items to -1
+        menu.querySelectorAll(".api-tab-dropdown-item").forEach((item, index) => {
+          if (item !== firstItem) {
+            item.setAttribute("tabindex", "-1");
+          }
+        });
+      }
+    } else {
+      // Reset tabindex when closing
+      menu.querySelectorAll(".api-tab-dropdown-item").forEach((item) => {
+        item.removeAttribute("tabindex");
+      });
+    }
+  },
+
+  selectTab(tab, button, menu) {
+    // Activate the tab using TabManager
+    if (TabManager?.activateTabGroup) {
+      TabManager.activateTabGroup(tab);
+    } else {
+      // Fallback: click the tab directly
+      tab.click();
+    }
+
+    // Update button content
+    const buttonContent = this.getTabContent(tab);
+    button.innerHTML = buttonContent;
+
+    // Update menu items
+    menu.querySelectorAll(".api-tab-dropdown-item").forEach((item) => {
+      const tabId = item.getAttribute("data-tab-id");
+      if (tabId === tab.id) {
+        item.setAttribute("aria-selected", "true");
+      } else {
+        item.setAttribute("aria-selected", "false");
+      }
+    });
+
+    // Sync with response selector if this is a responses tab
+    this.syncWithResponseSelector(tab);
+
+    // Close dropdown
+    this.toggleDropdown(button, menu, false);
+  },
+
+  syncWithResponseSelector(tab) {
+    // Check if this tab is part of the responses group
+    const tabContainer = tab.closest(".leed-tabs__container");
+    const groupId = tabContainer?.getAttribute("data-tabs-groupId");
+
+    if (groupId === "responses") {
+      // Find the response selector component - try multiple selectors
+      let responseSection = document.querySelector('.api-section[x-data="responseSelector()"]');
+      if (!responseSection) {
+        responseSection = document.querySelector('.api-section[x-data*="responseSelector"]');
+      }
+      if (!responseSection || !window.Alpine) return;
+
+      // Get the Alpine component instance
+      const responseSelector = Alpine.$data(responseSection);
+      if (!responseSelector) return;
+
+      // Get the tab index
+      const tabIndex = tab.getAttribute("data-tab-index");
+      if (tabIndex === null) return;
+
+      const arrayIndex = parseInt(tabIndex, 10);
+
+      // Get available statuses from the response selector
+      // Look for status options (not content type options which have data-status-code)
+      const statusOptions = responseSection.querySelectorAll(".api-item[data-value]:not([data-status-code])");
+      const availableStatuses = Array.from(statusOptions).map((option) => option.getAttribute("data-value"));
+
+      // Update selectedStatus if index is valid
+      if (
+        arrayIndex >= 0 &&
+        arrayIndex < availableStatuses.length &&
+        responseSelector.selectedStatus !== availableStatuses[arrayIndex]
+      ) {
+        responseSelector.selectedStatus = availableStatuses[arrayIndex];
+        // updateContentTypes will be called automatically via the $watch
+      }
+    }
+  },
+
+  closeAllDropdowns() {
+    this.dropdowns.forEach(({ button, menu }) => {
+      this.toggleDropdown(button, menu, false);
+    });
+  },
+
+  observeTabChanges() {
+    // Use MutationObserver to watch for tab changes
+    this.dropdowns.forEach(({ tablist, button, menu }) => {
+      const observer = new MutationObserver(() => {
+        const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+        const activeTab = tabs.find((tab) => tab.getAttribute("aria-selected") === "true");
+
+        if (activeTab) {
+          // Update button content
+          const buttonContent = this.getTabContent(activeTab);
+          button.innerHTML = buttonContent;
+
+          // Update menu items
+          menu.querySelectorAll(".api-tab-dropdown-item").forEach((item) => {
+            const tabId = item.getAttribute("data-tab-id");
+            if (tabId === activeTab.id) {
+              item.setAttribute("aria-selected", "true");
+            } else {
+              item.setAttribute("aria-selected", "false");
+            }
+          });
+
+          // Sync with response selector if this is a responses tab
+          this.syncWithResponseSelector(activeTab);
+        }
+      });
+
+      observer.observe(tablist, {
+        attributes: true,
+        attributeFilter: ["aria-selected"],
+        subtree: true,
+      });
+    });
+  },
+
+  handleResize() {
+    // Recheck all containers and convert/remove dropdowns as needed
+    const apiSidebarContent = document.querySelector(".api-sidebar-content");
+    if (!apiSidebarContent) return;
+
+    const tabContainers = apiSidebarContent.querySelectorAll(".leed-tabs__container");
+
+    tabContainers.forEach((container, index) => {
+      const tablist = container.querySelector('ul[role="tablist"]');
+      if (!tablist) return;
+
+      // Check if we already have a dropdown for this tablist
+      const existingDropdown = this.dropdowns.find((d) => d.tablist === tablist && d.container === container);
+
+      // First tablist always converts, others check width
+      let shouldConvert = false;
+      if (index === 0) {
+        shouldConvert = true;
+      } else {
+        shouldConvert = this.shouldConvertToDropdown(tablist, container);
+      }
+
+      if (shouldConvert && !existingDropdown) {
+        // Need to create dropdown
+        this.createDropdown(tablist, container);
+      } else if (!shouldConvert && existingDropdown && index !== 0) {
+        // Need to remove dropdown and show tablist (but not for first tablist)
+        if (existingDropdown.tablist) {
+          existingDropdown.tablist.classList.remove("converted-to-dropdown");
+          existingDropdown.tablist.style.display = "";
+        }
+        if (existingDropdown.dropdown?.parentNode) {
+          existingDropdown.dropdown.remove();
+        }
+        this.dropdowns = this.dropdowns.filter((d) => d !== existingDropdown);
+      }
+    });
+  },
+};
+
+// Docs Tab Dropdown Manager - converts overflowing tablists in #leed-docs-copy to dropdowns
+const DocsTabDropdownManager = {
+  dropdowns: [],
+
+  init() {
+    const docsContent = document.getElementById("leed-docs-copy");
+    if (!docsContent) return;
+
+    // Find all tab containers under #leed-docs-copy
+    const tabContainers = docsContent.querySelectorAll(".leed-tabs__container");
+
+    tabContainers.forEach((container) => {
+      // Skip containers that are inside .api-sidebar-content (handled by ApiTabDropdownManager)
+      if (container.closest(".api-sidebar-content")) {
+        return;
+      }
+
+      const tablist = container.querySelector('ul[role="tablist"]');
+      if (!tablist) return;
+
+      // Check if tablist overflows
+      if (this.shouldConvertToDropdown(tablist, container)) {
+        this.createDropdown(tablist, container);
+      }
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener("click", (e) => {
+      if (!e.target.closest(".docs-tab-dropdown")) {
+        this.closeAllDropdowns();
+      }
+    });
+
+    // Listen for tab changes to update dropdown display
+    this.observeTabChanges();
+
+    // Delay resize listener registration to avoid immediate resize event from ResizeManager.init()
+    // which fires on window.load
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // Recheck on resize
+        ResizeManager.addListener(() => {
+          this.handleResize();
+        });
+      });
+    });
+  },
+
+  shouldConvertToDropdown(tablist, container) {
+    // Temporarily show tablist if it's hidden to get accurate measurements
+    const wasHidden = tablist.style.display === "none" || tablist.classList.contains("converted-to-dropdown");
+    const hadClass = tablist.classList.contains("converted-to-dropdown");
+    const originalStyles = {
+      display: tablist.style.display,
+      visibility: tablist.style.visibility,
+      position: tablist.style.position,
+      overflow: tablist.style.overflow,
+      width: tablist.style.width,
+      maxWidth: tablist.style.maxWidth,
+    };
+
+    if (wasHidden) {
+      // Temporarily remove the class if present
+      if (hadClass) {
+        tablist.classList.remove("converted-to-dropdown");
+      }
+      // Make it invisible but still in layout for measurement
+      tablist.style.display = "";
+      tablist.style.visibility = "hidden";
+      tablist.style.position = "absolute";
+      tablist.style.overflow = "visible";
+      tablist.style.width = "auto";
+      tablist.style.maxWidth = "none";
+    } else {
+      // Temporarily remove any width constraints to get natural width
+      tablist.style.width = "auto";
+      tablist.style.maxWidth = "none";
+    }
+
+    // Force a reflow to ensure accurate measurements
+    void tablist.offsetWidth;
+
+    // Get the natural width of the tablist (all tabs laid out without constraints)
+    // Use scrollWidth which gives the full content width
+    const tablistNaturalWidth = tablist.scrollWidth;
+
+    // Check if there's a wrapper (like .leed-tabs__container) that constrains the width
+    const wrapper = tablist.closest(".leed-tabs__container");
+    let availableWidth;
+
+    if (wrapper) {
+      // Use wrapper's available width if it exists
+      const wrapperRect = wrapper.getBoundingClientRect();
+      availableWidth = wrapperRect.width;
+    } else {
+      // Use container's available width
+      const containerRect = container.getBoundingClientRect();
+      availableWidth = containerRect.width;
+    }
+
+    const threshold = (80 / 100) * availableWidth;
+
+    // Restore original styles
+    Object.keys(originalStyles).forEach((key) => {
+      tablist.style[key] = originalStyles[key] || "";
+    });
+
+    // Restore the class if it was present
+    if (hadClass) {
+      tablist.classList.add("converted-to-dropdown");
+    }
+
+    // Check if tablist natural width exceeds 80% of the available width
+    const shouldConvert = tablistNaturalWidth > threshold;
+
+    return shouldConvert;
+  },
+
+  createDropdown(tablist, container) {
+    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+    if (tabs.length === 0) return;
+
+    // Find the active tab
+    const activeTab = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") || tabs[0];
+
+    // Create dropdown wrapper
+    const dropdown = document.createElement("div");
+    dropdown.className = "docs-tab-dropdown";
+
+    // Create button
+    const button = document.createElement("button");
+    button.className = "docs-tab-dropdown-button";
+    button.setAttribute("type", "button");
+    button.setAttribute("aria-expanded", "false");
+    button.setAttribute("aria-haspopup", "true");
+    button.setAttribute("aria-controls", `docs-tab-dropdown-menu-${this.dropdowns.length}`);
+
+    // Get button content from active tab
+    const buttonContent = this.getTabContent(activeTab);
+    button.innerHTML = buttonContent;
+
+    // Create menu
+    const menu = document.createElement("div");
+    menu.className = "docs-tab-dropdown-menu";
+    menu.id = `docs-tab-dropdown-menu-${this.dropdowns.length}`;
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-hidden", "true");
+
+    // Create menu items from tabs
+    tabs.forEach((tab) => {
+      const menuItem = document.createElement("div");
+      menuItem.className = "docs-tab-dropdown-item";
+      menuItem.setAttribute("role", "menuitem");
+      menuItem.setAttribute("tabindex", "-1");
+      menuItem.setAttribute("data-tab-id", tab.id);
+      menuItem.setAttribute("aria-selected", tab.getAttribute("aria-selected") === "true" ? "true" : "false");
+
+      const tabContent = this.getTabContent(tab);
+      menuItem.innerHTML = tabContent;
+
+      menuItem.addEventListener("click", () => {
+        this.selectTab(tab, button, menu);
+      });
+
+      menu.appendChild(menuItem);
+    });
+
+    // Button click handler
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isExpanded = button.getAttribute("aria-expanded") === "true";
+      this.toggleDropdown(button, menu, !isExpanded);
+    });
+
+    // Keyboard navigation
+    button.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const isExpanded = button.getAttribute("aria-expanded") === "true";
+        this.toggleDropdown(button, menu, !isExpanded);
+      } else if (e.key === "Escape") {
+        this.toggleDropdown(button, menu, false);
+      }
+    });
+
+    menu.addEventListener("keydown", (e) => {
+      const items = Array.from(menu.querySelectorAll(".docs-tab-dropdown-item"));
+      const currentIndex = items.indexOf(e.target);
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const nextIndex = (currentIndex + 1) % items.length;
+        items[nextIndex].focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prevIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+        items[prevIndex].focus();
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const tabId = e.target.getAttribute("data-tab-id");
+        const tab = document.getElementById(tabId);
+        if (tab) {
+          this.selectTab(tab, button, menu);
+        }
+      } else if (e.key === "Escape") {
+        this.toggleDropdown(button, menu, false);
+        button.focus();
+      }
+    });
+
+    dropdown.appendChild(button);
+    dropdown.appendChild(menu);
+
+    // Insert dropdown before the tablist
+    tablist.parentNode.insertBefore(dropdown, tablist);
+
+    // Hide the original tablist by adding a class and setting display
+    tablist.classList.add("converted-to-dropdown");
+    tablist.style.display = "none";
+
+    // Store reference
+    this.dropdowns.push({ dropdown, button, menu, tablist, tabs, container });
+  },
+
+  getTabContent(tab) {
+    // Clone the tab content (including icons, text, and any nested elements)
+    const clone = tab.cloneNode(true);
+    // Remove any classes that might interfere with styling
+    clone.className = "";
+    // Remove any attributes that might interfere
+    clone.removeAttribute("role");
+    clone.removeAttribute("aria-selected");
+    clone.removeAttribute("aria-controls");
+    clone.removeAttribute("tabindex");
+    clone.removeAttribute("id");
+    clone.removeAttribute("data-tab-index");
+    // Return the innerHTML which includes all content dynamically
+    return clone.innerHTML;
+  },
+
+  toggleDropdown(button, menu, isOpen) {
+    button.setAttribute("aria-expanded", isOpen.toString());
+    menu.setAttribute("aria-hidden", (!isOpen).toString());
+
+    if (isOpen) {
+      // Focus first item when opening
+      const firstItem = menu.querySelector(".docs-tab-dropdown-item");
+      if (firstItem) {
+        firstItem.setAttribute("tabindex", "0");
+        firstItem.focus();
+        // Set other items to -1
+        menu.querySelectorAll(".docs-tab-dropdown-item").forEach((item) => {
+          if (item !== firstItem) {
+            item.setAttribute("tabindex", "-1");
+          }
+        });
+      }
+    } else {
+      // Reset tabindex when closing
+      menu.querySelectorAll(".docs-tab-dropdown-item").forEach((item) => {
+        item.removeAttribute("tabindex");
+      });
+    }
+  },
+
+  selectTab(tab, button, menu) {
+    // Activate the tab using TabManager
+    if (TabManager?.activateTabGroup) {
+      TabManager.activateTabGroup(tab);
+    } else {
+      // Fallback: click the tab directly
+      tab.click();
+    }
+
+    // Update button content
+    const buttonContent = this.getTabContent(tab);
+    button.innerHTML = buttonContent;
+
+    // Update menu items
+    menu.querySelectorAll(".docs-tab-dropdown-item").forEach((item) => {
+      const tabId = item.getAttribute("data-tab-id");
+      if (tabId === tab.id) {
+        item.setAttribute("aria-selected", "true");
+      } else {
+        item.setAttribute("aria-selected", "false");
+      }
+    });
+
+    // Close dropdown
+    this.toggleDropdown(button, menu, false);
+  },
+
+  closeAllDropdowns() {
+    this.dropdowns.forEach(({ button, menu }) => {
+      this.toggleDropdown(button, menu, false);
+    });
+  },
+
+  observeTabChanges() {
+    // Use MutationObserver to watch for tab changes
+    this.dropdowns.forEach(({ tablist, button, menu }) => {
+      const observer = new MutationObserver(() => {
+        const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+        const activeTab = tabs.find((tab) => tab.getAttribute("aria-selected") === "true");
+
+        if (activeTab) {
+          // Update button content
+          const buttonContent = this.getTabContent(activeTab);
+          button.innerHTML = buttonContent;
+
+          // Update menu items
+          menu.querySelectorAll(".docs-tab-dropdown-item").forEach((item) => {
+            const tabId = item.getAttribute("data-tab-id");
+            if (tabId === activeTab.id) {
+              item.setAttribute("aria-selected", "true");
+            } else {
+              item.setAttribute("aria-selected", "false");
+            }
+          });
+        }
+      });
+
+      observer.observe(tablist, {
+        attributes: true,
+        attributeFilter: ["aria-selected"],
+        subtree: true,
+      });
+    });
+  },
+
+  handleResize() {
+    // Recheck all containers and convert/remove dropdowns as needed
+    const docsContent = document.getElementById("leed-docs-copy");
+    if (!docsContent) return;
+
+    const tabContainers = docsContent.querySelectorAll(".leed-tabs__container");
+
+    tabContainers.forEach((container) => {
+      // Skip containers that are inside .api-sidebar-content (handled by ApiTabDropdownManager)
+      if (container.closest(".api-sidebar-content")) {
+        return;
+      }
+
+      const tablist = container.querySelector('ul[role="tablist"]');
+      if (!tablist) return;
+
+      // Validate container has a valid width before making decisions
+      const containerRect = container.getBoundingClientRect();
+      if (containerRect.width === 0) {
+        // Container not yet laid out, skip this check
+        return;
+      }
+
+      // Check if we already have a dropdown for this tablist
+      const existingDropdown = this.dropdowns.find((d) => d.tablist === tablist && d.container === container);
+
+      const shouldConvert = this.shouldConvertToDropdown(tablist, container);
+
+      if (shouldConvert && !existingDropdown) {
+        // Need to create dropdown
+        this.createDropdown(tablist, container);
+      } else if (!shouldConvert && existingDropdown) {
+        // Only remove dropdown if container has valid dimensions
+        // This prevents premature removal during initial layout
+        if (containerRect.width > 0 && containerRect.height > 0) {
+          // Need to remove dropdown and show tablist
+          if (existingDropdown.tablist) {
+            existingDropdown.tablist.classList.remove("converted-to-dropdown");
+            existingDropdown.tablist.style.display = "";
+          }
+          if (existingDropdown.dropdown?.parentNode) {
+            existingDropdown.dropdown.remove();
+          }
+          this.dropdowns = this.dropdowns.filter((d) => d !== existingDropdown);
+        }
+      }
+    });
+  },
+};
+
+/**
+ * Tables scroll rather than crush.
+ *
+ * A reference table has a width below which it stops being readable, and a
+ * narrow column takes it straight through: the flag column wrapping `--env`
+ * over two lines is a column of noise where the whole point is a value you can
+ * scan.
+ *
+ * CSS alone cannot fix it. `overflow-x` on a `<table>` only applies with
+ * `display: block`, and that makes the inner table box shrink to the block's
+ * width, so the cells crush and nothing ever overflows. The element that
+ * scrolls has to be a real wrapper, and markdown gives the renderer none — so
+ * one is added here, the same way `setupCopyButtons` wraps a `<pre>`.
+ *
+ * Scoped to `#leed-docs-copy`, the article body that doc-article.hbs and
+ * api-article.hbs both emit, so a table used for layout elsewhere in the
+ * chrome is left alone.
+ *
+ * With JavaScript off the table is exactly what it was before: readable, just
+ * narrow. Nothing is hidden by this, which is the right way to fail.
+ */
+const TableManager = {
+  init() {
+    document.querySelectorAll("#leed-docs-copy table").forEach((table) => {
+      if (table.parentElement?.classList.contains("table-scroll")) return;
+      const wrapper = document.createElement("div");
+      wrapper.className = "table-scroll";
+      table.parentNode.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    });
+  },
+};
+
+// Main initialization
+document.addEventListener("DOMContentLoaded", () => {
+  ResizeManager.init();
+  MermaidManager.init();
+  CodeBlockManager.init();
+  TableManager.init();
+  TabManager.init();
+  HeaderManager.init();
+  TOCManager.init();
+  NavFilterManager.init();
+  AnchorLinkManager.init();
+  ApiTabDropdownManager.init();
+  DocsTabDropdownManager.init();
+});