@redocly/theme 0.69.0 → 0.70.0-next.1

package/lib/core/constants/markdown.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MARKDOWN_CLASS_NAME = void 0;
+exports.EXAMPLE_CONTENT_ATTRIBUTE = exports.MARKDOC_EXAMPLE_TAG = exports.MARKDOWN_CLASS_NAME = void 0;
 exports.MARKDOWN_CLASS_NAME = 'md';
+exports.MARKDOC_EXAMPLE_TAG = 'markdoc-example';
+exports.EXAMPLE_CONTENT_ATTRIBUTE = 'exampleContent';
 //# sourceMappingURL=markdown.js.map

package/lib/core/hooks/catalog/use-catalog-entity-schema.d.ts

@@ -1,4 +1,4 @@
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
 type CatalogEntitySchemaProps = {
     entity: BffCatalogEntity;
     relatedEntity: BffCatalogRelatedEntity | null;

package/lib/core/hooks/catalog/use-catalog-entity-schema.js

@@ -8,7 +8,7 @@ function useCatalogEntitySchema({ entity, relatedEntity }) {
     try {
         parsedSchema = JSON.parse(schema);
     }
-    catch (error) {
+    catch (_c) {
         parsedSchema = undefined;
     }
     let parsedApiDefinition;
@@ -17,7 +17,7 @@ function useCatalogEntitySchema({ entity, relatedEntity }) {
             ? JSON.parse(relatedEntity.metadata.schema)
             : undefined;
     }
-    catch (err) {
+    catch (_d) {
         parsedApiDefinition = undefined;
     }
     const definition = !parsedApiDefinition || ((_b = relatedEntity === null || relatedEntity === void 0 ? void 0 : relatedEntity.metadata) === null || _b === void 0 ? void 0 : _b.specType) !== 'openapi'

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.d.ts

@@ -1,4 +1,4 @@
-import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
+import type { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
     currentSortOption?: string | null;

package/lib/core/hooks/catalog/use-graph.d.ts

@@ -1,6 +1,6 @@
-import { type Node, type Edge, type Connection, OnNodesChange, OnEdgesChange } from '@xyflow/react';
-import { type CatalogEntityNodeData } from '../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import { type OnNodesChange, type OnEdgesChange, type Node, type Edge, type Connection } from '@xyflow/react';
+import type { CatalogEntityNodeData } from '../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
 export type UseGraphProps = {
     entity: BffCatalogEntity;
     relations: BffCatalogRelatedEntity[];

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -42,7 +42,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         Object.entries(newState).forEach(([id, control]) => {
             const existingControl = controlsState[id];
             if (existingControl && existingControl.type === control.type) {
-                // @ts-ignore
+                // @ts-expect-error
                 newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
             }
         });

package/lib/core/hooks/index.d.ts

@@ -55,3 +55,4 @@ export * from './use-toast';
 export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
+export * from './use-anchor-positioning';

package/lib/core/hooks/index.js

@@ -71,4 +71,5 @@ __exportStar(require("./use-toast"), exports);
 __exportStar(require("./use-toast-logic"), exports);
 __exportStar(require("./use-banner-telemetry"), exports);
 __exportStar(require("./use-tooltip-fallback-placement"), exports);
+__exportStar(require("./use-anchor-positioning"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/menu/use-nested-menu.js

@@ -46,9 +46,9 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
             rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
             rect.right <= (window.innerWidth || document.documentElement.clientWidth);
         // Only scroll if element is in viewport to prevent page jumping
-        // @ts-ignore
+        // @ts-expect-error
         if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
-            // @ts-ignore
+            // @ts-expect-error
             el.scrollIntoViewIfNeeded(centerIfNeeded);
         }
     }

package/lib/core/hooks/use-active-section-id.js

@@ -32,6 +32,8 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
             const section = sections[i];
             const rect = section.getBoundingClientRect();
             if (rect.y < heightOffset && rect.bottom > heightOffset) {
+                if (isSkippedContent(section))
+                    continue;
                 setItemId(section.getAttribute('data-section-id') || '');
                 return;
             }
@@ -56,4 +58,8 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
     }, [location, heightOffset, scrollListener]);
     return itemId;
 }
+function isSkippedContent(element) {
+    return (typeof element.checkVisibility === 'function' &&
+        !element.checkVisibility({ contentVisibilityAuto: true }));
+}
 //# sourceMappingURL=use-active-section-id.js.map

package/lib/core/hooks/use-anchor-positioning.d.ts

@@ -0,0 +1,3 @@
+export declare const useAnchorPositioning: () => {
+    isSupported: boolean;
+};

package/lib/core/hooks/use-anchor-positioning.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchorPositioning = void 0;
+const react_1 = require("react");
+const useAnchorPositioning = () => {
+    const [isSupported, setIsSupported] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsSupported(isAnchorPositioningSupported());
+    }, []);
+    return { isSupported };
+};
+exports.useAnchorPositioning = useAnchorPositioning;
+function isAnchorPositioningSupported() {
+    if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+        return false;
+    }
+    return (CSS.supports('anchor-name: --a') &&
+        CSS.supports('position-anchor: --a') &&
+        CSS.supports('top: anchor(top)'));
+}
+//# sourceMappingURL=use-anchor-positioning.js.map

package/lib/core/hooks/use-element-size.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 type Size = {
     width: number;
     height: number;

package/lib/core/hooks/use-theme-hooks.js

@@ -5,7 +5,6 @@ const react_1 = require("react");
 const ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 const use_telemetry_fallback_1 = require("./use-telemetry-fallback");
 const fallbacks = {
-    useAnchorPositioning: () => ({ isSupported: false }),
     useTranslate: () => ({
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),

package/lib/core/types/catalog.d.ts

@@ -1,6 +1,5 @@
-import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
-import { ENTITY_RELATION_TYPES } from '@redocly/config';
-import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
+import type { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import type { ENTITY_RELATION_TYPES, CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
 export type FilterResult = {
     value: string;

package/lib/core/types/common.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { DEFAULT_COLOR_MODES } from '../constants';
+import type { DEFAULT_COLOR_MODES } from '../constants';
 export type Plural<T extends string> = `${T}s`;
 export type ColorMode = (typeof DEFAULT_COLOR_MODES)[keyof typeof DEFAULT_COLOR_MODES];
 export type RenderableChildren<Context> = React.ReactNode | ((context: Context) => React.ReactNode);

package/lib/core/types/hooks.d.ts

@@ -1,25 +1,19 @@
-import type { ResolvedBannerConfig } from '@redocly/config';
+import type { ResolvedBannerConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';
+import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults, BffCatalogEntity, BffCatalogEntityList, BffCatalogRelatedEntity, BffCatalogRelatedEntityList, BffCatalogEntityRevision, BffCatalogEntityRevisionList } from './catalog';
 import type { UserMenuData } from './user-menu';
-import type { ItemState } from './sidebar';
+import type { ItemState, DrilldownMenuItemDetails } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ContentSegment, ToolCall } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
-import type { DrilldownMenuItemDetails } from './sidebar';
-import { BffCatalogEntity, BffCatalogEntityList, BffCatalogRelatedEntity, BffCatalogRelatedEntityList, BffCatalogEntityRevision, BffCatalogEntityRevisionList } from './catalog';
-import { AiSearchError } from '../constants/search';
+import type { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
-    useAnchorPositioning: () => {
-        isSupported: boolean;
-    };
     useTranslate: () => {
         translate: TFunction;
     };

package/lib/core/utils/load-and-navigate.js

@@ -24,9 +24,9 @@ function loadAndNavigate(_a) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const loader = window['__LOADER'];
         const result = yield (0, with_load_progress_1.withLoadProgress)(loader.tryLoad(pathname));
-        // @ts-ignore
+        // @ts-expect-error
         if (result === null || result === void 0 ? void 0 : result.redirectTo) {
-            // @ts-ignore
+            // @ts-expect-error
             return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
         }
         if (result && lastNavigatedPath === to) {
@@ -34,7 +34,7 @@ function loadAndNavigate(_a) {
                 // origin is used to prevent infinite loop when navigating from post message (from wysiwyg)
                 navigate({ pathname, search, hash }, Object.assign(Object.assign({}, options), { state: { origin }, unstable_flushSync: true }));
             }
-            // @ts-ignore
+            // @ts-expect-error
             if ((_b = result.props) === null || _b === void 0 ? void 0 : _b.disableAutoScroll)
                 return;
             if (hash) {

package/lib/core/utils/mcp.d.ts

@@ -1,7 +1,6 @@
 import type { MCPClientType, McpConnectionParams } from '../types';
 export declare function generateMCPDeepLink(clientType: MCPClientType, config: McpConnectionParams): string;
 export declare function slugifyMcpServerName(name: string): string;
-export declare function generateClaudeDesktopConfig(config: McpConnectionParams): string;
 export declare function generateClaudeCodeCommand(config: McpConnectionParams): string;
 export declare function generateCodexCommand(config: McpConnectionParams): string;
 export declare function generateMcpInstallPrompt(config: McpConnectionParams): string;

package/lib/core/utils/mcp.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateMCPDeepLink = generateMCPDeepLink;
 exports.slugifyMcpServerName = slugifyMcpServerName;
-exports.generateClaudeDesktopConfig = generateClaudeDesktopConfig;
 exports.generateClaudeCodeCommand = generateClaudeCodeCommand;
 exports.generateCodexCommand = generateCodexCommand;
 exports.generateMcpInstallPrompt = generateMcpInstallPrompt;
@@ -41,18 +40,6 @@ function slugifyMcpServerName(name) {
         .replace(/[^a-z0-9_-]+/g, '-')
         .replace(/^-+|-+$/g, '');
 }
-// Claude Desktop's config file only launches stdio commands, so remote servers
-// connect through the mcp-remote bridge.
-function generateClaudeDesktopConfig(config) {
-    return JSON.stringify({
-        mcpServers: {
-            [slugifyMcpServerName(config.serverName)]: {
-                command: 'npx',
-                args: ['-y', 'mcp-remote', config.url],
-            },
-        },
-    }, null, 2);
-}
 function generateClaudeCodeCommand(config) {
     return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
 }

package/lib/core/utils/menu.d.ts

@@ -1,7 +1,7 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router';
-import { type Locale, type TFunction } from '../types/l10n';
-import { type ItemState } from '../types/sidebar';
+import type { Locale, TFunction } from '../types/l10n';
+import type { ItemState } from '../types/sidebar';
 import { MenuItemType } from '../constants/common';
 export declare const mapNavbarItems: (items: ResolvedNavItem[], defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => ItemState[];
 export declare const isItemActive: (item: ResolvedNavItem, defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => boolean;

package/lib/core/utils/urls.js

@@ -18,9 +18,7 @@ const common_1 = require("../constants/common");
 function combineUrls(baseURL, ...relativeURLs) {
     let res = baseURL;
     for (let relativeURL of relativeURLs) {
-        res = relativeURL
-            ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
-            : res;
+        res = relativeURL ? res.replace(/[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '') : res;
     }
     return res;
 }

package/lib/ext/use-configure-replay.d.ts

@@ -1,4 +1,4 @@
-import { type ConfigureRequestValues, type ConfigureServerRequestValues } from '../ext/configure';
+import type { ConfigureRequestValues, ConfigureServerRequestValues } from '../ext/configure';
 import type { UserClaims, OpenAPIServer, OpenAPIInfo } from '../core/types';
 type ContextProps = {
     operation: {

package/lib/layouts/OIDCForbidden.js

@@ -47,7 +47,7 @@ function OIDCForbidden() {
     const [searchParams, setSearchParams] = (0, react_router_1.useSearchParams)();
     const [errorDescription, setErrorDescription] = (0, react_1.useState)('');
     // use whatever you want here
-    const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+    const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
     const renderText = (text) => text.split(' ').map((part) => URL_REGEX.test(part) ? (react_1.default.createElement(ErrorDescriptionLink, { key: part, href: part },
         part,
         ' ')) : (part + ' '));

package/lib/markdoc/components/CodeWalkthrough/CodePanelPreview.d.ts

@@ -1,3 +1,2 @@
-import { PropsWithChildren } from 'react';
-import type { JSX } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 export declare function CodePanelPreview({ children }: PropsWithChildren): JSX.Element;

package/lib/markdoc/components/Diagram/Diagram.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 type DiagramProps = {
     id?: string;
     diagramHtml: string;

package/lib/markdoc/components/Diagram/Diagram.js

@@ -41,10 +41,9 @@ 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 hooks_2 = require("../../../core/hooks");
 const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
 function Diagram({ id, diagramHtml, diagramHtmlDark, diagramError, diagramType, align, width, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
-    const { useTranslate } = (0, hooks_2.useThemeHooks)();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { activeColorMode } = (0, hooks_1.useColorSwitcher)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);

package/lib/markdoc/components/Tabs/Tab.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX } from 'react';
-import { TabsSize } from '../../../markdoc/components/Tabs/Tabs';
+import type { TabsSize } from '../../../markdoc/components/Tabs/Tabs';
 export type TabProps = {
     tabId: string;
     label: string;

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 import type { TabItemProps } from '../../../markdoc/components/Tabs/TabItemFragment';
-import { TabsSize } from '../../../markdoc/components/Tabs/Tabs';
+import type { TabsSize } from '../../../markdoc/components/Tabs/Tabs';
 type TabListProps = {
     childrenArray: React.ReactElement<TabItemProps>[];
     size: TabsSize;

package/lib/markdoc/tags/code-walkthrough.d.ts

@@ -1,4 +1,4 @@
-import { Node, RenderableTreeNode } from '@markdoc/markdoc';
+import type { Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
 import type { CodeWalkthroughConditions, CodeWalkthroughFilter, TogglesMarkdocAttr, InputsMarkdocAttr } from '@redocly/config';
 export declare const codeWalkthrough: MarkdocSchemaWrapper;

package/lib/markdoc/tags/markdoc-example.js

@@ -5,21 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdocExample = void 0;
 const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
-// Walk through AST and look for raw markdown to parse
-function parseInlineMarkdown(ast, config) {
-    if (Array.isArray(ast)) {
-        return ast.flatMap((child) => parseInlineMarkdown(child, config));
-    }
-    if (typeof ast === 'string') {
-        const parsed = markdoc_1.default.parse(ast);
-        return markdoc_1.default.transform(parsed, config);
-    }
-    if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
-        const children = parseInlineMarkdown(ast.children, config);
-        return Object.assign(Object.assign({}, ast), { children });
-    }
-    return ast;
-}
+const constants_1 = require("../../core/constants");
 // This custom tag prevents evaluating any children markdoc tags (no children) so we can
 // have markdoc examples in code fences
 // approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
@@ -33,24 +19,50 @@ exports.markdocExample = {
         },
         children: ['fence'],
         transform(node, config) {
-            var _a;
             const attributes = node.transformAttributes(config);
-            const { content } = ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.attributes) || {};
+            const fenceNode = node.children[0];
+            const { content } = (fenceNode === null || fenceNode === void 0 ? void 0 : fenceNode.attributes) || {};
             if (!content)
                 return null;
             const language = 'markdoc';
-            const annotations = node.children[0].annotations;
+            const annotations = fenceNode.annotations;
             let title = null;
             if (annotations.length > 0) {
                 const fenceWithTitle = annotations.find((annotation) => annotation.name === 'title');
                 title = fenceWithTitle === null || fenceWithTitle === void 0 ? void 0 : fenceWithTitle.value;
             }
-            const demoContent = node.children[0].transformChildren(config);
-            const parsedDemoContent = parseInlineMarkdown(demoContent, config);
             return new markdoc_1.default.Tag('MarkdocExample', Object.assign(Object.assign({}, attributes), { title,
-                language, demoContent: parsedDemoContent, rawContent: content }), []);
+                language, demoContent: transformDemoContent(fenceNode, content, config), rawContent: content }), []);
         },
     },
-    tagName: 'markdoc-example',
+    tagName: constants_1.MARKDOC_EXAMPLE_TAG,
 };
+// Walk through AST and look for raw markdown to parse
+function parseRawMarkdown(ast, config) {
+    if (Array.isArray(ast)) {
+        return ast.flatMap((child) => parseRawMarkdown(child, config));
+    }
+    if (typeof ast === 'string') {
+        const parsed = markdoc_1.default.parse(ast);
+        return markdoc_1.default.transform(parsed, config);
+    }
+    if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
+        const children = parseRawMarkdown(ast.children, config);
+        return Object.assign(Object.assign({}, ast), { children });
+    }
+    return ast;
+}
+function toRenderableArray(node) {
+    return Array.isArray(node) ? node : [node];
+}
+function transformDemoContent(fenceNode, content, config) {
+    const parsedBody = fenceNode.attributes[constants_1.EXAMPLE_CONTENT_ATTRIBUTE];
+    if (parsedBody) {
+        return toRenderableArray(markdoc_1.default.transform(parsedBody.children, config));
+    }
+    if (!fenceNode.children.length) {
+        return toRenderableArray(markdoc_1.default.transform(markdoc_1.default.parse(content).children, config));
+    }
+    return toRenderableArray(parseRawMarkdown(fenceNode.transformChildren(config), config));
+}
 //# sourceMappingURL=markdoc-example.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.69.0",
+  "version": "0.70.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.15.0",
+    "@redocly/realm-asyncapi-sdk": "0.16.0-next.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -71,7 +71,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.56.0",
+    "@redocly/config": "0.57.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",
@@ -84,7 +84,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "^1.7.5",
+    "openapi-sampler": "^1.7.6",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0"
   },

package/src/components/Button/Button.tsx

@@ -123,7 +123,9 @@ const StyledButton = styled.button<{
     height: var(--button-icon-size);
   }
 
-  &:hover {
+  /* A button that owns an open menu keeps its hovered appearance. */
+  &:hover,
+  &[aria-expanded='true'] {
     background-color: var(--button-bg-color-hover);
     color: var(--button-color-hover);
     border-color: var(--button-border-color-hover);
@@ -145,7 +147,8 @@ const StyledButton = styled.button<{
     border-color: var(--button-border-color-danger);
     background-color: var(--button-bg-color-danger);
 
-    &:hover {
+    &:hover,
+    &[aria-expanded='true'] {
       color: var(--button-content-color-danger-hover);
       border-color: var(--button-border-color-danger-hover);
       background-color: var(--button-bg-color-danger-hover);

package/src/components/Button/variables.ts

@@ -249,20 +249,29 @@ export const button = css`
   --button-group-divider-opacity: 1;
   --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
 
-  .button-group-primary {
-    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+  .button-group-primary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.32;
   }
 
-  .button-group-secondary {
-    --button-group-divider-color: var(--button-content-color); // @presenter Color
+  .button-group-secondary .button {
+    --button-group-divider-color: var(--button-color); // @presenter Color
     --button-group-divider-opacity: 0.12;
   }
 
-  .button-group-outlined {
+  .button-group-outlined .button {
     --button-group-divider-color: var(--button-border-color); // @presenter Color
     --button-group-divider-opacity: 1;
   }
 
+  .button-group-primary .button.button-tone-danger,
+  .button-group-secondary .button.button-tone-danger {
+    --button-group-divider-color: var(--button-content-color-danger); // @presenter Color
+  }
+
+  .button-group-outlined .button.button-tone-danger {
+    --button-group-divider-color: var(--button-border-color-danger); // @presenter Color
+  }
+
   // @tokens End
 `;

package/src/components/Buttons/DownloadButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -18,24 +19,31 @@ export function DownloadButton({
 }: DownloadButtonProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const label = translate('button.download.tooltipText', 'Download description');
 
   return (
     <div data-component-name="Buttons/DownloadButton">
-      <Tooltip
-        tip={translate('button.download.tooltipText', 'Download description')}
-        placement="top"
-        arrowPosition="right"
-      >
-        <a href={data} target="_blank" download rel="noreferrer">
+      <Tooltip tip={label} placement="top" arrowPosition="right">
+        <DownloadLink href={data} target="_blank" download rel="noreferrer" aria-label={label}>
           <Button
             variant="text"
             size="small"
-            aria-label="Download"
+            aria-hidden={true}
+            tabIndex={-1}
             icon={<DownloadIcon />}
             data-testid={dataTestId}
           />
-        </a>
+        </DownloadLink>
       </Tooltip>
     </div>
   );
 }
+
+const DownloadLink = styled.a`
+  text-decoration: none;
+  border-radius: var(--button-border-radius);
+
+  &:focus-visible {
+    outline: 1px solid var(--button-border-color-focused);
+  }
+`;

package/src/components/Catalog/Catalog.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useMemo, JSX } from 'react';
+import React, { type JSX, useState, useMemo } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig } from '@redocly/config';
-import type { ResolvedFilter } from '@redocly/theme/core/types';
-
-import {
+import type {
+  ResolvedFilter,
   BffCatalogEntityList,
   CatalogSwitcherItem,
   CatalogViewMode,
 } from '@redocly/theme/core/types';
+
 import {
   breakpoints,
   customCatalogOptionsCasing,

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -1,7 +1,8 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { CatalogViewMode } from '@redocly/theme/core/types';
+import type { CatalogViewMode } from '@redocly/theme/core/types';
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -1,9 +1,10 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';