@redocly/theme 0.63.0-next.4 → 0.63.0-next.6

package/src/components/Catalog/variables.ts

@@ -7,9 +7,9 @@ export const catalog = css`
     * @tokens Catalog page
     */
   --catalog-page-padding-vertical: var(--spacing-xl);
-  --catalog-page-padding-horizontal: var(--spacing-xxl);
+  --catalog-page-padding-horizontal: var(--spacing-xl);
   --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
-  --catalog-page-content-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+  --catalog-page-padding-mobile: var(--catalog-page-padding-vertical) var(--spacing-base);
 
   --catalog-filter-padding-vertical-mobile: 0;
   --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
@@ -29,9 +29,8 @@ export const catalog = css`
   /**
     * @tokens Catalog page content
     */
-  --catalog-page-content-width-mobile: 90%;
-  --catalog-page-content-width-desktop: 100%;
-  --catalog-page-content-margin-mobile: 0 auto;
+  --catalog-page-content-width: 100%;
+  --catalog-page-content-margin: 0 auto;
 
   /**
     * @tokens Catalog page title
@@ -48,7 +47,7 @@ export const catalog = css`
   --catalog-description-text-color: var(--text-color-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-lg);
-  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
+  --catalog-description-margin: 0 0 var(--spacing-xl) 0;
   --catalog-description-line-height: var(--line-height-lg);
 
   /**
@@ -80,14 +79,12 @@ export const catalog = css`
   /**
     * @tokens Catalog selector
     */
-  --catalog-select-wrapper-margin-top: var(--spacing-xxs);
-  --catalog-select-label-margin-bottom: var(--spacing-xxs);
-  --catalog-select-label-font-weight: var(--filter-title-font-weight);
-  --catalog-select-label-font-size: var(--filter-title-font-size);
-  --catalog-select-label-line-height: var(--filter-title-line-height);
   --catalog-select-border-radius: var(--filter-input-border-radius);
-  --catalog-select-input-padding: var(--select-input-padding-vertical) var(--spacing-sm);
   --catalog-select-icon-color: var(--input-t-icon-color);
+  --catalog-select-accordion-header-padding: 12px 16px 8px 16px;
+  --catalog-select-accordion-body-padding: 0px 16px 12px 16px;
+  --catalog-select-select-line-height: 1.15em;
+  --catalog-select-select-input-padding: 8px 12px;
 
   /**
     * @tokens Catalog highlight
@@ -95,6 +92,18 @@ export const catalog = css`
   --catalog-highlight-bg-color: var(--search-highlight-bg-color);
   --catalog-highlight-text-color: var(--search-highlight-text-color);
 
+  /**
+    * @tokens Catalog entity
+    */
+
+  --catalog-entity-max-width: 1072px;
+  --catalog-spacing-large: calc(var(--spacing-unit) * 16);
+  --catalog-entity-padding: var(--spacing-xl) var(--catalog-spacing-large);
+  --catalog-entity-padding-large: var(--spacing-lg) var(--catalog-spacing-large);
+  --catalog-entity-padding-medium: var(--spacing-lg) var(--spacing-xl);
+  --catalog-entity-padding-small: var(--spacing-lg) var(--spacing-base);
+  --catalog-entity-margin: 0 auto;
+
   /**
     * @tokens Catalog entity icon
     */
@@ -137,10 +146,12 @@ export const catalog = css`
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
+  --catalog-tags-not-connected-font-size: var(--font-size-base);
+  --catalog-tags-not-connected-line-height: var(--line-height-base);
+  --catalog-tags-not-connected-color: var(--text-color-disabled);
 
   /**
     * @tokens Catalog empty state
@@ -153,7 +164,12 @@ export const catalog = css`
     */
   --catalog-actions-row-margin-bottom: var(--spacing-xl);
   --catalog-controls-wrapper-gap: var(--spacing-sm);
+
+  /**
+    * @tokens Catalog filter
+    */
   --catalog-filter-input-width: 360px;
+  --catalog-filter-content-header-padding: var(--spacing-base) var(--spacing-base) var(--spacing-sm) var(--spacing-base);
 
   /**
     * @tokens Catalog search input wrapper
@@ -186,17 +202,10 @@ export const catalog = css`
   --catalog-sidebar-display-desktop: flex;
   --catalog-sidebar-menu-container-padding-top: 0;
 
-  /**
-    * @tokens Catalog page description responsive
-    */
-  --catalog-page-description-display-mobile: none;
-  --catalog-page-description-display-desktop: block;
-
   /**
     * @tokens Catalog card
     */
   --catalog-card-height: 241px;
-  --catalog-card-min-width: 400px;
   --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
@@ -211,7 +220,7 @@ export const catalog = css`
   --catalog-card-border-color-hover: var(--border-color-primary);
   --catalog-card-border-radius: var(--border-radius-lg);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
-  --catalog-cards-group-gap: var(--spacing-xl);
+  --catalog-cards-group-gap: var(--spacing-lg);
 
   /**
     * @tokens Catalog card icon
@@ -231,7 +240,7 @@ export const catalog = css`
   --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
-  --catalog-metadata-label-color: var(--text-color-secondary);
+  --catalog-metadata-label-color: var(--text-color-description);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -254,10 +263,20 @@ export const catalog = css`
     */
   --catalog-card-title-color: var(--text-color-primary);
   --catalog-card-title-min-height: var(--spacing-xxl);
-  --catalog-card-title-font-size: var(--font-size-lg);
-  --catalog-card-title-font-weight: var(--font-weight-bold);
-  --catalog-card-title-line-height: var(--line-height-lg);
-  --catalog-card-title-line-clamp: 2;
+  --catalog-card-title-font-size: var(--font-size-xl);
+  --catalog-card-title-font-weight: var(--font-weight-medium);
+  --catalog-card-title-line-height: var(--line-height-xl);
+  --catalog-card-title-height: 34px;
+  --catalog-card-title-display: flex;
+  --catalog-card-title-align-items: center;
+  --catalog-card-title-margin-bottom: 2px;
+
+  /**
+    * @tokens Catalog card summary
+    */
+  --catalog-card-summary-font-size: var(--font-size-base);
+  --catalog-card-summary-font-weight: var(--font-weight-regular);
+  --catalog-card-summary-line-height: var(--line-height-base);
 
   /**
     * @tokens Catalog card footer
@@ -294,11 +313,17 @@ export const catalog = css`
   --catalog-page-badge-dot-size: 6px;
   --catalog-page-badge-dot-border-color: var(--color-static-white);
 
+  /**
+   * @tokens Catalog card metadata
+   */
+  --catalog-card-metadata-owner-tag-left-padding: 2px;
+
+
   /**
     * @tokens Catalog table
     */
-  --catalog-table-border-color: var(--border-color-primary);
-  --catalog-table-header-bg-color: var(--bg-color-secondary);
+  --catalog-table-border-color: var(--border-color-secondary);
+  --catalog-table-header-bg-color: var(--layer-color);
   --catalog-table-header-font-weight: var(--font-weight-medium);
   --catalog-table-header-cell-padding: 4px 8px;
   --catalog-table-cell-padding: 4px 8px;
@@ -329,7 +354,7 @@ export const catalog = css`
   /**
     * @tokens Catalog table entity title
     */
-  --catalog-table-entity-title-font-size: var(--catalog-card-title-font-size);
+  --catalog-table-entity-title-font-size: var(--font-size-lg);
   --catalog-table-entity-title-line-height: var(--line-height-lg);
   --catalog-table-entity-title-font-weight: var(--font-weight-medium);
 
@@ -390,16 +415,27 @@ export const catalog = css`
   --catalog-empty-state-font-size: var(--font-size-base);
   --catalog-empty-state-line-height: var(--line-height-base);
 
+  /**
+    * @tokens Catalog avatar
+    */
   --catalog-avatar-bg-color: #ededf2;
+  --catalog-avatar-small-size: 20px;
+  --catalog-avatar-medium-size: 32px;
+  --catalog-avatar-large-size: 40px;
+  --catalog-avatar-font-size-small: 10px;
+  --catalog-avatar-font-size-medium: var(--font-size-base);
+  --catalog-avatar-font-size-large: var(--font-size-lg);
+  --catalog-avatar-font-weight: var(--font-weight-regular);
+  --catalog-avatar-line-height: var(--line-height-base);
   // @tokens End
 
   /**
     * @tokens Catalog entity relations node
     */
-  --catalog-entity-relations-node-padding-vertical: 10px;
-  --catalog-entity-relations-node-padding-horizontal: 14px;
+  --catalog-entity-relations-node-padding-vertical: 8px;
+  --catalog-entity-relations-node-padding-horizontal: 12px;
   --catalog-entity-relations-node-padding: var(--catalog-entity-relations-node-padding-vertical) var(--catalog-entity-relations-node-padding-horizontal);
-  --catalog-entity-relations-node-gap: 8px;
+  --catalog-entity-relations-node-gap: 4px;
   --catalog-entity-relations-node-border-radius: 10px;
 
   --catalog-entity-relations-node-bg-color: var(--layer-color);
@@ -410,7 +446,6 @@ export const catalog = css`
   --catalog-entity-relations-node-border-style: var(--border-style);
 
   --catalog-entity-relations-node-font-weight: var(--font-weight-regular);
-  --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
   --catalog-entity-relations-node-root-text-color: var(--color-static-white);
@@ -438,14 +473,17 @@ export const catalog = css`
   /**
     * @tokens Catalog history button
     */
+  --catalog-history-button-width: 252px;
+  --catalog-history-button-item-width: 244px;
   --catalog-history-separator-border-color: var(--border-color-secondary);
   --catalog-history-separator-margin-bottom: var(--spacing-sm);
   --catalog-history-item-padding: var(--spacing-xxs);
   --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
-  --catalog-history-item-gap: var(--spacing-xxs);
+  --catalog-history-item-gap: var(--spacing-xs);
   --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
   --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
   --catalog-history-icon-size: 16px;
+  --catalog-history-content-max-width: 212px;
   --catalog-history-text-font-family: var(--font-family-base);
   --catalog-history-text-font-size: var(--font-size-base);
   --catalog-history-text-font-weight: var(--font-weight-regular);
@@ -456,12 +494,15 @@ export const catalog = css`
   --catalog-history-pill-padding-horizontal: var(--spacing-xs);
   --catalog-history-pill-border-color: var(--border-color-primary);
   --catalog-history-pill-border-radius: 12px;
-  --catalog-history-pill-icon-size: 14px;
+  --catalog-history-pill-icon-size: 16px;
   --catalog-history-pill-icon-color: var(--color-green-8);
   --catalog-history-pill-font-family: var(--font-family-base);
   --catalog-history-pill-font-size: var(--font-size-base);
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
+  --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
+
+
   // @tokens End
 
   /**
@@ -474,7 +515,7 @@ export const catalog = css`
   --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
   --catalog-history-sidebar-header-font-family: var(--font-family-base);
   --catalog-history-sidebar-header-font-size: var(--font-size-base);
-  --catalog-history-sidebar-header-font-weight: var(--font-weight-semibold);
+  --catalog-history-sidebar-header-font-weight: var(--font-weight-regular);
   --catalog-history-sidebar-header-line-height: var(--line-height-base);
   --catalog-history-sidebar-header-letter-spacing: 0;
   --catalog-history-sidebar-header-color: var(--text-color-primary);
@@ -511,6 +552,7 @@ export const catalog = css`
   --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);
 
   --catalog-history-sidebar-revisions-padding-left: 40px;
+  --catalog-history-sidebar-revisions-padding-bottom: var(--spacing-base);
 
   --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
   --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);

package/src/components/Filter/variables.ts

@@ -14,7 +14,7 @@ export const filter = css`
 
   --filter-options-padding-vertical: 0;
   --filter-options-padding-horizontal: 0;
-  --filter-options-gap: var(--spacing-sm);
+  --filter-options-gap: var(--spacing-xs);
   --filter-options-max-height: 350px;
 
   --filter-option-font-size: var(--font-size-base);

package/src/components/LoadMore/LoadMore.tsx

@@ -35,4 +35,5 @@ export function LoadMore({
 const LoadMoreWrapper = styled.div`
   display: flex;
   justify-content: center;
+  margin-top: var(--spacing-xs);
 `;

package/src/components/Menu/MenuItem.tsx

@@ -142,6 +142,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     <MenuItemWrapper
       data-component-name="Menu/MenuItem"
       className={generateClassName({ type, item, className })}
+      role="listitem"
     >
       {item.link ? (
         <MenuItemLink

package/src/components/PageActions/PageActions.tsx

@@ -137,8 +137,7 @@ const StyledDropdownMenuItem = styled(DropdownMenuItem)`
     & > a {
       display: inline-block;
       width: 100%;
-      padding: var(--dropdown-menu-item-padding-vertical)
-        var(--dropdown-menu-item-padding-horizontal);
+      padding: var(--dropdown-menu-item-padding-vertical) var(--dropdown-menu-item-padding-horizontal);
     }
   }
 `;

package/src/components/Search/SearchDialog.tsx

@@ -75,7 +75,7 @@ export function SearchDialog({
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter });
+  const aiSearch = useAiSearch({ filter: filter, product: product?.name });
   useModalScrollLock(true);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);

package/src/components/SidebarActions/SidebarActions.tsx

@@ -64,6 +64,7 @@ export const SidebarActions = ({
             }}
             size="small"
             variant="outlined"
+            aria-label={collapsedSidebar ? 'Show sidebar' : 'Hide sidebar'}
             icon={collapsedSidebar ? <SidePanelOpenIcon /> : <SidePanelCloseIcon />}
           />
         </Tooltip>

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -22,6 +22,7 @@ function TooltipComponent({
   dataTestId,
   disabled = false,
   arrowPosition = 'center',
+  onClick,
 }: PropsWithChildren<Props>): JSX.Element {
   const tooltipWrapperRef = useRef<HTMLDivElement | null>(null);
   const tooltipBodyRef = useRef<HTMLDivElement | null>(null);
@@ -47,7 +48,10 @@ function TooltipComponent({
       ? {
           onMouseEnter: handleOpen,
           onMouseLeave: handleClose,
-          onClick: handleClose,
+          onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+            onClick?.(e);
+            handleClose();
+          },
           onFocus: handleOpen,
           onBlur: handleClose,
         }

package/src/components/Tooltip/JsTooltip.tsx

@@ -18,6 +18,7 @@ function TooltipComponent({
   dataTestId,
   disabled = false,
   arrowPosition = 'center',
+  onClick,
 }: PropsWithChildren<TooltipProps>): JSX.Element {
   const ref = useRef<HTMLDivElement | null>(null);
   const { isOpened, handleOpen, handleClose } = useControl(isOpen);
@@ -98,7 +99,10 @@ function TooltipComponent({
     !disabled && {
       onMouseEnter: handleOpen,
       onMouseLeave: handleClose,
-      onClick: handleClose,
+      onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+        onClick?.(e);
+        handleClose();
+      },
       onFocus: handleOpen,
       onBlur: handleClose,
     };

package/src/components/UserMenu/UserMenu.tsx

@@ -121,9 +121,7 @@ const StyledDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
   --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
-  --dropdown-menu-item-separator-border-color: var(
-    --user-menu-dropdown-item-separator-border-color
-  );
+  --dropdown-menu-item-separator-border-color: var(--user-menu-dropdown-item-separator-border-color);
   --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
   --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
   --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);

package/src/core/hooks/code-walkthrough/use-code-walkthrough.ts

@@ -26,7 +26,7 @@ type Params = {
 
 export function useCodeWalkthrough({ steps, attributes, root }: Params): WalkthroughState {
   const { filters, filesets, inputs, toggles, __idx } = attributes;
-  /* 
+  /*
     We only enable deep linking for the first CodeWalkthrough, 
     because we don't expect more than one on the same page. 
     Any subsequent walkthroughs have it disabled to avoid 

package/src/core/hooks/index.ts

@@ -49,3 +49,4 @@ export * from './catalog/use-catalog-entity-details';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
 export * from './use-store';
+export * from './use-is-truncated';

package/src/core/hooks/use-is-truncated.ts

@@ -0,0 +1,20 @@
+import { useRef, useState, useLayoutEffect } from 'react';
+
+export function useIsTruncated<T extends HTMLElement>(
+  content: string | null,
+): [React.RefObject<T | null>, boolean] {
+  const ref = useRef<T | null>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+
+    if (!el) {
+      setIsTruncated(false);
+    } else {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    }
+  }, [content]);
+
+  return [ref, isTruncated];
+}

package/src/core/hooks/use-tabs.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 type UseTabsProps = {
   activeTab: string;
@@ -284,48 +284,67 @@ export function useTabs({
 }
 
 export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const initialTabValue = useMemo(
-    () => getInitialTab({ initialTab, searchParams, tabsId }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-  const [activeTab, setActiveTab] = useState(initialTabValue);
-  const prevActiveTabRef = useRef(activeTab);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<string | undefined>(undefined);
+  const resolvedActiveTab = activeTab ?? initialTab;
+  const prevActiveTabRef = useRef(resolvedActiveTab);
+
+  useEffect(() => {
+    if (activeTab !== undefined) {
+      return;
+    }
+
+    setActiveTab(getInitialTab({ initialTab, hash: location.hash, tabsId }));
+  }, [activeTab, initialTab, location.hash, tabsId]);
 
   useEffect(() => {
-    const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
+    const hasActiveTabChanged = prevActiveTabRef.current !== resolvedActiveTab;
     if (!tabsId || !hasActiveTabChanged) {
       return;
     }
 
-    prevActiveTabRef.current = activeTab;
+    prevActiveTabRef.current = resolvedActiveTab;
+    const nextHashParams = new URLSearchParams(
+      location.hash.startsWith('#') ? location.hash.slice(1) : location.hash,
+    );
+    nextHashParams.set(tabsId, resolvedActiveTab);
+    const nextHash = `#${nextHashParams.toString()}`;
 
-    setSearchParams((searchParams) => {
-      searchParams.set(tabsId, activeTab);
-      return searchParams;
-    });
-  }, [activeTab, setSearchParams, tabsId]);
+    if (nextHash === location.hash) {
+      return;
+    }
+
+    navigate(
+      {
+        pathname: location.pathname,
+        search: location.search,
+        hash: nextHash,
+      },
+      { replace: true },
+    );
+  }, [resolvedActiveTab, navigate, location.pathname, location.search, location.hash, tabsId]);
 
   return useMemo(
     () => ({
-      activeTab,
+      activeTab: resolvedActiveTab,
       setActiveTab,
     }),
-    [activeTab],
+    [resolvedActiveTab],
   );
 };
 
 type GetInitialTabProps = {
   initialTab: string;
-  searchParams: URLSearchParams;
+  hash: string;
   tabsId?: string;
 };
 
-const getInitialTab = ({ initialTab, searchParams, tabsId }: GetInitialTabProps) => {
+const getInitialTab = ({ initialTab, hash, tabsId }: GetInitialTabProps): string => {
+  const hashParams = new URLSearchParams(hash.startsWith('#') ? hash.slice(1) : hash);
   let resultTab = initialTab;
   if (tabsId) {
-    const tabFromUrl = searchParams.get(tabsId);
+    const tabFromUrl = hashParams.get(tabsId);
     resultTab = tabFromUrl ? tabFromUrl : resultTab;
   }
   return resultTab;

package/src/core/types/hooks.ts

@@ -117,7 +117,7 @@ export type ThemeHooks = {
     advancedSearch?: boolean;
     askAi?: boolean;
   };
-  useAiSearch: (options?: { filter?: SearchFilterItem[] }) => {
+  useAiSearch: (options?: { filter?: SearchFilterItem[]; product?: string }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
     question: string;

package/src/core/types/l10n.ts

@@ -160,6 +160,7 @@ export type TranslationKey =
   | 'catalog.entity.schema.title'
   | 'catalog.entity.properties.apiDescription.title'
   | 'catalog.backToAllLabel'
+  | 'catalog.notConnected'
   | 'catalog.tags.more'
   | 'catalog.tags.label'
   | 'catalog.sort'
@@ -179,6 +180,7 @@ export type TranslationKey =
   | 'catalog.history.sidebar.title'
   | 'catalog.history.sidebar.close'
   | 'catalog.history.version.label'
+  | 'catalog.filters.close'
   | 'catalog.history.version.notSpecified'
   | 'catalog.history.version.default'
   | 'catalog.history.revisions.limitMessage'
@@ -275,6 +277,7 @@ export type TranslationKey =
   | 'openapi.actions.hide'
   | 'openapi.actions.more'
   | 'openapi.languages.title'
+  | 'openapi.languages.moreButton.tooltipText'
   | 'openapi.servers.title'
   | 'openapi.operations'
   | 'openapi.webhooks'
@@ -395,6 +398,10 @@ export type TranslationKey =
   | 'graphql.sample'
   | 'graphql.referenced'
   | 'graphql.content.fragment'
+  | 'button.copy.tooltipText'
+  | 'button.download.tooltipText'
+  | 'button.externalLink.tooltipText'
+  | 'button.email.tooltipText'
   | 'codeWalkthrough.download'
   | 'codeWalkthrough.preview'
   | 'time.justNow'

package/src/core/types/tooltip.ts

@@ -11,4 +11,5 @@ export type TooltipProps = {
   dataTestId?: string;
   disabled?: boolean;
   arrowPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
 };

package/src/core/utils/custom-catalog-options-casing.ts

@@ -0,0 +1,29 @@
+/**
+ * Converts a string to title case for catalog option labels.
+ * Splits on whitespace, hyphens, and underscores; capitalizes each word.
+ * The first word is rendered as "API" when it is "api" (case-insensitive).
+ *
+ * @param str - The raw string to format (e.g. from config or entity data).
+ * @returns The formatted label with words capitalized and joined by spaces.
+ *
+ * @example
+ * customCatalogOptionsCasing('api_spec')           // 'API Spec'
+ * customCatalogOptionsCasing('my-custom-option')  // 'My Custom Option'
+ * customCatalogOptionsCasing('user name')         // 'User Name'
+ * customCatalogOptionsCasing('  api   version  ') // 'API Version'
+ */
+export function customCatalogOptionsCasing(str: string): string {
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
+
+  return words
+    .map((word, index) => {
+      if (index === 0 && word.toLowerCase() === 'api') {
+        return 'API';
+      }
+      return word[0].toUpperCase() + word.slice(1);
+    })
+    .join(' ');
+}

package/src/core/utils/index.ts

@@ -44,3 +44,4 @@ export * from './frontmatter-translate';
 export * from './transform-revisions-to-version-history';
 export * from './build-revision-url';
 export * from './content-segments';
+export * from './custom-catalog-options-casing';

package/src/index.ts

@@ -33,6 +33,7 @@ export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
 export * from '@redocly/theme/components/Buttons/EmailButton';
 export * from '@redocly/theme/components/Buttons/NewTabButton';
+export * from '@redocly/theme/components/Buttons/DownloadButton';
 export * from '@redocly/theme/components/Buttons/AIAssistantButton';
 /* Markdown */
 export * from '@redocly/theme/components/Markdown/Markdown';

package/src/markdoc/components/MarkdocExample/MarkdocExample.tsx

@@ -30,12 +30,8 @@ export function MarkdocExample(props: MarkdocExampleProps) {
     <div data-component-name="Markdoc/MarkdocExample/MarkdocExample">
       {renderLabels ? <Label>{codeLabel ? codeLabel : 'Code:'}</Label> : null}
       <CodeBlock lang={language} source={rawContent} header={{ title, controls: { copy: {} } }} />
-      {renderDemo ? (
-        <>
-          {renderLabels ? <Label>{resultLabel ? resultLabel : 'Result:'}</Label> : null}
-          {...demoContent}
-        </>
-      ) : null}
+      {renderDemo ? <>{renderLabels ? <Label>{resultLabel ? resultLabel : 'Result:'}</Label> : null}
+        {...demoContent}</> : null}
     </div>
   );
 }