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

package/src/components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { KeyboardEvent, JSX } from 'react';
+import type { KeyboardEvent, JSX, MouseEvent } from 'react';
 
 import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
 import { useModalScrollLock } from '@redocly/theme/core/hooks';
@@ -42,6 +42,7 @@ export function Image(props: ImageProps): JSX.Element {
   } = props;
 
   const lightboxContainerRef = useRef<HTMLDivElement>(null);
+  const lightboxTriggerRef = useRef<HTMLElement | null>(null);
   const [lightboxImage, setLightboxImage] = useState<string | undefined>(undefined);
   const parsedSourceSetMap = useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
@@ -55,15 +56,32 @@ export function Image(props: ImageProps): JSX.Element {
   }, []);
 
   const handleImageClick = useCallback(
-    (src: string) => {
+    (src: string, trigger: HTMLElement) => {
       if (!withLightbox || lightboxImage) {
         return;
       }
+      lightboxTriggerRef.current = trigger;
       setLightboxImage(src);
     },
     [withLightbox, lightboxImage],
   );
 
+  const getLightboxTriggerProps = (imageSrc: string) =>
+    withLightbox
+      ? {
+          role: 'button',
+          tabIndex: 0,
+          'aria-label': alt ? undefined : 'Open image',
+          onClick: (e: MouseEvent<HTMLElement>) => handleImageClick(imageSrc, e.currentTarget),
+          onKeyDown: (e: KeyboardEvent<HTMLElement>) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleImageClick(imageSrc, e.currentTarget);
+            }
+          },
+        }
+      : {};
+
   const handleCloseLightbox = useCallback(() => {
     setLightboxImage(undefined);
   }, []);
@@ -72,6 +90,9 @@ export function Image(props: ImageProps): JSX.Element {
   useEffect(() => {
     if (lightboxImage) {
       lightboxContainerRef.current?.focus();
+    } else {
+      lightboxTriggerRef.current?.focus();
+      lightboxTriggerRef.current = null;
     }
   }, [lightboxImage]);
 
@@ -92,7 +113,7 @@ export function Image(props: ImageProps): JSX.Element {
       width={width}
       height={height}
       style={combinedStyles}
-      onClick={() => handleImageClick(src)}
+      {...getLightboxTriggerProps(src)}
     />
   ) : (
     Array.from(parsedSourceSetMap).map(([key, value]) => (
@@ -106,7 +127,7 @@ export function Image(props: ImageProps): JSX.Element {
         height={height}
         $withLightbox={withLightbox}
         style={combinedStyles}
-        onClick={() => handleImageClick(value)}
+        {...getLightboxTriggerProps(value)}
       />
     ))
   );
@@ -122,7 +143,7 @@ export function Image(props: ImageProps): JSX.Element {
           src={galleryImageSrc}
           alt={alt}
           style={withLightbox ? { cursor: 'pointer' } : undefined}
-          onClick={() => handleImageClick(galleryImageSrc)}
+          {...getLightboxTriggerProps(galleryImageSrc)}
         />
       ))}
     </GalleryRow>

package/src/components/Markdown/Markdown.tsx

@@ -71,7 +71,7 @@ export const Markdown = styled.main
   ${markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    scroll-margin-top: var(--navbar-offset);
   }
 
   img,
@@ -84,7 +84,7 @@ export const Markdown = styled.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);
     ${headingAnchorCss(ANCHOR_CLASS)};
 
     h1,
@@ -295,6 +295,7 @@ export const Markdown = styled.main
       font-size: inherit;
       font-family: inherit;
       border: none;
+      padding: 0;
     }
   }
 

package/src/components/Menu/Menu.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 import type { DrilldownMenuItemDetails, ItemState } from '@redocly/theme/core/types';
 
 import { MenuItem } from '@redocly/theme/components/Menu/MenuItem';
+import { MenuSelect } from '@redocly/theme/components/Menu/MenuSelect';
 import { MenuItemType } from '@redocly/theme/core/constants';
 import { getMenuItemType } from '@redocly/theme/core/utils';
 
@@ -28,6 +29,10 @@ export function Menu({
   return (
     <MenuWrapper className={className} data-component-name="Menu/Menu">
       {items.map((item, index) => {
+        if (getMenuItemType(item) === MenuItemType.Select) {
+          return <MenuSelect item={item} key={`${item.label}-${index}`} />;
+        }
+
         return (
           <MenuItem
             item={item}

package/src/components/Menu/MenuSelect.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ItemState } from '@redocly/theme/core/types';
+
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+
+export type MenuSelectProps = {
+  item: ItemState;
+  className?: string;
+};
+
+export function MenuSelect({ item, className }: MenuSelectProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  return (
+    <MenuSelectWrapper data-component-name="Menu/MenuSelect" className={className} role="listitem">
+      <MenuSelectDropdown
+        alignment="start"
+        trigger={
+          <MenuSelectTrigger type="button">
+            <MenuSelectLabel>{translate(item.labelTranslationKey, item.label)}</MenuSelectLabel>
+            <MenuSelectChevron
+              size="var(--menu-select-icon-size)"
+              color="--menu-select-icon-color"
+            />
+          </MenuSelectTrigger>
+        }
+      >
+        <MenuSelectMenu>
+          {item.items.map((option, index) => {
+            const key = `${option.link || option.label}-${index}`;
+            const checkmark = option.active ? (
+              <MenuSelectCheckmark size="var(--menu-select-option-checkmark-size)" />
+            ) : null;
+            const content = (
+              <MenuSelectOptionContent $active={option.active}>
+                {option.icon || option.srcSet ? (
+                  <MenuSelectOptionIcon icon={option.icon} srcSet={option.srcSet} />
+                ) : null}
+                {translate(option.labelTranslationKey, option.label)}
+                {option.external ? (
+                  <LaunchIcon size="var(--menu-select-option-external-icon-size)" />
+                ) : null}
+              </MenuSelectOptionContent>
+            );
+
+            if (!option.link) {
+              return (
+                <MenuSelectOption
+                  key={key}
+                  active={option.active}
+                  prefix={checkmark}
+                  dataAttributes={{ 'aria-disabled': 'true' }}
+                >
+                  {content}
+                </MenuSelectOption>
+              );
+            }
+
+            return (
+              <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([
+                    {
+                      ...getBaseDataAttributes('sidebarItem', 'sidebar'),
+                      label: option.label,
+                      type: 'link',
+                    },
+                  ])
+                }
+              >
+                {content}
+              </MenuSelectOption>
+            );
+          })}
+        </MenuSelectMenu>
+      </MenuSelectDropdown>
+    </MenuSelectWrapper>
+  );
+}
+
+const MenuSelectWrapper = styled.div`
+  margin: var(--menu-select-margin);
+`;
+
+const MenuSelectDropdown = styled(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 = styled(ChevronDownIcon)`
+  transition: var(--menu-select-transition);
+`;
+
+const MenuSelectTrigger = styled.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.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const MenuSelectMenu = styled(DropdownMenu)`
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+`;
+
+const MenuSelectOption = styled(DropdownMenuItem)`
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--menu-select-option-padding);
+
+  &[aria-disabled='true'] {
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+
+const MenuSelectCheckmark = styled(CheckmarkIcon)`
+  position: absolute;
+  top: 50%;
+  left: var(--menu-select-option-checkmark-offset);
+  transform: translateY(-50%);
+`;
+
+const MenuSelectOptionContent = styled.span<{ $active: boolean }>`
+  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 = styled(GenericIcon)`
+  --icon-width: var(--menu-select-option-icon-size);
+  --icon-height: var(--menu-select-option-icon-size);
+  flex-shrink: 0;
+`;

package/src/components/Menu/variables.ts

@@ -102,6 +102,45 @@ export const menu = 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
    */
@@ -133,18 +172,18 @@ export const mobileMenu = 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/src/components/Navbar/Navbar.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedConfigLinks } from '@redocly/config';
 
-import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
+import {
+  breakpoints,
+  getBaseDataAttributes,
+  toNavigationTabsConfig,
+} from '@redocly/theme/core/utils';
 import { useThemeHooks, useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
 import { NavbarLogo } from '@redocly/theme/components/Navbar/NavbarLogo';
 import { NavbarMenu } from '@redocly/theme/components/Navbar/NavbarMenu';
+import { NavigationTabs } from '@redocly/theme/components/NavigationTabs/NavigationTabs';
 import { MenuMobile } from '@redocly/theme/components/Menu/MenuMobile';
 import { ColorModeSwitcher } from '@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher';
 import { Search } from '@redocly/theme/components/Search/Search';
@@ -26,9 +31,15 @@ export type NavbarProps = {
 export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const { isOpen, closeMobileMenu, openMobileMenu } = useMobileMenu(false);
   const themeConfig = useThemeConfig();
-  const { useL10n, useTelemetry } = useThemeHooks();
+  const { useL10n, useTelemetry, useTranslate, useNavigationTabs } = useThemeHooks();
   const { changeLanguage } = useL10n();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
+  const navigationTabs = useNavigationTabs();
+  const navigationTabsConfig = useMemo(
+    () => toNavigationTabsConfig({ state: navigationTabs }),
+    [navigationTabs],
+  );
 
   const menu = themeConfig.navbar?.items;
 
@@ -43,7 +54,11 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const hideUserMenu = userMenuSettings?.hide;
 
   return (
-    <NavbarWrapper data-component-name="Navbar/Navbar" className={className}>
+    <NavbarWrapper
+      data-component-name="Navbar/Navbar"
+      className={className}
+      aria-label={translate('navbar.label', 'Main navigation')}
+    >
       <Banner />
       {isOpen && <MenuMobile hideUserProfile={!!hideUserMenu} />}
       <NavbarRow>
@@ -76,13 +91,14 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
         />
         {hideUserMenu ? null : <UserMenu />}
       </NavbarRow>
+      {navigationTabsConfig && <NavigationTabs config={navigationTabsConfig} />}
     </NavbarWrapper>
   );
 }
 
 const NavbarWrapper = styled.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;
@@ -123,6 +139,7 @@ const NavbarRow = styled.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: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/components/Navbar/variables.ts

@@ -4,9 +4,12 @@ export const navbar = 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/src/components/NavigationTabs/NavigationTab.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { LinkProps, NavigationTabRowItem } from '@redocly/theme/core/types';
+
+import { getNavbarItemClickedPayload } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { NavigationTabMenu } from '@redocly/theme/components/NavigationTabs/NavigationTabMenu';
+import { NavigationTabContent } from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export type NavigationTabProps = {
+  tab: NavigationTabRowItem;
+  className?: string;
+};
+
+export function NavigationTab({ tab, className }: NavigationTabProps): JSX.Element | null {
+  const { useTelemetry } = 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?.link && !isGroup) {
+    return null;
+  }
+
+  const content = (
+    <>
+      <NavigationTabContent item={tab} />
+      {isGroup ? <NavigationTabChevron size="10px" /> : null}
+    </>
+  );
+
+  if (isGroup) {
+    return (
+      <NavigationTabWrapper
+        data-component-name="NavigationTabs/NavigationTab"
+        className={className}
+      >
+        <NavigationTabDropdown
+          triggerEvent="hover"
+          portalled
+          trigger={
+            <NavigationTabTrigger
+              $active={active}
+              aria-current={active ? 'true' : undefined}
+              onClick={() =>
+                telemetry.sendNavbarMenuItemClickedMessage(getNavbarItemClickedPayload(tab.type))
+              }
+            >
+              {content}
+            </NavigationTabTrigger>
+          }
+        >
+          <NavigationTabMenu items={menuItems} />
+        </NavigationTabDropdown>
+      </NavigationTabWrapper>
+    );
+  }
+
+  return (
+    <NavigationTabWrapper data-component-name="NavigationTabs/NavigationTab" className={className}>
+      <NavigationTabLink
+        as={Link}
+        to={linkItem?.link}
+        $active={active}
+        external={linkItem?.external}
+        target={linkItem?.target}
+        aria-current={active ? 'page' : undefined}
+        onClick={() =>
+          telemetry.sendNavbarMenuItemClickedMessage(getNavbarItemClickedPayload(tab.type))
+        }
+      >
+        {content}
+      </NavigationTabLink>
+    </NavigationTabWrapper>
+  );
+}
+
+const NavigationTabChevron = styled(ChevronDownIcon)`
+  flex-shrink: 0;
+`;
+
+const NavigationTabWrapper = styled.li`
+  list-style: none;
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+`;
+
+const NavigationTabDropdown = styled(Dropdown)`
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+`;
+
+const NavigationTabLink = styled.div<LinkProps & { $active: boolean }>`
+  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 = styled(NavigationTabLink).attrs({ as: 'button', type: 'button' })`
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: inherit;
+  cursor: pointer;
+`;