@redocly/theme 0.70.0-next.3 → 0.70.0-next.4

package/lib/components/NavigationTabs/NavigationTabs.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabs = NavigationTabs;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const NavigationTab_1 = require("../../components/NavigationTabs/NavigationTab");
+function NavigationTabs({ config, className }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const listRef = (0, react_1.useRef)(null);
+    const tabs = (_a = config === null || config === void 0 ? void 0 : config.items) !== null && _a !== void 0 ? _a : [];
+    const activeIndex = tabs.findIndex((tab) => tab.active);
+    (0, hooks_1.useScrollItemIntoView)(listRef, activeIndex);
+    if (!tabs.length) {
+        return null;
+    }
+    return (react_1.default.createElement(NavigationTabsWrapper, { "data-component-name": "NavigationTabs/NavigationTabs", className: className, "aria-label": translate('navigationTabs.label', 'Navigation tabs') },
+        react_1.default.createElement(NavigationTabsList, { ref: listRef }, tabs.map((tab, index) => (react_1.default.createElement(NavigationTab_1.NavigationTab, { key: `${tab.label}_${index}`, tab: tab }))))));
+}
+const NavigationTabsWrapper = styled_components_1.default.nav `
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--navigation-tabs-height);
+  max-width: var(--navbar-container-max-width);
+  padding: var(--navigation-tabs-padding);
+  background: var(--navigation-tabs-bg-color);
+  border-bottom: var(--navigation-tabs-bottom-border);
+  flex-shrink: 0;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: flex;
+  }
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+const NavigationTabsList = styled_components_1.default.ul `
+  list-style: none;
+  margin: 0 0 calc(-1 * var(--navigation-tabs-border-width));
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--navigation-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+//# sourceMappingURL=NavigationTabs.js.map

package/lib/components/NavigationTabs/variables.d.ts

@@ -0,0 +1 @@
+export declare const navigationTabs: import("styled-components").RuleSet<object>;

package/lib/components/NavigationTabs/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigationTabs = void 0;
+const styled_components_1 = require("styled-components");
+exports.navigationTabs = (0, styled_components_1.css) `
+  --navigation-tabs-height: 48px; // @presenter Spacing
+  --navigation-tabs-bg-color: transparent; // @presenter Color
+  --navigation-tabs-border-color: var(--border-color-secondary);
+  --navigation-tabs-border-width: 1px;
+  --navigation-tabs-bottom-border: var(--navigation-tabs-border-width) solid var(--navigation-tabs-border-color);
+  --navigation-tabs-padding-vertical: 0;
+  --navigation-tabs-padding-horizontal: var(--spacing-xl);
+  --navigation-tabs-padding: var(--navigation-tabs-padding-vertical) var(--navigation-tabs-padding-horizontal); // @presenter Spacing
+  --navigation-tabs-gap: var(--spacing-base); // @presenter Spacing
+
+  --navigation-tabs-item-padding-vertical: var(--spacing-xxs);
+  --navigation-tabs-item-padding-horizontal: 0;
+  --navigation-tabs-item-padding: var(--navigation-tabs-item-padding-vertical) var(--navigation-tabs-item-padding-horizontal);
+  --navigation-tabs-item-content-gap: var(--spacing-xs);
+  --navigation-tabs-item-font-size: var(--font-size-base);
+  --navigation-tabs-item-line-height: var(--line-height-base);
+  --navigation-tabs-item-font-weight: var(--font-weight-regular);
+  --navigation-tabs-item-font-weight-active: var(--font-weight-medium);
+  --navigation-tabs-item-text-color: var(--navbar-text-color); // @presenter Color
+  --navigation-tabs-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-bottom-border: var(--navigation-tabs-border-width) solid transparent;
+  --navigation-tabs-item-bottom-border-hover: var(--navigation-tabs-border-width) solid var(--border-color-primary);
+  --navigation-tabs-item-bottom-border-active: var(--navigation-tabs-border-width) solid var(--border-color-inverse);
+  --navigation-tabs-item-border-color-focused: var(--button-border-color-focused);
+  --navigation-tabs-item-border-radius: var(--navbar-item-border-radius);
+  --navigation-tabs-item-icon-size: 1.25em; // @presenter Spacing
+  --navigation-tabs-item-external-icon-margin-left: 0;
+  --navigation-tabs-item-label-font-weight-active: var(--navigation-tabs-item-font-weight-active);
+  --navigation-tabs-item-transition: 150ms ease-in-out;
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Search/SearchTrigger.js

@@ -61,13 +61,16 @@ function SearchTrigger({ onClick, className }) {
         }
     }
     mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
-    const isMac = (0, utils_1.getUserAgent)().includes('Mac');
+    // A page can be cached and served to every platform, so the server renders a hidden
+    // placeholder and the browser picks the label after hydration.
+    const [isMac, setIsMac] = React.useState(undefined);
+    React.useEffect(() => setIsMac((0, utils_1.getUserAgent)().includes('Mac')), []);
     return (React.createElement(SearchTriggerWrapper, { onClick: onClick, className: className, "data-component-name": "Search/SearchTrigger" },
         React.createElement(SearchTriggerButton, { "data-testid": "search-trigger-button", variant: "text", size: "medium", icon: React.createElement(SearchIcon_1.SearchIcon, null), "aria-label": "Search trigger button" }),
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
+            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement(SearchTriggerShortcut, { $isPending: isMac === undefined }, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);
@@ -85,6 +88,9 @@ const SearchTriggerButton = (0, styled_components_1.default)(Button_1.Button) `
     display: none;
   }
 `;
+const SearchTriggerShortcut = styled_components_1.default.span `
+  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+`;
 const SearchTriggerInput = styled_components_1.default.div `
   display: none;
   align-items: center;

package/lib/components/Sidebar/Sidebar.js

@@ -38,8 +38,8 @@ const SidebarContent = styled_components_1.default.aside `
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: calc(var(--navbar-height) + var(--banner-height));
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  top: var(--navbar-offset);
+  height: calc(100vh - var(--navbar-offset));
   overflow-x: hidden;
   ${({ $opened }) => `
     display: ${$opened ? 'flex' : 'none'}

package/lib/components/TableOfContent/TableOfContent.js

@@ -91,8 +91,8 @@ const TableOfContentHeader = styled_components_1.default.div `
 `;
 const TableOfContentItems = styled_components_1.default.div `
   position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  top: calc(var(--navbar-stack-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-stack-height) - var(--toc-offset-top));
   overflow-y: auto;
   width: var(--toc-width);
   border-left: solid 1px var(--toc-border-color);

package/lib/core/constants/common.d.ts

@@ -15,6 +15,7 @@ export declare enum FEEDBACK_TYPES {
 }
 export declare const DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 export declare enum MenuItemType {
+    Select = "select",
     Separator = "separator",
     DrillDown = "drilldown",
     Group = "group",

package/lib/core/constants/common.js

@@ -21,6 +21,7 @@ var FEEDBACK_TYPES;
 exports.DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 var MenuItemType;
 (function (MenuItemType) {
+    MenuItemType["Select"] = "select";
     MenuItemType["Separator"] = "separator";
     MenuItemType["DrillDown"] = "drilldown";
     MenuItemType["Group"] = "group";

package/lib/core/hooks/index.d.ts

@@ -58,3 +58,4 @@ export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
 export * from './use-anchor-positioning';
+export * from './use-scroll-item-into-view';

package/lib/core/hooks/index.js

@@ -74,4 +74,5 @@ __exportStar(require("./use-toast-logic"), exports);
 __exportStar(require("./use-banner-telemetry"), exports);
 __exportStar(require("./use-tooltip-fallback-placement"), exports);
 __exportStar(require("./use-anchor-positioning"), exports);
+__exportStar(require("./use-scroll-item-into-view"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/menu/use-mobile-menu-items.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenuItems = void 0;
+const react_1 = require("react");
 const react_router_1 = require("react-router");
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
@@ -10,73 +11,96 @@ const MENU_SEPARATOR = {
     type: 'separator',
     separatorLine: true,
 };
+const NO_VERSIONS = [];
+const NO_NAV_ITEMS = [];
 const useMobileMenuItems = (menuType) => {
-    var _a, _b, _c;
-    const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } = (0, use_theme_hooks_1.useThemeHooks)();
-    const { versions = [] } = usePageVersions() || {};
+    var _a, _b, _c, _d;
+    var _e, _f, _g;
+    const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems, useNavigationTabs, } = (0, use_theme_hooks_1.useThemeHooks)();
+    const versions = (_e = (_a = usePageVersions()) === null || _a === void 0 ? void 0 : _a.versions) !== null && _e !== void 0 ? _e : NO_VERSIONS;
     const { defaultLocale, currentLocale, locales } = useL10nConfig();
     const { translate } = useTranslate();
     const activeVersion = versions.find((version) => version.active);
     const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);
+    const navigationTabs = useNavigationTabs();
     const location = (0, react_router_1.useLocation)();
     const currentProduct = useCurrentProduct();
-    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const hasProductNavbarOverride = (_b = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _b === void 0 ? void 0 : _b.navbar;
     const productThemeConfig = (0, use_theme_config_1.useThemeConfig)();
     const baseThemeConfig = (0, use_theme_config_1.useThemeConfig)(false);
-    const baseNavItems = (((_b = baseThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || []);
-    const productNavItems = (hasProductNavbarOverride ? ((_c = productThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) || [] : []);
-    const menuItems = [];
-    if (menuType === common_1.MobileMenuType.PAGE) {
-        if (activeVersion) {
-            // eslint-disable-next-line no-warning-comments
-            // TODO: consider to refactor
-            const versionsSection = (0, menu_1.buildVersionSection)(translate, versions, activeVersion);
-            menuItems.push(...versionsSection);
+    const baseNavItems = ((_f = (_c = baseThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) !== null && _f !== void 0 ? _f : NO_NAV_ITEMS);
+    const productNavItems = (hasProductNavbarOverride ? ((_g = (_d = productThemeConfig.navbar) === null || _d === void 0 ? void 0 : _d.items) !== null && _g !== void 0 ? _g : NO_NAV_ITEMS) : NO_NAV_ITEMS);
+    const products = baseThemeConfig.products;
+    const items = (0, react_1.useMemo)(() => {
+        const menuItems = [];
+        const navigationTabsSelect = menuType === common_1.MobileMenuType.PAGE ? (0, menu_1.buildNavigationTabsSelect)({ navigationTabs }) : undefined;
+        if (menuType === common_1.MobileMenuType.PAGE) {
+            if (activeVersion) {
+                menuItems.push(...(0, menu_1.buildVersionSection)(translate, versions, activeVersion));
+            }
+            if (menuItems.length && sidebarItems.length) {
+                menuItems.push(MENU_SEPARATOR);
+            }
+            menuItems.push(...sidebarItems);
         }
-        if (menuItems.length && sidebarItems.length) {
-            menuItems.push(MENU_SEPARATOR);
-        }
-        menuItems.push(...sidebarItems);
-    }
-    else if (menuType === common_1.MobileMenuType.PRODUCT) {
-        menuItems.push(...productNavItems);
-        if (menuItems.length && baseNavItems.length) {
-            menuItems.push(MENU_SEPARATOR);
-        }
-        if (baseNavItems.length) {
-            menuItems.push(...baseNavItems);
+        else if (menuType === common_1.MobileMenuType.PRODUCT) {
+            menuItems.push(...productNavItems);
+            if (menuItems.length && baseNavItems.length) {
+                menuItems.push(MENU_SEPARATOR);
+            }
+            if (baseNavItems.length) {
+                menuItems.push(...baseNavItems);
+            }
         }
-    }
-    else if (menuType === common_1.MobileMenuType.MAIN_MENU) {
-        const productMenuItems = Object.values(baseThemeConfig.products || {}).map((product) => ({
-            label: product.name,
-            link: product.link,
-            icon: product.icon,
-            type: 'link',
-        }));
-        if (productMenuItems.length) {
-            menuItems.push({
-                type: 'separator',
-                label: translate('mobileMenu.products', 'Products'),
-            });
-            menuItems.push(...productMenuItems);
+        else if (menuType === common_1.MobileMenuType.MAIN_MENU) {
+            const productMenuItems = Object.values(products || {}).map((product) => ({
+                label: product.name,
+                link: product.link,
+                icon: product.icon,
+                type: 'link',
+            }));
+            if (productMenuItems.length) {
+                menuItems.push({
+                    type: 'separator',
+                    label: translate('mobileMenu.products', 'Products'),
+                });
+                menuItems.push(...productMenuItems);
+            }
+            if (menuItems.length && baseNavItems.length) {
+                menuItems.push(MENU_SEPARATOR);
+            }
+            if (baseNavItems.length) {
+                menuItems.push(...baseNavItems);
+            }
         }
-        if (menuItems.length && baseNavItems.length) {
+        const languagesMenu = (0, menu_1.buildLanguagesGroup)(locales, defaultLocale, currentLocale);
+        if (menuItems.length && languagesMenu) {
             menuItems.push(MENU_SEPARATOR);
         }
-        if (baseNavItems.length) {
-            menuItems.push(...baseNavItems);
+        if (languagesMenu) {
+            menuItems.push(languagesMenu);
         }
-    }
-    const languagesMenu = (0, menu_1.buildLanguagesGroup)(locales, defaultLocale, currentLocale);
-    if (menuItems.length && languagesMenu) {
-        menuItems.push(MENU_SEPARATOR);
-    }
-    if (languagesMenu) {
-        menuItems.push(languagesMenu);
-    }
+        return [
+            ...(navigationTabsSelect ? [navigationTabsSelect] : []),
+            ...(0, menu_1.mapNavbarItems)(menuItems, defaultLocale, currentLocale, locales, location),
+        ];
+    }, [
+        menuType,
+        navigationTabs,
+        activeVersion,
+        versions,
+        sidebarItems,
+        productNavItems,
+        baseNavItems,
+        products,
+        translate,
+        locales,
+        defaultLocale,
+        currentLocale,
+        location,
+    ]);
     return {
-        items: (0, menu_1.mapNavbarItems)(menuItems, defaultLocale, currentLocale, locales, location),
+        items,
         popDrilldownState,
         pushDrilldownState,
         backLink,

package/lib/core/hooks/menu/use-mobile-menu-levels.js

@@ -7,31 +7,36 @@ const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const common_1 = require("../../constants/common");
 const useMobileMenuLevels = () => {
-    var _a, _b;
-    const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems } = (0, use_theme_hooks_1.useThemeHooks)();
+    var _a, _b, _c;
+    const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems, useNavigationTabs } = (0, use_theme_hooks_1.useThemeHooks)();
     const { versions = [] } = usePageVersions() || {};
     const activeVersion = versions.find((version) => version === null || version === void 0 ? void 0 : version.active);
     const { currentItems: sidebarItems } = useSidebarItems(activeVersion);
+    const navigationTabs = useNavigationTabs();
     const { translate } = useTranslate();
     const currentProduct = useCurrentProduct();
     const productThemeConfig = (0, use_theme_config_1.useThemeConfig)();
+    const baseThemeConfig = (0, use_theme_config_1.useThemeConfig)(false);
     const location = (0, react_router_1.useLocation)();
     const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
     const productNavItems = (hasProductNavbarOverride ? ((_b = productThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || [] : []);
+    const hasMainMenuItems = Object.values(baseThemeConfig.products || {}).length > 0 ||
+        (((_c = baseThemeConfig.navbar) === null || _c === void 0 ? void 0 : _c.items) || []).length > 0;
     const menuLevels = (0, react_1.useMemo)(() => {
-        const menuLevels = [
-            {
+        const menuLevels = [];
+        if (hasMainMenuItems) {
+            menuLevels.push({
                 label: translate('mobileMenu.mainMenu', 'Main menu'),
                 type: common_1.MobileMenuType.MAIN_MENU,
-            },
-        ];
+            });
+        }
         if (currentProduct && productNavItems.length) {
             menuLevels.push({
                 label: currentProduct.name,
                 type: common_1.MobileMenuType.PRODUCT,
             });
         }
-        if (sidebarItems.length || activeVersion) {
+        if (sidebarItems.length || activeVersion || (navigationTabs === null || navigationTabs === void 0 ? void 0 : navigationTabs.tabs.length)) {
             menuLevels.push({
                 label: translate('mobileMenu.previous', 'Previous'),
                 type: common_1.MobileMenuType.PAGE,

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-theme-hooks.js

@@ -37,6 +37,8 @@ const fallbacks = {
     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/global.js

@@ -51,6 +51,8 @@ const variables_46 = require("../../components/PageActions/variables");
 const variables_47 = require("../../components/SvgViewer/variables");
 const variables_48 = require("../../components/Toast/variables");
 const variables_49 = require("../../components/PageNavigation/variables");
+const variables_50 = 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) `
@@ -1112,8 +1114,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);
@@ -1350,6 +1352,7 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_26.productPicker}
     ${variables_12.responsePanelColors}
     ${variables_23.search}
+    ${variables_50.navigationTabs}
     ${variables_14.select}
     ${variables_4.sidebar}
     ${sizeAndSpace}
@@ -1390,6 +1393,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;
   }

package/lib/core/types/hooks.d.ts

@@ -8,6 +8,7 @@ import type { CatalogConfig, ProductUiConfig } from '../../config';
 import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults, BffCatalogEntity, BffCatalogEntityList, BffCatalogRelatedEntity, BffCatalogRelatedEntityList, BffCatalogEntityRevision, BffCatalogEntityRevisionList } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState, DrilldownMenuItemDetails } from './sidebar';
+import type { NavigationTabsState } from './navigation-tabs';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ContentSegment, ToolCall } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
@@ -85,6 +86,9 @@ export type ThemeHooks = {
         askAi?: boolean;
         retrySearch: () => Promise<void>;
     };
+    useSearchFeatures: () => {
+        askAi?: boolean;
+    };
     useAiSearch: (options?: {
         filter?: SearchFilterItem[];
         product?: string;
@@ -128,6 +132,7 @@ export type ThemeHooks = {
             label?: string;
         };
     };
+    useNavigationTabs: () => NavigationTabsState | undefined;
     useSidebarSiblingsData: () => {
         prevPage?: ResolvedNavItemWithLink;
         nextPage?: ResolvedNavItemWithLink;

package/lib/core/types/index.d.ts

@@ -7,6 +7,7 @@ export type * from './feedback';
 export type * from './hooks';
 export type * from './markdown';
 export type * from './navbar';
+export type * from './navigation-tabs';
 export * from './search';
 export type * from './select';
 export type * from './sidebar';