@redocly/theme 0.56.0-next.6 → 0.56.0-next.8

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -25,7 +25,7 @@ function Breadcrumbs(props) {
                         payload: {
                             link: breadcrumb.link,
                             position: idx + 1,
-                            total_breadcrumbs: breadcrumbs.length,
+                            totalBreadcrumbs: breadcrumbs.length,
                         },
                     });
                 } }),

package/lib/components/Button/Button.js

@@ -82,6 +82,7 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
   background-color: var(--button-bg-color);
   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
   box-shadow: var(--button-box-shadow);
+  backdrop-filter: var(--button-backdrop-filter, none);
 
   font-weight: var(--button-font-weight);
   font-size: var(--button-font-size);

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -42,6 +42,7 @@ function CatalogCard({ entity, catalogConfig }) {
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                             },
                             icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
+                            textTransform: 'none',
                         } })),
                 react_1.default.createElement(MetadataColumn, null,
                     react_1.default.createElement(MetadataLabel, null, "Owners:"),
@@ -51,6 +52,7 @@ function CatalogCard({ entity, catalogConfig }) {
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                                 borderRadius: 'var(--border-radius-xl)',
                             },
+                            textTransform: 'none',
                         } })))),
         react_1.default.createElement(Divider, null),
         react_1.default.createElement(CardFooter, null,
@@ -61,6 +63,7 @@ function CatalogCard({ entity, catalogConfig }) {
                     },
                     borderless: true,
                     color: 'grey',
+                    textTransform: 'none',
                 }, itemsToShow: 3 }),
             react_1.default.createElement(ArrowCircle, null,
                 react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "16px" }),
@@ -120,6 +123,7 @@ const CardContent = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 const CardFooter = styled_components_1.default.div `
+  height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -131,8 +135,7 @@ const Divider = styled_components_1.default.div `
   background-color: var(--catalog-card-divider-color);
 `;
 const CatalogCardWrapper = styled_components_1.default.div `
-  min-height: var(--catalog-card-min-height);
-  height: 100%;
+  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

package/lib/components/Catalog/CatalogEntity/CatalogEntityInfoBar.d.ts

@@ -4,5 +4,6 @@ export type CatalogEntityInfoBarProps = {
     rightContent?: ReactNode;
     withSeparator?: boolean;
     hoverEffect?: boolean;
+    isCodeBlock?: boolean;
 };
-export declare function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator, hoverEffect, }: CatalogEntityInfoBarProps): JSX.Element;
+export declare function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator, hoverEffect, isCodeBlock, }: CatalogEntityInfoBarProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityInfoBar.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityInfoBar = CatalogEntityInfoBar;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, hoverEffect = true, }) {
+function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, hoverEffect = true, isCodeBlock = false, }) {
     return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar", hoverEffect: hoverEffect },
         react_1.default.createElement(LeftColumn, { withSeparator: withSeparator }, leftContent),
-        rightContent && react_1.default.createElement(RightColumn, null, rightContent)));
+        rightContent && react_1.default.createElement(RightColumn, { isCodeBlock: isCodeBlock }, rightContent)));
 }
 const InfoBarWrapper = styled_components_1.default.div `
   display: grid;
@@ -42,6 +42,9 @@ const LeftColumn = styled_components_1.default.div `
   justify-self: start;
   text-align: left;
   border-right: ${({ withSeparator }) => withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 const RightColumn = styled_components_1.default.div `
   color: var(--catalog-metadata-value-color);
@@ -49,5 +52,6 @@ const RightColumn = styled_components_1.default.div `
   grid-area: right;
   justify-self: end;
   text-align: right;
+  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
 `;
 //# sourceMappingURL=CatalogEntityInfoBar.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.js

@@ -41,10 +41,20 @@ exports.CatalogEntityMetadata = CatalogEntityMetadata;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const utils_1 = require("../../../core/utils");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const MAX_INITIAL_ITEMS = 4;
+function renderMetadataValue(value) {
+    if ((0, utils_1.isPlainObject)(value)) {
+        return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, hideHeader: true });
+    }
+    if (Array.isArray(value)) {
+        return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, hideHeader: true })) : (react_1.default.createElement("span", null, String(item))))))));
+    }
+    return react_1.default.createElement("span", null, String(value));
+}
 function CatalogEntityMetadata({ entity }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -60,12 +70,15 @@ function CatalogEntityMetadata({ entity }) {
         react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
         visibleMetadata.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
                 (0, utils_1.capitalize)(key),
-                ":"), rightContent: react_1.default.createElement(Value, null, value), hoverEffect: false }))),
+                ":"), rightContent: react_1.default.createElement(Value, null, renderMetadataValue(value)), hoverEffect: false, isCodeBlock: (0, utils_1.isPlainObject)(value) || Array.isArray(value) }))),
         hasMoreItems && (react_1.default.createElement(ShowMoreButton, { onClick: () => setIsOn(!isOn) },
             isOn ? 'Show less' : 'Show more',
             " ",
             react_1.default.createElement(ChevronIcon, { "$isExpanded": isOn })))));
 }
+const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonViewer) `
+  text-align: left;
+`;
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
@@ -83,6 +96,10 @@ const Value = styled_components_1.default.span `
   color: var(--catalog-metadata-value-color);
   font-weight: var(--font-weight-medium);
 `;
+const ArrayWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
 const Heading = styled_components_1.default.h2 `
   margin-bottom: var(--spacing-base);
   margin-top: 0;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.js

@@ -14,6 +14,6 @@ function ContactProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SlackIcon_1.SlackIcon, null),
-                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, style: { backgroundColor: 'var(--bg-color)' } }, channel.name)))) })));
+                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)' } }, channel.name)))) })));
 }
 //# sourceMappingURL=ContactProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty.js

@@ -17,7 +17,7 @@ function GitProperty({ entity }) {
                 "Repositories"), content: react_1.default.createElement(react_1.default.Fragment, null, git === null || git === void 0 ? void 0 : git.map((repo) => {
                 const url = new URL(repo);
                 const repoName = (0, utils_1.removeLeadingSlash)(url.pathname);
-                return (react_1.default.createElement(Tag_1.Tag, { key: repo, style: { backgroundColor: 'var(--bg-color)' } }, repoName));
+                return (react_1.default.createElement(Tag_1.Tag, { key: repo, textTransform: "none", style: { backgroundColor: 'var(--bg-color)' } }, repoName));
             })) })));
 }
 //# sourceMappingURL=GitProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.js

@@ -19,6 +19,7 @@ function TagsProperty({ entity }) {
                     },
                     borderless: true,
                     color: 'grey',
+                    textTransform: 'none',
                 } }), hoverEffect: false })));
 }
 //# sourceMappingURL=TagsProperty.js.map

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -8,6 +8,7 @@ exports.CatalogEntityTypeTag = CatalogEntityTypeTag;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
+const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const entityTagColorMap = {
     service: 'blue',
     domain: 'grass',
@@ -26,7 +27,8 @@ const getEntityTagColor = (type) => {
 };
 exports.getEntityTagColor = getEntityTagColor;
 function CatalogEntityTypeTag({ entityType }) {
-    return (react_1.default.createElement(EntityTypeTagWrapper, { entityType: entityType }, entityType));
+    return (react_1.default.createElement(EntityTypeTagWrapper, { entityType: entityType },
+        react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entityType)));
 }
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   font-size: var(--font-size-base);

package/lib/components/Catalog/CatalogTableView/CatalogDomainsCell.js

@@ -14,6 +14,7 @@ function CatalogDomainsCell({ domains }) {
                     backgroundColor: 'transparent',
                     borderRadius: 'var(--border-radius-xl)',
                 },
+                textTransform: 'none',
             } })));
 }
 //# sourceMappingURL=CatalogDomainsCell.js.map

package/lib/components/Catalog/CatalogTableView/CatalogOwnersCell.js

@@ -14,6 +14,7 @@ function CatalogOwnersCell({ owners }) {
                     backgroundColor: 'transparent',
                     borderRadius: 'var(--border-radius-xl)',
                 },
+                textTransform: 'none',
             } })));
 }
 //# sourceMappingURL=CatalogOwnersCell.js.map

package/lib/components/Catalog/CatalogTableView/CatalogTableHeaderCell.js

@@ -41,7 +41,7 @@ const CatalogTableHeaderCell = ({ column, handleSortClick, isColumnSorted, setSo
     });
     return (react_1.default.createElement(TableHeaderCellWrapper, { key: column.key, "data-component-name": "Catalog/CatalogTableView/CatalogTableHeaderCell", onClick: handleCellClick, "$sortable": Boolean(column.sortable && sortKey) },
         react_1.default.createElement(HeaderContent, null,
-            react_1.default.createElement(HeaderTitle, null, column.title),
+            react_1.default.createElement("span", null, column.title),
             column.sortable && sortKey && (react_1.default.createElement(SortIndicator, null,
                 react_1.default.createElement(SortArrow, { "$isActive": isUpActive },
                     react_1.default.createElement(CaretUpIcon_1.CaretUpIcon, { size: "9px", color: isUpActive
@@ -65,12 +65,8 @@ const TableHeaderCellWrapper = styled_components_1.default.div `
 const HeaderContent = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 `;
-const HeaderTitle = styled_components_1.default.span `
-  flex: 1;
-`;
 const SortIndicator = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -12,6 +12,7 @@ const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableVie
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const useCatalogTableViewRow_1 = require("../../../core/hooks/catalog/useCatalogTableViewRow");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
+const Link_1 = require("../../Link/Link");
 const baseColumns = [
     {
         key: 'entity',
@@ -66,16 +67,15 @@ const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, col
         catalogConfig,
         entitiesCatalogConfig,
     });
-    const handleRowClick = () => {
-        window.location.assign(getEntityDetailsLink());
-    };
-    return (react_1.default.createElement(TableRow, { key: entity.id, columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto'), onClick: () => handleRowClick() }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
+    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: getEntityDetailsLink(), style: { color: 'var(--catalog-page-wrapper-text-color)' } }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
 };
 exports.CatalogTableViewRow = CatalogTableViewRow;
-const TableRow = styled_components_1.default.div `
+const TableRow = (0, styled_components_1.default)(Link_1.Link) `
   display: grid;
-  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) => columnsWidths
-    .map((width, index) => columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width)
+  grid-template-columns: ${({ $columnsWidths, $columnsMinWidths }) => $columnsWidths
+    .map((width, index) => $columnsMinWidths[index] !== 'auto'
+    ? `minmax(${$columnsMinWidths[index]}, ${width})`
+    : width)
     .join(' ')};
   border-bottom: 1px solid var(--catalog-table-border-color);
   cursor: pointer;

package/lib/components/Catalog/CatalogTableView/CatalogTagsCell.js

@@ -15,6 +15,7 @@ function CatalogTagsCell({ entity }) {
                 },
                 borderless: true,
                 color: 'grey',
+                textTransform: 'none',
             } })));
 }
 //# sourceMappingURL=CatalogTagsCell.js.map

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -26,7 +26,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
     const remainingCount = items.length - itemsToShow;
     return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
         react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
             react_1.default.createElement(MoreTagsButton, null,
                 "+",

package/lib/components/Catalog/variables.js

@@ -193,9 +193,9 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog card
     */
-  --catalog-card-min-height: 194px;
-  --catalog-card-min-width: 490px;
-  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-height: 241px;
+  --catalog-card-min-width: 400px;
+  --catalog-card-padding-vertical: var(--spacing-md);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -251,6 +251,11 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-title-line-height: var(--line-height-lg);
   --catalog-card-title-line-clamp: 2;
 
+  /**
+    * @tokens Catalog card footer
+    */
+  --catalog-card-footer-height: 72px;
+
   /**
     * @tokens Catalog card description
     */

package/lib/components/CodeBlock/CodeBlock.js

@@ -88,6 +88,7 @@ function CodeBlock(_a) {
 }
 const ContainerWrapper = styled_components_1.default.div `
   display: grid; // prevents content to overstretch
+  position: relative;
 `;
 const CodeBlockWrapper = styled_components_1.default.div `
   border: 1px solid var(--border-color-secondary);

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -30,6 +30,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         deselect: null,
         report: null,
     };
+    const isEmptyTitle = !title && !tabs;
     const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
@@ -41,7 +42,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
             copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.copy.tooltipText", placement: "top" },
-                react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
+                react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data
                         if (copy === null || copy === void 0 ? void 0 : copy.onClick) {
@@ -50,15 +51,16 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
                         else {
                             telemetry.send({
                                 type: 'openapi_docs.copy_code_snippet.clicked',
-                                payload: { snippet_type: 'copy' },
+                                payload: { snippetType: 'copy' },
                             });
                         }
                     } }))) : null))) : null;
-    return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
+    return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className, "$isEmptyTitle": isEmptyTitle }, children ? children : defaultControls)) : null;
 }
 const ContainerWrapper = styled_components_1.default.div `
   display: grid;
   justify-content: end;
+  gap: var(--spacing-sm);
   font-size: var(--code-block-controls-font-size);
   font-family: var(--code-block-controls-font-family);
   background-color: var(--code-block-controls-bg-color);
@@ -67,6 +69,17 @@ const ContainerWrapper = styled_components_1.default.div `
   line-height: var(--line-height-lg);
   min-height: var(--control-height-base);
   grid-template-columns: 1fr auto;
+  ${({ $isEmptyTitle }) => $isEmptyTitle &&
+    `
+      grid-template-columns: 1fr;
+      padding-left: var(--spacing-xxs);
+      position: absolute;
+      right: 0;
+      width: auto;
+      border: none;
+      background-color: transparent;
+      margin: 0;
+    `}
 `;
 const Title = styled_components_1.default.span `
   display: flex;
@@ -81,11 +94,19 @@ const ControlsWrapper = styled_components_1.default.div `
   align-items: center;
   gap: var(--spacing-xxs);
   justify-content: end;
-  margin-left: var(--spacing-sm);
 `;
 const ControlButton = (0, styled_components_1.default)(Button_1.Button) `
+  --button-icon-size: 16px; /* increase icon size for code blocks */
+  --button-icon-padding: 3px;
+  --button-backdrop-filter: blur(8px); /* backdrop filter when there is text under the button */
+
   & + & {
     margin-left: 0;
   }
 `;
+const StyledCopyButton = (0, styled_components_1.default)(CopyButton_1.CopyButton) `
+  --button-icon-size: 16px; /* increase icon size for code blocks */
+  --button-icon-padding: 3px;
+  --button-backdrop-filter: blur(8px);
+`;
 //# sourceMappingURL=CodeBlockControls.js.map

package/lib/components/Feedback/Feedback.js

@@ -64,7 +64,7 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    telemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
+                    telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

package/lib/components/Filter/FilterCheckboxes.js

@@ -20,13 +20,14 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
     const telemetry = useTelemetry();
     return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
-        react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.options.map(({ value, count }) => {
+        react_1.default.createElement(FilterOptions_1.FilterOptions, null, (filter.filteredOptions || filter.options).map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
             return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                     filter.toggleOption(value);
                     telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
                 } },
-                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase()) }),
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) ||
+                        filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase()) }),
                 react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
                 showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
         }))));

package/lib/components/Image/Image.js

@@ -30,6 +30,7 @@ exports.Image = Image;
 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");
 function Image(props) {
     const { src, srcSet, alt, className, width, height, border, style, withLightbox, lightboxStyle } = props;
     const lightboxContainerRef = (0, react_1.useRef)(null);
@@ -52,6 +53,7 @@ function Image(props) {
     const handleCloseLightbox = (0, react_1.useCallback)(() => {
         setLightboxImage(undefined);
     }, []);
+    (0, hooks_1.useModalScrollLock)(!!lightboxImage);
     (0, react_1.useEffect)(() => {
         var _a;
         if (lightboxImage) {

package/lib/components/Search/SearchDialog.js

@@ -115,9 +115,9 @@ function SearchDialog({ onClose, className }) {
                     payload: {
                         query,
                         url: item.document.url,
-                        total_results: results.length.toString(),
+                        totalResults: results.length.toString(),
                         index: index.toString(),
-                        search_engine: mode,
+                        searchEngine: mode,
                     },
                 });
                 onClose();

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

@@ -52,6 +52,10 @@ export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
         from?: string;
         to?: string;
     };
+    filteredOptions?: {
+        value: string;
+        count: number;
+    }[];
 };
 export type CatalogItem = {
     title: string;

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

@@ -1,30 +1,15 @@
 import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
 type ExtractEventType<T> = T extends {
-    span?: {
-        attributes?: {
-            'cloudevents.event_type': infer EventType;
-        };
-    };
+    type: infer EventType;
 } ? EventType : never;
 export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
 type GetMessageForEventType<TEventType extends EventType> = Extract<AsyncApiRealm.Messages, {
-    span?: {
-        attributes?: {
-            'cloudevents.event_type': TEventType;
-        };
-    };
+    type: TEventType;
 }>;
 type ExtractEventDataForType<TEventType extends EventType> = GetMessageForEventType<TEventType> extends {
-    span?: {
-        attributes?: infer Attrs;
-    };
-} ? {
-    [K in keyof Attrs as K extends `cloudevents.event_data.${string}` ? K : never]: Attrs[K];
-} : never;
-export type ConvertEventDataToPayload<T> = {
-    [K in keyof T as K extends `cloudevents.event_data.${infer FieldName}` ? FieldName : never]: T[K];
-};
-export type EventPayload<TEventType extends EventType> = ConvertEventDataToPayload<ExtractEventDataForType<TEventType>>;
+    data: infer Data;
+} ? Data : never;
+export type EventPayload<TEventType extends EventType> = ExtractEventDataForType<TEventType>;
 export interface SendEventParams<TEventType extends EventType> {
     type: TEventType;
     payload?: EventPayload<TEventType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.56.0-next.6",
+  "version": "0.56.0-next.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -36,7 +36,7 @@ export function Breadcrumbs(props: {
                   payload: {
                     link: breadcrumb.link,
                     position: idx + 1,
-                    total_breadcrumbs: breadcrumbs.length,
+                    totalBreadcrumbs: breadcrumbs.length,
                   },
                 });
               }}

package/src/components/Button/Button.tsx

@@ -96,6 +96,7 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
   background-color: var(--button-bg-color);
   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
   box-shadow: var(--button-box-shadow);
+  backdrop-filter: var(--button-backdrop-filter, none);
 
   font-weight: var(--button-font-weight);
   font-size: var(--button-font-size);

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

@@ -60,6 +60,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                 },
                 icon: <GraphIcon color="var(--color-green-8)" />,
+                textTransform: 'none',
               }}
             />
           </MetadataColumn>
@@ -74,6 +75,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
                 },
+                textTransform: 'none',
               }}
             />
           </MetadataColumn>
@@ -92,6 +94,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
             },
             borderless: true,
             color: 'grey',
+            textTransform: 'none',
           }}
           itemsToShow={3}
         />
@@ -166,6 +169,7 @@ const CardContent = styled.div`
 `;
 
 const CardFooter = styled.div`
+  height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -179,8 +183,7 @@ const Divider = styled.div`
 `;
 
 const CatalogCardWrapper = styled.div`
-  min-height: var(--catalog-card-min-height);
-  height: 100%;
+  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -6,6 +6,7 @@ export type CatalogEntityInfoBarProps = {
   rightContent?: ReactNode;
   withSeparator?: boolean;
   hoverEffect?: boolean;
+  isCodeBlock?: boolean;
 };
 
 export function CatalogEntityInfoBar({
@@ -13,6 +14,7 @@ export function CatalogEntityInfoBar({
   rightContent,
   withSeparator = true,
   hoverEffect = true,
+  isCodeBlock = false,
 }: CatalogEntityInfoBarProps): JSX.Element {
   return (
     <InfoBarWrapper
@@ -20,7 +22,7 @@ export function CatalogEntityInfoBar({
       hoverEffect={hoverEffect}
     >
       <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
-      {rightContent && <RightColumn>{rightContent}</RightColumn>}
+      {rightContent && <RightColumn isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
     </InfoBarWrapper>
   );
 }
@@ -59,12 +61,16 @@ const LeftColumn = styled.div<{ withSeparator?: boolean }>`
   text-align: left;
   border-right: ${({ withSeparator }) =>
     withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 
-const RightColumn = styled.div`
+const RightColumn = styled.div<{ isCodeBlock?: boolean }>`
   color: var(--catalog-metadata-value-color);
   font-weight: var(--font-weight-medium);
   grid-area: right;
   justify-self: end;
   text-align: right;
+  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
 `;

package/src/components/Catalog/CatalogEntity/CatalogEntityMetadata.tsx

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { capitalize } from '@redocly/theme/core/utils';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 
@@ -13,6 +14,30 @@ export type CatalogEntityMetadataProps = {
   entity: BffCatalogEntity;
 };
 
+function renderMetadataValue(value: any): React.JSX.Element {
+  if (isPlainObject(value)) {
+    return <JsonViewerWrapper data={value} expandLevel={3} hideHeader={true} />;
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <ArrayWrapper>
+        {value.map((item, index) => (
+          <div key={index}>
+            {isPlainObject(item) ? (
+              <JsonViewerWrapper data={item} expandLevel={3} hideHeader={true} />
+            ) : (
+              <span>{String(item)}</span>
+            )}
+          </div>
+        ))}
+      </ArrayWrapper>
+    );
+  }
+
+  return <span>{String(value)}</span>;
+}
+
 export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -25,6 +50,7 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   if (!metadata.length) {
     return null;
   }
+
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
       <Heading>{translate('catalog.entity.metadata.title')}</Heading>
@@ -32,8 +58,9 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
         <CatalogEntityInfoBar
           key={key}
           leftContent={<Label>{capitalize(key)}:</Label>}
-          rightContent={<Value>{value}</Value>}
+          rightContent={<Value>{renderMetadataValue(value)}</Value>}
           hoverEffect={false}
+          isCodeBlock={isPlainObject(value) || Array.isArray(value)}
         />
       ))}
       {hasMoreItems && (
@@ -45,6 +72,10 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   );
 }
 
+const JsonViewerWrapper = styled(JsonViewer)`
+  text-align: left;
+`;
+
 const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -65,6 +96,11 @@ const Value = styled.span`
   font-weight: var(--font-weight-medium);
 `;
 
+const ArrayWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 const Heading = styled.h2`
   margin-bottom: var(--spacing-base);
   margin-top: 0;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.tsx

@@ -24,7 +24,11 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         content={
           <>
             {channels?.map((channel) => (
-              <Tag key={channel.name} style={{ backgroundColor: 'var(--bg-color)' }}>
+              <Tag
+                key={channel.name}
+                textTransform="none"
+                style={{ backgroundColor: 'var(--bg-color)' }}
+              >
                 {channel.name}
               </Tag>
             ))}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty.tsx

@@ -28,7 +28,7 @@ export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
               const url = new URL(repo);
               const repoName = removeLeadingSlash(url.pathname);
               return (
-                <Tag key={repo} style={{ backgroundColor: 'var(--bg-color)' }}>
+                <Tag key={repo} textTransform="none" style={{ backgroundColor: 'var(--bg-color)' }}>
                   {repoName}
                 </Tag>
               );

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -30,6 +30,7 @@ export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
               },
               borderless: true,
               color: 'grey',
+              textTransform: 'none',
             }}
           />
         }

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { EntityType } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 
 export type CatalogEntityTypeTagProps = {
   entityType: string;
@@ -30,7 +31,9 @@ export const getEntityTagColor = (type: EntityType): string => {
 
 export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element {
   return (
-    <EntityTypeTagWrapper entityType={entityType as EntityType}>{entityType}</EntityTypeTagWrapper>
+    <EntityTypeTagWrapper entityType={entityType as EntityType}>
+      <CatalogHighlight>{entityType}</CatalogHighlight>
+    </EntityTypeTagWrapper>
   );
 }
 

package/src/components/Catalog/CatalogTableView/CatalogDomainsCell.tsx

@@ -19,6 +19,7 @@ export function CatalogDomainsCell({ domains }: CatalogDomainsCellProps) {
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
           },
+          textTransform: 'none',
         }}
       />
     </div>

package/src/components/Catalog/CatalogTableView/CatalogOwnersCell.tsx

@@ -19,6 +19,7 @@ export function CatalogOwnersCell({ owners }: CatalogOwnersCellProps) {
             backgroundColor: 'transparent',
             borderRadius: 'var(--border-radius-xl)',
           },
+          textTransform: 'none',
         }}
       />
     </div>

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -39,7 +39,7 @@ export const CatalogTableHeaderCell = <T extends BaseEntity>({
       $sortable={Boolean(column.sortable && sortKey)}
     >
       <HeaderContent>
-        <HeaderTitle>{column.title}</HeaderTitle>
+        <span>{column.title}</span>
         {column.sortable && sortKey && (
           <SortIndicator>
             <SortArrow $isActive={isUpActive}>
@@ -83,14 +83,9 @@ const TableHeaderCellWrapper = styled.div<{ $sortable: boolean }>`
 const HeaderContent = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 `;
 
-const HeaderTitle = styled.span`
-  flex: 1;
-`;
-
 const SortIndicator = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -10,6 +10,8 @@ import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableV
 import { useCatalogTableViewRow } from '@redocly/theme/core/hooks/catalog/useCatalogTableViewRow';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
+import { Link } from '../../Link/Link';
+
 export type BaseEntity = {
   id: string;
   key: string;
@@ -94,16 +96,13 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
     entitiesCatalogConfig,
   });
 
-  const handleRowClick = (): void => {
-    window.location.assign(getEntityDetailsLink());
-  };
-
   return (
     <TableRow
       key={entity.id}
-      columnsWidths={columns.map((column) => column.width || '1fr')}
-      columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
-      onClick={() => handleRowClick()}
+      $columnsWidths={columns.map((column) => column.width || '1fr')}
+      $columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
+      to={getEntityDetailsLink()}
+      style={{ color: 'var(--catalog-page-wrapper-text-color)' }}
     >
       {columns.map((column) => (
         <TableCell
@@ -117,12 +116,14 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
   );
 };
 
-const TableRow = styled.div<{ columnsWidths: string[]; columnsMinWidths: string[] }>`
+const TableRow = styled(Link)<{ $columnsWidths: string[]; $columnsMinWidths: string[] }>`
   display: grid;
-  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) =>
-    columnsWidths
+  grid-template-columns: ${({ $columnsWidths, $columnsMinWidths }) =>
+    $columnsWidths
       .map((width, index) =>
-        columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width,
+        $columnsMinWidths[index] !== 'auto'
+          ? `minmax(${$columnsMinWidths[index]}, ${width})`
+          : width,
       )
       .join(' ')};
   border-bottom: 1px solid var(--catalog-table-border-color);

package/src/components/Catalog/CatalogTableView/CatalogTagsCell.tsx

@@ -21,6 +21,7 @@ export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
           },
           borderless: true,
           color: 'grey',
+          textTransform: 'none',
         }}
       />
     </div>

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -51,7 +51,12 @@ export function CatalogTagsWithTooltip({
     <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
       <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
         {displayedItems.map((item, index) => (
-          <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
+          <Tag
+            key={`${item}-${index}`}
+            {...tagProps}
+            textTransform="none"
+            maxLength={CATALOG_TAG_MAX_LENGTH}
+          >
             <CatalogHighlight>{item}</CatalogHighlight>
           </Tag>
         ))}

package/src/components/Catalog/variables.ts

@@ -191,9 +191,9 @@ export const catalog = css`
   /**
     * @tokens Catalog card
     */
-  --catalog-card-min-height: 194px;
-  --catalog-card-min-width: 490px;
-  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-height: 241px;
+  --catalog-card-min-width: 400px;
+  --catalog-card-padding-vertical: var(--spacing-md);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -249,6 +249,11 @@ export const catalog = css`
   --catalog-card-title-line-height: var(--line-height-lg);
   --catalog-card-title-line-clamp: 2;
 
+  /**
+    * @tokens Catalog card footer
+    */
+  --catalog-card-footer-height: 72px;
+
   /**
     * @tokens Catalog card description
     */

package/src/components/CodeBlock/CodeBlock.tsx

@@ -148,6 +148,7 @@ export function CodeBlock({
 
 const ContainerWrapper = styled.div`
   display: grid; // prevents content to overstretch
+  position: relative;
 `;
 
 const CodeBlockWrapper = styled.div`

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -72,6 +72,8 @@ export function CodeBlockControls({
     report: null,
   };
 
+  const isEmptyTitle = !title && !tabs;
+
   const defaultControls = controls ? (
     <>
       {title && <Title>{title}</Title>}
@@ -141,7 +143,7 @@ export function CodeBlockControls({
 
         {copy && !codeSnippet?.copy?.hide ? (
           <TooltipWrapper tooltipTranslationKey="codeSnippet.copy.tooltipText" placement="top">
-            <CopyButton
+            <StyledCopyButton
               data={copy.data}
               data-source={copy.dataSource}
               data-hash={copy.dataHash}
@@ -156,7 +158,7 @@ export function CodeBlockControls({
                 } else {
                   telemetry.send({
                     type: 'openapi_docs.copy_code_snippet.clicked',
-                    payload: { snippet_type: 'copy' },
+                    payload: { snippetType: 'copy' },
                   });
                 }
               }}
@@ -168,15 +170,20 @@ export function CodeBlockControls({
   ) : null;
 
   return children || controls ? (
-    <ContainerWrapper data-component-name="CodeBlock/CodeBlockControls" className={className}>
+    <ContainerWrapper
+      data-component-name="CodeBlock/CodeBlockControls"
+      className={className}
+      $isEmptyTitle={isEmptyTitle}
+    >
       {children ? children : defaultControls}
     </ContainerWrapper>
   ) : null;
 }
 
-const ContainerWrapper = styled.div`
+const ContainerWrapper = styled.div<{ $isEmptyTitle: boolean }>`
   display: grid;
   justify-content: end;
+  gap: var(--spacing-sm);
   font-size: var(--code-block-controls-font-size);
   font-family: var(--code-block-controls-font-family);
   background-color: var(--code-block-controls-bg-color);
@@ -185,6 +192,18 @@ const ContainerWrapper = styled.div`
   line-height: var(--line-height-lg);
   min-height: var(--control-height-base);
   grid-template-columns: 1fr auto;
+  ${({ $isEmptyTitle }) =>
+    $isEmptyTitle &&
+    `
+      grid-template-columns: 1fr;
+      padding-left: var(--spacing-xxs);
+      position: absolute;
+      right: 0;
+      width: auto;
+      border: none;
+      background-color: transparent;
+      margin: 0;
+    `}
 `;
 
 const Title = styled.span`
@@ -201,11 +220,20 @@ const ControlsWrapper = styled.div`
   align-items: center;
   gap: var(--spacing-xxs);
   justify-content: end;
-  margin-left: var(--spacing-sm);
 `;
 
 const ControlButton = styled(Button)`
+  --button-icon-size: 16px; /* increase icon size for code blocks */
+  --button-icon-padding: 3px;
+  --button-backdrop-filter: blur(8px); /* backdrop filter when there is text under the button */
+
   & + & {
     margin-left: 0;
   }
 `;
+
+const StyledCopyButton = styled(CopyButton)`
+  --button-icon-size: 16px; /* increase icon size for code blocks */
+  --button-icon-padding: 3px;
+  --button-backdrop-filter: blur(8px);
+`;

package/src/components/Feedback/Feedback.tsx

@@ -58,7 +58,7 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
           settings={settings}
           onSubmit={(values) => {
             submitFeedback({ type, values, path });
-            telemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
+            telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
           }}
         />
       </FeedbackWrapper>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -28,7 +28,7 @@ export function FilterCheckboxes({
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <FilterOptions>
-        {filter.options.map(({ value, count }) => {
+        {(filter.filteredOptions || filter.options).map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
           return (
             <FilterCheckboxOption
@@ -39,7 +39,12 @@ export function FilterCheckboxes({
                 telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
               }}
             >
-              <CheckboxIcon checked={filter.selectedOptions.has(value?.toLowerCase())} />
+              <CheckboxIcon
+                checked={
+                  filter.selectedOptions.has(value) ||
+                  filter.selectedOptions.has(value?.toLowerCase())
+                }
+              />
               <FilterOptionLabel data-translation-key={value}>
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>

package/src/components/Image/Image.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { KeyboardEvent, JSX } from 'react';
 
 import { parseSrcSet, parseStyleString } from '@redocly/theme/core/utils';
+import { useModalScrollLock } from '@redocly/theme/core/hooks';
 
 export type ImageProps = {
   src?: string;
@@ -49,6 +50,7 @@ export function Image(props: ImageProps): JSX.Element {
     setLightboxImage(undefined);
   }, []);
 
+  useModalScrollLock(!!lightboxImage);
   useEffect(() => {
     if (lightboxImage) {
       lightboxContainerRef.current?.focus();

package/src/components/Search/SearchDialog.tsx

@@ -144,9 +144,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               payload: {
                 query,
                 url: item.document.url,
-                total_results: results.length.toString(),
+                totalResults: results.length.toString(),
                 index: index.toString(),
-                search_engine: mode,
+                searchEngine: mode,
               },
             });
             onClose();

package/src/core/types/catalog.ts

@@ -54,6 +54,10 @@ export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
   selectOption: (option: string) => void;
   parentUsed: boolean;
   selectedOptions: Set<string> | { from?: string; to?: string };
+  filteredOptions?: {
+    value: string;
+    count: number;
+  }[];
 };
 
 export type CatalogItem = {

package/src/core/types/telemetry.ts

@@ -1,7 +1,7 @@
 import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
 
 type ExtractEventType<T> = T extends {
-  span?: { attributes?: { 'cloudevents.event_type': infer EventType } };
+  type: infer EventType;
 }
   ? EventType
   : never;
@@ -10,25 +10,17 @@ export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
 
 type GetMessageForEventType<TEventType extends EventType> = Extract<
   AsyncApiRealm.Messages,
-  { span?: { attributes?: { 'cloudevents.event_type': TEventType } } }
+  { type: TEventType }
 >;
 
 type ExtractEventDataForType<TEventType extends EventType> =
   GetMessageForEventType<TEventType> extends {
-    span?: { attributes?: infer Attrs };
+    data: infer Data;
   }
-    ? {
-        [K in keyof Attrs as K extends `cloudevents.event_data.${string}` ? K : never]: Attrs[K];
-      }
+    ? Data
     : never;
 
-export type ConvertEventDataToPayload<T> = {
-  [K in keyof T as K extends `cloudevents.event_data.${infer FieldName}` ? FieldName : never]: T[K];
-};
-
-export type EventPayload<TEventType extends EventType> = ConvertEventDataToPayload<
-  ExtractEventDataForType<TEventType>
->;
+export type EventPayload<TEventType extends EventType> = ExtractEventDataForType<TEventType>;
 
 export interface SendEventParams<TEventType extends EventType> {
   type: TEventType;