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

package/lib/components/LoadProgressBar/LoadProgressBar.js

@@ -0,0 +1,122 @@
+"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.LoadProgressBar = LoadProgressBar;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const START = 0.08;
+const MAX_PENDING = 0.994;
+const TRICKLE_MS = 100;
+const SETTLE_MS = 200;
+// [below, step]: large steps at first, smaller ones near the end.
+const TRICKLE_STEPS = [
+    [0.2, 0.1],
+    [0.5, 0.04],
+    [0.8, 0.02],
+    [0.99, 0.005],
+];
+function trickle(progress) {
+    var _a;
+    var _b;
+    const step = (_b = (_a = TRICKLE_STEPS.find(([below]) => progress < below)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 0;
+    return Math.min(progress + step, MAX_PENDING);
+}
+/** A top-of-page bar while a page load is pending. */
+function LoadProgressBar({ pending = false, className, }) {
+    const loading = (0, react_1.useSyncExternalStore)(utils_1.subscribeToLoadProgress, utils_1.isLoadInProgress, () => false);
+    const active = pending || loading;
+    const [progress, setProgress] = (0, react_1.useState)(null);
+    const [fading, setFading] = (0, react_1.useState)(false);
+    const shown = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (active) {
+            shown.current = true;
+            setFading(false);
+            setProgress((current) => (current === null || current === 1 ? START : current));
+            const timer = setInterval(() => setProgress((current) => trickle(current !== null && current !== void 0 ? current : START)), TRICKLE_MS);
+            return () => clearInterval(timer);
+        }
+        if (!shown.current)
+            return undefined;
+        setProgress(1);
+        const fade = setTimeout(() => setFading(true), SETTLE_MS);
+        const hide = setTimeout(() => {
+            shown.current = false;
+            setProgress(null);
+            setFading(false);
+        }, SETTLE_MS * 2);
+        return () => {
+            clearTimeout(fade);
+            clearTimeout(hide);
+        };
+    }, [active]);
+    if (progress === null)
+        return null;
+    // The id and class names come from the replaced nprogress library: custom styles target them.
+    return (react_1.default.createElement(LoadProgressBarWrapper, { id: "nprogress", "data-component-name": "LoadProgressBar/LoadProgressBar", className: className, "aria-hidden": "true", $fading: fading },
+        react_1.default.createElement(Bar, { className: "bar", $progress: progress },
+            react_1.default.createElement(Peg, { className: "peg" }))));
+}
+const LoadProgressBarWrapper = styled_components_1.default.div `
+  pointer-events: none;
+  opacity: ${({ $fading }) => ($fading ? 0 : 1)};
+  transition: opacity ${SETTLE_MS}ms linear;
+`;
+// The offset changes on each tick: as a styled rule, each value would add a class.
+const Bar = styled_components_1.default.div.attrs(({ $progress }) => ({
+    style: { transform: `translate3d(${($progress - 1) * 100}%, 0, 0)` },
+})) `
+  position: fixed;
+  z-index: var(--z-index-popover);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--load-progress-bar-height);
+  background: var(--load-progress-bar-color);
+  transition: transform ${SETTLE_MS}ms ease;
+`;
+const Peg = styled_components_1.default.div `
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: var(--load-progress-bar-shadow);
+  transform: rotate(3deg) translate(0, -4px);
+`;
+//# sourceMappingURL=LoadProgressBar.js.map

package/lib/components/MCP/McpConnectionTabs.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
+const Button_1 = require("../../components/Button/Button");
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
@@ -111,9 +112,11 @@ function renderTabContent(option, connection, translate, snippetHeader) {
                         react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateClaudeCodeCommand)(connection), header: snippetHeader(option, 'claude-code'), wrapContents: true }))),
                 },
                 {
-                    headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude Desktop'),
+                    headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude app'),
                     content: (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'Open Customize → Connectors → Add custom connector and paste this server URL:')),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.accountHint', 'Claude adds the connector to your account and syncs it between Claude on the web and Claude Desktop.')),
+                        react_1.default.createElement(ConnectButton, { variant: "secondary", icon: react_1.default.createElement(ClaudeIcon_1.ClaudeIcon, null), onClick: () => window.open((0, utils_1.generateMCPDeepLink)('claude', connection), '_blank') }, translate('page.actions.connectMcp.claude', 'Connect to Claude')),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'Or open Customize → Connectors → Add custom connector and paste this server URL:')),
                         react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: snippetHeader(option, 'claude-desktop') }))),
                 },
             ]);
@@ -154,6 +157,10 @@ const McpConnectionTabsWrapper = styled_components_1.default.div `
     padding-right: var(--page-mcp-405-snippets-code-padding-right);
   }
 `;
+const ConnectButton = (0, styled_components_1.default)(Button_1.Button) `
+  align-self: flex-start;
+  margin-bottom: var(--spacing-sm);
+`;
 const TabHint = styled_components_1.default.p `
   margin: 0 0 var(--spacing-xs);
   color: var(--page-mcp-405-snippets-hint-text-color);

package/lib/components/Markdown/Markdown.js

@@ -82,7 +82,7 @@ exports.Markdown = styled_components_1.default.main
   ${links_1.markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
   }
 
   img,
@@ -95,7 +95,7 @@ exports.Markdown = styled_components_1.default.main
     font-family: var(--heading-font-family);
     position: relative;
 
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
     ${(0, heading_anchor_1.headingAnchorCss)(constants_1.ANCHOR_CLASS)};
 
     h1,
@@ -306,6 +306,7 @@ exports.Markdown = styled_components_1.default.main
       font-size: inherit;
       font-family: inherit;
       border: none;
+      padding: 0;
     }
   }
 

package/lib/components/Markdown/styles/base-table.js

@@ -23,7 +23,7 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
       color: var(--md-table-cell-text-color);
       font-size: var(--md-table-font-size);
       line-height: var(--md-table-line-height);
-      vertical-align: top;
+      vertical-align: var(--md-table-cell-vertical-align);
     }
 
     thead td,
@@ -72,6 +72,19 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
     th[align='right'] {
       text-align: right;
     }
+
+    th[valign='top'],
+    td[valign='top'] {
+      vertical-align: top;
+    }
+    th[valign='middle'],
+    td[valign='middle'] {
+      vertical-align: middle;
+    }
+    th[valign='bottom'],
+    td[valign='bottom'] {
+      vertical-align: bottom;
+    }
   }
 `;
 //# sourceMappingURL=base-table.js.map

package/lib/components/Markdown/variables.js

@@ -53,6 +53,7 @@ exports.markdown = (0, styled_components_1.css) `
   --md-table-cell-text-color: var(--text-color-secondary); // @presenter Color
   --md-table-cell-padding: var(--spacing-xs) var(--spacing-sm); // @presenter Spacing
   --md-table-footer-cell-padding: var(--spacing-xxs) var(--spacing-sm); // @presenter Spacing
+  --md-table-cell-vertical-align: top;
 
   --md-table-head-bg-color: var(--md-table-bg-color); // @presenter Color
   --md-table-head-text-color: var(--text-color-primary); // @presenter Color

package/lib/components/Menu/Menu.js

@@ -7,12 +7,16 @@ exports.Menu = Menu;
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importDefault(require("react"));
 const MenuItem_1 = require("../../components/Menu/MenuItem");
+const MenuSelect_1 = require("../../components/Menu/MenuSelect");
 const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 function Menu({ depth = 0, items, className, isMobile, onDrilldownOpen, }) {
     const activeItem = items.find(({ active }) => active);
     return (react_1.default.createElement(MenuWrapper, { className: className, "data-component-name": "Menu/Menu" }, items.map((item, index) => {
         var _a;
+        if ((0, utils_1.getMenuItemType)(item) === constants_1.MenuItemType.Select) {
+            return react_1.default.createElement(MenuSelect_1.MenuSelect, { item: item, key: `${item.label}-${index}` });
+        }
         return (react_1.default.createElement(MenuItem_1.MenuItem, { item: item, key: `${item.link || item.label}-${index}`, activeItem: activeItem, isMobile: isMobile, depth: depth, onClick: () => {
                 if ((0, utils_1.getMenuItemType)(item) === constants_1.MenuItemType.DrillDown) {
                     onDrilldownOpen === null || onDrilldownOpen === void 0 ? void 0 : onDrilldownOpen({ previousLink: activeItem === null || activeItem === void 0 ? void 0 : activeItem.link, item });

package/lib/components/Menu/MenuSelect.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { ItemState } from '../../core/types';
+export type MenuSelectProps = {
+    item: ItemState;
+    className?: string;
+};
+export declare function MenuSelect({ item, className }: MenuSelectProps): JSX.Element;

package/lib/components/Menu/MenuSelect.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSelect = MenuSelect;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
+function MenuSelect({ item, className }) {
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    return (react_1.default.createElement(MenuSelectWrapper, { "data-component-name": "Menu/MenuSelect", className: className, role: "listitem" },
+        react_1.default.createElement(MenuSelectDropdown, { alignment: "start", trigger: react_1.default.createElement(MenuSelectTrigger, { type: "button" },
+                react_1.default.createElement(MenuSelectLabel, null, translate(item.labelTranslationKey, item.label)),
+                react_1.default.createElement(MenuSelectChevron, { size: "var(--menu-select-icon-size)", color: "--menu-select-icon-color" })) },
+            react_1.default.createElement(MenuSelectMenu, null, item.items.map((option, index) => {
+                const key = `${option.link || option.label}-${index}`;
+                const checkmark = option.active ? (react_1.default.createElement(MenuSelectCheckmark, { size: "var(--menu-select-option-checkmark-size)" })) : null;
+                const content = (react_1.default.createElement(MenuSelectOptionContent, { $active: option.active },
+                    option.icon || option.srcSet ? (react_1.default.createElement(MenuSelectOptionIcon, { icon: option.icon, srcSet: option.srcSet })) : null,
+                    translate(option.labelTranslationKey, option.label),
+                    option.external ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-select-option-external-icon-size)" })) : null));
+                if (!option.link) {
+                    return (react_1.default.createElement(MenuSelectOption, { key: key, active: option.active, prefix: checkmark, dataAttributes: { 'aria-disabled': 'true' } }, content));
+                }
+                return (react_1.default.createElement(MenuSelectOption, { key: key, to: option.link, external: option.external, target: option.target === '_blank' ? '_blank' : undefined, active: option.active, "aria-current": option.active ? 'page' : undefined, prefix: checkmark, onAction: () => telemetry.sendSidebarItemClickedMessage([
+                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('sidebarItem', 'sidebar')), { label: option.label, type: 'link' }),
+                    ]) }, content));
+            })))));
+}
+const MenuSelectWrapper = styled_components_1.default.div `
+  margin: var(--menu-select-margin);
+`;
+const MenuSelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  --dropdown-menu-padding-top: var(--menu-select-menu-offset);
+  --dropdown-menu-padding: var(--menu-select-menu-padding);
+  --dropdown-menu-border-radius: var(--menu-select-menu-border-radius);
+  --dropdown-menu-item-gap: var(--menu-select-option-gap);
+  --dropdown-menu-item-border-radius: var(--menu-select-option-border-radius);
+  --dropdown-menu-item-bg-color-active: var(--menu-select-option-bg-color-active);
+  --dropdown-menu-item-color-active: var(--menu-select-option-text-color-active);
+
+  width: 100%;
+
+  > * {
+    min-width: 100%;
+  }
+`;
+const MenuSelectChevron = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  transition: var(--menu-select-transition);
+`;
+const MenuSelectTrigger = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  gap: var(--menu-select-gap);
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--menu-select-height);
+  padding: 0 var(--menu-select-padding-horizontal);
+  border: var(--menu-select-border);
+  border-radius: var(--menu-select-border-radius);
+  background-color: var(--menu-select-bg-color);
+  color: var(--menu-select-text-color);
+  font-family: inherit;
+  font-size: var(--menu-select-font-size);
+  line-height: var(--menu-select-line-height);
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 1px solid var(--menu-select-border-color-focused);
+  }
+
+  &[aria-expanded='true'] ${MenuSelectChevron} {
+    transform: rotate(180deg);
+  }
+`;
+const MenuSelectLabel = styled_components_1.default.span `
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const MenuSelectMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+`;
+const MenuSelectOption = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem) `
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--menu-select-option-padding);
+
+  &[aria-disabled='true'] {
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+const MenuSelectCheckmark = (0, styled_components_1.default)(CheckmarkIcon_1.CheckmarkIcon) `
+  position: absolute;
+  top: 50%;
+  left: var(--menu-select-option-checkmark-offset);
+  transform: translateY(-50%);
+`;
+const MenuSelectOptionContent = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--menu-select-option-content-gap);
+  font-weight: ${({ $active }) => $active
+    ? 'var(--menu-select-option-font-weight-active)'
+    : 'var(--menu-select-option-font-weight)'};
+`;
+const MenuSelectOptionIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--menu-select-option-icon-size);
+  --icon-height: var(--menu-select-option-icon-size);
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=MenuSelect.js.map

package/lib/components/Menu/variables.js

@@ -104,6 +104,45 @@ exports.menu = (0, styled_components_1.css) `
   --menu-back-button-gap: var(--spacing-xs);
   --menu-back-button-icon: none;
 
+  /**
+   * @tokens Menu select
+   */
+  --menu-select-margin-top: 0;
+  --menu-select-margin-bottom: var(--spacing-xs);
+  --menu-select-margin-horizontal: var(--menu-item-label-margin-horizontal);
+  --menu-select-margin: var(--menu-select-margin-top) var(--menu-select-margin-horizontal) var(--menu-select-margin-bottom); // @presenter Spacing
+  --menu-select-height: 32px; // @presenter Spacing
+  --menu-select-padding-horizontal: calc(var(--spacing-sm) - var(--border-width)); // @presenter Spacing
+  --menu-select-gap: var(--spacing-xxs); // @presenter Spacing
+  --menu-select-font-size: var(--font-size-base); // @presenter FontSize
+  --menu-select-line-height: var(--line-height-base); // @presenter LineHeight
+  --menu-select-text-color: var(--input-content-color-active); // @presenter Color
+  --menu-select-bg-color: var(--input-bg-color); // @presenter Color
+  --menu-select-border: var(--input-border); // @presenter Border
+  --menu-select-border-color-focused: var(--input-border-color-focused); // @presenter Color
+  --menu-select-border-radius: var(--input-border-radius); // @presenter BorderRadius
+  --menu-select-icon-size: 16px;
+  --menu-select-icon-color: var(--icon-color-secondary); // @presenter Color
+  --menu-select-transition: transform 150ms ease-in-out;
+  --menu-select-menu-offset: var(--spacing-xs); // @presenter Spacing
+  --menu-select-menu-padding: calc(var(--dropdown-menu-padding) - var(--border-width)); // @presenter Spacing
+  --menu-select-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --menu-select-option-gap: calc(var(--spacing-unit) / 2); // @presenter Spacing
+  --menu-select-option-content-gap: var(--spacing-xs); // @presenter Spacing
+  --menu-select-option-padding-vertical: var(--dropdown-menu-item-padding-vertical);
+  --menu-select-option-padding-left: var(--spacing-md);
+  --menu-select-option-padding-right: var(--spacing-sm);
+  --menu-select-option-padding: var(--menu-select-option-padding-vertical) var(--menu-select-option-padding-right) var(--menu-select-option-padding-vertical) var(--menu-select-option-padding-left); // @presenter Spacing
+  --menu-select-option-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --menu-select-option-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --menu-select-option-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
+  --menu-select-option-text-color-active: var(--text-color-primary); // @presenter Color
+  --menu-select-option-bg-color-active: transparent; // @presenter Color
+  --menu-select-option-icon-size: var(--menu-item-icon-size);
+  --menu-select-option-external-icon-size: var(--menu-item-external-icon-size);
+  --menu-select-option-checkmark-size: 14px;
+  --menu-select-option-checkmark-offset: calc((var(--menu-select-option-padding-left) - var(--menu-select-option-checkmark-size)) / 2);
+
   /**
    * @tokens Menu items
    */
@@ -134,18 +173,18 @@ exports.mobileMenu = (0, styled_components_1.css) `
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-offset));
+  --menu-mobile-height: calc(100dvh - var(--navbar-offset));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
+  --menu-mobile-top: var(--navbar-offset);
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);
   --menu-mobile-line-height: var(--line-height-base); // @presenter LineHeight
   --menu-mobile-padding-top: var(--spacing-sm); // @presenter Spacing
-  --menu-mobile-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --menu-mobile-margin-horizontal: 0; // @presenter Spacing
   --menu-mobile-items-margin-top: var(--spacing-xxs); // @presenter Spacing
 
   --menu-mobile-profile-bg-color: var(--bg-color); // @presenter Color

package/lib/components/Navbar/Navbar.js

@@ -1,15 +1,49 @@
 "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.Navbar = Navbar;
-const react_1 = __importDefault(require("react"));
+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 NavbarLogo_1 = require("../../components/Navbar/NavbarLogo");
 const NavbarMenu_1 = require("../../components/Navbar/NavbarMenu");
+const NavigationTabs_1 = require("../../components/NavigationTabs/NavigationTabs");
 const MenuMobile_1 = require("../../components/Menu/MenuMobile");
 const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorModeSwitcher");
 const Search_1 = require("../../components/Search/Search");
@@ -24,9 +58,12 @@ function Navbar({ className }) {
     var _a;
     const { isOpen, closeMobileMenu, openMobileMenu } = (0, hooks_1.useMobileMenu)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useL10n, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useL10n, useTelemetry, useTranslate, useNavigationTabs } = (0, hooks_1.useThemeHooks)();
     const { changeLanguage } = useL10n();
+    const { translate } = useTranslate();
     const telemetry = useTelemetry();
+    const navigationTabs = useNavigationTabs();
+    const navigationTabsConfig = (0, react_1.useMemo)(() => (0, utils_1.toNavigationTabsConfig)({ state: navigationTabs }), [navigationTabs]);
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     const { search: searchSettings, navbar, userMenu: userMenuSettings, logo } = themeConfig;
     if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
@@ -34,7 +71,7 @@ function Navbar({ className }) {
     }
     const hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
     const hideUserMenu = userMenuSettings === null || userMenuSettings === void 0 ? void 0 : userMenuSettings.hide;
-    return (react_1.default.createElement(NavbarWrapper, { "data-component-name": "Navbar/Navbar", className: className },
+    return (react_1.default.createElement(NavbarWrapper, { "data-component-name": "Navbar/Navbar", className: className, "aria-label": translate('navbar.label', 'Main navigation') },
         react_1.default.createElement(Banner_1.Banner, null),
         isOpen && react_1.default.createElement(MenuMobile_1.MenuMobile, { hideUserProfile: !!hideUserMenu }),
         react_1.default.createElement(NavbarRow, null,
@@ -57,11 +94,12 @@ function Navbar({ className }) {
                             (0, utils_1.getBaseDataAttributes)('mobileMenuOpen', 'button'),
                         ]);
                     }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null), "aria-label": isOpen ? 'Close menu button' : 'Open menu button' }),
-            hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null))));
+            hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null)),
+        navigationTabsConfig && react_1.default.createElement(NavigationTabs_1.NavigationTabs, { config: navigationTabsConfig })));
 }
 const NavbarWrapper = styled_components_1.default.nav `
   --text-color: var(--navbar-text-color);
-  height: calc(var(--navbar-height) + var(--banner-height));
+  height: var(--navbar-offset, calc(var(--navbar-height) + var(--banner-height)));
   transition: height 0.4s ease-out;
 
   position: sticky;
@@ -101,6 +139,7 @@ const NavbarRow = styled_components_1.default.div `
   box-sizing: border-box;
   margin-top: var(--banner-height);
   transition: margin-top 0.5s ease-out;
+  border-bottom-color: var(--navbar-row-bottom-border-color, var(--navbar-border-color));
 
   @media screen and (min-width: ${utils_1.breakpoints.max}) {
     max-width: var(--container-max-width);

package/lib/components/Navbar/variables.js

@@ -6,9 +6,12 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-bg-color: var(--bg-color); // @presenter Color
   --navbar-border-color: var(--border-color-secondary);
   --navbar-border: 1px solid var(--navbar-border-color);
+  --navbar-row-bottom-border-color: var(--navbar-border-color);
 
   --navbar-text-color: var(--text-color-secondary); // @presenter Color
   --navbar-height: 64px; // @presenter Spacing
+  --navbar-stack-height: var(--navbar-height);
+  --navbar-offset: calc(var(--navbar-stack-height) + var(--banner-height));
   --navbar-font-size: var(--font-size-base);
   --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
   --navbar-font-family: var(--font-family-base);

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { NavigationTabRowItem } from '../../core/types';
+export type NavigationTabProps = {
+    tab: NavigationTabRowItem;
+    className?: string;
+};
+export declare function NavigationTab({ tab, className }: NavigationTabProps): JSX.Element | null;