@redocly/theme 0.56.0-next.7 → 0.56.0-next.9

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

@@ -27,7 +27,7 @@ const getEntityTagColor = (type) => {
 };
 exports.getEntityTagColor = getEntityTagColor;
 function CatalogEntityTypeTag({ entityType }) {
-    return (react_1.default.createElement(EntityTypeTagWrapper, { entityType: entityType },
+    return (react_1.default.createElement(EntityTypeTagWrapper, { entityType: entityType, "data-component-name": "Catalog/CatalogEntityTypeTag" },
         react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entityType)));
 }
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `

package/lib/components/Catalog/CatalogPageDescription.js

@@ -11,7 +11,7 @@ const H3_1 = require("../../components/Typography/H3");
 const Tag_1 = require("../../components/Tag/Tag");
 function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
     return (react_1.default.createElement(CatalogPageDescriptionWrapper, null,
-        react_1.default.createElement(CatalogTitleWrapper, null,
+        react_1.default.createElement(CatalogTitleWrapper, { "data-component-name": "Catalog/CatalogEntityTitle" },
             react_1.default.createElement(CatalogTitle, { "data-translation-key": titleTranslationKey }, title),
             react_1.default.createElement(Tag_1.Tag, { borderless: true, textTransform: "none" }, tag)),
         react_1.default.createElement(CatalogDescription, { "data-translation-key": descriptionTranslationKey }, description)));

package/lib/components/Catalog/CatalogSortButton.js

@@ -39,13 +39,13 @@ function CatalogSortButton({ onSortChange, currentSort, }) {
         const newSort = currentSort === `-${field}` ? field : `-${field}`;
         onSortChange(newSort);
     }, [currentSort, onSortChange]);
-    return (react_1.default.createElement(CatalogSortButtonWrapper, { "data-component-name": "Catalog/CatalogSortButton", trigger: react_1.default.createElement(SortTrigger, null,
-            react_1.default.createElement(SortIconWrapper, null, currentSort === '-title' ? react_1.default.createElement(DescSortIcon_1.DescSortIcon, null) : react_1.default.createElement(AscSortIcon_1.AscSortIcon, null)),
-            react_1.default.createElement(SortText, null, "Sort")), alignment: "end" },
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null,
-            react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => toggleSort('title') }, currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'))));
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogSortButton" },
+        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(SortTrigger, null,
+                react_1.default.createElement(SortIconWrapper, null, currentSort === '-title' ? react_1.default.createElement(DescSortIcon_1.DescSortIcon, null) : react_1.default.createElement(AscSortIcon_1.AscSortIcon, null)),
+                react_1.default.createElement(SortText, null, "Sort")), alignment: "end" },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null,
+                react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => toggleSort('title') }, currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A')))));
 }
-const CatalogSortButtonWrapper = (0, styled_components_1.default)(Dropdown_1.Dropdown) ``;
 const SortTrigger = styled_components_1.default.div `
   display: flex;
   align-items: center;

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

@@ -12,7 +12,7 @@ function CatalogEntityCell({ entity }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
         react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type, defaultColor: true }),
         react_1.default.createElement(EntityTitleContent, null,
-            react_1.default.createElement(EntityTitle, null,
+            react_1.default.createElement(EntityTitle, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityTitle" },
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
             entity.summary && (react_1.default.createElement(EntitySummary, null,
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.summary))))));

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

@@ -67,7 +67,7 @@ const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, col
         catalogConfig,
         entitiesCatalogConfig,
     });
-    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))))));
+    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)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, 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 = (0, styled_components_1.default)(Link_1.Link) `

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,18 +30,21 @@ 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 }),
         react_1.default.createElement(ControlsWrapper, null,
             report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.report.tooltipText", placement: "top" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.expand.tooltipText", placement: "top" },
+                react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.collapse.tooltipText", placement: "top" },
+                react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
             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 +53,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 +71,18 @@ const ContainerWrapper = styled_components_1.default.div `
   line-height: var(--line-height-lg);
   min-height: var(--control-height-base);
   grid-template-columns: 1fr auto;
+  z-index: 1;
+  ${({ $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 +97,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,16 @@ 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 instanceof Set
+                        ? filter.selectedOptions.has(value) ||
+                            filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                        : false }),
                 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/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/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: 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.7",
+  "version": "0.56.0-next.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -89,7 +89,7 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.26.4",
+    "@redocly/config": "0.27.0",
     "@redocly/realm-asyncapi-sdk": "0.2.0-next.1"
   },
   "scripts": {

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/CatalogEntityTypeTag.tsx

@@ -31,7 +31,10 @@ export const getEntityTagColor = (type: EntityType): string => {
 
 export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element {
   return (
-    <EntityTypeTagWrapper entityType={entityType as EntityType}>
+    <EntityTypeTagWrapper
+      entityType={entityType as EntityType}
+      data-component-name="Catalog/CatalogEntityTypeTag"
+    >
       <CatalogHighlight>{entityType}</CatalogHighlight>
     </EntityTypeTagWrapper>
   );

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -22,7 +22,7 @@ export function CatalogPageDescription({
 }: CatalogPageDescriptionProps) {
   return (
     <CatalogPageDescriptionWrapper>
-      <CatalogTitleWrapper>
+      <CatalogTitleWrapper data-component-name="Catalog/CatalogEntityTitle">
         <CatalogTitle data-translation-key={titleTranslationKey}>{title}</CatalogTitle>
         <Tag borderless textTransform="none">
           {tag}

package/src/components/Catalog/CatalogSortButton.tsx

@@ -29,29 +29,28 @@ export function CatalogSortButton({
   );
 
   return (
-    <CatalogSortButtonWrapper
-      data-component-name="Catalog/CatalogSortButton"
-      trigger={
-        <SortTrigger>
-          <SortIconWrapper>
-            {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
-          </SortIconWrapper>
-          <SortText>Sort</SortText>
-        </SortTrigger>
-      }
-      alignment="end"
-    >
-      <DropdownMenu>
-        <DropdownMenuItem onAction={() => toggleSort('title')}>
-          {currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'}
-        </DropdownMenuItem>
-      </DropdownMenu>
-    </CatalogSortButtonWrapper>
+    <div data-component-name="Catalog/CatalogSortButton">
+      <Dropdown
+        trigger={
+          <SortTrigger>
+            <SortIconWrapper>
+              {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
+            </SortIconWrapper>
+            <SortText>Sort</SortText>
+          </SortTrigger>
+        }
+        alignment="end"
+      >
+        <DropdownMenu>
+          <DropdownMenuItem onAction={() => toggleSort('title')}>
+            {currentSort === '-title' ? 'Title | A → Z' : 'Title | Z → A'}
+          </DropdownMenuItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
   );
 }
 
-const CatalogSortButtonWrapper = styled(Dropdown)``;
-
 const SortTrigger = styled.div`
   display: flex;
   align-items: center;

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

@@ -15,7 +15,7 @@ export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCel
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
       <CatalogEntityTypeIcon entityType={entity.type} defaultColor={true} />
       <EntityTitleContent>
-        <EntityTitle>
+        <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>
         </EntityTitle>
         {entity.summary && (

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

@@ -103,6 +103,7 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
       $columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
       to={getEntityDetailsLink()}
       style={{ color: 'var(--catalog-page-wrapper-text-color)' }}
+      data-component-name="Catalog/CatalogTableView/CatalogTableViewRow"
     >
       {columns.map((column) => (
         <TableCell

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>}
@@ -92,27 +94,31 @@ export function CodeBlockControls({
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <ControlButton
-            variant="text"
-            size="small"
-            data-testid="expand-all"
-            icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
-            onClick={expand?.onClick}
-          >
-            {controlsType !== 'icon' && (expand?.label || 'Expand all')}
-          </ControlButton>
+          <TooltipWrapper tooltipTranslationKey="codeSnippet.expand.tooltipText" placement="top">
+            <ControlButton
+              variant="text"
+              size="small"
+              data-testid="expand-all"
+              icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
+              onClick={expand?.onClick}
+            >
+              {controlsType !== 'icon' && (expand?.label || 'Expand all')}
+            </ControlButton>
+          </TooltipWrapper>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <ControlButton
-            variant="text"
-            size="small"
-            data-testid="collapse-all"
-            icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
-            onClick={collapse?.onClick}
-          >
-            {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
-          </ControlButton>
+          <TooltipWrapper tooltipTranslationKey="codeSnippet.collapse.tooltipText" placement="top">
+            <ControlButton
+              variant="text"
+              size="small"
+              data-testid="collapse-all"
+              icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
+              onClick={collapse?.onClick}
+            >
+              {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
+            </ControlButton>
+          </TooltipWrapper>
         ) : null}
 
         {select ? (
@@ -141,7 +147,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 +162,7 @@ export function CodeBlockControls({
                 } else {
                   telemetry.send({
                     type: 'openapi_docs.copy_code_snippet.clicked',
-                    payload: { snippet_type: 'copy' },
+                    payload: { snippetType: 'copy' },
                   });
                 }
               }}
@@ -168,15 +174,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 +196,19 @@ const ContainerWrapper = styled.div`
   line-height: var(--line-height-lg);
   min-height: var(--control-height-base);
   grid-template-columns: 1fr auto;
+  z-index: 1;
+  ${({ $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 +225,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,14 @@ export function FilterCheckboxes({
                 telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
               }}
             >
-              <CheckboxIcon checked={filter.selectedOptions.has(value?.toLowerCase())} />
+              <CheckboxIcon
+                checked={
+                  filter.selectedOptions instanceof Set
+                    ? filter.selectedOptions.has(value) ||
+                      filter.selectedOptions.has(value?.toLowerCase())
+                    : false
+                }
+              />
               <FilterOptionLabel data-translation-key={value}>
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>

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/l10n.ts

@@ -179,6 +179,8 @@ export type TranslationKey =
   | 'codeSnippet.report.buttonText'
   | 'codeSnippet.report.tooltipText'
   | 'codeSnippet.report.label'
+  | 'codeSnippet.expand.tooltipText'
+  | 'codeSnippet.collapse.tooltipText'
   | 'userMenu.login'
   | 'userMenu.logout'
   | 'userMenu.devOnboardingLabel'

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;