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

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

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

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

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/Segmented/Segmented.js

@@ -32,15 +32,35 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typed_memo_1 = require("../../core/hoc/typed-memo");
+const hooks_1 = require("../../core/hooks");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist", $size: size }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-        opt.divider,
-        react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), $isActive: value == opt.value, $size: size }, opt.element || opt.label))))));
+    const { tabListProps, getTabProps } = (0, hooks_1.useTabList)({
+        count: options.length,
+        activeIndex: options.findIndex((opt) => value == opt.value),
+        onChange: (index) => onChange(options[index]),
+    });
+    return (react_1.default.createElement(SegmentedGroup, Object.assign({ ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}` }, tabListProps, { $size: size }), options.map((opt, index) => {
+        const _a = getTabProps(index), { 'aria-controls': _noPanel } = _a, tabProps = __rest(_a, ['aria-controls']);
+        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            opt.divider,
+            react_1.default.createElement(SegmentedItem, Object.assign({ key: opt.label }, tabProps, { title: opt.label, $isActive: value == opt.value, $size: size }), opt.element || opt.label)));
+    })));
 }
 exports.Segmented = (0, typed_memo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `

package/lib/components/Select/Select.js

@@ -68,6 +68,7 @@ function Select(props) {
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
     const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
     const inputId = (0, react_1.useId)();
+    const listboxId = `${inputId}-listbox`;
     (0, hooks_1.useOutsideClick)(selectRef, () => {
         setDropdownActive(false);
     });
@@ -169,14 +170,20 @@ function Select(props) {
         return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
     };
     const renderDefaultInput = (inputRef) => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: listboxId, expanded: dropdownActive, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
     };
     return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, onKeyDown: (e) => {
             if (e.key === 'Enter' && document.activeElement === selectRef.current) {
                 e.preventDefault();
                 setDropdownActive(!dropdownActive);
             }
-        }, tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": dropdownActive, "aria-label": "Select option", onFocus: (e) => {
+        }, tabIndex: searchable ? undefined : 0 }, (!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+    }), { onFocus: (e) => {
             var _a;
             if (e.target === selectRef.current) {
                 (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -185,7 +192,7 @@ function Select(props) {
             e.preventDefault();
         } }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { id: listboxId, role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&

package/lib/components/Select/SelectInput.d.ts

@@ -13,6 +13,7 @@ type SelectInputProps<T> = {
     placeholder?: string;
     multiple?: boolean;
     searchable?: boolean;
+    expanded?: boolean;
     clearable?: boolean;
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     clearHandler?: (value?: any) => void;

package/lib/components/Select/SelectInput.js

@@ -44,7 +44,7 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
 function SelectInput(props) {
-    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
+    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, expanded, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
     const inputRef = (0, react_1.useRef)(null);
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onChangeHandler = (e) => {
@@ -95,14 +95,14 @@ function SelectInput(props) {
             else {
                 forwardedInputRef.current = input;
             }
-        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, onFocus: (e) => {
+        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, role: "combobox", "aria-expanded": !!expanded, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-label": "Select option", onFocus: (e) => {
             e.stopPropagation();
         }, onMouseDown: (e) => {
             e.preventDefault();
         } }));
     const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
-    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" },
+    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler },
         !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
                 selectTags,

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",