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

package/lib/layouts/DocumentationLayout.js

@@ -45,6 +45,7 @@ const constants_1 = require("../core/constants");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
 const DocumentationLayoutTop_1 = require("../layouts/DocumentationLayoutTop");
 const DocumentationLayoutBottom_1 = require("../layouts/DocumentationLayoutBottom");
+const MissingTranslationNotice_1 = require("../components/MissingTranslationNotice/MissingTranslationNotice");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
     var _a, _b;
     const { markdown } = (0, hooks_1.useThemeConfig)();
@@ -53,6 +54,7 @@ function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastM
         react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className, $withToc: withToc },
             react_1.default.createElement(ContentWrapper, null,
                 react_1.default.createElement(DocumentationLayoutTop_1.DocumentationLayoutTop, { config: config, editPage: editPage, lastModified: lastModified }),
+                react_1.default.createElement(MissingTranslationNotice_1.MissingTranslationNotice, null),
                 children,
                 react_1.default.createElement(DocumentationLayoutBottom_1.DocumentationLayoutBottom, { feedback: feedback, nextPage: nextPage, prevPage: prevPage })),
             tableOfContent)));

package/lib/markdoc/default.d.ts

@@ -30,6 +30,7 @@ import { icon } from '../markdoc/tags/icon';
 import { connectMcp } from '../markdoc/tags/connect-mcp';
 import { loginButton } from '../markdoc/tags/login-button';
 import { diagram } from '../markdoc/tags/diagram';
+import { visibility } from '../markdoc/tags/visibility';
 import { prompt } from '../markdoc/tags/prompt';
 export declare const tags: {
     [accordion.tagName]: import("./tags/types").MarkdocTagSchema;
@@ -57,5 +58,6 @@ export declare const tags: {
     [connectMcp.tagName]: import("./tags/types").MarkdocTagSchema;
     [loginButton.tagName]: import("./tags/types").MarkdocTagSchema;
     [diagram.tagName]: import("./tags/types").MarkdocTagSchema;
+    [visibility.tagName]: import("./tags/types").MarkdocTagSchema;
     [prompt.tagName]: import("./tags/types").MarkdocTagSchema;
 };

package/lib/markdoc/default.js

@@ -72,6 +72,7 @@ const icon_1 = require("../markdoc/tags/icon");
 const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
 const login_button_1 = require("../markdoc/tags/login-button");
 const diagram_1 = require("../markdoc/tags/diagram");
+const visibility_1 = require("../markdoc/tags/visibility");
 const prompt_1 = require("../markdoc/tags/prompt");
 exports.tags = {
     [accordion_1.accordion.tagName]: accordion_1.accordion.schema,
@@ -99,6 +100,7 @@ exports.tags = {
     [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
     [login_button_1.loginButton.tagName]: login_button_1.loginButton.schema,
     [diagram_1.diagram.tagName]: diagram_1.diagram.schema,
+    [visibility_1.visibility.tagName]: visibility_1.visibility.schema,
     [prompt_1.prompt.tagName]: prompt_1.prompt.schema,
 };
 //# sourceMappingURL=default.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.71.0-next.4",
+  "version": "0.71.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0",
+    "@redocly/realm-asyncapi-sdk": "0.17.0-next.1",
     "@redocly/tooling-test-utils": "0.0.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
@@ -58,6 +58,7 @@
     "@vitest/coverage-v8": "4.1.11",
     "@vitest/ui": "4.1.11",
     "concurrently": "7.6.0",
+    "jest-styled-components": "7.4.0",
     "react-router": "^8.3.0",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
@@ -69,7 +70,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.66.0",
+    "@redocly/config": "0.67.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/Buttons/MobileMenuButton.tsx

@@ -0,0 +1,45 @@
+import React, { useTransition } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { MenuIcon } from '@redocly/theme/icons/MenuIcon/MenuIcon';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+
+export type MobileMenuButtonProps = {
+  isOpen: boolean;
+  /** Called inside a transition; the button shows the requested state until it commits. */
+  onOpenChange: (isOpen: boolean) => void;
+  className?: string;
+};
+
+export function MobileMenuButton({
+  isOpen,
+  onOpenChange,
+  className,
+}: MobileMenuButtonProps): JSX.Element {
+  const [isToggling, startToggle] = useTransition();
+  const showClose = isToggling ? !isOpen : isOpen;
+
+  return (
+    <MobileMenuButtonWrapper
+      data-component-name="Buttons/MobileMenuButton"
+      className={className}
+      variant="text"
+      data-testid="mobile-menu-button"
+      onClick={() => startToggle(() => onOpenChange(!showClose))}
+      icon={showClose ? <CloseIcon /> : <MenuIcon />}
+      aria-label={showClose ? 'Close menu button' : 'Open menu button'}
+    />
+  );
+}
+
+const MobileMenuButtonWrapper = styled(Button)`
+  margin-left: 0px !important;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: none;
+  }
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { FilterProps, FilterTypes } from '@redocly/theme/core/types';
+import type { FilterProps } from '@redocly/theme/core/types';
 
 import { CatalogFilterSelect } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterSelect';
 import { CatalogFilterCheckboxes } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterCheckboxes';
@@ -31,7 +31,7 @@ export function CatalogFilter({
     return null;
   }
 
-  const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
+  const FilterComponent = filterComponents[filter.type || 'checkboxes'];
 
   return (
     <CatalogFilterGroup

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -21,7 +21,7 @@ export type CatalogClassicInfoBlockProps = {
 export function CatalogClassicInfoBlock(props: CatalogClassicInfoBlockProps): JSX.Element {
   const scorecardBadge = props.metadata?.scorecardLevel ? (
     <ScorecardBadge
-      level={props.metadata.scorecardLevel as string}
+      level={props.metadata.scorecardLevel}
       slug={props.metadata?.scoreCardSlug as string}
       colorVariable={getScorecardColorVariable(
         props.metadata?.scorecardLevelIdx || 0,

package/src/components/Feedback/Feedback.tsx

@@ -43,9 +43,7 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
   const renderFeedbackComponent = () => {
     const { type, settings, path } = feedbackConf;
 
-    const FeedbackComponent = feedbackComponents[
-      type as FeedbackComponentsKeys
-    ] as FeedbackComponents[FeedbackComponentsKeys];
+    const FeedbackComponent = feedbackComponents[type as FeedbackComponentsKeys];
 
     if (!FeedbackComponent) {
       return null;

package/src/components/Feedback/Mood.tsx

@@ -134,8 +134,8 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   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: string) => {
     const trimmedComment = comment?.trim() || undefined;

package/src/components/Feedback/Rating.tsx

@@ -101,8 +101,8 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
   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 (

package/src/components/Feedback/Scale.tsx

@@ -121,8 +121,8 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
   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 (

package/src/components/Feedback/Sentiment.tsx

@@ -90,8 +90,8 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
 
   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

package/src/components/Filter/Filter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { FilterProps, FilterTypes } from '@redocly/theme/core/types';
+import type { FilterProps } from '@redocly/theme/core/types';
 
 import { FilterSelect } from '@redocly/theme/components/Filter/FilterSelect';
 import { FilterCheckboxes } from '@redocly/theme/components/Filter/FilterCheckboxes';
@@ -21,7 +21,7 @@ export function Filter({
 }: FilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
-  const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
+  const FilterComponent = filterComponents[filter.type || 'checkboxes'];
 
   return (
     <FilterGroup data-component-name="Filter/Filter" key={filter.property + filter.title}>

package/src/components/MCP/McpConnectionTabs.tsx

@@ -10,6 +10,7 @@ import { useMCPConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   generateClaudeCodeCommand,
   generateCodexCommand,
+  generateGrokBuildCommand,
   generateMCPDeepLink,
   generateMcpInstallPrompt,
   getBaseDataAttributes,
@@ -18,19 +19,20 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
+import { GrokIcon } from '@redocly/theme/icons/GrokIcon/GrokIcon';
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { TabItemFragment } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 import { NumberedList } from '@redocly/theme/markdoc/components/NumberedList/NumberedList';
 import { NumberedItem } from '@redocly/theme/markdoc/components/NumberedList/NumberedItem';
 
-export type McpConnectionTab = 'claude' | 'chatgpt' | 'json';
+export type McpConnectionTab = 'claude' | 'chatgpt' | 'grok' | 'json';
 
 export type McpConnectionTabsProps = {
   options?: McpConnectionTab[];
   className?: string;
 };
 
-const DEFAULT_TAB_OPTIONS: McpConnectionTab[] = ['claude', 'chatgpt', 'json'];
+const DEFAULT_TAB_OPTIONS: McpConnectionTab[] = ['claude', 'chatgpt', 'grok', 'json'];
 
 const TAB_LABELS: Record<
   McpConnectionTab,
@@ -46,9 +48,16 @@ const TAB_LABELS: Record<
     defaultLabel: 'ChatGPT',
     icon: ChatGptIcon,
   },
+  grok: {
+    translationKey: 'page.mcpNotAllowed.tabs.grok',
+    defaultLabel: 'Grok',
+    icon: GrokIcon,
+  },
   json: { translationKey: 'page.mcpNotAllowed.tabs.json', defaultLabel: 'JSON' },
 };
 
+const GROK_CONNECTORS_URL = 'https://grok.com/connectors';
+
 type TabClient = { headline: string; content: ReactNode };
 
 type SnippetId =
@@ -235,6 +244,51 @@ function renderTabContent(
         },
         assistantPromptClient,
       ]);
+    case 'grok':
+      return renderClientList([
+        {
+          headline: translate('page.mcpNotAllowed.snippets.grokBuild.headline', 'Grok Build'),
+          content: (
+            <>
+              {terminalHint}
+              <CodeBlock
+                lang="shell"
+                source={generateGrokBuildCommand(connection)}
+                header={snippetHeader(option, 'grok-build')}
+                wrapContents
+              />
+            </>
+          ),
+        },
+        {
+          headline: translate('page.mcpNotAllowed.snippets.grokApp.headline', 'Grok app'),
+          content: (
+            <>
+              <ConnectButton
+                variant="secondary"
+                icon={<GrokIcon />}
+                onClick={() => window.open(GROK_CONNECTORS_URL, '_blank')}
+              >
+                {translate(
+                  'page.mcpNotAllowed.snippets.grokApp.openConnectors',
+                  'Open Grok connectors',
+                )}
+              </ConnectButton>
+              <TabHint>
+                {translate(
+                  'page.mcpNotAllowed.snippets.grokApp.instruction',
+                  'On grok.com, open Connectors → New Connector → Custom and paste this server URL:',
+                )}
+              </TabHint>
+              <CodeBlock
+                lang="text"
+                source={connection.url}
+                header={snippetHeader(option, 'grok-app')}
+              />
+            </>
+          ),
+        },
+      ]);
     case 'json':
       return (
         <>

package/src/components/MissingTranslationNotice/MissingTranslationNotice.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { TranslateIcon } from '@redocly/theme/icons/TranslateIcon/TranslateIcon';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+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 function MissingTranslationNotice({
+  className,
+}: MissingTranslationNoticeProps): JSX.Element | null {
+  const { useTranslate, useMarkdownText, usePageProps, useL10nConfig } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { isTranslationFallback } = usePageProps<{ isTranslationFallback?: boolean }>();
+  const { currentLocale, defaultLocale, locales } = useL10nConfig();
+  const [isDismissed, setIsDismissed] = React.useState(false);
+
+  const isShown =
+    isTranslationFallback === true &&
+    currentLocale !== defaultLocale &&
+    locales.some(
+      ({ code, showMissingTranslationNotice }) =>
+        code === currentLocale && showMissingTranslationNotice === true,
+    );
+  const language = locales.find(({ code }) => code === defaultLocale)?.name || defaultLocale;
+  const content = useMarkdownText(
+    isShown ? translate('missingTranslationNotice.content', { language }) : '',
+  );
+
+  if (!isShown || isDismissed) {
+    return null;
+  }
+
+  return (
+    <MissingTranslationNoticeWrapper
+      className={className}
+      data-component-name="MissingTranslationNotice/MissingTranslationNotice"
+    >
+      <Icon color="--missing-translation-notice-icon-color" />
+      <Content>
+        <Title>
+          {translate('missingTranslationNotice.title', {
+            defaultValue: 'This page has not yet been translated',
+          })}
+        </Title>
+        <Markdown compact>{content}</Markdown>
+      </Content>
+      <CloseButton
+        type="button"
+        aria-label={translate('missingTranslationNotice.close', { defaultValue: 'Close' })}
+        onClick={() => setIsDismissed(true)}
+      >
+        <CloseIcon color="--missing-translation-notice-text-color" />
+      </CloseButton>
+    </MissingTranslationNoticeWrapper>
+  );
+}
+
+const MissingTranslationNoticeWrapper = styled.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 = styled(TranslateIcon)`
+  flex-shrink: 0;
+`;
+
+const Content = styled.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.span`
+  font-size: var(--missing-translation-notice-title-font-size);
+  font-weight: var(--missing-translation-notice-title-font-weight);
+`;
+
+const CloseButton = styled.button`
+  display: flex;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;

package/src/components/MissingTranslationNotice/variables.dark.ts

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+export const missingTranslationNoticeDarkMode = 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
+`;

package/src/components/MissingTranslationNotice/variables.ts

@@ -0,0 +1,26 @@
+import { css } from 'styled-components';
+
+export const missingTranslationNotice = 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
+`;

package/src/components/Navbar/Navbar.tsx

@@ -19,9 +19,7 @@ import { Search } from '@redocly/theme/components/Search/Search';
 import { UserMenu } from '@redocly/theme/components/UserMenu/UserMenu';
 import { LanguagePicker } from '@redocly/theme/components/LanguagePicker/LanguagePicker';
 import { ProductPicker } from '@redocly/theme/components/Product/ProductPicker';
-import { Button } from '@redocly/theme/components/Button/Button';
-import { MenuIcon } from '@redocly/theme/icons/MenuIcon/MenuIcon';
-import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { MobileMenuButton } from '@redocly/theme/components/Buttons/MobileMenuButton';
 import { Banner } from '@redocly/theme/components/Banner/Banner';
 
 export type NavbarProps = {
@@ -69,25 +67,20 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
         <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon alignment="end" />
         <ColorModeSwitcher />
         <MobileMenuButton
-          variant="text"
-          data-testid="mobile-menu-button"
-          onClick={
-            isOpen
-              ? () => {
-                  closeMobileMenu();
-                  telemetry.sendMobileMenuClosedMessage([
-                    getBaseDataAttributes('mobileMenuClose', 'button'),
-                  ]);
-                }
-              : () => {
-                  openMobileMenu();
-                  telemetry.sendMobileMenuOpenedMessage([
-                    getBaseDataAttributes('mobileMenuOpen', 'button'),
-                  ]);
-                }
-          }
-          icon={isOpen ? <CloseIcon /> : <MenuIcon />}
-          aria-label={isOpen ? 'Close menu button' : 'Open menu button'}
+          isOpen={isOpen}
+          onOpenChange={(open) => {
+            if (open) {
+              openMobileMenu();
+              telemetry.sendMobileMenuOpenedMessage([
+                getBaseDataAttributes('mobileMenuOpen', 'button'),
+              ]);
+            } else {
+              closeMobileMenu();
+              telemetry.sendMobileMenuClosedMessage([
+                getBaseDataAttributes('mobileMenuClose', 'button'),
+              ]);
+            }
+          }}
         />
         {hideUserMenu ? null : <UserMenu />}
       </NavbarRow>
@@ -147,11 +140,3 @@ const NavbarRow = styled.div`
     margin-right: auto;
   }
 `;
-
-const MobileMenuButton = styled(Button)`
-  margin-left: 0px !important;
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: none;
-  }
-`;

package/src/components/PageActions/PageActions.tsx

@@ -112,6 +112,7 @@ function renderIcon(buttonAction: PageAction, actionState: ActionState) {
 const PageActionsWrapper = styled.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 {

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -92,7 +92,7 @@ function facetValueToSelectOption(facetValue?: SearchFacetCount | string) {
       value: facetValue,
     };
   } else {
-    const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+    const { value, count, isCounterVisible } = facetValue;
     return {
       element: (
         <FilterSelectOptionWrapper>

package/src/components/Select/Select.tsx

@@ -46,8 +46,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       .map((value) => {
         const selectedOption = options.find((option) => option.value === value);
         return (
-          selectedOption ||
-          (typeof value === 'string' ? ({ value } as SelectOption<T>) : (value as SelectOption<T>))
+          selectedOption || (typeof value === 'string' ? { value } : (value as SelectOption<T>))
         );
       })
       .filter((option) => !!option);

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -7,7 +7,7 @@ export const useThemeHooks = vi.fn(() => ({
     translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue
         ? typeof defaultValue !== 'string'
-          ? (defaultValue as { defaultValue: string }).defaultValue
+          ? defaultValue.defaultValue
           : defaultValue
         : key,
     ),

package/src/core/hooks/use-active-section-id.ts

@@ -60,7 +60,15 @@ export function useActiveSectionId(
       return;
     }
 
+    // A one-event scroll jump is read before the section it lands on stops being skipped.
+    const onContentVisibilityChange = (event: 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);
@@ -69,6 +77,11 @@ export function useActiveSectionId(
       clearTimeout(initialRead);
       scrollListener.cancel();
       window.removeEventListener('scroll', scrollListener);
+      window.removeEventListener(
+        'contentvisibilityautostatechange',
+        onContentVisibilityChange,
+        true,
+      );
     };
   }, [location, heightOffset, scrollListener]);
 

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -41,7 +41,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       resizeObserver.observe(container);
 
       return () => {
-        resizeObserver.unobserve(container as HTMLDivElement);
+        resizeObserver.unobserve(container);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps