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

package/lib/core/utils/telemetry/generate-resource-urn.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateResourceUrn = generateResourceUrn;
+/**
+ * Generates a resource URN for Realm UI telemetry.
+ * @param object - The object type.
+ * @param id - The resource ID.
+ * @returns The resource URN.
+ */
+function generateResourceUrn(object, id) {
+    return `urn:redocly:realm:ui:${object}:${id}`;
+}
+//# sourceMappingURL=generate-resource-urn.js.map

package/lib/core/utils/telemetry/get-base-data-attributes.d.ts

@@ -0,0 +1,14 @@
+export type BaseDataAttributes<T, K, U> = {
+    /** Resource identifier (e.g. UI key, or page URL when tracking navigation). */
+    id: T;
+    /** Object kind used for telemetry categorization (e.g. `'button'`, `'page'`). */
+    object: K;
+    /** Resolved URI: the optional `url` when provided, otherwise a Realm UI resource URN. */
+    uri: U;
+};
+/**
+ * Builds the base fields for Realm UI telemetry payloads: `id`, `object`, and `uri`.
+ * When `url` is omitted, {@link generateResourceUrn} derives `uri` as
+ * `urn:redocly:realm:ui:{object}:{id}`.
+ */
+export declare function getBaseDataAttributes<T, K, U>(id: T, object: K, url?: U): BaseDataAttributes<T, K, U>;

package/lib/core/utils/telemetry/get-base-data-attributes.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBaseDataAttributes = getBaseDataAttributes;
+const generate_resource_urn_1 = require("./generate-resource-urn");
+/**
+ * Builds the base fields for Realm UI telemetry payloads: `id`, `object`, and `uri`.
+ * When `url` is omitted, {@link generateResourceUrn} derives `uri` as
+ * `urn:redocly:realm:ui:{object}:{id}`.
+ */
+function getBaseDataAttributes(id, object, url) {
+    return {
+        id,
+        object,
+        uri: url !== null && url !== void 0 ? url : (0, generate_resource_urn_1.generateResourceUrn)(object, id),
+    };
+}
+//# sourceMappingURL=get-base-data-attributes.js.map

package/lib/layouts/McpNotAllowed.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export default function McpNotAllowed(): JSX.Element;

package/lib/layouts/McpNotAllowed.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = McpNotAllowed;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../core/hooks");
+const ConnectMCPButton_1 = require("../components/Buttons/ConnectMCPButton");
+function McpNotAllowed() {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(NotAllowedWrapper, { "data-component-name": "layouts/McpNotAllowed" },
+        react_1.default.createElement(StatusText, null, "405"),
+        react_1.default.createElement(Title, { "data-translation-key": "page.mcpNotAllowed.title" }, translate('page.mcpNotAllowed.title', 'Method not allowed')),
+        react_1.default.createElement(Description, { "data-translation-key": "page.mcpNotAllowed.description" }, translate('page.mcpNotAllowed.description', 'To use this MCP server, register it in your MCP Client (for example: VS Code, Cursor, or Claude Code).')),
+        react_1.default.createElement(ButtonWrapper, null,
+            react_1.default.createElement(ConnectMCPButton_1.ConnectMCPButton, { alignment: "start" }))));
+}
+const NotAllowedWrapper = styled_components_1.default.div `
+  height: 100%;
+  max-width: var(--page-mcp-405-max-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: var(--page-mcp-405-margin-vertical) var(--page-mcp-405-margin-horizontal);
+  font-family: var(--page-mcp-405-font-family);
+  gap: var(--page-mcp-405-gap);
+
+  @media (max-width: 480px) {
+    margin: var(--page-mcp-405-margin-vertical-mobile) var(--page-mcp-405-margin-horizontal-mobile);
+  }
+`;
+const StatusText = styled_components_1.default.div `
+  color: var(--page-mcp-405-status-text-color);
+  font-size: var(--page-mcp-405-status-font-size);
+  line-height: var(--page-mcp-405-status-line-height);
+  font-weight: var(--page-mcp-405-status-font-weight);
+`;
+const Title = styled_components_1.default.div `
+  font-size: var(--page-mcp-405-title-font-size);
+  line-height: var(--page-mcp-405-title-line-height);
+  font-weight: var(--page-mcp-405-title-font-weight);
+  color: var(--page-mcp-405-title-text-color);
+
+  @media (max-width: 480px) {
+    font-size: var(--page-mcp-405-title-font-size-mobile);
+    line-height: var(--page-mcp-405-title-line-height-mobile);
+  }
+`;
+const Description = styled_components_1.default.div `
+  color: var(--page-mcp-405-description-text-color);
+  font-size: var(--page-mcp-405-description-font-size);
+  line-height: var(--page-mcp-405-description-line-height);
+  font-weight: var(--page-mcp-405-description-font-weight);
+
+  @media (max-width: 480px) {
+    font-size: var(--page-mcp-405-description-font-size-mobile);
+    line-height: var(--page-mcp-405-description-line-height-mobile);
+  }
+`;
+const ButtonWrapper = styled_components_1.default.div `
+  position: relative;
+  display: inline-block;
+`;
+//# sourceMappingURL=McpNotAllowed.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.67.0-next.4",
+  "version": "0.67.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.1.8",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.13.0-next.3"
+    "@redocly/realm-asyncapi-sdk": "0.13.0-next.4"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.49.0"
+    "@redocly/config": "0.50.1"
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -12,6 +12,7 @@ import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 type BreadcrumbDropdownProps = {
   children?: React.ReactNode;
@@ -81,7 +82,7 @@ export function BreadcrumbDropdown({
                   onItemClick?.(item, index);
                   telemetry.sendBreadcrumbClickedMessage([
                     {
-                      object: 'breadcrumb',
+                      ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
                       link: item.link,
                       position: index + 1,
                       totalBreadcrumbs: items.length,

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 import { BreadcrumbDropdown } from '@redocly/theme/components/Breadcrumbs/BreadcrumbDropdown';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
-import { trimText } from '@redocly/theme/core/utils';
+import { trimText, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
 
 export function Breadcrumbs(props: {
@@ -68,7 +68,7 @@ export function Breadcrumbs(props: {
           onItemClick={(item, itemIdx) =>
             telemetry.sendBreadcrumbClickedMessage([
               {
-                object: 'breadcrumb',
+                ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
                 link: item.link,
                 position: itemIdx + 1,
                 totalBreadcrumbs: siblingsWithActive.length,
@@ -91,7 +91,7 @@ export function Breadcrumbs(props: {
         onClick={() =>
           telemetry.sendBreadcrumbClickedMessage([
             {
-              object: 'breadcrumb',
+              ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
               link: breadcrumb.link,
               position: idx + 1,
               totalBreadcrumbs: breadcrumbs.length,
@@ -119,7 +119,7 @@ export function Breadcrumbs(props: {
                 onItemClick={(item, itemIdx) =>
                   telemetry.sendBreadcrumbClickedMessage([
                     {
-                      object: 'breadcrumb',
+                      ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
                       link: item.link,
                       position: itemIdx + 1,
                       totalBreadcrumbs: breadcrumbs.length,

package/src/components/Buttons/AIAssistantButton.tsx

@@ -9,6 +9,7 @@ import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
 import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 import { RedoclyIcon } from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
 import { SearchSessionProvider } from '@redocly/theme/core/contexts';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 type AIAssistantButtonIconType = 'chat' | 'sparkles' | 'redocly';
 type AIAssistantButtonType = 'button' | 'icon';
@@ -79,9 +80,7 @@ export function AIAssistantButton() {
     setIsOpen(true);
     telemetry.sendSearchAiOpenedMessage([
       {
-        id: 'aiAssistantTriggerButton',
-        object: 'search',
-        uri: 'urn:redocly:realm:ui:search:aiAssistantTriggerButton',
+        ...getBaseDataAttributes('aiAssistantTriggerButton', 'search'),
         method: 'ai_trigger_button',
       },
     ]);

package/src/components/Buttons/EditPageButton.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'react';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type EditPageButtonProps = {
   to: string;
@@ -24,7 +25,9 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
         variant="ghost"
         size="small"
         icon={<EditIcon />}
-        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
+        onClick={() =>
+          telemetry.sendPageEditClickedMessage([getBaseDataAttributes('pageEdit', 'button')])
+        }
         data-translation-key="markdown.editPage.text"
       >
         {translate('markdown.editPage.text', 'Edit')}

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

@@ -11,7 +11,7 @@ import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIc
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
-import { getPathPrefix } from '@redocly/theme/core/utils';
+import { getPathPrefix, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogCardProps = {
   entity: BffCatalogEntity;
@@ -31,7 +31,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
         window.location.assign(
           `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
         );
-        telemetry.sendCatalogItemClickedMessage();
+        telemetry.sendCatalogItemClickedMessage([getBaseDataAttributes('catalogItem', 'card')]);
       }}
     >
       <CardContent>

package/src/components/CatalogClassic/CatalogClassicActions.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
@@ -42,7 +42,9 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
         iconPosition="left"
         onClick={() => {
           onOpenFilter();
-          telemetry.sendCatalogActionsButtonClickedMessage();
+          telemetry.sendCatalogActionsClickedMessage([
+            getBaseDataAttributes('catalogActions', 'button'),
+          ]);
         }}
         data-translation-key="catalog.filters.title"
       >

package/src/components/CatalogClassic/CatalogClassicCard.tsx

@@ -4,7 +4,12 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { CatalogItem } from '@redocly/theme/core/types';
 
-import { slug, capitalize, getScorecardColorVariable } from '@redocly/theme/core/utils';
+import {
+  slug,
+  capitalize,
+  getScorecardColorVariable,
+  getBaseDataAttributes,
+} from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
@@ -38,7 +43,9 @@ export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Eleme
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
         data-component-name="CatalogClassic/CatalogClassicCard"
-        onClick={() => telemetry.sendCatalogItemClickedMessage()}
+        onClick={() =>
+          telemetry.sendCatalogItemClickedMessage([getBaseDataAttributes('catalogItem', 'card')])
+        }
       >
         <CardContent>
           <CardTitleWrapper>

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -7,6 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { getScorecardColorVariable } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogClassicInfoBlockProps = {
   metadata?: {
@@ -53,7 +54,7 @@ function ScorecardBadge(props: {
     <Link to={slug}>
       <Tag
         onClick={() =>
-          telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }])
+          telemetry.sendScorecardLinkClickedMessage([getBaseDataAttributes('scorecardLink', 'tag')])
         }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}

package/src/components/Feedback/ReportDialog.tsx

@@ -8,6 +8,7 @@ import type { SubmitFeedbackParams } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type ReportDialogProps = {
   location: string;
@@ -47,7 +48,9 @@ export function ReportDialog({
               path: pathname,
               lang,
             });
-            telemetry.sendCodeSnippetReportedMessage();
+            telemetry.sendCodeSnippetReportedMessage([
+              getBaseDataAttributes('codeSnippet', 'markdocTag'),
+            ]);
             onSubmit();
           }}
           isDialog={true}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -11,7 +11,7 @@ import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOption
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
-import { changeTextCasing } from '@redocly/theme/core/utils';
+import { changeTextCasing, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export function FilterCheckboxes({
   filter,
@@ -36,7 +36,9 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
+                telemetry.sendFilterCheckboxToggledMessage([
+                  getBaseDataAttributes('filterId', 'checkbox'),
+                ]);
               }}
             >
               <CheckboxIcon

package/src/components/Footer/FooterItem.tsx

@@ -7,7 +7,7 @@ import type { ResolvedNavItem } from '@redocly/config';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type FooterItemProps = {
@@ -44,7 +44,9 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           external={item.external}
           target={item.target}
           data-testid={item.label}
-          onClick={() => telemetry.sendFooterItemClickedMessage()}
+          onClick={() =>
+            telemetry.sendFooterItemClickedMessage([getBaseDataAttributes('footerItem', 'footer')])
+          }
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, generateBeforeAfterContext } from '@redocly/theme/core/utils';
 import { useLanguagePicker, useThemeHooks } from '@redocly/theme/core/hooks';
 import { GlobalOutlinedIcon } from '@redocly/theme/icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -41,7 +41,14 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     languageInsensitive: true,
     onAction: () => {
       props.onChangeLanguage(locale.code);
-      telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
+      telemetry.sendLanguagePickerChangedMessage([
+        ...generateBeforeAfterContext<'sendLanguagePickerChangedMessage'>(
+          'languagePicker',
+          'dropdown',
+          { locale: currentLocale.code },
+          { locale: locale.code },
+        ),
+      ]);
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Logo/Logo.tsx

@@ -7,6 +7,7 @@ import type { LogoConfig } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type LogoProps = {
   config: LogoConfig;
@@ -27,7 +28,12 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => telemetry.sendLogoClickedMessage()}>
+        <Link
+          to={config.link}
+          onClick={() =>
+            telemetry.sendLogoClickedMessage([getBaseDataAttributes('logo', 'navbar')])
+          }
+        >
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuContainer.tsx

@@ -67,6 +67,7 @@ const MenuContainerComponent = styled.div.attrs<{
   animation-timing-function: ease;
   position: relative;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   flex-grow: ${({ $growContent }) => ($growContent ? 1 : 0)};
   padding-top: var(--menu-container-padding-top);
   display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,11 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
+import {
+  getBaseDataAttributes,
+  getMenuItemType,
+  getOperationColor,
+} from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { Tag, ContentWrapper } from '@redocly/theme/components/Tag/Tag';
@@ -39,7 +43,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const handleOnClick = () => {
     telemetry.sendSidebarItemClickedMessage([
       {
-        object: 'sidebar_item',
+        ...getBaseDataAttributes('sidebarItem', 'sidebar'),
         label: item.label,
         type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
       },
@@ -107,7 +111,13 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
                 {name}
               </SidebarTag>
             ))}
-          <span>{translate(item.labelTranslationKey, item.label)}</span>
+          <MenuItemLabelText
+            $active={item.active}
+            $isSeparator={isSeparator}
+            data-text={translate(item.labelTranslationKey, item.label)}
+          >
+            {translate(item.labelTranslationKey, item.label)}
+          </MenuItemLabelText>
           {item.badges
             ?.filter(({ position }) => position !== 'before')
             .map(({ name, color, icon }) => (
@@ -308,7 +318,6 @@ const MenuItemLabelWrapper = styled.li<{
     css`
       color: ${$deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
-      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon} path {
         fill: var(--menu-item-color-active);
@@ -386,6 +395,28 @@ const MenuItemLabel = styled.span`
   }
 `;
 
+const MenuItemLabelText = styled.span<{ $active?: boolean; $isSeparator?: boolean }>`
+  display: inline-block;
+  max-width: 100%;
+  font-weight: var(--menu-item-font-weight);
+
+  &::before {
+    content: attr(data-text);
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-weight: ${({ $isSeparator }) =>
+      $isSeparator ? 'var(--menu-item-font-weight)' : 'var(--menu-item-font-weight-active)'};
+  }
+
+  ${({ $active }) =>
+    $active &&
+    css`
+      font-weight: var(--menu-item-font-weight-active);
+    `}
+`;
+
 const SidebarTag = styled(Tag)<{ $bgColor?: string; icon?: React.ReactNode }>`
   ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;

package/src/components/Navbar/Navbar.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedConfigLinks } from '@redocly/config';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks, useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
 import { NavbarLogo } from '@redocly/theme/components/Navbar/NavbarLogo';
 import { NavbarMenu } from '@redocly/theme/components/Navbar/NavbarMenu';
@@ -60,11 +60,15 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  telemetry.sendMobileMenuButtonCloseClickedMessage();
+                  telemetry.sendMobileMenuClosedMessage([
+                    getBaseDataAttributes('mobileMenuClose', 'button'),
+                  ]);
                 }
               : () => {
                   openMobileMenu();
-                  telemetry.sendMobileMenuButtonOpenClickedMessage();
+                  telemetry.sendMobileMenuOpenedMessage([
+                    getBaseDataAttributes('mobileMenuOpen', 'button'),
+                  ]);
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -12,6 +12,7 @@ import {
   getPathnameForLocale,
   withPathPrefix,
   removeTrailingSlash,
+  getBaseDataAttributes,
 } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
@@ -48,7 +49,12 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       $active={isActive}
       className={className}
       onClick={() =>
-        telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }])
+        telemetry.sendNavbarMenuItemClickedMessage([
+          {
+            ...getBaseDataAttributes('navbarItem', 'navbar'),
+            type: item.type,
+          },
+        ])
       }
       external={item.external}
       target={item.target}

package/src/components/Search/SearchDialog.tsx

@@ -7,7 +7,7 @@ import type { SearchFacetCount, SearchItemData } from '@redocly/theme/core/types
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
+import { breakpoints, concatClassNames, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { Portal } from '@redocly/theme/components/Portal/Portal';
 import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
 import { SearchRecent } from '@redocly/theme/components/Search/SearchRecent';
@@ -172,9 +172,8 @@ export function SearchDialog({
             addSearchHistoryItem(query);
             telemetry.sendSearchResultClickedMessage([
               {
-                object: 'search',
+                ...getBaseDataAttributes('searchResultItem', 'search', item.document.url),
                 query: query,
-                url: item.document.url,
                 totalResults: results.length.toString(),
                 index: index.toString(),
                 searchEngine: mode,
@@ -259,9 +258,7 @@ export function SearchDialog({
                           }
                           telemetry.sendSearchAiOpenedMessage([
                             {
-                              id: 'searchAiButton',
-                              object: 'search',
-                              uri: 'urn:redocly:realm:ui:search:searchAiButton',
+                              ...getBaseDataAttributes('searchAiButton', 'search'),
                               method: 'ai_search_button',
                             },
                           ]);
@@ -355,9 +352,7 @@ export function SearchDialog({
                         }
                         telemetry.sendSearchAiOpenedMessage([
                           {
-                            id: 'searchAiInput',
-                            object: 'search',
-                            uri: 'urn:redocly:realm:ui:search:searchAiInput',
+                            ...getBaseDataAttributes('searchAiInput', 'search'),
                             method: 'ai_search_input',
                           },
                         ]);
@@ -370,9 +365,7 @@ export function SearchDialog({
                           }
                           telemetry.sendSearchAiOpenedMessage([
                             {
-                              id: 'searchAiInput',
-                              object: 'search',
-                              uri: 'urn:redocly:realm:ui:search:searchAiInput',
+                              ...getBaseDataAttributes('searchAiInput', 'search'),
                               method: 'ai_search_input',
                             },
                           ]);
@@ -474,7 +467,7 @@ export function SearchDialog({
                         onSelect={(query, index) => {
                           telemetry.sendSearchRecentClickedMessage([
                             {
-                              object: 'search',
+                              ...getBaseDataAttributes('searchRecentItem', 'search'),
                               query,
                               index: index.toString(),
                               searchSessionId,

package/src/components/Search/SearchInput.tsx

@@ -9,6 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { useInputKeyCommands, useRecentSearches, useThemeHooks } from '@redocly/theme/core/hooks';
 import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type SearchInputProps = {
   placeholder?: string;
@@ -51,7 +52,9 @@ export function SearchInput({
   const handleOnReset = () => {
     onChange('');
     addSearchHistoryItem(value);
-    telemetry.sendSearchInputResetButtonClickedMessage();
+    telemetry.sendSearchInputResetClickedMessage([
+      getBaseDataAttributes('searchInputReset', 'search'),
+    ]);
   };
 
   return (