@redocly/theme 0.71.0-next.5 → 0.71.0-next.7

package/lib/components/Feedback/Mood.js

@@ -118,8 +118,8 @@ function Mood({ settings, onSubmit, className }) {
     const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     const submitMood = (moodScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;

package/lib/components/Feedback/Rating.js

@@ -94,8 +94,8 @@ function Rating({ settings, onSubmit, className }) {
     };
     const displayReasons = !!score && hasReasons;
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     if (isSubmitted) {
         return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating" },
             React.createElement(StyledFormMandatoryFields, null,

package/lib/components/Feedback/Scale.js

@@ -98,8 +98,8 @@ function Scale({ settings, onSubmit, className }) {
     }
     const displayReasons = !!score && hasReasons;
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!score && (displayReasons || displayComment);
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     if (isSubmitted) {
         return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
             React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||

package/lib/components/Feedback/Sentiment.js

@@ -85,8 +85,8 @@ function Sentiment({ settings, onSubmit, className }) {
     const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && hasOptionalEmail;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment || displayFeedbackEmail);
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')

package/lib/components/Filter/Filter.js

@@ -17,7 +17,7 @@ const filterComponents = {
 function Filter({ filter, filterValuesCasing, showCounter = true, }) {
     if (!filter.parentUsed)
         return null;
-    const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
+    const FilterComponent = filterComponents[filter.type || 'checkboxes'];
     return (react_1.default.createElement(FilterGroup, { "data-component-name": "Filter/Filter", key: filter.property + filter.title },
         react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));
 }

package/lib/components/MCP/McpConnectionTabs.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-export type McpConnectionTab = 'claude' | 'chatgpt' | 'json';
+export type McpConnectionTab = 'claude' | 'chatgpt' | 'grok' | 'json';
 export type McpConnectionTabsProps = {
     options?: McpConnectionTab[];
     className?: string;

package/lib/components/MCP/McpConnectionTabs.js

@@ -45,11 +45,12 @@ const Button_1 = require("../../components/Button/Button");
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
+const GrokIcon_1 = require("../../icons/GrokIcon/GrokIcon");
 const Tabs_1 = require("../../markdoc/components/Tabs/Tabs");
 const TabItemFragment_1 = require("../../markdoc/components/Tabs/TabItemFragment");
 const NumberedList_1 = require("../../markdoc/components/NumberedList/NumberedList");
 const NumberedItem_1 = require("../../markdoc/components/NumberedList/NumberedItem");
-const DEFAULT_TAB_OPTIONS = ['claude', 'chatgpt', 'json'];
+const DEFAULT_TAB_OPTIONS = ['claude', 'chatgpt', 'grok', 'json'];
 const TAB_LABELS = {
     claude: {
         translationKey: 'page.mcpNotAllowed.tabs.claude',
@@ -61,8 +62,14 @@ const TAB_LABELS = {
         defaultLabel: 'ChatGPT',
         icon: ChatGptIcon_1.ChatGptIcon,
     },
+    grok: {
+        translationKey: 'page.mcpNotAllowed.tabs.grok',
+        defaultLabel: 'Grok',
+        icon: GrokIcon_1.GrokIcon,
+    },
     json: { translationKey: 'page.mcpNotAllowed.tabs.json', defaultLabel: 'JSON' },
 };
+const GROK_CONNECTORS_URL = 'https://grok.com/connectors';
 function McpConnectionTabs({ options = DEFAULT_TAB_OPTIONS, className, }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -136,6 +143,22 @@ function renderTabContent(option, connection, translate, snippetHeader) {
                 },
                 assistantPromptClient,
             ]);
+        case 'grok':
+            return renderClientList([
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.grokBuild.headline', 'Grok Build'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        terminalHint,
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateGrokBuildCommand)(connection), header: snippetHeader(option, 'grok-build'), wrapContents: true }))),
+                },
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.grokApp.headline', 'Grok app'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ConnectButton, { variant: "secondary", icon: react_1.default.createElement(GrokIcon_1.GrokIcon, null), onClick: () => window.open(GROK_CONNECTORS_URL, '_blank') }, translate('page.mcpNotAllowed.snippets.grokApp.openConnectors', 'Open Grok connectors')),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.grokApp.instruction', 'On grok.com, open Connectors → New Connector → Custom and paste this server URL:')),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: snippetHeader(option, 'grok-app') }))),
+                },
+            ]);
         case 'json':
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.json.hint', 'Add this server entry to your MCP client configuration file:')),

package/lib/components/MissingTranslationNotice/MissingTranslationNotice.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+export type MissingTranslationNoticeProps = {
+    className?: string;
+};
+/**
+ * Tells the reader that the page shows the original language,
+ * because the translation for the selected locale is missing.
+ * Renders only on fallback pages of a locale that sets `showMissingTranslationNotice`.
+ * The reader can close the notice for the current page.
+ */
+export declare function MissingTranslationNotice({ className, }: MissingTranslationNoticeProps): JSX.Element | null;

package/lib/components/MissingTranslationNotice/MissingTranslationNotice.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingTranslationNotice = MissingTranslationNotice;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const TranslateIcon_1 = require("../../icons/TranslateIcon/TranslateIcon");
+const Markdown_1 = require("../../components/Markdown/Markdown");
+const hooks_1 = require("../../core/hooks");
+/**
+ * Tells the reader that the page shows the original language,
+ * because the translation for the selected locale is missing.
+ * Renders only on fallback pages of a locale that sets `showMissingTranslationNotice`.
+ * The reader can close the notice for the current page.
+ */
+function MissingTranslationNotice({ className, }) {
+    var _a;
+    const { useTranslate, useMarkdownText, usePageProps, useL10nConfig } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { isTranslationFallback } = usePageProps();
+    const { currentLocale, defaultLocale, locales } = useL10nConfig();
+    const [isDismissed, setIsDismissed] = react_1.default.useState(false);
+    const isShown = isTranslationFallback === true &&
+        currentLocale !== defaultLocale &&
+        locales.some(({ code, showMissingTranslationNotice }) => code === currentLocale && showMissingTranslationNotice === true);
+    const language = ((_a = locales.find(({ code }) => code === defaultLocale)) === null || _a === void 0 ? void 0 : _a.name) || defaultLocale;
+    const content = useMarkdownText(isShown ? translate('missingTranslationNotice.content', { language }) : '');
+    if (!isShown || isDismissed) {
+        return null;
+    }
+    return (react_1.default.createElement(MissingTranslationNoticeWrapper, { className: className, "data-component-name": "MissingTranslationNotice/MissingTranslationNotice" },
+        react_1.default.createElement(Icon, { color: "--missing-translation-notice-icon-color" }),
+        react_1.default.createElement(Content, null,
+            react_1.default.createElement(Title, null, translate('missingTranslationNotice.title', {
+                defaultValue: 'This page has not yet been translated',
+            })),
+            react_1.default.createElement(Markdown_1.Markdown, { compact: true }, content)),
+        react_1.default.createElement(CloseButton, { type: "button", "aria-label": translate('missingTranslationNotice.close', { defaultValue: 'Close' }), onClick: () => setIsDismissed(true) },
+            react_1.default.createElement(CloseIcon_1.CloseIcon, { color: "--missing-translation-notice-text-color" }))));
+}
+const MissingTranslationNoticeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--missing-translation-notice-gap);
+
+  padding: var(--missing-translation-notice-padding);
+  margin: var(--missing-translation-notice-margin-vertical) 0;
+  color: var(--missing-translation-notice-text-color);
+  background-color: var(--missing-translation-notice-bg-color);
+  border: 1px solid var(--missing-translation-notice-border-color);
+  border-left: var(--missing-translation-notice-accent-width) solid
+    var(--missing-translation-notice-accent-color);
+  border-radius: var(--missing-translation-notice-border-radius);
+`;
+const Icon = (0, styled_components_1.default)(TranslateIcon_1.TranslateIcon) `
+  flex-shrink: 0;
+`;
+const Content = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--spacing-xxs);
+
+  font-size: var(--missing-translation-notice-font-size);
+  line-height: var(--missing-translation-notice-line-height);
+`;
+const Title = styled_components_1.default.span `
+  font-size: var(--missing-translation-notice-title-font-size);
+  font-weight: var(--missing-translation-notice-title-font-weight);
+`;
+const CloseButton = styled_components_1.default.button `
+  display: flex;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+//# sourceMappingURL=MissingTranslationNotice.js.map

package/lib/components/MissingTranslationNotice/variables.d.ts

@@ -0,0 +1 @@
+export declare const missingTranslationNotice: import("styled-components").RuleSet<object>;

package/lib/components/MissingTranslationNotice/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const missingTranslationNoticeDarkMode: import("styled-components").RuleSet<object>;

package/lib/components/MissingTranslationNotice/variables.dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.missingTranslationNoticeDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.missingTranslationNoticeDarkMode = (0, styled_components_1.css) `
+  --missing-translation-notice-bg-color: var(--color-warm-grey-3); // @presenter Color
+  --missing-translation-notice-icon-color: var(--color-blue-4); // @presenter Color
+  --missing-translation-notice-accent-color: var(--color-blue-4); // @presenter Color
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/MissingTranslationNotice/variables.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.missingTranslationNotice = void 0;
+const styled_components_1 = require("styled-components");
+exports.missingTranslationNotice = (0, styled_components_1.css) `
+  /**
+   * @tokens Missing translation notice
+   */
+
+  --missing-translation-notice-bg-color: var(--color-warm-grey-1); // @presenter Color
+  --missing-translation-notice-text-color: var(--text-color-primary); // @presenter Color
+  --missing-translation-notice-icon-color: var(--color-blue-6); // @presenter Color
+  --missing-translation-notice-border-color: var(--border-color-secondary); // @presenter Color
+  --missing-translation-notice-accent-color: var(--color-blue-6); // @presenter Color
+
+  --missing-translation-notice-accent-width: 3px; // @presenter Spacing
+  --missing-translation-notice-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --missing-translation-notice-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --missing-translation-notice-margin-vertical: var(--spacing-base); // @presenter Spacing
+  --missing-translation-notice-gap: var(--spacing-sm); // @presenter Spacing
+
+  --missing-translation-notice-title-font-size: var(--font-size-base); // @presenter FontSize
+  --missing-translation-notice-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --missing-translation-notice-font-size: var(--font-size-base); // @presenter FontSize
+  --missing-translation-notice-line-height: var(--line-height-base); // @presenter LineHeight
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/PageActions/PageActions.js

@@ -87,7 +87,7 @@ function PageActions(props) {
         return (react_1.default.createElement(StyledDropdownMenuItem, { key: key, onAction: () => handleActionClick(action) }, content));
     });
     return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
-        react_1.default.createElement(SplitButton_1.SplitButton, { portalled: true, variant: "outlined", size: "medium", toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: react_1.default.createElement(Button_1.Button, { variant: "outlined", icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText) }, actions.length > 1 ? react_1.default.createElement(StyledDropdownMenu, null, menuItems) : null)));
+        react_1.default.createElement(SplitButton_1.SplitButton, { portalled: true, variant: "outlined", size: "small", toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText) }, actions.length > 1 ? react_1.default.createElement(StyledDropdownMenu, null, menuItems) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {
@@ -102,10 +102,12 @@ function renderIcon(buttonAction, actionState) {
 const PageActionsWrapper = styled_components_1.default.div `
   margin-left: auto;
   padding-left: var(--page-actions-padding-left);
+  user-select: none;
   --button-color: var(--page-actions-button-text-color);
 
-  .button-group-size-medium .button.button-size-medium {
+  && .button.button-size-small {
     --button-icon-left-padding: var(--page-actions-button-padding);
+    --button-icon-padding: var(--page-actions-toggle-padding);
   }
 `;
 const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/PageActions/variables.js

@@ -7,7 +7,8 @@ exports.pageActions = (0, styled_components_1.css) `
   --page-actions-padding-left: var(--spacing-sm);
 
   --page-actions-button-text-color: var(--text-color-secondary);
-  --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
+  --page-actions-button-padding: 0 var(--spacing-sm) 0 10px;
+  --page-actions-toggle-padding: 4px;
 
   --page-actions-dropdown-max-height: fit-content;
 

package/lib/components/Select/Select.js

@@ -55,8 +55,7 @@ function Select(props) {
         return values
             .map((value) => {
             const selectedOption = options.find((option) => option.value === value);
-            return (selectedOption ||
-                (typeof value === 'string' ? { value } : value));
+            return (selectedOption || (typeof value === 'string' ? { value } : value));
         })
             .filter((option) => !!option);
     };

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

@@ -46,7 +46,14 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
         if (!dom_1.IS_BROWSER) {
             return;
         }
+        // A one-event scroll jump is read before the section it lands on stops being skipped.
+        const onContentVisibilityChange = (event) => {
+            if ('skipped' in event && event.skipped === false) {
+                scrollListener();
+            }
+        };
         window.addEventListener('scroll', scrollListener, { capture: false });
+        window.addEventListener('contentvisibilityautostatechange', onContentVisibilityChange, true);
         const initialRead = setTimeout(() => {
             scrollListener();
         }, 10);
@@ -54,6 +61,7 @@ function useActiveSectionId(location, hasOverviewPage = false, withNavbar = true
             clearTimeout(initialRead);
             scrollListener.cancel();
             window.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('contentvisibilityautostatechange', onContentVisibilityChange, true);
         };
     }, [location, heightOffset, scrollListener]);
     return itemId;

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,3 +1,3 @@
 import type { PageAction } from '../types';
-export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'grok' | 'docs-mcp-cursor' | 'docs-mcp-vscode' | 'docs-mcp-claude' | 'mcp-cursor' | 'mcp-vscode';
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'grok' | 'docs-mcp-claude' | 'docs-mcp-vscode' | 'docs-mcp-cursor' | 'copy-mcp-url' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

package/lib/core/hooks/use-page-actions.js

@@ -15,6 +15,7 @@ const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
 const GrokIcon_1 = require("../../icons/GrokIcon/GrokIcon");
+const McpIcon_1 = require("../../icons/McpIcon/McpIcon");
 const MarkdownFullIcon_1 = require("../../icons/MarkdownFullIcon/MarkdownFullIcon");
 const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
 const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
@@ -33,9 +34,10 @@ const DEFAULT_ENABLED_ACTIONS = [
     'chatgpt',
     'claude',
     'grok',
-    'docs-mcp-cursor',
-    'docs-mcp-vscode',
     'docs-mcp-claude',
+    'docs-mcp-vscode',
+    'docs-mcp-cursor',
+    'copy-mcp-url',
 ];
 function usePageActions(pageSlug, mcpUrl, actions) {
     var _a;
@@ -100,6 +102,18 @@ function usePageActions(pageSlug, mcpUrl, actions) {
             'docs-mcp-cursor': createMCPHandler('cursor', false),
             'docs-mcp-vscode': createMCPHandler('vscode', false),
             'docs-mcp-claude': createMCPHandler('claude', false),
+            'copy-mcp-url': () => ({
+                buttonText: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+                title: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+                description: translate('page.actions.connectMcp.copyUrlDescription', 'Copy the MCP server URL to the clipboard'),
+                iconComponent: McpIcon_1.McpIcon,
+                onClick: () => {
+                    clipboard_service_1.ClipboardService.copyCustom(mcpConfig.serverUrl);
+                    telemetry.sendPageActionsClickedMessage([
+                        Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('pageActions', 'button')), { actionType: 'copy-mcp-url' }),
+                    ]);
+                },
+            }),
             'mcp-cursor': createMCPHandler('cursor', true),
             'mcp-vscode': createMCPHandler('vscode', true),
             copy: () => ({
@@ -163,6 +177,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
         isPublic,
         mcpUrl,
         mcpConfig.isMcpDisabled,
+        mcpConfig.serverUrl,
         pageSlug,
         actions,
         translate,
@@ -219,6 +234,7 @@ function shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled, }) {
         case 'docs-mcp-cursor':
         case 'docs-mcp-vscode':
         case 'docs-mcp-claude':
+        case 'copy-mcp-url':
             return Boolean(mcpUrl) || isMcpDisabled;
         case 'mcp-cursor':
         case 'mcp-vscode':

package/lib/core/styles/dark.js

@@ -18,7 +18,8 @@ const variables_dark_13 = require("../../components/PageActions/variables.dark")
 const variables_dark_14 = require("../../components/Tooltip/variables.dark");
 const variables_dark_15 = require("../../components/Banner/variables.dark");
 const variables_dark_16 = require("../../components/Admonition/variables.dark");
-const variables_dark_17 = require("../../components/CodeBlock/variables.dark");
+const variables_dark_17 = require("../../components/MissingTranslationNotice/variables.dark");
+const variables_dark_18 = require("../../components/CodeBlock/variables.dark");
 const palette_dark_1 = require("./palette.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
@@ -359,10 +360,11 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_14.tooltipDarkMode}
   ${variables_dark_15.bannerDarkMode}
   ${variables_dark_16.admonitionDarkMode}
+  ${variables_dark_17.missingTranslationNoticeDarkMode}
   ${badgesDarkMode}
   ${numberedListDarkMode}
   ${palette_dark_1.activeBrandPaletteDark}
-  ${variables_dark_17.codeBlockDarkMode}
+  ${variables_dark_18.codeBlockDarkMode}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/lib/core/styles/global.js

@@ -20,39 +20,40 @@ const variables_15 = require("../../components/Dropdown/variables");
 const variables_16 = require("../../components/Tooltip/variables");
 const variables_17 = require("../../icons/CheckboxIcon/variables");
 const variables_18 = require("../../components/Admonition/variables");
-const variables_19 = require("../../components/Footer/variables");
-const variables_20 = require("../../components/Button/variables");
-const variables_21 = require("../../components/Buttons/variables");
-const variables_22 = require("../../components/Navbar/variables");
-const variables_23 = require("../../components/Search/variables");
-const variables_24 = require("../../components/Menu/variables");
-const variables_25 = require("../../components/CodeBlock/variables");
-const variables_26 = require("../../components/Product/variables");
-const variables_27 = require("../../components/Markdown/variables");
-const variables_28 = require("../../components/Banner/variables");
-const variables_29 = require("../../components/Consent/variables");
-const variables_30 = require("../../markdoc/components/Accordion/variables");
-const variables_31 = require("../../markdoc/components/Tabs/variables");
-const variables_32 = require("../../markdoc/components/NumberedList/variables");
-const variables_33 = require("../../markdoc/components/Diagram/variables");
-const variables_34 = require("../../components/LastUpdated/variables");
-const variables_35 = require("../../components/Logo/variables");
-const variables_36 = require("../../components/StatusCode/variables");
-const variables_37 = require("../../components/Segmented/variables");
-const variables_38 = require("../../components/UserMenu/variables");
-const variables_39 = require("../../components/Tags/variables");
-const variables_40 = require("../../components/VersionPicker/variables");
-const variables_41 = require("../../components/DatePicker/variables");
-const variables_42 = require("../../components/Switch/variables");
-const variables_43 = require("../../markdoc/components/Cards/variables");
-const variables_44 = require("../../markdoc/components/Prompt/variables");
-const variables_45 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_46 = require("../../components/SkipContent/variables");
-const variables_47 = require("../../components/PageActions/variables");
-const variables_48 = require("../../components/SvgViewer/variables");
-const variables_49 = require("../../components/Toast/variables");
-const variables_50 = require("../../components/PageNavigation/variables");
-const variables_51 = require("../../components/NavigationTabs/variables");
+const variables_19 = require("../../components/MissingTranslationNotice/variables");
+const variables_20 = require("../../components/Footer/variables");
+const variables_21 = require("../../components/Button/variables");
+const variables_22 = require("../../components/Buttons/variables");
+const variables_23 = require("../../components/Navbar/variables");
+const variables_24 = require("../../components/Search/variables");
+const variables_25 = require("../../components/Menu/variables");
+const variables_26 = require("../../components/CodeBlock/variables");
+const variables_27 = require("../../components/Product/variables");
+const variables_28 = require("../../components/Markdown/variables");
+const variables_29 = require("../../components/Banner/variables");
+const variables_30 = require("../../components/Consent/variables");
+const variables_31 = require("../../markdoc/components/Accordion/variables");
+const variables_32 = require("../../markdoc/components/Tabs/variables");
+const variables_33 = require("../../markdoc/components/NumberedList/variables");
+const variables_34 = require("../../markdoc/components/Diagram/variables");
+const variables_35 = require("../../components/LastUpdated/variables");
+const variables_36 = require("../../components/Logo/variables");
+const variables_37 = require("../../components/StatusCode/variables");
+const variables_38 = require("../../components/Segmented/variables");
+const variables_39 = require("../../components/UserMenu/variables");
+const variables_40 = require("../../components/Tags/variables");
+const variables_41 = require("../../components/VersionPicker/variables");
+const variables_42 = require("../../components/DatePicker/variables");
+const variables_43 = require("../../components/Switch/variables");
+const variables_44 = require("../../markdoc/components/Cards/variables");
+const variables_45 = require("../../markdoc/components/Prompt/variables");
+const variables_46 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_47 = require("../../components/SkipContent/variables");
+const variables_48 = require("../../components/PageActions/variables");
+const variables_49 = require("../../components/SvgViewer/variables");
+const variables_50 = require("../../components/Toast/variables");
+const variables_51 = require("../../components/PageNavigation/variables");
+const variables_52 = require("../../components/NavigationTabs/variables");
 const utils_1 = require("../../core/utils");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
@@ -1272,50 +1273,51 @@ const replay = (0, styled_components_1.css) `
 exports.tokens = (0, styled_components_1.css) `
   ${variables_13.accordion}
   ${variables_18.admonition}
+  ${variables_19.missingTranslationNotice}
   ${apiReferenceDocs}
   ${variables_12.apiReferencePanels}
   ${badges}
-  ${variables_28.banner}
+  ${variables_29.banner}
   ${borders}
-  ${variables_29.consent}
+  ${variables_30.consent}
   ${variables_5.breadcrumbs}
-  ${variables_20.button}
-  ${variables_21.aiAssistantButton}
-  ${variables_21.connectMcpButton}
-  ${variables_43.cards}
-  ${variables_44.promptTag}
+  ${variables_21.button}
+  ${variables_22.aiAssistantButton}
+  ${variables_22.connectMcpButton}
+  ${variables_44.cards}
+  ${variables_45.promptTag}
   ${variables_8.catalog}
   ${variables_11.catalogClassic}
-  ${variables_25.code}
-  ${variables_45.codeWalkthrough}
+  ${variables_26.code}
+  ${variables_46.codeWalkthrough}
   ${docsDropdown}
   ${variables_15.dropdown}
   ${error}
   ${variables_10.filter}
-  ${variables_19.footer}
+  ${variables_20.footer}
   ${headingsTypography}
-  ${variables_39.httpTag}
+  ${variables_40.httpTag}
   ${variables_9.image}
   ${inputs}
   ${variables_1.languagePicker}
-  ${variables_34.lastUpdated}
+  ${variables_35.lastUpdated}
   ${links}
   ${loadProgressBar}
-  ${variables_35.logo}
-  ${variables_27.markdown}
-  ${variables_30.markdownAccordion}
-  ${variables_31.markdownTabs}
-  ${variables_32.markdownNumberedList}
-  ${variables_33.diagram}
-  ${variables_24.menu}
-  ${variables_24.mobileMenu}
+  ${variables_36.logo}
+  ${variables_28.markdown}
+  ${variables_31.markdownAccordion}
+  ${variables_32.markdownTabs}
+  ${variables_33.markdownNumberedList}
+  ${variables_34.diagram}
+  ${variables_25.menu}
+  ${variables_25.mobileMenu}
   ${modal}
-  ${variables_22.navbar}
+  ${variables_23.navbar}
   ${pages}
-  ${variables_26.productPicker}
+  ${variables_27.productPicker}
   ${variables_12.responsePanelColors}
-  ${variables_23.search}
-  ${variables_51.navigationTabs}
+  ${variables_24.search}
+  ${variables_52.navigationTabs}
   ${variables_14.select}
   ${variables_4.sidebar}
   ${sizeAndSpace}
@@ -1326,26 +1328,26 @@ exports.tokens = (0, styled_components_1.css) `
   ${variables_7.toc}
   ${variables_16.tooltip}
   ${typography}
-  ${variables_38.userMenu}
-  ${variables_40.versionPicker}
+  ${variables_39.userMenu}
+  ${variables_41.versionPicker}
   ${zIndexDepth}
   ${scorecardColors}
-  ${variables_36.statusCode}
+  ${variables_37.statusCode}
   ${tab}
   ${icon}
   ${tree}
-  ${variables_37.segmented}
-  ${variables_42.switcher}
+  ${variables_38.segmented}
+  ${variables_43.switcher}
   ${variables_17.checkbox}
   ${variables_3.feedback}
   ${variables_2.scorecard}
-  ${variables_41.datePicker}
+  ${variables_42.datePicker}
   ${replay}
-  ${variables_46.skipContent}
-  ${variables_47.pageActions}
-  ${variables_48.svgViewer}
-  ${variables_49.toast}
-  ${variables_50.pageNavigation}
+  ${variables_47.skipContent}
+  ${variables_48.pageActions}
+  ${variables_49.svgViewer}
+  ${variables_50.toast}
+  ${variables_51.pageNavigation}
 
 `;
 exports.styles = (0, styled_components_1.css) `

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

@@ -11,7 +11,7 @@ import type { ItemState, DrilldownMenuItemDetails } from './sidebar';
 import type { NavigationTabsState } from './navigation-tabs';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ContentSegment, ToolCall } from './search';
 import type { SubmitFeedbackParams } from './feedback';
-import type { TFunction } from './l10n';
+import type { Locale, TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
 import type { UseConsentResult } from './consent';
 import type { AiSearchError } from '../constants/search';
@@ -185,8 +185,5 @@ export type ThemeHooks = {
 export type L10nConfig = {
     currentLocale: string;
     defaultLocale: string;
-    locales: {
-        code: string;
-        name: string;
-    }[];
+    locales: Locale[];
 };