@redocly/theme 0.69.0-next.9 → 0.70.0-next.0

package/lib/core/hooks/use-connect-mcp-button.js

@@ -11,15 +11,20 @@ const use_mcp_config_1 = require("./use-mcp-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
 const mcp_1 = require("../constants/mcp");
 const mcp_2 = require("../utils/mcp");
+const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
 const COPIED_RESET_TIMEOUT = 1000;
 function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
-    const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
     const { serverName, serverUrl, cursorUrl, vscodeUrl } = (0, use_mcp_config_1.useMCPConfig)();
     const [copiedOption, setCopiedOption] = (0, react_1.useState)(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setCopiedOption(null), COPIED_RESET_TIMEOUT), []);
     const handleAction = (0, react_1.useCallback)((action) => {
+        telemetry.sendConnectMcpClickedMessage([
+            Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('connectMcp', 'button')), { option: action }),
+        ]);
         const connection = { serverName, url: serverUrl };
         const copyTextMap = {
             copy: JSON.stringify({ [serverName]: { url: serverUrl, description: 'MCP Server' } }, null, 2),
@@ -38,7 +43,7 @@ function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
             vscode: vscodeUrl,
         };
         window.open(urlMap[action], '_blank');
-    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied]);
+    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied, telemetry]);
     const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
     const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
     return {

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-product-picker.js

@@ -33,7 +33,7 @@ function useProductPicker() {
             Array.from(root.classList)
                 .filter((c) => c.startsWith('product-'))
                 .forEach((c) => root.classList.remove(c));
-            root.classList.add((0, utils_1.getProductClassName)(freshProduct.name));
+            root.classList.add((0, utils_2.getSafeClassName)((0, utils_1.getProductClassName)(freshProduct.name)));
         }
         loadAndNavigate({ navigate, to: (0, utils_2.withPathPrefix)(freshProduct.link) });
     }

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

@@ -220,12 +220,14 @@ const useActiveTab = ({ initialTab, tabsId }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(undefined);
     const resolvedActiveTab = activeTab !== null && activeTab !== void 0 ? activeTab : initialTab;
     const prevActiveTabRef = (0, react_1.useRef)(resolvedActiveTab);
+    const isTabResolvedFromHashRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
-        if (activeTab !== undefined) {
+        if (isTabResolvedFromHashRef.current) {
             return;
         }
+        isTabResolvedFromHashRef.current = true;
         setActiveTab(getInitialTab({ initialTab, hash: location.hash, tabsId }));
-    }, [activeTab, initialTab, location.hash, tabsId]);
+    }, [initialTab, location.hash, tabsId]);
     (0, react_1.useEffect)(() => {
         const hasActiveTabChanged = prevActiveTabRef.current !== resolvedActiveTab;
         if (!tabsId || !hasActiveTabChanged) {

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -34,6 +34,8 @@ export declare const useTelemetryFallback: () => {
     sendProductPickerChangedMessage: () => void;
     sendLogoClickedMessage: () => void;
     sendCodeSnippetReportedMessage: () => void;
+    sendConnectMcpClickedMessage: () => void;
+    sendMcpConnectionSnippetCopiedMessage: () => void;
     sendMobileMenuClosedMessage: () => void;
     sendMobileMenuOpenedMessage: () => void;
     sendPageViewedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -39,6 +39,8 @@ const useTelemetryFallback = () => ({
     sendProductPickerChangedMessage: () => { },
     sendLogoClickedMessage: () => { },
     sendCodeSnippetReportedMessage: () => { },
+    sendConnectMcpClickedMessage: () => { },
+    sendMcpConnectionSnippetCopiedMessage: () => { },
     sendMobileMenuClosedMessage: () => { },
     sendMobileMenuOpenedMessage: () => { },
     sendPageViewedMessage: () => { },

package/lib/core/styles/global.js

@@ -592,6 +592,7 @@ const links = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+// oxlint-disable-next-line theme/css-variable-pattern -- `--schema-labels--text-color` is a documented public variable
 const apiReferenceDocs = (0, styled_components_1.css) `
   /* === ref docs and graphql docs specific === */
 

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,21 +1,18 @@
-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;

package/lib/core/utils/class-names.d.ts

@@ -1 +1,2 @@
+export declare function getSafeClassName(className: string): string;
 export declare function concatClassNames(...args: Array<string | undefined>): string;

package/lib/core/utils/class-names.js

@@ -1,7 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSafeClassName = getSafeClassName;
 exports.concatClassNames = concatClassNames;
 const SPACE_DELIMITER = ' ';
+// EasyList/AdGuard ship generic cosmetic rules that hide these exact class tokens on every
+// site; the trailing underscore keeps the class usable without matching the filter lists.
+const ADBLOCK_HIDDEN_CLASS_NAMES = new Set(['product-ad', 'product-ads', 'product-inlist-ad']);
+function getSafeClassName(className) {
+    return ADBLOCK_HIDDEN_CLASS_NAMES.has(className) ? `${className}_` : className;
+}
 function concatClassNames(...args) {
     return args
         .map((className) => (className ? className.trim() : className))

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

@@ -32,21 +32,21 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = Accordion;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
 const constants_1 = require("../../../core/constants");
+const contexts_1 = require("../../../core/contexts");
 function Accordion({ title, expanded = false, className, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
-    return (react_1.default.createElement(AccordionWrapper, { className: className, open: expanded, "data-component-name": constants_1.ACCORDION_COMPONENT_NAME, "data-source": dataSource, "data-hash": dataHash },
+    const groupName = (0, react_1.useContext)(contexts_1.AccordionGroupContext);
+    return (react_1.default.createElement(AccordionWrapper, { className: className, open: expanded, name: groupName !== null && groupName !== void 0 ? groupName : undefined, "data-component-name": constants_1.ACCORDION_COMPONENT_NAME, "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AccordionSummary, null,
             react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { color: "--md-accordion-chevron-icon-color", size: "var(--md-accordion-chevron-icon-size)" }),
             title),
-        react_1.default.createElement(AccordionBody, null, children)));
+        react_1.default.createElement(AccordionBody, null,
+            react_1.default.createElement(contexts_1.AccordionGroupContext.Provider, { value: null }, children))));
 }
 const AccordionWrapper = styled_components_1.default.details `
   margin: var(--md-accordion-margin);

package/lib/markdoc/components/Accordion/AccordionGroup.d.ts

@@ -1,5 +1,6 @@
 import type { JSX, PropsWithChildren } from 'react';
 export type AccordionGroupProps = {
+    singleExpanded?: boolean;
     className?: string;
 };
-export declare function AccordionGroup({ className, children, }: PropsWithChildren<AccordionGroupProps>): JSX.Element;
+export declare function AccordionGroup({ singleExpanded, className, children, }: PropsWithChildren<AccordionGroupProps>): JSX.Element;

package/lib/markdoc/components/Accordion/AccordionGroup.js

@@ -1,14 +1,50 @@
 "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.AccordionGroup = AccordionGroup;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../../../core/constants");
-function AccordionGroup({ className, children, }) {
-    return (react_1.default.createElement(AccordionGroupWrapper, { className: className, "data-component-name": constants_1.ACCORDION_GROUP_COMPONENT_NAME }, children));
+const contexts_1 = require("../../../core/contexts");
+function AccordionGroup({ singleExpanded = false, className, children, }) {
+    const groupName = (0, react_1.useId)();
+    return (react_1.default.createElement(AccordionGroupWrapper, { className: className, "data-component-name": constants_1.ACCORDION_GROUP_COMPONENT_NAME },
+        react_1.default.createElement(contexts_1.AccordionGroupContext.Provider, { value: singleExpanded ? groupName : null }, children)));
 }
 const AccordionGroupWrapper = styled_components_1.default.div `
   margin: var(--md-accordion-group-margin);

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

@@ -45,6 +45,7 @@ const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const PageActions_1 = require("../../../components/PageActions/PageActions");
 const hooks_1 = require("../../../core/hooks");
+const contexts_1 = require("../../../core/contexts");
 const constants_1 = require("../../../core/constants");
 function renderWithSpanWrapper(children) {
     const childrenArray = react_1.default.Children.toArray(children);
@@ -68,10 +69,12 @@ function renderWithSpanWrapper(children) {
 }
 function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
     var _a, _b;
+    var _c;
     const { pathname } = (0, react_router_1.useLocation)();
     const { usePageProps } = (0, hooks_1.useThemeHooks)();
     const pageProps = usePageProps();
-    const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
+    // The page-type fallback is only for backward compatibility; templates set the scope.
+    const withPageActions = (_c = (0, react_1.useContext)(contexts_1.PageActionsContext)) !== null && _c !== void 0 ? _c : (((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc');
     const headingTextId = `${id}-heading-text`;
     const linkEl = (react_1.default.createElement("a", { "aria-labelledby": headingTextId, href: `#${id}`, className: (0, utils_1.concatClassNames)(constants_1.ANCHOR_CLASS, 'before') },
         react_1.default.createElement(LinkIcon_1.LinkIcon, { "aria-hidden": "true", focusable: "false", color: "--heading-anchor-color" })));
@@ -80,7 +83,7 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
         react_1.default.createElement(HeadingContentWrapper, null,
             linkEl,
             headingText,
-            isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
+            withPageActions && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
 }
 const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;

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/accordion-group.js

@@ -4,6 +4,9 @@ exports.accordionGroup = void 0;
 exports.accordionGroup = {
     schema: {
         render: 'AccordionGroup',
+        attributes: {
+            singleExpanded: { type: Boolean, default: false },
+        },
     },
     tagName: 'accordion-group',
 };

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-next.9",
+  "version": "0.70.0-next.0",
   "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-next.3",
+    "@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",

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';