@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/lib/core/hooks/use-full-height.js

@@ -6,27 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFullHeight = useFullHeight;
 const react_1 = require("react");
 const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
-function useFullHeight(element) {
+function useFullHeight(elementRef) {
     const handler = (0, react_1.useCallback)(() => {
-        if (!element.current) {
+        if (!elementRef.current) {
             return;
         }
         const footer = document.querySelector('footer');
         if (!footer) {
             return;
         }
-        const elementTop = element.current.getBoundingClientRect().top;
+        const elementTop = elementRef.current.getBoundingClientRect().top;
         const footerOffset = footer.offsetTop - window.scrollY - elementTop;
         if (footerOffset > window.innerHeight) {
-            element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
+            elementRef.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
         }
         else {
-            element.current.style.maxHeight = `${footerOffset}px`;
+            elementRef.current.style.maxHeight = `${footerOffset}px`;
         }
-    }, [element]);
+    }, [elementRef]);
     const throttledHandler = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)(handler, 150), [handler]);
     (0, react_1.useEffect)(() => {
-        if (typeof window === 'undefined' || !element.current) {
+        if (typeof window === 'undefined' || !elementRef.current) {
             return () => {
                 // nope
             };
@@ -42,6 +42,6 @@ function useFullHeight(element) {
             window.removeEventListener('scroll', throttledHandler);
             window.removeEventListener('resize', throttledHandler);
         };
-    }, [throttledHandler, element, handler]);
+    }, [throttledHandler, elementRef, handler]);
 }
 //# sourceMappingURL=use-full-height.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,3 +1,3 @@
 import type { PageAction } from '../types';
-export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'docs-mcp-cursor' | 'docs-mcp-vscode' | 'mcp-cursor' | 'mcp-vscode';
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'docs-mcp-cursor' | 'docs-mcp-vscode' | 'docs-mcp-claude' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

package/lib/core/hooks/use-page-actions.js

@@ -25,6 +25,7 @@ const dom_1 = require("../utils/dom");
 const mcp_1 = require("../utils/mcp");
 const urls_1 = require("../utils/urls");
 const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
+const get_ai_prompt_link_1 = require("../utils/get-ai-prompt-link");
 const DEFAULT_ENABLED_ACTIONS = [
     'copy',
     'view',
@@ -32,6 +33,7 @@ const DEFAULT_ENABLED_ACTIONS = [
     'claude',
     'docs-mcp-cursor',
     'docs-mcp-vscode',
+    'docs-mcp-claude',
 ];
 function usePageActions(pageSlug, mcpUrl, actions) {
     var _a;
@@ -81,9 +83,11 @@ function usePageActions(pageSlug, mcpUrl, actions) {
         const mdPageUrl = isRoot
             ? (0, urls_1.combineUrls)(origin, pathname, 'index.html.md')
             : (0, urls_1.combineUrls)(origin, (0, urls_1.removeTrailingSlash)(pathname) + '.md');
+        const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
         const actionHandlers = {
             'docs-mcp-cursor': createMCPHandler('cursor', false),
             'docs-mcp-vscode': createMCPHandler('vscode', false),
+            'docs-mcp-claude': createMCPHandler('claude', false),
             'mcp-cursor': createMCPHandler('cursor', true),
             'mcp-vscode': createMCPHandler('vscode', true),
             copy: () => ({
@@ -121,7 +125,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                 },
             }),
             chatgpt: () => {
-                const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
+                const link = (0, get_ai_prompt_link_1.getAiPromptLink)('chatgpt', externalAiPrompt);
                 return {
                     buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
                     title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
@@ -137,7 +141,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                 };
             },
             claude: () => {
-                const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
+                const link = (0, get_ai_prompt_link_1.getAiPromptLink)('claude', externalAiPrompt);
                 return {
                     buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
                     title: translate('page.actions.claudeTitle', 'Open in Claude'),
@@ -172,12 +176,6 @@ function usePageActions(pageSlug, mcpUrl, actions) {
     ]);
     return result;
 }
-function getExternalAiPromptLink(baseUrl, mdPageUrl) {
-    const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-    const url = new URL(baseUrl);
-    url.searchParams.set('q', externalAiPrompt);
-    return url.toString();
-}
 function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, }) {
     const url = (0, mcp_1.generateMCPDeepLink)(clientType, mcpConfig);
     const sharedProps = {
@@ -189,6 +187,9 @@ function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, })
     if (clientType === 'cursor') {
         return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), title: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), description: translate('page.actions.connectMcp.cursorDescription', 'Install MCP server on Cursor'), iconComponent: CursorIcon_1.CursorIcon });
     }
+    if (clientType === 'claude') {
+        return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.claude', 'Connect to Claude'), title: translate('page.actions.connectMcp.claude', 'Connect to Claude'), description: translate('page.actions.connectMcp.claudeDescription', 'Add MCP server to your Claude account'), iconComponent: ClaudeIcon_1.ClaudeIcon });
+    }
     return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
 }
 function shouldHideAction(action, { pageProps, themeConfig, apiDocsExcludeFromSearch, isApiDocsPage, isPublic, mcpUrl, isMcpDisabled, }) {
@@ -221,6 +222,7 @@ function shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled, }) {
             return !isPublic;
         case 'docs-mcp-cursor':
         case 'docs-mcp-vscode':
+        case 'docs-mcp-claude':
             return Boolean(mcpUrl) || isMcpDisabled;
         case 'mcp-cursor':
         case 'mcp-vscode':

package/lib/core/hooks/use-pointer-border-highlight.d.ts

@@ -0,0 +1,7 @@
+import type { PointerEvent, RefObject } from 'react';
+export type PointerBorderHighlight<T extends HTMLElement> = {
+    ref: RefObject<T | null>;
+    onPointerMove: (event: PointerEvent<T>) => void;
+    onPointerLeave: () => void;
+};
+export declare function usePointerBorderHighlight<T extends HTMLElement>(distance?: number): PointerBorderHighlight<T>;

package/lib/core/hooks/use-pointer-border-highlight.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePointerBorderHighlight = usePointerBorderHighlight;
+const react_1 = require("react");
+const EDGE_PROXIMITY_DISTANCE = 80;
+/* Writes `--pointer-x`, `--pointer-y` and `--pointer-edge-proximity` (1 at the border, 0 at
+   `distance` px inside) to the element's inline style, so the highlight moves without re-renders. */
+function usePointerBorderHighlight(distance = EDGE_PROXIMITY_DISTANCE) {
+    const ref = (0, react_1.useRef)(null);
+    const onPointerMove = (0, react_1.useCallback)((event) => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const rect = element.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const edgeDistance = Math.min(x, y, rect.width - x, rect.height - y);
+        const proximity = Math.min(1, Math.max(0, 1 - edgeDistance / distance));
+        element.style.setProperty('--pointer-x', `${x}px`);
+        element.style.setProperty('--pointer-y', `${y}px`);
+        element.style.setProperty('--pointer-edge-proximity', String(Math.round(proximity * 100) / 100));
+    }, [distance]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--pointer-edge-proximity', '0');
+    }, []);
+    return { ref, onPointerMove, onPointerLeave };
+}
+//# sourceMappingURL=use-pointer-border-highlight.js.map

package/lib/core/hooks/use-scroll-item-into-view.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare function useScrollItemIntoView(listRef: RefObject<HTMLElement | null>, activeIndex: number): void;

package/lib/core/hooks/use-scroll-item-into-view.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollItemIntoView = useScrollItemIntoView;
+const react_1 = require("react");
+function useScrollItemIntoView(listRef, activeIndex) {
+    (0, react_1.useEffect)(() => {
+        const list = listRef.current;
+        const activeItem = activeIndex === -1 ? undefined : list === null || list === void 0 ? void 0 : list.children[activeIndex];
+        if (!list || !activeItem)
+            return;
+        const listRect = list.getBoundingClientRect();
+        const itemRect = activeItem.getBoundingClientRect();
+        list.scrollLeft += itemRect.left - listRect.left - (listRect.width - itemRect.width) / 2;
+    }, [listRef, activeIndex]);
+}
+//# sourceMappingURL=use-scroll-item-into-view.js.map

package/lib/core/hooks/use-tab-list.d.ts

@@ -0,0 +1,31 @@
+import type { KeyboardEvent } from 'react';
+type UseTabListProps = {
+    count: number;
+    activeIndex: number;
+    onChange: (index: number) => void;
+};
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+export declare function useTabList({ count, activeIndex, onChange }: UseTabListProps): {
+    tabListProps: {
+        role: string;
+    };
+    getTabProps: (index: number) => {
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'aria-controls': string;
+        tabIndex: number;
+        ref: (element: HTMLElement | null) => void;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+    };
+    getTabPanelProps: (index: number) => {
+        id: string;
+        role: string;
+        'aria-labelledby': string;
+    };
+};
+export {};

package/lib/core/hooks/use-tab-list.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabList = useTabList;
+const react_1 = require("react");
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+function useTabList({ count, activeIndex, onChange }) {
+    const idPrefix = (0, react_1.useId)();
+    const focusableIndex = activeIndex >= 0 ? activeIndex : 0;
+    const tabRefs = (0, react_1.useRef)([]);
+    const select = (0, react_1.useCallback)((index) => {
+        var _a;
+        onChange(index);
+        (_a = tabRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onChange]);
+    const onKeyDown = (0, react_1.useCallback)((event, index) => {
+        const target = {
+            ArrowRight: (index + 1) % count,
+            ArrowLeft: (index - 1 + count) % count,
+            Home: 0,
+            End: count - 1,
+        }[event.key];
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        select(target);
+    }, [count, select]);
+    const getTabProps = (index) => ({
+        id: `${idPrefix}-tab-${index}`,
+        role: 'tab',
+        'aria-selected': index === activeIndex,
+        'aria-controls': `${idPrefix}-panel-${index}`,
+        tabIndex: index === focusableIndex ? 0 : -1,
+        ref: (element) => {
+            tabRefs.current[index] = element;
+        },
+        onClick: () => select(index),
+        onKeyDown: (event) => onKeyDown(event, index),
+    });
+    const getTabPanelProps = (index) => ({
+        id: `${idPrefix}-panel-${index}`,
+        role: 'tabpanel',
+        'aria-labelledby': `${idPrefix}-tab-${index}`,
+    });
+    return { tabListProps: { role: 'tablist' }, getTabProps, getTabPanelProps };
+}
+//# sourceMappingURL=use-tab-list.js.map

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -36,6 +36,8 @@ export declare const useTelemetryFallback: () => {
     sendCodeSnippetReportedMessage: () => void;
     sendConnectMcpClickedMessage: () => void;
     sendMcpConnectionSnippetCopiedMessage: () => void;
+    sendPromptTagCopiedMessage: () => void;
+    sendPromptTagOpenedMessage: () => void;
     sendMobileMenuClosedMessage: () => void;
     sendMobileMenuOpenedMessage: () => void;
     sendPageViewedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -41,6 +41,8 @@ const useTelemetryFallback = () => ({
     sendCodeSnippetReportedMessage: () => { },
     sendConnectMcpClickedMessage: () => { },
     sendMcpConnectionSnippetCopiedMessage: () => { },
+    sendPromptTagCopiedMessage: () => { },
+    sendPromptTagOpenedMessage: () => { },
     sendMobileMenuClosedMessage: () => { },
     sendMobileMenuOpenedMessage: () => { },
     sendPageViewedMessage: () => { },

package/lib/core/hooks/use-theme-hooks.js

@@ -17,12 +17,28 @@ const fallbacks = {
     useOtelTelemetry: () => ({ send: () => { } }),
     useBreadcrumbs: () => ({ breadcrumbs: [], siblings: undefined }),
     useBanner: () => ({ banner: undefined, dismissBanner: () => { } }),
+    useConsent: () => ({
+        enabled: false,
+        config: undefined,
+        mode: undefined,
+        state: undefined,
+        decided: false,
+        gpc: false,
+        isDialogOpen: false,
+        openDialog: () => { },
+        closeDialog: () => { },
+        accept: () => { },
+        reject: () => { },
+        save: () => { },
+    }),
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
     useUserMenu: () => ({}),
     usePageData: () => null,
     usePageProps: () => ({}),
     usePageSharedData: () => null,
     useMcpData: () => ({ docs: { enabled: false } }),
+    useSearchFeatures: () => ({}),
+    useNavigationTabs: () => undefined,
 };
 const useThemeHooks = () => {
     const context = (0, react_1.useContext)(ThemeDataContext_1.ThemeDataContext);

package/lib/core/styles/dark.js

@@ -12,12 +12,13 @@ const variables_dark_7 = require("../../components/Tag/variables.dark");
 const variables_dark_8 = require("../../components/StatusCode/variables.dark");
 const variables_dark_9 = require("../../components/Switch/variables.dark");
 const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_11 = require("../../components/Catalog/variables.dark");
-const variables_dark_12 = require("../../components/PageActions/variables.dark");
-const variables_dark_13 = require("../../components/Tooltip/variables.dark");
-const variables_dark_14 = require("../../components/Banner/variables.dark");
-const variables_dark_15 = require("../../components/Admonition/variables.dark");
-const variables_dark_16 = require("../../components/CodeBlock/variables.dark");
+const variables_dark_11 = require("../../markdoc/components/Prompt/variables.dark");
+const variables_dark_12 = require("../../components/Catalog/variables.dark");
+const variables_dark_13 = require("../../components/PageActions/variables.dark");
+const variables_dark_14 = require("../../components/Tooltip/variables.dark");
+const variables_dark_15 = require("../../components/Banner/variables.dark");
+const variables_dark_16 = require("../../components/Admonition/variables.dark");
+const variables_dark_17 = require("../../components/CodeBlock/variables.dark");
 const palette_dark_1 = require("./palette.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
@@ -353,15 +354,16 @@ exports.darkMode = (0, styled_components_1.css) `
   ${replayDarkMode}
   ${variables_dark_9.switcherDarkMode}
   ${variables_dark_10.cardsDarkMode}
-  ${variables_dark_11.catalogDarkMode}
-  ${variables_dark_12.pageActionsDarkMode}
-  ${variables_dark_13.tooltipDarkMode}
-  ${variables_dark_14.bannerDarkMode}
-  ${variables_dark_15.admonitionDarkMode}
+  ${variables_dark_11.promptTagDarkMode}
+  ${variables_dark_12.catalogDarkMode}
+  ${variables_dark_13.pageActionsDarkMode}
+  ${variables_dark_14.tooltipDarkMode}
+  ${variables_dark_15.bannerDarkMode}
+  ${variables_dark_16.admonitionDarkMode}
   ${badgesDarkMode}
   ${numberedListDarkMode}
   ${palette_dark_1.activeBrandPaletteDark}
-  ${variables_dark_16.codeBlockDarkMode}
+  ${variables_dark_17.codeBlockDarkMode}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/lib/core/styles/global.d.ts

@@ -1,3 +1,5 @@
+/** The light theme tokens without a selector, for a host that sets them on one element. */
+export declare const tokens: import("styled-components").RuleSet<object>;
 export declare const styles: import("styled-components").RuleSet<NoInfer<{
     palette?: string;
 }>>;

package/lib/core/styles/global.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalStyle = exports.styles = void 0;
+exports.GlobalStyle = exports.styles = exports.tokens = void 0;
 const styled_components_1 = require("styled-components");
 const variables_1 = require("../../components/LanguagePicker/variables");
 const variables_2 = require("../../components/Scorecard/variables");
@@ -30,26 +30,30 @@ const variables_25 = require("../../components/CodeBlock/variables");
 const variables_26 = require("../../components/Product/variables");
 const variables_27 = require("../../components/Markdown/variables");
 const variables_28 = require("../../components/Banner/variables");
-const variables_29 = require("../../markdoc/components/Accordion/variables");
-const variables_30 = require("../../markdoc/components/Tabs/variables");
-const variables_31 = require("../../markdoc/components/NumberedList/variables");
-const variables_32 = require("../../markdoc/components/Diagram/variables");
-const variables_33 = require("../../components/LastUpdated/variables");
-const variables_34 = require("../../components/Logo/variables");
-const variables_35 = require("../../components/StatusCode/variables");
-const variables_36 = require("../../components/Segmented/variables");
-const variables_37 = require("../../components/UserMenu/variables");
-const variables_38 = require("../../components/Tags/variables");
-const variables_39 = require("../../components/VersionPicker/variables");
-const variables_40 = require("../../components/DatePicker/variables");
-const variables_41 = require("../../components/Switch/variables");
-const variables_42 = require("../../markdoc/components/Cards/variables");
-const variables_43 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_44 = require("../../components/SkipContent/variables");
-const variables_45 = require("../../components/PageActions/variables");
-const variables_46 = require("../../components/SvgViewer/variables");
-const variables_47 = require("../../components/Toast/variables");
-const variables_48 = require("../../components/PageNavigation/variables");
+const variables_29 = require("../../components/Consent/variables");
+const variables_30 = require("../../markdoc/components/Accordion/variables");
+const variables_31 = require("../../markdoc/components/Tabs/variables");
+const variables_32 = require("../../markdoc/components/NumberedList/variables");
+const variables_33 = require("../../markdoc/components/Diagram/variables");
+const variables_34 = require("../../components/LastUpdated/variables");
+const variables_35 = require("../../components/Logo/variables");
+const variables_36 = require("../../components/StatusCode/variables");
+const variables_37 = require("../../components/Segmented/variables");
+const variables_38 = require("../../components/UserMenu/variables");
+const variables_39 = require("../../components/Tags/variables");
+const variables_40 = require("../../components/VersionPicker/variables");
+const variables_41 = require("../../components/DatePicker/variables");
+const variables_42 = require("../../components/Switch/variables");
+const variables_43 = require("../../markdoc/components/Cards/variables");
+const variables_44 = require("../../markdoc/components/Prompt/variables");
+const variables_45 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_46 = require("../../components/SkipContent/variables");
+const variables_47 = require("../../components/PageActions/variables");
+const variables_48 = require("../../components/SvgViewer/variables");
+const variables_49 = require("../../components/Toast/variables");
+const variables_50 = require("../../components/PageNavigation/variables");
+const variables_51 = require("../../components/NavigationTabs/variables");
+const utils_1 = require("../../core/utils");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -860,46 +864,6 @@ const loadProgressBar = (0, styled_components_1.css) `
   --load-progress-bar-height: 2px; // @presenter Height
 
   // @tokens End
-
-  /* Make clicks pass-through */
-  #nprogress {
-    pointer-events: none;
-  }
-
-  #nprogress .bar {
-    background: var(--load-progress-bar-color);
-
-    position: fixed;
-    z-index: var(--z-index-popover);
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: var(--load-progress-bar-height);
-  }
-
-  #nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0;
-    width: 100px;
-    height: 100%;
-    box-shadow: var(--load-progress-bar-shadow);
-    opacity: 1;
-
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
-  }
-
-  .nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
-  }
-
-  .nprogress-custom-parent #nprogress .bar {
-    position: absolute;
-  }
 `;
 const inputs = (0, styled_components_1.css) `
   /**
@@ -1111,8 +1075,8 @@ const error = (0, styled_components_1.css) `
   --detailed-error-overlay-z-index: var(--z-index-raised);
 
   --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
-  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
-  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
+  --detailed-error-modal-height: calc(100vh - var(--navbar-stack-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-stack-height));
   --detailed-error-modal-border-radius: var(--border-radius-md);
   --detailed-error-modal-bg-color: var(--bg-color-raised);
   --detailed-error-modal-color: var(--text-color-primary);
@@ -1304,81 +1268,89 @@ const replay = (0, styled_components_1.css) `
   }
   // @tokens End
 `;
+/** The light theme tokens without a selector, for a host that sets them on one element. */
+exports.tokens = (0, styled_components_1.css) `
+  ${variables_13.accordion}
+  ${variables_18.admonition}
+  ${apiReferenceDocs}
+  ${variables_12.apiReferencePanels}
+  ${badges}
+  ${variables_28.banner}
+  ${borders}
+  ${variables_29.consent}
+  ${variables_5.breadcrumbs}
+  ${variables_20.button}
+  ${variables_21.aiAssistantButton}
+  ${variables_21.connectMcpButton}
+  ${variables_43.cards}
+  ${variables_44.promptTag}
+  ${variables_8.catalog}
+  ${variables_11.catalogClassic}
+  ${variables_25.code}
+  ${variables_45.codeWalkthrough}
+  ${docsDropdown}
+  ${variables_15.dropdown}
+  ${error}
+  ${variables_10.filter}
+  ${variables_19.footer}
+  ${headingsTypography}
+  ${variables_39.httpTag}
+  ${variables_9.image}
+  ${inputs}
+  ${variables_1.languagePicker}
+  ${variables_34.lastUpdated}
+  ${links}
+  ${loadProgressBar}
+  ${variables_35.logo}
+  ${variables_27.markdown}
+  ${variables_30.markdownAccordion}
+  ${variables_31.markdownTabs}
+  ${variables_32.markdownNumberedList}
+  ${variables_33.diagram}
+  ${variables_24.menu}
+  ${variables_24.mobileMenu}
+  ${modal}
+  ${variables_22.navbar}
+  ${pages}
+  ${variables_26.productPicker}
+  ${variables_12.responsePanelColors}
+  ${variables_23.search}
+  ${variables_51.navigationTabs}
+  ${variables_14.select}
+  ${variables_4.sidebar}
+  ${sizeAndSpace}
+  ${variables_6.tag}
+  ${themeColors}
+  ${palette_1.activeBrandPaletteLight}
+  ${tile}
+  ${variables_7.toc}
+  ${variables_16.tooltip}
+  ${typography}
+  ${variables_38.userMenu}
+  ${variables_40.versionPicker}
+  ${zIndexDepth}
+  ${scorecardColors}
+  ${variables_36.statusCode}
+  ${tab}
+  ${icon}
+  ${tree}
+  ${variables_37.segmented}
+  ${variables_42.switcher}
+  ${variables_17.checkbox}
+  ${variables_3.feedback}
+  ${variables_2.scorecard}
+  ${variables_41.datePicker}
+  ${replay}
+  ${variables_46.skipContent}
+  ${variables_47.pageActions}
+  ${variables_48.svgViewer}
+  ${variables_49.toast}
+  ${variables_50.pageNavigation}
+
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
-    ${variables_13.accordion}
-    ${variables_18.admonition}
-    ${apiReferenceDocs}
-    ${variables_12.apiReferencePanels}
-    ${badges}
-    ${variables_28.banner}
-    ${borders}
-    ${variables_5.breadcrumbs}
-    ${variables_20.button}
-    ${variables_21.aiAssistantButton}
-    ${variables_42.cards}
-    ${variables_8.catalog}
-    ${variables_11.catalogClassic}
-    ${variables_25.code}
-    ${variables_43.codeWalkthrough}
-    ${docsDropdown}
-    ${variables_15.dropdown}
-    ${error}
-    ${variables_10.filter}
-    ${variables_19.footer}
-    ${headingsTypography}
-    ${variables_38.httpTag}
-    ${variables_9.image}
-    ${inputs}
-    ${variables_1.languagePicker}
-    ${variables_33.lastUpdated}
-    ${links}
-    ${loadProgressBar}
-    ${variables_34.logo}
-    ${variables_27.markdown}
-    ${variables_29.markdownAccordion}
-    ${variables_30.markdownTabs}
-    ${variables_31.markdownNumberedList}
-    ${variables_32.diagram}
-    ${variables_24.menu}
-    ${variables_24.mobileMenu}
-    ${modal}
-    ${variables_22.navbar}
-    ${pages}
-    ${variables_26.productPicker}
-    ${variables_12.responsePanelColors}
-    ${variables_23.search}
-    ${variables_14.select}
-    ${variables_4.sidebar}
-    ${sizeAndSpace}
-    ${variables_6.tag}
-    ${themeColors}
-    ${palette_1.activeBrandPaletteLight}
-    ${tile}
-    ${variables_7.toc}
-    ${variables_16.tooltip}
-    ${typography}
-    ${variables_37.userMenu}
-    ${variables_39.versionPicker}
-    ${zIndexDepth}
-    ${scorecardColors}
-    ${variables_35.statusCode}
-    ${tab}
-    ${icon}
-    ${tree}
-    ${variables_36.segmented}
-    ${variables_41.switcher}
-    ${variables_17.checkbox}
-    ${variables_3.feedback}
-    ${variables_2.scorecard}
-    ${variables_40.datePicker}
-    ${replay}
-    ${variables_44.skipContent}
-    ${variables_45.pageActions}
-    ${variables_46.svgViewer}
-    ${variables_47.toast}
-    ${variables_48.pageNavigation}
-
+    ${exports.tokens}
     background-color: var(--bg-color);
     color: var(--text-color-primary);
     font-family: var(--font-family-base);
@@ -1388,6 +1360,13 @@ exports.styles = (0, styled_components_1.css) `
     ${dark_1.darkMode};
   }
 
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    :root:has([data-component-name='NavigationTabs/NavigationTabs']) {
+      --navbar-stack-height: calc(var(--navbar-height) + var(--navigation-tabs-height, 48px));
+      --navbar-row-bottom-border-color: transparent;
+    }
+  }
+
   :root.notransition * {
     transition: none !important;
   }