@docusaurus/theme-classic 3.9.2-canary-6495 → 3.9.2-canary-6526

package/README.md

@@ -1,4 +1,4 @@
-# Docusaurus Theme Classic
+# `@docusaurus/theme-classic`
 
 The classic theme for Docusaurus.
 

package/lib/theme/DocCard/Description/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocCard/Description';
+export default function DocCardDescription({ description }: Props): ReactNode;

package/lib/theme/DocCard/Description/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function DocCardDescription({description}) {
+  return (
+    <p
+      className={clsx(
+        'text--truncate',
+        ThemeClassNames.docs.docCard.description,
+        styles.cardDescription,
+      )}
+      title={description}>
+      {description}
+    </p>
+  );
+}

package/lib/theme/DocCard/Description/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardDescription {
+  font-size: 0.8rem;
+}

package/lib/theme/DocCard/Heading/Icon/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocCard/Heading/Icon';
+export default function DocCardHeadingIcon({ icon }: Props): ReactNode;

package/lib/theme/DocCard/Heading/Icon/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function DocCardHeadingIcon({icon}) {
+  return (
+    <span
+      className={clsx(ThemeClassNames.docs.docCard.icon, styles.cardTitleIcon)}>
+      {icon}
+    </span>
+  );
+}

package/lib/theme/DocCard/Heading/Icon/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardTitleIcon {
+  font-size: 1.6rem;
+  margin-right: 0.6rem;
+}

package/lib/theme/DocCard/Heading/Text/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocCard/Heading/Text';
+export default function DocCardHeadingText({ title }: Props): ReactNode;

package/lib/theme/DocCard/Heading/Text/index.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function DocCardHeadingText({title}) {
+  return (
+    <span
+      className={clsx(
+        'text--truncate',
+        ThemeClassNames.docs.docCard.title,
+        styles.cardTitleText,
+      )}>
+      {title}
+    </span>
+  );
+}

package/lib/theme/DocCard/Heading/Text/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardTitleText {
+  font-size: 1.2rem;
+}

package/lib/theme/DocCard/Heading/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocCard/Heading';
+export default function DocCardHeading({ item, title, icon }: Props): ReactNode;

package/lib/theme/DocCard/Heading/index.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Heading from '@theme/Heading';
+import Icon from '@theme/DocCard/Heading/Icon';
+import Text from '@theme/DocCard/Heading/Text';
+import styles from './styles.module.css';
+export default function DocCardHeading({item, title, icon}) {
+  return (
+    <Heading
+      as="h2"
+      className={clsx(ThemeClassNames.docs.docCard.heading, styles.cardTitle)}
+      title={title}>
+      {icon && <Icon item={item} icon={icon} />}
+      <Text item={item} title={title} />
+    </Heading>
+  );
+}

package/lib/theme/DocCard/Heading/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardTitle {
+  display: inline-flex;
+  align-items: center;
+}

package/lib/theme/DocCard/Layout/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocCard/Layout';
+export default function DocCardLayout({ item, className, href, icon, title, description, }: Props): ReactNode;

package/lib/theme/DocCard/Layout/index.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Heading from '@theme/DocCard/Heading';
+import Description from '@theme/DocCard/Description';
+import styles from './styles.module.css';
+function Container({className, href, children}) {
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        'card padding--lg',
+        ThemeClassNames.docs.docCard.container,
+        styles.cardContainer,
+        className,
+      )}>
+      {children}
+    </Link>
+  );
+}
+export default function DocCardLayout({
+  item,
+  className,
+  href,
+  icon,
+  title,
+  description,
+}) {
+  return (
+    <Container href={href} className={className}>
+      <Heading item={item} icon={icon} title={title} />
+      {description && <Description item={item} description={description} />}
+    </Container>
+  );
+}

package/lib/theme/DocCard/{styles.module.css → Layout/styles.module.css}

@@ -24,11 +24,3 @@
 .cardContainer *:last-child {
   margin-bottom: 0;
 }
-
-.cardTitle {
-  font-size: 1.2rem;
-}
-
-.cardDescription {
-  font-size: 0.8rem;
-}

package/lib/theme/DocCard/index.js

@@ -5,88 +5,56 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import {
   useDocById,
   findFirstSidebarItemLink,
 } from '@docusaurus/plugin-content-docs/client';
-import {usePluralForm} from '@docusaurus/theme-common';
+import {
+  extractLeadingEmoji,
+  useDocCardDescriptionCategoryItemsPlural,
+} from '@docusaurus/theme-common/internal';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
-import Heading from '@theme/Heading';
-import styles from './styles.module.css';
-function useCategoryItemsPlural() {
-  const {selectMessage} = usePluralForm();
-  return (count) =>
-    selectMessage(
-      count,
-      translate(
-        {
-          message: '1 item|{count} items',
-          id: 'theme.docs.DocCard.categoryDescription.plurals',
-          description:
-            'The default description for a category card in the generated index about how many items this category includes',
-        },
-        {count},
-      ),
-    );
-}
-function CardContainer({className, href, children}) {
-  return (
-    <Link
-      href={href}
-      className={clsx('card padding--lg', styles.cardContainer, className)}>
-      {children}
-    </Link>
-  );
+import Layout from '@theme/DocCard/Layout';
+function getFallbackEmojiIcon(item) {
+  if (item.type === 'category') {
+    return '🗃';
+  }
+  return isInternalUrl(item.href) ? '📄️' : '🔗';
 }
-function CardLayout({className, href, icon, title, description}) {
-  return (
-    <CardContainer href={href} className={className}>
-      <Heading
-        as="h2"
-        className={clsx('text--truncate', styles.cardTitle)}
-        title={title}>
-        {icon} {title}
-      </Heading>
-      {description && (
-        <p
-          className={clsx('text--truncate', styles.cardDescription)}
-          title={description}>
-          {description}
-        </p>
-      )}
-    </CardContainer>
-  );
+function getIconTitleProps(item) {
+  const extracted = extractLeadingEmoji(item.label);
+  const emoji = extracted.emoji ?? getFallbackEmojiIcon(item);
+  return {
+    icon: emoji,
+    title: extracted.rest.trim(),
+  };
 }
 function CardCategory({item}) {
   const href = findFirstSidebarItemLink(item);
-  const categoryItemsPlural = useCategoryItemsPlural();
+  const categoryItemsPlural = useDocCardDescriptionCategoryItemsPlural();
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
     return null;
   }
   return (
-    <CardLayout
+    <Layout
+      item={item}
       className={item.className}
       href={href}
-      icon="🗃️"
-      title={item.label}
       description={item.description ?? categoryItemsPlural(item.items.length)}
+      {...getIconTitleProps(item)}
     />
   );
 }
 function CardLink({item}) {
-  const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
   const doc = useDocById(item.docId ?? undefined);
   return (
-    <CardLayout
+    <Layout
+      item={item}
       className={item.className}
       href={item.href}
-      icon={icon}
-      title={item.label}
       description={item.description ?? doc?.description}
+      {...getIconTitleProps(item)}
     />
   );
 }

package/lib/theme/Layout/index.js

@@ -12,7 +12,6 @@ import {
   SkipToContentFallbackId,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
-import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
@@ -29,7 +28,6 @@ export default function Layout(props) {
     title,
     description,
   } = props;
-  useKeyboardNavigation();
   return (
     <LayoutProvider>
       <PageMetadata title={title} description={description} />

package/lib/theme/SiteMetadata/index.js

@@ -12,7 +12,6 @@ import {PageMetadata, useThemeConfig} from '@docusaurus/theme-common';
 import {
   DEFAULT_SEARCH_TAG,
   useAlternatePageUtils,
-  keyboardFocusedClassName,
 } from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import {applyTrailingSlash} from '@docusaurus/utils-common';
@@ -115,7 +114,7 @@ export default function SiteMetadata() {
         <meta name="twitter:card" content="summary_large_image" />
         {/* The keyboard focus class name need to be applied when SSR so links
         are outlined when JS is disabled */}
-        <body className={keyboardFocusedClassName} />
+        <body />
       </Head>
 
       {defaultImage && <PageMetadata image={defaultImage} />}

package/lib/theme/TabItem/index.d.ts

@@ -6,4 +6,4 @@
  */
 import { type ReactNode } from 'react';
 import type { Props } from '@theme/TabItem';
-export default function TabItem({ children, hidden, className, }: Props): ReactNode;
+export default function TabItem({ children, className, value, }: Props): ReactNode;

package/lib/theme/TabItem/index.js

@@ -6,8 +6,9 @@
  */
 import React from 'react';
 import clsx from 'clsx';
+import {useTabs} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
-export default function TabItem({children, hidden, className}) {
+function TabItemPanel({children, className, hidden}) {
   return (
     <div
       role="tabpanel"
@@ -17,3 +18,16 @@ export default function TabItem({children, hidden, className}) {
     </div>
   );
 }
+export default function TabItem({children, className, value}) {
+  const {selectedValue, lazy} = useTabs();
+  const isSelected = value === selectedValue;
+  // TODO Docusaurus v4: use <Activity> ?
+  if (!isSelected && lazy) {
+    return null;
+  }
+  return (
+    <TabItemPanel className={className} hidden={!isSelected}>
+      {children}
+    </TabItemPanel>
+  );
+}

package/lib/theme/Tabs/index.js

@@ -4,17 +4,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {cloneElement} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
+  useTabsContextValue,
   useTabs,
   sanitizeTabsChildren,
+  TabsProvider,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import styles from './styles.module.css';
-function TabList({className, block, selectedValue, selectValue, tabValues}) {
+function TabList({className}) {
+  const {selectedValue, selectValue, tabValues, block} = useTabs();
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =
     useScrollPositionBlocker();
@@ -67,8 +70,8 @@ function TabList({className, block, selectedValue, selectValue, tabValues}) {
           tabIndex={selectedValue === value ? 0 : -1}
           aria-selected={selectedValue === value}
           key={value}
-          ref={(tabControl) => {
-            tabRefs.push(tabControl);
+          ref={(ref) => {
+            tabRefs.push(ref);
           }}
           onKeyDown={handleKeydown}
           onClick={handleTabChange}
@@ -82,35 +85,10 @@ function TabList({className, block, selectedValue, selectValue, tabValues}) {
     </ul>
   );
 }
-function TabContent({lazy, children, selectedValue}) {
-  const childTabs = (Array.isArray(children) ? children : [children]).filter(
-    Boolean,
-  );
-  if (lazy) {
-    const selectedTabItem = childTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue,
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, {
-      className: clsx('margin-top--md', selectedTabItem.props.className),
-    });
-  }
-  return (
-    <div className="margin-top--md">
-      {childTabs.map((tabItem, i) =>
-        cloneElement(tabItem, {
-          key: i,
-          hidden: tabItem.props.value !== selectedValue,
-        }),
-      )}
-    </div>
-  );
+function TabContent({children}) {
+  return <div className="margin-top--md">{children}</div>;
 }
-function TabsComponent(props) {
-  const tabs = useTabs(props);
+function TabsContainer({className, children}) {
   return (
     <div
       className={clsx(
@@ -120,20 +98,27 @@ function TabsComponent(props) {
         'tabs-container',
         styles.tabList,
       )}>
-      <TabList {...tabs} {...props} />
-      <TabContent {...tabs} {...props} />
+      <TabList
+        // Surprising but historical
+        // className is applied on TabList, not on TabsContainer
+        className={className}
+      />
+      <TabContent>{children}</TabContent>
     </div>
   );
 }
 export default function Tabs(props) {
   const isBrowser = useIsBrowser();
+  const value = useTabsContextValue(props);
   return (
-    <TabsComponent
+    <TabsProvider
+      value={value}
       // Remount tabs after hydration
       // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}>
-      {sanitizeTabsChildren(props.children)}
-    </TabsComponent>
+      key={String(isBrowser)}>
+      <TabsContainer className={props.className}>
+        {sanitizeTabsChildren(props.children)}
+      </TabsContainer>
+    </TabsProvider>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.9.2-canary-6495",
+  "version": "3.9.2-canary-6526",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,19 +20,19 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.9.2-canary-6495",
-    "@docusaurus/logger": "3.9.2-canary-6495",
-    "@docusaurus/mdx-loader": "3.9.2-canary-6495",
-    "@docusaurus/module-type-aliases": "3.9.2-canary-6495",
-    "@docusaurus/plugin-content-blog": "3.9.2-canary-6495",
-    "@docusaurus/plugin-content-docs": "3.9.2-canary-6495",
-    "@docusaurus/plugin-content-pages": "3.9.2-canary-6495",
-    "@docusaurus/theme-common": "3.9.2-canary-6495",
-    "@docusaurus/theme-translations": "3.9.2-canary-6495",
-    "@docusaurus/types": "3.9.2-canary-6495",
-    "@docusaurus/utils": "3.9.2-canary-6495",
-    "@docusaurus/utils-common": "3.9.2-canary-6495",
-    "@docusaurus/utils-validation": "3.9.2-canary-6495",
+    "@docusaurus/core": "3.9.2-canary-6526",
+    "@docusaurus/logger": "3.9.2-canary-6526",
+    "@docusaurus/mdx-loader": "3.9.2-canary-6526",
+    "@docusaurus/module-type-aliases": "3.9.2-canary-6526",
+    "@docusaurus/plugin-content-blog": "3.9.2-canary-6526",
+    "@docusaurus/plugin-content-docs": "3.9.2-canary-6526",
+    "@docusaurus/plugin-content-pages": "3.9.2-canary-6526",
+    "@docusaurus/theme-common": "3.9.2-canary-6526",
+    "@docusaurus/theme-translations": "3.9.2-canary-6526",
+    "@docusaurus/types": "3.9.2-canary-6526",
+    "@docusaurus/utils": "3.9.2-canary-6526",
+    "@docusaurus/utils-common": "3.9.2-canary-6526",
+    "@docusaurus/utils-validation": "3.9.2-canary-6526",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "infima": "0.2.0-alpha.45",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=20.0"
   },
-  "gitHead": "fb9b28015f40d530ceb623dc486a5b8f48902ca0"
+  "gitHead": "a37ae138931cb80b31664f86a34f97671c00e409"
 }

package/src/theme/DocCard/Description/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCard/Description';
+
+import styles from './styles.module.css';
+
+export default function DocCardDescription({description}: Props): ReactNode {
+  return (
+    <p
+      className={clsx(
+        'text--truncate',
+        ThemeClassNames.docs.docCard.description,
+        styles.cardDescription,
+      )}
+      title={description}>
+      {description}
+    </p>
+  );
+}

package/src/theme/DocCard/Description/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardDescription {
+  font-size: 0.8rem;
+}

package/src/theme/DocCard/Heading/Icon/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCard/Heading/Icon';
+
+import styles from './styles.module.css';
+
+export default function DocCardHeadingIcon({icon}: Props): ReactNode {
+  return (
+    <span
+      className={clsx(ThemeClassNames.docs.docCard.icon, styles.cardTitleIcon)}>
+      {icon}
+    </span>
+  );
+}

package/src/theme/DocCard/Heading/Icon/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardTitleIcon {
+  font-size: 1.6rem;
+  margin-right: 0.6rem;
+}

package/src/theme/DocCard/Heading/Text/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCard/Heading/Text';
+
+import styles from './styles.module.css';
+
+export default function DocCardHeadingText({title}: Props): ReactNode {
+  return (
+    <span
+      className={clsx(
+        'text--truncate',
+
+        ThemeClassNames.docs.docCard.title,
+        styles.cardTitleText,
+      )}>
+      {title}
+    </span>
+  );
+}

package/src/theme/DocCard/Heading/Text/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardTitleText {
+  font-size: 1.2rem;
+}

package/src/theme/DocCard/Heading/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Heading from '@theme/Heading';
+import Icon from '@theme/DocCard/Heading/Icon';
+import Text from '@theme/DocCard/Heading/Text';
+import type {Props} from '@theme/DocCard/Heading';
+
+import styles from './styles.module.css';
+
+export default function DocCardHeading({item, title, icon}: Props): ReactNode {
+  return (
+    <Heading
+      as="h2"
+      className={clsx(ThemeClassNames.docs.docCard.heading, styles.cardTitle)}
+      title={title}>
+      {icon && <Icon item={item} icon={icon} />}
+      <Text item={item} title={title} />
+    </Heading>
+  );
+}

package/src/theme/DocCard/Heading/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.cardTitle {
+  display: inline-flex;
+  align-items: center;
+}

package/src/theme/DocCard/Layout/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Heading from '@theme/DocCard/Heading';
+import Description from '@theme/DocCard/Description';
+import type {Props} from '@theme/DocCard/Layout';
+
+import styles from './styles.module.css';
+
+function Container({
+  className,
+  href,
+  children,
+}: {
+  className?: string;
+  href: string;
+  children: ReactNode;
+}): ReactNode {
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        'card padding--lg',
+        ThemeClassNames.docs.docCard.container,
+        styles.cardContainer,
+        className,
+      )}>
+      {children}
+    </Link>
+  );
+}
+
+export default function DocCardLayout({
+  item,
+  className,
+  href,
+  icon,
+  title,
+  description,
+}: Props): ReactNode {
+  return (
+    <Container href={href} className={className}>
+      <Heading item={item} icon={icon} title={title} />
+      {description && <Description item={item} description={description} />}
+    </Container>
+  );
+}

package/src/theme/DocCard/{styles.module.css → Layout/styles.module.css}

@@ -24,11 +24,3 @@
 .cardContainer *:last-child {
   margin-bottom: 0;
 }
-
-.cardTitle {
-  font-size: 1.2rem;
-}
-
-.cardDescription {
-  font-size: 0.8rem;
-}

package/src/theme/DocCard/index.tsx

@@ -6,122 +6,71 @@
  */
 
 import React, {type ReactNode} from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import {
   useDocById,
   findFirstSidebarItemLink,
 } from '@docusaurus/plugin-content-docs/client';
-import {usePluralForm} from '@docusaurus/theme-common';
+import {
+  extractLeadingEmoji,
+  useDocCardDescriptionCategoryItemsPlural,
+} from '@docusaurus/theme-common/internal';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
+import Layout from '@theme/DocCard/Layout';
 
 import type {Props} from '@theme/DocCard';
-import Heading from '@theme/Heading';
 import type {
   PropSidebarItemCategory,
   PropSidebarItemLink,
 } from '@docusaurus/plugin-content-docs';
 
-import styles from './styles.module.css';
-
-function useCategoryItemsPlural() {
-  const {selectMessage} = usePluralForm();
-  return (count: number) =>
-    selectMessage(
-      count,
-      translate(
-        {
-          message: '1 item|{count} items',
-          id: 'theme.docs.DocCard.categoryDescription.plurals',
-          description:
-            'The default description for a category card in the generated index about how many items this category includes',
-        },
-        {count},
-      ),
-    );
-}
-
-function CardContainer({
-  className,
-  href,
-  children,
-}: {
-  className?: string;
-  href: string;
-  children: ReactNode;
-}): ReactNode {
-  return (
-    <Link
-      href={href}
-      className={clsx('card padding--lg', styles.cardContainer, className)}>
-      {children}
-    </Link>
-  );
+function getFallbackEmojiIcon(
+  item: PropSidebarItemLink | PropSidebarItemCategory,
+): string {
+  if (item.type === 'category') {
+    return '🗃';
+  }
+  return isInternalUrl(item.href) ? '📄️' : '🔗';
 }
 
-function CardLayout({
-  className,
-  href,
-  icon,
-  title,
-  description,
-}: {
-  className?: string;
-  href: string;
-  icon: ReactNode;
-  title: string;
-  description?: string;
-}): ReactNode {
-  return (
-    <CardContainer href={href} className={className}>
-      <Heading
-        as="h2"
-        className={clsx('text--truncate', styles.cardTitle)}
-        title={title}>
-        {icon} {title}
-      </Heading>
-      {description && (
-        <p
-          className={clsx('text--truncate', styles.cardDescription)}
-          title={description}>
-          {description}
-        </p>
-      )}
-    </CardContainer>
-  );
+function getIconTitleProps(
+  item: PropSidebarItemLink | PropSidebarItemCategory,
+): {icon: ReactNode; title: string} {
+  const extracted = extractLeadingEmoji(item.label);
+  const emoji = extracted.emoji ?? getFallbackEmojiIcon(item);
+  return {
+    icon: emoji,
+    title: extracted.rest.trim(),
+  };
 }
 
 function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
   const href = findFirstSidebarItemLink(item);
-  const categoryItemsPlural = useCategoryItemsPlural();
+  const categoryItemsPlural = useDocCardDescriptionCategoryItemsPlural();
 
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
     return null;
   }
-
   return (
-    <CardLayout
+    <Layout
+      item={item}
       className={item.className}
       href={href}
-      icon="🗃️"
-      title={item.label}
       description={item.description ?? categoryItemsPlural(item.items.length)}
+      {...getIconTitleProps(item)}
     />
   );
 }
 
 function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
-  const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
   const doc = useDocById(item.docId ?? undefined);
   return (
-    <CardLayout
+    <Layout
+      item={item}
       className={item.className}
       href={item.href}
-      icon={icon}
-      title={item.label}
       description={item.description ?? doc?.description}
+      {...getIconTitleProps(item)}
     />
   );
 }

package/src/theme/Layout/index.tsx

@@ -13,7 +13,6 @@ import {
   SkipToContentFallbackId,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
-import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
@@ -33,8 +32,6 @@ export default function Layout(props: Props): ReactNode {
     description,
   } = props;
 
-  useKeyboardNavigation();
-
   return (
     <LayoutProvider>
       <PageMetadata title={title} description={description} />

package/src/theme/SiteMetadata/index.tsx

@@ -13,7 +13,6 @@ import {PageMetadata, useThemeConfig} from '@docusaurus/theme-common';
 import {
   DEFAULT_SEARCH_TAG,
   useAlternatePageUtils,
-  keyboardFocusedClassName,
 } from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import {applyTrailingSlash} from '@docusaurus/utils-common';
@@ -130,7 +129,7 @@ export default function SiteMetadata(): ReactNode {
         <meta name="twitter:card" content="summary_large_image" />
         {/* The keyboard focus class name need to be applied when SSR so links
         are outlined when JS is disabled */}
-        <body className={keyboardFocusedClassName} />
+        <body />
       </Head>
 
       {defaultImage && <PageMetadata image={defaultImage} />}

package/src/theme/TabItem/index.tsx

@@ -7,15 +7,20 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import {useTabs} from '@docusaurus/theme-common/internal';
 import type {Props} from '@theme/TabItem';
 
 import styles from './styles.module.css';
 
-export default function TabItem({
+function TabItemPanel({
   children,
-  hidden,
   className,
-}: Props): ReactNode {
+  hidden,
+}: {
+  children: ReactNode;
+  className?: string;
+  hidden?: boolean;
+}) {
   return (
     <div
       role="tabpanel"
@@ -25,3 +30,23 @@ export default function TabItem({
     </div>
   );
 }
+
+export default function TabItem({
+  children,
+  className,
+  value,
+}: Props): ReactNode {
+  const {selectedValue, lazy} = useTabs();
+  const isSelected = value === selectedValue;
+
+  // TODO Docusaurus v4: use <Activity> ?
+  if (!isSelected && lazy) {
+    return null;
+  }
+
+  return (
+    <TabItemPanel className={className} hidden={!isSelected}>
+      {children}
+    </TabItemPanel>
+  );
+}

package/src/theme/Tabs/index.tsx

@@ -5,26 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {cloneElement, type ReactElement, type ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
+  useTabsContextValue,
   useTabs,
   sanitizeTabsChildren,
-  type TabItemProps,
+  TabsProvider,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import type {Props} from '@theme/Tabs';
 import styles from './styles.module.css';
 
-function TabList({
-  className,
-  block,
-  selectedValue,
-  selectValue,
-  tabValues,
-}: Props & ReturnType<typeof useTabs>) {
+function TabList({className}: {className?: string}) {
+  const {selectedValue, selectValue, tabValues, block} = useTabs();
+
   const tabRefs: (HTMLLIElement | null)[] = [];
   const {blockElementScrollPositionUntilNextRender} =
     useScrollPositionBlocker();
@@ -88,8 +85,8 @@ function TabList({
           tabIndex={selectedValue === value ? 0 : -1}
           aria-selected={selectedValue === value}
           key={value}
-          ref={(tabControl) => {
-            tabRefs.push(tabControl);
+          ref={(ref) => {
+            tabRefs.push(ref);
           }}
           onKeyDown={handleKeydown}
           onClick={handleTabChange}
@@ -109,40 +106,17 @@ function TabList({
   );
 }
 
-function TabContent({
-  lazy,
-  children,
-  selectedValue,
-}: Props & ReturnType<typeof useTabs>) {
-  const childTabs = (Array.isArray(children) ? children : [children]).filter(
-    Boolean,
-  ) as ReactElement<TabItemProps>[];
-  if (lazy) {
-    const selectedTabItem = childTabs.find(
-      (tabItem) => tabItem.props.value === selectedValue,
-    );
-    if (!selectedTabItem) {
-      // fail-safe or fail-fast? not sure what's best here
-      return null;
-    }
-    return cloneElement(selectedTabItem, {
-      className: clsx('margin-top--md', selectedTabItem.props.className),
-    });
-  }
-  return (
-    <div className="margin-top--md">
-      {childTabs.map((tabItem, i) =>
-        cloneElement(tabItem, {
-          key: i,
-          hidden: tabItem.props.value !== selectedValue,
-        }),
-      )}
-    </div>
-  );
+function TabContent({children}: {children: ReactNode}) {
+  return <div className="margin-top--md">{children}</div>;
 }
 
-function TabsComponent(props: Props): ReactNode {
-  const tabs = useTabs(props);
+function TabsContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}): ReactNode {
   return (
     <div
       className={clsx(
@@ -152,21 +126,28 @@ function TabsComponent(props: Props): ReactNode {
         'tabs-container',
         styles.tabList,
       )}>
-      <TabList {...tabs} {...props} />
-      <TabContent {...tabs} {...props} />
+      <TabList
+        // Surprising but historical
+        // className is applied on TabList, not on TabsContainer
+        className={className}
+      />
+      <TabContent>{children}</TabContent>
     </div>
   );
 }
 
 export default function Tabs(props: Props): ReactNode {
   const isBrowser = useIsBrowser();
+  const value = useTabsContextValue(props);
   return (
-    <TabsComponent
+    <TabsProvider
+      value={value}
       // Remount tabs after hydration
       // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-      key={String(isBrowser)}
-      {...props}>
-      {sanitizeTabsChildren(props.children)}
-    </TabsComponent>
+      key={String(isBrowser)}>
+      <TabsContainer className={props.className}>
+        {sanitizeTabsChildren(props.children)}
+      </TabsContainer>
+    </TabsProvider>
   );
 }

package/src/theme-classic.d.ts

@@ -582,6 +582,71 @@ declare module '@theme/DocCard' {
   export default function DocCard(props: Props): ReactNode;
 }
 
+declare module '@theme/DocCard/Heading' {
+  import type {ReactNode} from 'react';
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly item: PropSidebarItem;
+    readonly icon: ReactNode;
+    readonly title: string;
+  }
+
+  export default function DocCardHeading(props: Props): ReactNode;
+}
+
+declare module '@theme/DocCard/Heading/Icon' {
+  import type {ReactNode} from 'react';
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly item: PropSidebarItem;
+    readonly icon: ReactNode;
+  }
+
+  export default function DocCardHeadingIcon(props: Props): ReactNode;
+}
+
+declare module '@theme/DocCard/Heading/Text' {
+  import type {ReactNode} from 'react';
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly item: PropSidebarItem;
+    readonly title: string;
+  }
+
+  export default function DocCardHeadingText(props: Props): ReactNode;
+}
+
+declare module '@theme/DocCard/Description' {
+  import type {ReactNode} from 'react';
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly item: PropSidebarItem;
+    readonly description: string;
+  }
+
+  export default function DocCardDescription(props: Props): ReactNode;
+}
+
+declare module '@theme/DocCard/Layout' {
+  import type {ReactNode} from 'react';
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly item: PropSidebarItem;
+    readonly className?: string;
+    readonly href: string;
+    readonly icon: ReactNode;
+    readonly title: string;
+    readonly description?: string;
+  }
+
+  export default function DocCardLayout(props: Props): ReactNode;
+}
+
 declare module '@theme/DocCardList' {
   import type {ReactNode} from 'react';
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';