@stainless-api/docs 0.1.0-beta.12 → 0.1.0-beta.13

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.13
+
+### Patch Changes
+
+- 26a4786: fix: include missing starlight config options
+- Updated dependencies [26a4786]
+  - @stainless-api/docs-ui@0.1.0-beta.10
+  - @stainless-api/ui-primitives@0.1.0-beta.11
+
 ## 0.1.0-beta.12
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.12",
+  "version": "0.1.0-beta.13",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,7 @@
     "./BaseSidebar": "./stl-docs/components/sidebars/BaseSidebar.astro",
     "./SDKSelectSidebar": "./stl-docs/components/sidebars/SDKSelectSidebar.astro",
     "./ContentPanel": "./stl-docs/components/content-panel/ContentPanel.astro",
+    "./TableOfContents": "./stl-docs/components/TableOfContents.astro",
     "./tabsMiddleware": "./stl-docs/tabsMiddleware.ts",
     "./stainless-docs/mintlify-compat": "./stl-docs/components/mintlify-compat/index.ts",
     "./theme": "./theme.css",
@@ -35,34 +36,34 @@
     "node": ">=18.17.1"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.34.0",
-    "astro": ">=5.5.0"
+    "@astrojs/starlight": ">=0.36.1",
+    "astro": ">=5.15.3"
   },
   "dependencies": {
     "@astrojs/markdown-remark": "^6.3.2",
-    "@astrojs/react": "^4.3.1",
+    "@astrojs/react": "^4.4.1",
     "@stainless-api/sdk": "0.1.0-alpha.12",
     "cheerio": "^1.1.2",
     "clsx": "^2.1.1",
-    "dotenv": "17.2.2",
+    "dotenv": "17.2.3",
     "get-port": "^7.1.0",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.544.0",
     "marked": "^16.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "remark-github-alerts": "^0.1.1",
     "shiki": "^3.9.2",
     "web-worker": "^1.5.0",
     "yaml": "^2.8.0",
-    "@stainless-api/ui-primitives": "0.1.0-beta.10",
-    "@stainless-api/docs-ui": "0.1.0-beta.9"
+    "@stainless-api/docs-ui": "0.1.0-beta.10",
+    "@stainless-api/ui-primitives": "0.1.0-beta.11"
   },
   "devDependencies": {
     "@markdoc/markdoc": "^0.5.2",
     "@types/node": "^24.4.0",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "tsx": "^4.20.3",
     "zod": "^4.0.0",
     "@stainless/eslint-config": "0.0.0"

package/stl-docs/components/Header.astro

@@ -44,7 +44,6 @@ const shouldRenderSearch = !!(
       overflow: clip;
       /* Avoid clipping focus ring around link inside title wrapper. */
       padding: 0.25rem;
-      padding-left: 0;
       margin: -0.25rem;
       min-width: 0;
     }

package/stl-docs/components/TableOfContents.astro

@@ -0,0 +1,34 @@
+---
+import Default from '@astrojs/starlight/components/TableOfContents.astro';
+---
+
+<Default {...Astro.props} />
+
+<script>
+  /**
+   * Starlight will mark TOC links as active as they are scrolled to. However, it does not mark
+   * a link as active if it cannot be scrolled to on the page. This happens for small sections at
+   * the bottom of the page which are not large enough to scroll to the top of the viewport.
+   *
+   * This script will mark a section as active if its corresponding hash is in the URL, even if
+   * it cannot be scrolled to.
+   */
+  document.addEventListener('DOMContentLoaded', () => {
+    const tocLinks = document.querySelectorAll('starlight-toc a') as NodeListOf<HTMLAnchorElement>;
+
+    function updateAriaCurrent() {
+      const current = decodeURIComponent(window.location.hash || '');
+      tocLinks.forEach((link) => {
+        const linkHash = decodeURIComponent(link.hash || link.getAttribute('href') || '');
+        if (linkHash === current) {
+          link.setAttribute('aria-current', 'true');
+        } else {
+          link.removeAttribute('aria-current');
+        }
+      });
+    }
+
+    window.addEventListener('hashchange', updateAriaCurrent);
+    updateAriaCurrent();
+  });
+</script>

package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro

@@ -34,13 +34,8 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
       align-items: center;
       padding: 0;
       list-style: none;
-      overflow-x: auto;
       margin-bottom: -1px;
-      gap: 0.29rem;
-    }
-
-    .stl-active-secondary-link:hover {
-      background-color: transparent;
+      gap: 4px;
     }
 
     li {
@@ -50,6 +45,20 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
       &.active {
         border-color: var(--sl-color-text-accent);
       }
+
+      .stl-ui-button {
+        /* match sidebar. TODO: hoist sidebar variables to use those instead of hardcoding? */
+        border-width: 0;
+        padding: 8px 12px;
+        margin-inline: -12px;
+      }
+      /* cover for button’s negative margin */
+      &:not(:first-child) {
+        margin-inline-start: 12px;
+      }
+      &:not(:last-child) {
+        margin-inline-end: 12px;
+      }
     }
   }
 

package/stl-docs/index.ts

@@ -47,6 +47,7 @@ function stainlessDocsStarlightIntegration(config: NormalizedStainlessDocsConfig
     Header: '@stainless-api/docs/Header',
     ThemeSelect: '@stainless-api/docs/ThemeSelect',
     ContentPanel: '@stainless-api/docs/ContentPanel',
+    TableOfContents: '@stainless-api/docs/TableOfContents',
   };
 
   if (config.apiReference !== null) {

package/stl-docs/loadStlDocsConfig.ts

@@ -119,6 +119,12 @@ function normalizeConfig(userConfig: StainlessDocsUserConfig) {
       description: userConfig.description,
       tagline: userConfig.tagline,
       logo: userConfig.logo,
+      favicon: userConfig.favicon,
+      disable404Route: userConfig.disable404Route,
+      editLink: userConfig.editLink,
+      locales: userConfig.locales,
+      lastUpdated: userConfig.lastUpdated,
+      pagination: userConfig.pagination,
     },
     starlightCompat: {
       components: userConfig.experimental?.starlightCompat?.components ?? {},

package/styles/page.css

@@ -1,18 +1,21 @@
-.page {
-  position: relative;
+.page,
+.page > header .header,
+.page > header .stl-secondary-nav-tabs {
   max-width: var(--sl-page-max-width);
   margin: 0 auto;
 
-  .sidebar-pane {
-    left: auto;
+  @media (min-width: 50rem) {
+    padding-inline: var(--stl-ui-page-padding-inline);
   }
+}
 
-  > header {
-    .stl-secondary-nav-tabs,
-    .header {
-      max-width: var(--sl-page-max-width);
-      margin: 0 auto;
-    }
+
+.page {
+  position: relative;
+  max-width: var(--sl-page-max-width);
+
+  .sidebar-pane {
+    left: unset;
   }
 
   .right-sidebar {
@@ -25,22 +28,10 @@
 }
 
 @media (min-width: 50rem) {
-  .page {
-    padding-left: var(--sl-sidebar-pad-x);
-    padding-right: var(--sl-sidebar-pad-x);
-
-    > header {
-      .header,
-      .stl-secondary-nav-tabs {
-        padding: 0 1.5rem;
-      }
-    }
-
-    > header {
-      .stl-secondary-nav-tabs {
-        padding-left: 0.55rem;
-      }
-    }
+  /* on desktop, adjust sidebar so that its _text content_ aligns with the page left edge.
+   * padding (visible on hover) bleeds out beyond the page left edge, covered by --stl-ui-page-padding-inline */
+  .sidebar-pane {
+    margin-inline-start: calc(-1 * (var(--sl-sidebar-pad-x) + var(--stl-sidebar-item-padding-inline)));
   }
 
   .header,
@@ -52,9 +43,6 @@
   mobile-starlight-toc nav {
     inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
   }
-  .sidebar-content {
-    padding-left: 0;
-  }
 }
 
 .stl-content-breadcrumbs {

package/styles/sidebar.css

@@ -63,6 +63,10 @@
       color: var(--stl-ui-foreground);
     }
   }
+  .stl-sdk-select .stldocs-dropdown-trigger {
+    /* dropdown should match link padding, accounting for 1px border */
+    padding: calc(var(--stl-sidebar-item-padding-block) - 1px) calc(var(--stl-sidebar-item-padding-inline) - 1px);
+  }
   li a {
     color: var(--stl-ui-foreground-secondary);
     font-weight: 400;