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

package/lib/components/JsonViewer/JsonViewer.js

@@ -42,21 +42,18 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const Helpers_1 = require("../../components/JsonViewer/Helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, maxStringLength, }) {
-    const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
-    const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
-    const expandAll = () => {
-        setExpandAllSignal(true);
-        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(true);
-        setTimeout(() => {
-            setExpandAllSignal(undefined);
-        });
+    const defaultExpandLevel = Math.max(1, expandLevel);
+    const foldables = react_1.default.useMemo(() => (0, Helpers_1.collectFoldables)(data), [data]);
+    const [expandedPaths, setExpandedPaths] = react_1.default.useState({});
+    const fold = {
+        isExpanded: (path, level) => { var _a; return (_a = expandedPaths[path]) !== null && _a !== void 0 ? _a : level < defaultExpandLevel; },
+        setExpanded: (path, expanded) => setExpandedPaths((prev) => (Object.assign(Object.assign({}, prev), { [path]: expanded }))),
     };
-    const collapseAll = () => {
-        setExpandAllSignal(false);
-        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(false);
-        setTimeout(() => {
-            setExpandAllSignal(undefined);
-        });
+    const hasFoldables = foldables.length > 0;
+    const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
+    const toggleAll = () => {
+        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(!allExpanded);
+        setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
     };
     const source = JSON.stringify(data, null, 2);
     const hasHeader = title || controls;
@@ -65,13 +62,13 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
                 ? {
                     title,
                     className: 'code-block-header',
-                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: showFoldingButtons
-                            ? Object.assign(Object.assign({}, controls.expand), { onClick: expandAll }) : undefined, collapse: showFoldingButtons
-                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: collapseAll }) : undefined }),
+                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: hasFoldables && !allExpanded
+                            ? Object.assign(Object.assign({}, controls.expand), { onClick: toggleAll }) : undefined, collapse: hasFoldables && allExpanded
+                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: toggleAll }) : undefined }),
                 }
                 : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
-                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel), maxStringLength: maxStringLength })))));
+                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, path: "", standalone: true, fold: fold, maxStringLength: maxStringLength })))));
 }
 exports.JsonViewer = (0, react_1.memo)(JsonComponent);
 const FoldingWrap = styled_components_1.default.div `

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;

package/lib/components/NavigationTabs/NavigationTab.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTab = NavigationTab;
+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 Link_1 = require("../../components/Link/Link");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const NavigationTabMenu_1 = require("../../components/NavigationTabs/NavigationTabMenu");
+const NavigationTabContent_1 = require("../../components/NavigationTabs/NavigationTabContent");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function NavigationTab({ tab, className }) {
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const active = !!tab.active;
+    const menuItems = tab.type === 'group' ? tab.items : [];
+    const isGroup = tab.type === 'group' && menuItems.length > 0;
+    const linkItem = tab.type === 'link' ? tab : undefined;
+    if (!(linkItem === null || linkItem === void 0 ? void 0 : linkItem.link) && !isGroup) {
+        return null;
+    }
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(NavigationTabContent_1.NavigationTabContent, { item: tab }),
+        isGroup ? react_1.default.createElement(NavigationTabChevron, { size: "10px" }) : null));
+    if (isGroup) {
+        return (react_1.default.createElement(NavigationTabWrapper, { "data-component-name": "NavigationTabs/NavigationTab", className: className },
+            react_1.default.createElement(NavigationTabDropdown, { triggerEvent: "hover", portalled: true, trigger: react_1.default.createElement(NavigationTabTrigger, { $active: active, "aria-current": active ? 'true' : undefined, onClick: () => telemetry.sendNavbarMenuItemClickedMessage((0, utils_1.getNavbarItemClickedPayload)(tab.type)) }, content) },
+                react_1.default.createElement(NavigationTabMenu_1.NavigationTabMenu, { items: menuItems }))));
+    }
+    return (react_1.default.createElement(NavigationTabWrapper, { "data-component-name": "NavigationTabs/NavigationTab", className: className },
+        react_1.default.createElement(NavigationTabLink, { as: Link_1.Link, to: linkItem === null || linkItem === void 0 ? void 0 : linkItem.link, $active: active, external: linkItem === null || linkItem === void 0 ? void 0 : linkItem.external, target: linkItem === null || linkItem === void 0 ? void 0 : linkItem.target, "aria-current": active ? 'page' : undefined, onClick: () => telemetry.sendNavbarMenuItemClickedMessage((0, utils_1.getNavbarItemClickedPayload)(tab.type)) }, content)));
+}
+const NavigationTabChevron = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  flex-shrink: 0;
+`;
+const NavigationTabWrapper = styled_components_1.default.li `
+  list-style: none;
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+`;
+const NavigationTabDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+`;
+const NavigationTabLink = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+  box-sizing: border-box;
+  height: 100%;
+  padding: var(--navigation-tabs-item-padding);
+  font-size: var(--navigation-tabs-item-font-size);
+  line-height: var(--navigation-tabs-item-line-height);
+  white-space: nowrap;
+  text-decoration: none;
+  transition: border-color var(--navigation-tabs-item-transition);
+
+  font-weight: ${({ $active }) => $active
+    ? 'var(--navigation-tabs-item-font-weight-active)'
+    : 'var(--navigation-tabs-item-font-weight)'};
+  color: ${({ $active }) => $active
+    ? 'var(--navigation-tabs-item-text-color-active)'
+    : 'var(--navigation-tabs-item-text-color)'};
+  border-bottom: ${({ $active }) => $active
+    ? 'var(--navigation-tabs-item-bottom-border-active)'
+    : 'var(--navigation-tabs-item-bottom-border)'};
+
+  &:hover {
+    color: var(--navigation-tabs-item-text-color-hover);
+    border-bottom: ${({ $active }) => !$active && 'var(--navigation-tabs-item-bottom-border-hover)'};
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--navigation-tabs-item-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--navigation-tabs-item-border-radius);
+  }
+`;
+const NavigationTabTrigger = (0, styled_components_1.default)(NavigationTabLink).attrs({ as: 'button', type: 'button' }) `
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: inherit;
+  cursor: pointer;
+`;
+//# sourceMappingURL=NavigationTab.js.map

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

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

package/lib/components/NavigationTabs/NavigationTabContent.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabContent = NavigationTabContent;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
+function NavigationTabContent({ item, className }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const label = translate(item.labelTranslationKey, item.label);
+    return (react_1.default.createElement(NavigationTabContentWrapper, { "data-component-name": "NavigationTabs/NavigationTabContent", className: className },
+        (item.icon || item.srcSet) && react_1.default.createElement(NavigationTabIcon, { icon: item.icon, srcSet: item.srcSet }),
+        react_1.default.createElement(NavigationTabLabel, { "data-label": label, "data-translation-key": item.labelTranslationKey }, label),
+        'external' in item && item.external ? react_1.default.createElement(NavigationTabExternalIcon, { size: "10px" }) : null));
+}
+const NavigationTabContentWrapper = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+`;
+const NavigationTabIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--navigation-tabs-item-icon-size);
+  --icon-height: var(--navigation-tabs-item-icon-size);
+  flex-shrink: 0;
+`;
+const NavigationTabLabel = styled_components_1.default.span `
+  display: inline-flex;
+  flex-direction: column;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &::after {
+    content: attr(data-label);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    font-weight: var(--navigation-tabs-item-label-font-weight-active);
+  }
+`;
+const NavigationTabExternalIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
+  margin-left: var(--navigation-tabs-item-external-icon-margin-left);
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=NavigationTabContent.js.map

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { NavigationTabItem } from '../../core/types';
+export type NavigationTabMenuProps = {
+    items: NavigationTabItem[];
+    className?: string;
+};
+export declare function NavigationTabMenu({ items, className }: NavigationTabMenuProps): JSX.Element;

package/lib/components/NavigationTabs/NavigationTabMenu.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabMenu = NavigationTabMenu;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const NavigationTabContent_1 = require("../../components/NavigationTabs/NavigationTabContent");
+function NavigationTabMenu({ items, className }) {
+    return (react_1.default.createElement(NavigationTabMenuWrapper, { "data-component-name": "NavigationTabs/NavigationTabMenu", className: className },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item, index) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, external: item.external, "data-translation-key": item.labelTranslationKey, active: item.active, "aria-current": item.active ? 'page' : undefined },
+            react_1.default.createElement(NavigationTabContent_1.NavigationTabContent, { item: item })))))));
+}
+const NavigationTabMenuWrapper = styled_components_1.default.div ``;
+//# sourceMappingURL=NavigationTabMenu.js.map