From 9be32b79997b0acdb82d4561c2b3d3b51f6b0926 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 1 Sep 2026 14:53:29 -0700
Subject: [PATCH] chore(typescript): enable strict mode

---
 .../global/BestPracticeFigure/index.tsx       |  10 +-
 src/components/global/Codepen/index.tsx       |  10 +-
 src/components/global/DocsCard/index.tsx      |   3 +-
 src/components/global/DocsCards/index.tsx     |   2 +-
 src/components/global/Playground/index.tsx    | 126 +++++++++++-------
 .../global/Playground/playground.types.ts     |  30 +++++
 .../global/PlaygroundTabs/index.tsx           |  54 ++++----
 .../PlaygroundTabs/playgroundTabs.types.ts    |  20 +++
 src/components/page/api/APIList/index.tsx     |   4 +-
 .../page/api/EncapsulationPill/index.tsx      |   2 +-
 src/components/page/intro/AppWizard/index.tsx |   4 +-
 .../page/native/DocsButton/index.tsx          |  11 +-
 .../native/NativeEnterpriseCard/index.tsx     |   4 +-
 .../page/react/PageStyles/index.tsx           |   4 +-
 .../page/theming/CodeColor/index.tsx          |   4 +-
 .../page/theming/ColorAccordion/index.tsx     |  23 ++--
 .../page/theming/ColorDot/index.tsx           |   4 +-
 .../page/theming/ColorGenerator/index.tsx     |  13 +-
 .../page/theming/ColorInput/index.tsx         |   8 +-
 .../theming/LayeredColorsSelect/index.tsx     |  27 +++-
 .../theming/SteppedColorGenerator/index.tsx   |   4 +-
 .../page/theming/_utils/color-variables.ts    |   6 +
 src/components/page/theming/_utils/color.ts   |   4 +-
 src/components/page/theming/_utils/index.tsx  |   4 +-
 src/theme/MDXComponents/Table.tsx             |  16 ++-
 tsconfig.json                                 |   3 +-
 26 files changed, 274 insertions(+), 126 deletions(-)
 create mode 100644 src/components/global/PlaygroundTabs/playgroundTabs.types.ts

diff --git a/src/components/global/BestPracticeFigure/index.tsx b/src/components/global/BestPracticeFigure/index.tsx
index b0254eca824..cc024dca957 100644
--- a/src/components/global/BestPracticeFigure/index.tsx
+++ b/src/components/global/BestPracticeFigure/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
 import './best-practice-figure.css';
 
@@ -54,6 +54,14 @@ export default function BestPracticeFigure({
   doImage,
   doNotImage,
   cautionImage,
+}: {
+  text: ReactNode;
+  doText: ReactNode;
+  doNotText?: ReactNode;
+  cautionText?: ReactNode;
+  doImage: ReactNode;
+  doNotImage?: ReactNode;
+  cautionImage?: ReactNode;
 }) {
   return (
     <div className="best-practice__container">
diff --git a/src/components/global/Codepen/index.tsx b/src/components/global/Codepen/index.tsx
index 8b7b8854da9..9b33ed7f262 100644
--- a/src/components/global/Codepen/index.tsx
+++ b/src/components/global/Codepen/index.tsx
@@ -2,7 +2,15 @@ import React, { type ReactNode } from 'react';
 
 import { useScript } from '@site/src/utils/hooks';
 
-function CodePen(props): ReactNode {
+function CodePen(props: {
+  height?: number | string;
+  theme?: string;
+  defaultTab?: string;
+  user?: string;
+  slug?: string;
+  preview?: boolean;
+  penTitle?: string;
+}): ReactNode {
   const status = useScript('https://static.codepen.io/assets/embed/ei.js');
   // console.log('test',status, props)
   return (
diff --git a/src/components/global/DocsCard/index.tsx b/src/components/global/DocsCard/index.tsx
index 0e191ae6618..fac87607abe 100644
--- a/src/components/global/DocsCard/index.tsx
+++ b/src/components/global/DocsCard/index.tsx
@@ -53,11 +53,10 @@ function DocsCard(props: Props): ReactNode {
     </>
   );
 
-  const className = clsx({
+  const className = clsx(props.className, {
     'Card-with-image': typeof props.img !== 'undefined',
     'Card-without-image': typeof props.img === 'undefined',
     'Card-size-lg': props.size === 'lg',
-    [props.className]: props.className,
   });
 
   if (isStatic) {
diff --git a/src/components/global/DocsCards/index.tsx b/src/components/global/DocsCards/index.tsx
index ea2d310e791..1f040dc8148 100644
--- a/src/components/global/DocsCards/index.tsx
+++ b/src/components/global/DocsCards/index.tsx
@@ -2,7 +2,7 @@ import React, { type ReactNode } from 'react';
 
 import './cards.css';
 
-function DocsCards(props): ReactNode {
+function DocsCards(props: { className?: string; children?: ReactNode }): ReactNode {
   return <docs-cards class={props.className}>{props.children}</docs-cards>;
 }
 
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index e47a69075ca..b5c117ffc84 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -1,10 +1,19 @@
-import React, { RefObject, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  ForwardedRef,
+  type ReactElement,
+  type ReactNode,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import './playground.css';
 import { EditorOptions, openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor } from './stackblitz.utils';
 import { useColorMode } from '@docusaurus/theme-common';
-import { ConsoleItem, Mode, UsageTarget } from './playground.types';
+import { CodeSnippets, ConsoleItem, Mode, UsageTarget } from './playground.types';
 
 import Tooltip from '../Tooltip';
 import PlaygroundTabs from '../PlaygroundTabs';
@@ -30,7 +39,7 @@ const ControlButton = forwardRef(
       label: string;
       disabled?: boolean;
     },
-    ref: RefObject<HTMLButtonElement>
+    ref: ForwardedRef<HTMLButtonElement>
   ) => {
     const controlButton = (
       <button
@@ -56,7 +65,17 @@ const ControlButton = forwardRef(
   }
 );
 
-const CodeBlockButton = ({ language, usageTarget, setAndSaveUsageTarget, disabled }) => {
+const CodeBlockButton = ({
+  language,
+  usageTarget,
+  setAndSaveUsageTarget,
+  disabled,
+}: {
+  language: keyof typeof UsageTarget;
+  usageTarget: UsageTarget;
+  setAndSaveUsageTarget: (target: UsageTarget, tab: HTMLElement | null) => void;
+  disabled: boolean;
+}) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const langValue = UsageTarget[language];
 
@@ -74,7 +93,7 @@ const CodeBlockButton = ({ language, usageTarget, setAndSaveUsageTarget, disable
   );
 };
 
-type MdxContent = () => {};
+type MdxContent = () => ReactNode;
 
 /**
  * The advanced configuration of options when creating a
@@ -188,7 +207,7 @@ export default function Playground({
   const isBrowser = useIsBrowser();
 
   const hostRef = useRef<HTMLDivElement | null>(null);
-  const codeRef = useRef(null);
+  const codeRef = useRef<HTMLDivElement>(null);
   const frameiOS = useRef<HTMLIFrameElement | null>(null);
   const frameMD = useRef<HTMLIFrameElement | null>(null);
   const consoleBodyRef = useRef<HTMLDivElement | null>(null);
@@ -206,7 +225,7 @@ export default function Playground({
      * the mode button, use that.
      */
     if (isBrowser) {
-      const storedMode = localStorage.getItem(MODE_STORAGE_KEY);
+      const storedMode = localStorage.getItem(MODE_STORAGE_KEY) as Mode | null;
       if (storedMode) return storedMode;
     }
 
@@ -229,7 +248,7 @@ export default function Playground({
      * framework buttons, and there is code for it, use that.
      */
     if (isBrowser) {
-      const storedTarget = localStorage.getItem(USAGE_TARGET_STORAGE_KEY);
+      const storedTarget = localStorage.getItem(USAGE_TARGET_STORAGE_KEY) as UsageTarget | null;
       if (storedTarget && code[storedTarget] !== undefined) {
         return storedTarget;
       }
@@ -247,7 +266,7 @@ export default function Playground({
      * If there is no Angular code available, fall back to the
      * first available framework.
      */
-    return Object.keys(code)[0];
+    return Object.keys(code)[0] as UsageTarget;
   };
 
   /**
@@ -257,7 +276,7 @@ export default function Playground({
   const frameSize = FRAME_SIZES[size] || size;
   const [usageTarget, setUsageTarget] = useState(getDefaultUsageTarget());
   const [ionicMode, setIonicMode] = useState(getDefaultMode());
-  const [codeSnippets, setCodeSnippets] = useState({});
+  const [codeSnippets, setCodeSnippets] = useState<CodeSnippets>({});
   const [renderIframes, setRenderIframes] = useState(false);
   const [iframesLoaded, setIframesLoaded] = useState(false);
   const [isDarkTheme, setIsDarkTheme] = useState(colorMode === 'dark');
@@ -295,7 +314,7 @@ export default function Playground({
     }
   };
 
-  const setAndSaveUsageTarget = (target: UsageTarget, tab: HTMLElement) => {
+  const setAndSaveUsageTarget = (target: UsageTarget, tab: HTMLElement | null) => {
     setUsageTarget(target);
 
     if (isBrowser) {
@@ -309,7 +328,9 @@ export default function Playground({
        * Note that we don't need this when changing the mode because
        * the two mode iframes are always the same height.
        */
-      blockElementScrollPositionUntilNextRender(tab);
+      if (tab) {
+        blockElementScrollPositionUntilNextRender(tab);
+      }
 
       /**
        * Tell other playgrounds on the page that the framework
@@ -340,7 +361,7 @@ export default function Playground({
        * We need to check for the iOS frame reference before posting the message.
        */
       if (frameiOS.current) {
-        frameiOS.current.contentWindow.postMessage(message);
+        frameiOS.current.contentWindow?.postMessage(message);
       }
       /**
        * When changing the versioned docs, the frame reference can be undefined
@@ -349,12 +370,12 @@ export default function Playground({
        * We need to check for the MD frame reference before posting the message.
        */
       if (frameMD.current) {
-        frameMD.current.contentWindow.postMessage(message);
+        frameMD.current.contentWindow?.postMessage(message);
       }
     }
   };
 
-  const handleFrameRef = (ref: HTMLIFrameElement, frameMode: 'ios' | 'md') => {
+  const handleFrameRef = (ref: HTMLIFrameElement | null, frameMode: 'ios' | 'md') => {
     if (frameMode === 'ios') {
       frameiOS.current = ref;
     } else {
@@ -405,16 +426,18 @@ export default function Playground({
   useEffect(() => {
     if (showConsole) {
       if (frameiOS.current) {
-        frameiOS.current.contentWindow.addEventListener('console', (event: CustomEvent) => {
+        frameiOS.current.contentWindow?.addEventListener('console', (event) => {
           setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, event.detail]);
-          consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
+          const consoleBody = consoleBodyRef.current;
+          consoleBody?.scrollTo(0, consoleBody.scrollHeight);
         });
       }
 
       if (frameMD.current) {
-        frameMD.current.contentWindow.addEventListener('console', (event: CustomEvent) => {
+        frameMD.current.contentWindow?.addEventListener('console', (event) => {
           setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, event.detail]);
-          consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
+          const consoleBody = consoleBodyRef.current;
+          consoleBody?.scrollTo(0, consoleBody.scrollHeight);
         });
       }
     }
@@ -471,14 +494,14 @@ export default function Playground({
     io.observe(hostRef.current!);
   });
 
-  const handleModeUpdated = (e: CustomEvent) => {
+  const handleModeUpdated = (e: WindowEventMap['playground-event-updated']) => {
     const mode = e.detail;
     if (Object.values(Mode).includes(mode)) {
       setIonicMode(mode); // don't use setAndSave to avoid infinite loop
     }
   };
 
-  const handleUsageTargetUpdated = (e: CustomEvent) => {
+  const handleUsageTargetUpdated = (e: WindowEventMap['playground-usage-target-updated']) => {
     const usageTarget = e.detail;
     if (Object.values(UsageTarget).includes(usageTarget)) {
       setUsageTarget(usageTarget); // don't use setAndSave to avoid infinite loop
@@ -527,8 +550,8 @@ export default function Playground({
     if (hasUsageTargetOptions) {
       return;
     }
-    const copyButton = codeRef.current.querySelector('button');
-    copyButton.click();
+    const copyButton = codeRef.current?.querySelector('button');
+    copyButton?.click();
   }
 
   const hasUsageTargetOptions = (code[usageTarget] as UsageTargetOptions)?.files !== undefined;
@@ -537,10 +560,10 @@ export default function Playground({
    */
   async function resetDemo() {
     if (frameiOS.current) {
-      frameiOS.current.contentWindow.location.reload();
+      frameiOS.current.contentWindow?.location.reload();
     }
     if (frameMD.current) {
-      frameMD.current.contentWindow.location.reload();
+      frameMD.current.contentWindow?.location.reload();
     }
 
     setiOSConsoleItems([]);
@@ -550,7 +573,7 @@ export default function Playground({
     setResetCount((oldCount) => oldCount + 1);
   }
 
-  function openEditor(event) {
+  function openEditor() {
     const editorOptions: EditorOptions = {
       title,
       description,
@@ -560,15 +583,15 @@ export default function Playground({
     };
 
     // using outerText will preserve line breaks for formatting in StackBlitz editor
-    const codeBlock = codeRef.current.querySelector('code').outerText;
+    const codeBlock = codeRef.current?.querySelector('code')?.outerText ?? '';
 
     if (hasUsageTargetOptions) {
-      editorOptions.files = Object.keys(codeSnippets[usageTarget])
+      editorOptions.files = Object.keys((codeSnippets[usageTarget] ?? {}) as Record<string, ReactElement>)
         .map((fileName) => {
           const codeBlock = hostRef.current!.querySelector<HTMLElement>(
             `#${getCodeSnippetId(usageTarget, fileName)} code`
           );
-          let code = codeBlock.outerText;
+          let code = codeBlock?.outerText ?? '';
 
           if (code.trim().length === 0) {
             /**
@@ -581,7 +604,7 @@ export default function Playground({
              * explicitly check for when the code is empty to use this workaround.
              */
             const el = document.createElement('div');
-            el.innerHTML = codeBlock.innerHTML;
+            el.innerHTML = codeBlock?.innerHTML ?? '';
             code = el.outerText;
           }
           return {
@@ -609,8 +632,8 @@ export default function Playground({
   }
 
   useEffect(() => {
-    const codeSnips = {};
-    Object.keys(code).forEach((key) => {
+    const codeSnips: CodeSnippets = {};
+    (Object.keys(code) as UsageTarget[]).forEach((key) => {
       if (typeof code[key] === 'function') {
         /**
          * Instantiates the React component from the MDX content for
@@ -623,7 +646,7 @@ export default function Playground({
          * Instantiates the list of React components from the MDX content for
          * multi-file playground examples.
          */
-        const fileSnippets = {};
+        const fileSnippets: Record<string, ReactElement> = {};
         for (const fileName of Object.keys(code[key].files)) {
           const DynamicFileComponent = code[key].files[fileName];
           fileSnippets[`${fileName}`] = <DynamicFileComponent />;
@@ -660,15 +683,22 @@ export default function Playground({
 
   function renderCodeSnippets() {
     if (code[usageTarget]) {
+      /**
+       * `hasUsageTargetOptions` is what decides which shape this holds, and it is
+       * computed from the props rather than the value, so the narrowing has to be
+       * asserted.
+       */
+      const snippets = codeSnippets[usageTarget];
       if (!hasUsageTargetOptions) {
-        return codeSnippets[usageTarget];
+        return snippets as ReactElement | undefined;
       }
-      if (codeSnippets[usageTarget] == null) {
+      if (snippets == null) {
         return null;
       }
+      const fileSnippets = snippets as Record<string, ReactElement>;
       return (
         <PlaygroundTabs groupId={usageTarget} className="playground__tabs">
-          {Object.keys(codeSnippets[usageTarget]).map((fileName) => (
+          {Object.keys(fileSnippets).map((fileName) => (
             <TabItem
               className="playground__tab-item"
               value={fileName}
@@ -676,7 +706,7 @@ export default function Playground({
               key={fileName}
               icon={getFileIcon(fileName)}
             >
-              <div id={getCodeSnippetId(usageTarget, fileName)}>{codeSnippets[usageTarget][fileName]}</div>
+              <div id={getCodeSnippetId(usageTarget, fileName)}>{fileSnippets[fileName]}</div>
             </TabItem>
           ))}
         </PlaygroundTabs>
@@ -720,7 +750,7 @@ export default function Playground({
     );
   }
 
-  const sortedUsageTargets = useMemo(() => Object.keys(UsageTarget).sort(), []);
+  const sortedUsageTargets = useMemo(() => (Object.keys(UsageTarget) as (keyof typeof UsageTarget)[]).sort(), []);
 
   return (
     <div className="playground" ref={hostRef}>
@@ -868,7 +898,7 @@ export default function Playground({
                       <div
                         key="ios-iframe"
                         className={!isIOS ? 'frame-hidden' : 'frame-visible'}
-                        aria-hidden={!isIOS ? 'true' : null}
+                        aria-hidden={!isIOS ? 'true' : undefined}
                       >
                         <device-preview mode="ios">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'ios')} src={sourceiOS}></iframe>
@@ -877,7 +907,7 @@ export default function Playground({
                       <div
                         key="md-iframe"
                         className={!isMD ? 'frame-hidden' : 'frame-visible'}
-                        aria-hidden={!isMD ? 'true' : null}
+                        aria-hidden={!isMD ? 'true' : undefined}
                       >
                         <device-preview mode="md">
                           <iframe height={frameSize} ref={(ref) => handleFrameRef(ref, 'md')} src={sourceMD}></iframe>
@@ -891,7 +921,7 @@ export default function Playground({
                         className={!isIOS ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'ios')}
                         src={sourceiOS}
-                        aria-hidden={!isIOS ? 'true' : null}
+                        aria-hidden={!isIOS ? 'true' : undefined}
                       ></iframe>,
                       <iframe
                         key="md-iframe"
@@ -899,7 +929,7 @@ export default function Playground({
                         className={!isMD ? 'frame-hidden' : ''}
                         ref={(ref) => handleFrameRef(ref, 'md')}
                         src={sourceMD}
-                        aria-hidden={!isMD ? 'true' : null}
+                        aria-hidden={!isMD ? 'true' : undefined}
                       ></iframe>,
                     ]}
               </div>,
@@ -914,7 +944,7 @@ export default function Playground({
   );
 }
 
-const FRAME_SIZES = {
+const FRAME_SIZES: Record<string, string> = {
   xsmall: '100px',
   small: '200px',
   medium: '400px',
@@ -922,12 +952,12 @@ const FRAME_SIZES = {
   xlarge: '800px',
 };
 
-const waitForFrame = (frame: HTMLIFrameElement) => {
+const waitForFrame = (frame: HTMLIFrameElement | null) => {
   if (isFrameReady(frame)) return Promise.resolve();
 
   return new Promise<void>((resolve) => {
     if (frame) {
-      frame.contentWindow.addEventListener('demoReady', () => {
+      frame.contentWindow?.addEventListener('demoReady', () => {
         resolve();
       });
     }
@@ -941,10 +971,10 @@ const waitForFrame = (frame: HTMLIFrameElement) => {
  * refreshed, so we don't want to return too early and catch the
  * pre-reset version of the window.
  */
-const waitForNextFrameLoadEvent = (frame: HTMLIFrameElement) => {
+const waitForNextFrameLoadEvent = (frame: HTMLIFrameElement | null) => {
   return new Promise<void>((resolve) => {
     const handleLoad = () => {
-      frame.removeEventListener('load', handleLoad);
+      frame?.removeEventListener('load', handleLoad);
       resolve();
     };
 
@@ -954,7 +984,7 @@ const waitForNextFrameLoadEvent = (frame: HTMLIFrameElement) => {
   });
 };
 
-const isFrameReady = (frame: HTMLIFrameElement) => {
+const isFrameReady = (frame: HTMLIFrameElement | null) => {
   if (!frame) {
     return false;
   }
diff --git a/src/components/global/Playground/playground.types.ts b/src/components/global/Playground/playground.types.ts
index c6a14b8e585..13dc161dc79 100644
--- a/src/components/global/Playground/playground.types.ts
+++ b/src/components/global/Playground/playground.types.ts
@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 export enum UsageTarget {
   JavaScript = 'javascript',
   Angular = 'angular',
@@ -14,3 +16,31 @@ export interface ConsoleItem {
   type: 'log' | 'warning' | 'error';
   message: string;
 }
+
+/**
+ * The rendered MDX for each framework the playground has code for.
+ *
+ * A single-file example holds one element. A multi-file example holds one per file,
+ * keyed by file name.
+ */
+export type CodeSnippets = Partial<Record<UsageTarget, ReactElement | Record<string, ReactElement>>>;
+
+/**
+ * Custom events the playground listens for on a `Window`.
+ *
+ * `addEventListener` types its callback as taking an `Event`, so a handler
+ * annotated `CustomEvent` is rejected under `strictFunctionTypes`. Declaring the
+ * events here gives each one its real payload, so handlers infer the right type
+ * without annotations and `event.detail` is checked.
+ *
+ * `console` is dispatched by the demo page inside the playground iframe, so it is
+ * listened for on that frame's `contentWindow`. The other two are dispatched on the
+ * page's own window to keep playgrounds on a page in sync.
+ */
+declare global {
+  interface WindowEventMap {
+    console: CustomEvent<ConsoleItem>;
+    'playground-event-updated': CustomEvent<Mode>;
+    'playground-usage-target-updated': CustomEvent<UsageTarget>;
+  }
+}
diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx
index 0f470769e48..f2667b4035b 100644
--- a/src/components/global/PlaygroundTabs/index.tsx
+++ b/src/components/global/PlaygroundTabs/index.tsx
@@ -20,6 +20,7 @@ import { duplicates } from '@docusaurus/theme-common';
 import { useScrollPositionBlocker } from '@docusaurus/theme-common/internal';
 import type { Props } from '@theme/Tabs';
 import type { TabItemProps } from './TabItem';
+import type { PlaygroundTabValue } from './playgroundTabs.types';
 
 import clsx from 'clsx';
 
@@ -37,20 +38,21 @@ function TabsComponent(props: Props): ReactNode {
   const [leftNavVisible, setLeftNavVisible] = useState(false);
   const [rightNavVisible, setRightNavVisible] = useState(false);
   const tabsNavEl = createRef<HTMLUListElement>();
-  const children = React.Children.map(props.children, (child) => {
-    if (isValidElement(child) && isTabItem(child)) {
-      return child;
-    }
-    // child.type.name will give non-sensical values in prod because of
-    // minification, but we assume it won't throw in prod.
-    throw new Error(
-      `Docusaurus error: Bad <Tabs> child <${
-        // @ts-expect-error: guarding against unexpected cases
-        typeof child.type === 'string' ? child.type : child.type.name
-      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`
-    );
-  });
-  const values =
+  const children =
+    React.Children.map(props.children, (child) => {
+      if (isValidElement(child) && isTabItem(child)) {
+        return child;
+      }
+      // child.type.name will give non-sensical values in prod because of
+      // minification, but we assume it won't throw in prod.
+      throw new Error(
+        `Docusaurus error: Bad <Tabs> child <${
+          // @ts-expect-error: guarding against unexpected cases
+          typeof child.type === 'string' ? child.type : child.type.name
+        }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`
+      );
+    }) ?? [];
+  const values: readonly PlaygroundTabValue[] =
     valuesProp ??
     // Only pick keys that we recognize. MDX would inject some keys by default
     children.map(({ props: { value, label, icon, attributes } }) => ({
@@ -117,8 +119,8 @@ function TabsComponent(props: Props): ReactNode {
   };
 
   useEffect(() => {
-    setLeftNavVisible(tabsNavEl.current?.scrollLeft > 40);
-    setRightNavVisible(tabsNavEl.current?.scrollWidth > tabsNavEl.current?.offsetWidth);
+    setLeftNavVisible((tabsNavEl.current?.scrollLeft ?? 0) > 40);
+    setRightNavVisible((tabsNavEl.current?.scrollWidth ?? 0) > (tabsNavEl.current?.offsetWidth ?? 0));
   }, [groupId]);
 
   /**
@@ -147,8 +149,8 @@ function TabsComponent(props: Props): ReactNode {
             className
           )}
           onScroll={() => {
-            setLeftNavVisible(tabsNavEl.current?.scrollLeft > 40);
-            setRightNavVisible(tabsNavEl.current?.scrollWidth > tabsNavEl.current?.offsetWidth);
+            setLeftNavVisible((tabsNavEl.current?.scrollLeft ?? 0) > 40);
+            setRightNavVisible((tabsNavEl.current?.scrollWidth ?? 0) > (tabsNavEl.current?.offsetWidth ?? 0));
           }}
         >
           {leftNavVisible && (
@@ -156,8 +158,10 @@ function TabsComponent(props: Props): ReactNode {
               <button
                 className={clsx('tabs__nav-button', styles.tabNavButton)}
                 onClick={() => {
-                  tabsNavEl.current.scrollTo({
-                    left: tabsNavEl.current.scrollLeft - 150,
+                  const nav = tabsNavEl.current;
+                  if (!nav) return;
+                  nav.scrollTo({
+                    left: nav.scrollLeft - 150,
                     behavior: 'smooth',
                   });
                 }}
@@ -183,7 +187,9 @@ function TabsComponent(props: Props): ReactNode {
                 tabIndex={isSelected ? 0 : -1}
                 aria-selected={isSelected}
                 key={value}
-                ref={(tabControl) => tabRefs.push(tabControl)}
+                ref={(tabControl) => {
+                  tabRefs.push(tabControl);
+                }}
                 onKeyDown={handleKeydown}
                 onFocus={handleTabChange}
                 onClick={handleTabChange}
@@ -203,8 +209,10 @@ function TabsComponent(props: Props): ReactNode {
               <button
                 className={clsx('tabs__nav-button', styles.tabNavButton)}
                 onClick={() => {
-                  tabsNavEl.current.scrollTo({
-                    left: tabsNavEl.current.scrollLeft + 150,
+                  const nav = tabsNavEl.current;
+                  if (!nav) return;
+                  nav.scrollTo({
+                    left: nav.scrollLeft + 150,
                     behavior: 'smooth',
                   });
                 }}
diff --git a/src/components/global/PlaygroundTabs/playgroundTabs.types.ts b/src/components/global/PlaygroundTabs/playgroundTabs.types.ts
new file mode 100644
index 00000000000..33c7ad04ac5
--- /dev/null
+++ b/src/components/global/PlaygroundTabs/playgroundTabs.types.ts
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+/**
+ * What each entry of `values` holds, whether it arrives as a prop or is derived from
+ * the `<TabItem>` children.
+ *
+ * Annotating `values` with this keeps it a single array type. Left to inference,
+ * `valuesProp ?? children.map(...)` is a union of two array types, and calling `.map()`
+ * on a union intersects both callback signatures, which no single callback satisfies
+ * under `strictFunctionTypes`.
+ *
+ * Declared here rather than reusing Docusaurus's `TabValue`, which is only reachable
+ * through `@docusaurus/theme-common/internal`.
+ */
+export type PlaygroundTabValue = {
+  value: string;
+  label?: string;
+  attributes?: { [key: string]: unknown };
+  icon?: ReactNode;
+};
diff --git a/src/components/page/api/APIList/index.tsx b/src/components/page/api/APIList/index.tsx
index dfcdc60a80d..6e17b419b87 100644
--- a/src/components/page/api/APIList/index.tsx
+++ b/src/components/page/api/APIList/index.tsx
@@ -1,9 +1,9 @@
-import React, { type ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
 import sidebars from '@site/sidebars';
 import clsx from 'clsx';
 
-function APIList({ sidebar, ...props }): ReactNode {
+function APIList({ sidebar, ...props }: ComponentProps<'div'> & { sidebar?: unknown }): ReactNode {
   return (
     <div {...props} className={clsx(props.className, 'api-list')}>
       {sidebars.api.map((section) => {
diff --git a/src/components/page/api/EncapsulationPill/index.tsx b/src/components/page/api/EncapsulationPill/index.tsx
index 30145bfbd4d..cf0bcece73d 100644
--- a/src/components/page/api/EncapsulationPill/index.tsx
+++ b/src/components/page/api/EncapsulationPill/index.tsx
@@ -6,7 +6,7 @@ import Link from '@docusaurus/Link';
 
 import styles from './styles.module.scss';
 
-export default function EncapsulationPill({ type, ...props }) {
+export default function EncapsulationPill({ type, ...props }: { type: string; className?: string }) {
   const toUrl = useBaseUrl(`reference/glossary#${type}`);
 
   return (
diff --git a/src/components/page/intro/AppWizard/index.tsx b/src/components/page/intro/AppWizard/index.tsx
index 51137e23d76..2a3e91692e4 100644
--- a/src/components/page/intro/AppWizard/index.tsx
+++ b/src/components/page/intro/AppWizard/index.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import styles from './index.module.scss';
 
-export default function AppWizard(props) {
+export default function AppWizard(props: ComponentProps<'div'>) {
   return (
     <div {...props} className={clsx(props.className, 'app-wizard', styles.appWizard)}>
       <div className="heading-group">
diff --git a/src/components/page/native/DocsButton/index.tsx b/src/components/page/native/DocsButton/index.tsx
index e1ac389ab1a..fdee868c63f 100644
--- a/src/components/page/native/DocsButton/index.tsx
+++ b/src/components/page/native/DocsButton/index.tsx
@@ -1,13 +1,16 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { type HTMLAttributes } from 'react';
 
 import styles from './styles.module.css';
 
-export default function DocsButton({ href, round = false, ...props }) {
+export default function DocsButton({
+  href,
+  round = false,
+  ...props
+}: HTMLAttributes<HTMLElement> & { href?: string; round?: boolean }) {
   // const isInternal = /^\/docs/.test(href);
 
-  props.className = clsx({
-    [props.className]: Boolean(props.className),
+  props.className = clsx(props.className, {
     [styles.docsButton]: true,
     'docs-button': true,
     [styles.docsButtonRound]: round,
diff --git a/src/components/page/native/NativeEnterpriseCard/index.tsx b/src/components/page/native/NativeEnterpriseCard/index.tsx
index d188069a790..d8238fa9fa7 100644
--- a/src/components/page/native/NativeEnterpriseCard/index.tsx
+++ b/src/components/page/native/NativeEnterpriseCard/index.tsx
@@ -1,10 +1,10 @@
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import clsx from 'clsx';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import styles from './index.module.scss';
 
-export default function NativeEnterpriseCard(props) {
+export default function NativeEnterpriseCard(props: ComponentProps<'a'>) {
   return (
     <a
       className={clsx(props.className, styles.nativeEnterprise)}
diff --git a/src/components/page/react/PageStyles/index.tsx b/src/components/page/react/PageStyles/index.tsx
index 5bb6e736c1c..054db0be901 100644
--- a/src/components/page/react/PageStyles/index.tsx
+++ b/src/components/page/react/PageStyles/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import styles from './index.module.scss';
 
-export default function PageStyles(props) {
+export default function PageStyles(props: ComponentProps<'div'>) {
   return <div {...props} className={clsx(styles.pageReact, props.className)} />;
 }
diff --git a/src/components/page/theming/CodeColor/index.tsx b/src/components/page/theming/CodeColor/index.tsx
index 688e49fb139..f34bf6e4eea 100644
--- a/src/components/page/theming/CodeColor/index.tsx
+++ b/src/components/page/theming/CodeColor/index.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React, { type ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
 import styles from './index.module.scss';
 
-function CodeColor({ color, ...props }): ReactNode {
+function CodeColor({ color, ...props }: ComponentProps<'span'> & { color?: string }): ReactNode {
   return (
     <span className={clsx(styles.codeColor, props.className, 'code-color')}>
       <span
diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index 26575e37117..c084ed9017e 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './styles.module.css';
 
 export default function ColorAccordion({ ...props }) {
-  const [colors, setColors] = useState([]);
+  const [colors, setColors] = useState<string[]>([]);
 
   const [activeColor, setActiveColor] = useState('');
 
@@ -14,14 +14,19 @@ export default function ColorAccordion({ ...props }) {
     setColors(['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light']);
   }, []);
 
-  const getColors = useCallback(
-    (color) => ({
-      baseColor: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}`),
-      shadeColor: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-shade`),
-      tintColor: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-tint`),
-    }),
-    []
-  );
+  const getColors = useCallback((color: string) => {
+    /**
+     * `colors` is empty until the effect below fills it, so the list has already
+     * rendered by the time this runs and the ref is set.
+     */
+    const computed = getComputedStyle(el.current!);
+
+    return {
+      baseColor: computed.getPropertyValue(`--ion-color-${color}`),
+      shadeColor: computed.getPropertyValue(`--ion-color-${color}-shade`),
+      tintColor: computed.getPropertyValue(`--ion-color-${color}-tint`),
+    };
+  }, []);
 
   return (
     <ul
diff --git a/src/components/page/theming/ColorDot/index.tsx b/src/components/page/theming/ColorDot/index.tsx
index e0748da4574..15bc92faa1e 100644
--- a/src/components/page/theming/ColorDot/index.tsx
+++ b/src/components/page/theming/ColorDot/index.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { useColorMode } from '@docusaurus/theme-common';
 
 import styles from './index.module.scss';
 
-export default function ColorDot({ color, ...props }) {
+export default function ColorDot({ color, ...props }: ComponentProps<'div'> & { color?: string }) {
   const { colorMode } = useColorMode();
 
   return (
diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
index 74599ce09b5..b025f6b6f4c 100644
--- a/src/components/page/theming/ColorGenerator/index.tsx
+++ b/src/components/page/theming/ColorGenerator/index.tsx
@@ -1,16 +1,17 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, type ComponentProps, useEffect, useRef, useState } from 'react';
 
 import styles from './styles.module.scss';
 
 import { generateColor } from '../_utils/index';
+import type { GeneratedColorVariable } from '../_utils/color-variables';
 
 import clsx from 'clsx';
 
 import ColorDot from '../ColorDot';
 import ColorInput from '../ColorInput';
 
-const ColorGenerator = (props) => {
-  const [colors, setColors] = useState({
+const ColorGenerator = (props: ComponentProps<'section'>) => {
+  const [colors, setColors] = useState<Record<string, GeneratedColorVariable>>({
     primary: generateColor('#0054e9'),
     secondary: generateColor('#0163aa'),
     tertiary: generateColor('#6030ff'),
@@ -22,7 +23,7 @@ const ColorGenerator = (props) => {
     dark: generateColor('#2f2f2f'),
   });
 
-  const [activeColor, setActiveColor] = useState(null);
+  const [activeColor, setActiveColor] = useState<string | null>(null);
 
   const [cssText, setCssText] = useState('');
 
@@ -34,7 +35,7 @@ const ColorGenerator = (props) => {
   }, [cssText]);
 
   useEffect(() => {
-    setCssText(codeRef.current.textContent);
+    setCssText(codeRef.current?.textContent ?? '');
   }, [colors]);
 
   return (
@@ -116,7 +117,7 @@ const ColorGenerator = (props) => {
   );
 };
 
-const Caret = (props) => (
+const Caret = (props: ComponentProps<'svg'>) => (
   <svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" {...props}>
     <g
       id="Welcome"
diff --git a/src/components/page/theming/ColorInput/index.tsx b/src/components/page/theming/ColorInput/index.tsx
index b281cbdb88a..4bec32ac5d6 100644
--- a/src/components/page/theming/ColorInput/index.tsx
+++ b/src/components/page/theming/ColorInput/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import clsx from 'clsx';
 import InputWrapper from '../InputWrapper';
 
@@ -6,7 +6,11 @@ import { useColorMode } from '@docusaurus/theme-common';
 
 import styles from './index.module.scss';
 
-export default function ColorInput({ color, setColor, ...props }) {
+export default function ColorInput({
+  color,
+  setColor,
+  ...props
+}: ComponentProps<'div'> & { color: string; setColor: (color: string) => void }) {
   const { colorMode } = useColorMode();
 
   return (
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index 7540f4ea6d5..2da32f7b449 100755
--- a/src/components/page/theming/LayeredColorsSelect/index.tsx
+++ b/src/components/page/theming/LayeredColorsSelect/index.tsx
@@ -9,53 +9,66 @@ import InputWrapper from '../InputWrapper';
 import { useColorMode } from '@docusaurus/theme-common';
 import clsx from 'clsx';
 
+/** One row of the table: a CSS custom property and its resolved value. */
+type ColorVariation = {
+  property: string;
+  name: string;
+  description: string;
+  value: string;
+  /** Set when the value is a red, green, blue triplet rather than a color. */
+  rgb?: boolean;
+};
+
 export default function LayeredColorsSelect({ ...props }) {
   const { colorMode } = useColorMode();
 
   const [color, setColor] = useState('primary');
   const el = useRef<HTMLDivElement>(null);
 
-  const [variations, setVariations] = useState([]);
+  const [variations, setVariations] = useState<ColorVariation[]>([]);
 
   useEffect(() => {
+    // The effect runs after mount, so the ref is set.
+    const computed = getComputedStyle(el.current!);
+
     setVariations([
       {
         property: `--ion-color-${color}`,
         name: 'Base',
         description: 'The main color that all variations are derived from',
-        value: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}`),
+        value: computed.getPropertyValue(`--ion-color-${color}`),
       },
       {
         property: `--ion-color-${color}-rgb`,
         name: 'Base (rgb)',
         rgb: true,
         description: 'The base color in red, green, blue format',
-        value: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-rgb`),
+        value: computed.getPropertyValue(`--ion-color-${color}-rgb`),
       },
       {
         property: `--ion-color-${color}-contrast`,
         name: 'Contrast',
         description: 'The opposite of the base color, should be visible against the base color',
-        value: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-contrast`),
+        value: computed.getPropertyValue(`--ion-color-${color}-contrast`),
       },
       {
         property: `--ion-color-${color}-contrast-rgb`,
         name: 'Contrast (rgb)',
         rgb: true,
         description: 'The contrast color in red, green, blue format',
-        value: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-contrast-rgb`),
+        value: computed.getPropertyValue(`--ion-color-${color}-contrast-rgb`),
       },
       {
         property: `--ion-color-${color}-shade`,
         name: 'Shade',
         description: 'A slightly darker version of the base color',
-        value: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-shade`),
+        value: computed.getPropertyValue(`--ion-color-${color}-shade`),
       },
       {
         property: `--ion-color-${color}-tint`,
         name: 'Tint',
         description: 'A slightly lighter version of the base color',
-        value: getComputedStyle(el.current).getPropertyValue(`--ion-color-${color}-tint`),
+        value: computed.getPropertyValue(`--ion-color-${color}-tint`),
       },
     ]);
   }, [color]);
diff --git a/src/components/page/theming/SteppedColorGenerator/index.tsx b/src/components/page/theming/SteppedColorGenerator/index.tsx
index 4d76ffb9936..1ea83253bd7 100755
--- a/src/components/page/theming/SteppedColorGenerator/index.tsx
+++ b/src/components/page/theming/SteppedColorGenerator/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useEffect, useState } from 'react';
+import { type ComponentProps, useEffect, useState } from 'react';
 import CodeColor from '../CodeColor';
 
 import ColorDot from '../ColorDot';
@@ -11,7 +11,7 @@ import { generateSteppedColors } from '../_utils/index';
 import clsx from 'clsx';
 import styles from './index.module.scss';
 
-export default function ColorGenerator(props) {
+export default function ColorGenerator(props: ComponentProps<'div'> & { useTextAndBackgroundStepColors?: boolean }) {
   const [backgroundColor, setBackgroundColor] = useState('#ffffff');
   const [textColor, setTextColor] = useState('#000000');
 
diff --git a/src/components/page/theming/_utils/color-variables.ts b/src/components/page/theming/_utils/color-variables.ts
index 22612d0fe91..10fd8c96c7b 100755
--- a/src/components/page/theming/_utils/color-variables.ts
+++ b/src/components/page/theming/_utils/color-variables.ts
@@ -1,3 +1,9 @@
+/**
+ * Every field `generateColor` fills in. `ColorVariable` itself has them all optional
+ * because it also describes colors parsed out of CSS, where any of them may be absent.
+ */
+export type GeneratedColorVariable = Required<Omit<ColorVariable, 'property'>>;
+
 export interface ColorVariable {
   property?: string;
   value?: string;
diff --git a/src/components/page/theming/_utils/color.ts b/src/components/page/theming/_utils/color.ts
index 7511fbb630a..2f4ca062833 100755
--- a/src/components/page/theming/_utils/color.ts
+++ b/src/components/page/theming/_utils/color.ts
@@ -164,10 +164,10 @@ export class Color {
   constructor(value: string | RGB | HSL) {
     if (typeof value === 'string' && /rgb\(/.test(value)) {
       const matches = /rgb\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)/.exec(value) ?? [];
-      value = { r: parseInt(matches[0], 10), g: parseInt(matches[1], 10), b: parseInt(matches[2], 10) };
+      value = { r: parseInt(matches[0]!, 10), g: parseInt(matches[1]!, 10), b: parseInt(matches[2]!, 10) };
     } else if (typeof value === 'string' && /hsl\(/.test(value)) {
       const matches = /hsl\((\d{1,3}), ?(\d{1,3}%), ?(\d{1,3}%)\)/.exec(value) ?? [];
-      value = { h: parseInt(matches[0], 10), s: parseInt(matches[1], 10), l: parseInt(matches[2], 10) };
+      value = { h: parseInt(matches[0]!, 10), s: parseInt(matches[1]!, 10), l: parseInt(matches[2]!, 10) };
     }
 
     if (typeof value === 'string') {
diff --git a/src/components/page/theming/_utils/index.tsx b/src/components/page/theming/_utils/index.tsx
index 8b6403cae51..e8353afd96e 100644
--- a/src/components/page/theming/_utils/index.tsx
+++ b/src/components/page/theming/_utils/index.tsx
@@ -1,5 +1,5 @@
 import { Color, RGB } from './color';
-import { COLOR_NAMES, ColorVariable } from './color-variables';
+import { COLOR_NAMES, ColorVariable, GeneratedColorVariable } from './color-variables';
 
 export const generateSteppedColors = (background = '#ffffff', text = '#000000') => {
   const color = new Color(background);
@@ -8,7 +8,7 @@ export const generateSteppedColors = (background = '#ffffff', text = '#000000')
   return colors.map((_, i) => color.mix(text, ((i + 1) * 5) / 100).hex);
 };
 
-export const generateColor = (value: string): ColorVariable => {
+export const generateColor = (value: string): GeneratedColorVariable => {
   const color = new Color(value);
   const contrast = color.contrast();
   const tint = color.tint();
diff --git a/src/theme/MDXComponents/Table.tsx b/src/theme/MDXComponents/Table.tsx
index f387b282655..fdc582a1cb9 100644
--- a/src/theme/MDXComponents/Table.tsx
+++ b/src/theme/MDXComponents/Table.tsx
@@ -2,9 +2,21 @@
  * This file is not part of Docusaurus, it is a custom component.
  */
 
-import React from 'react';
+import React, { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 
-export default function MDXTable({ children, ...props }) {
+/** One `<th>` or `<td>`, the deepest level this component reaches into. */
+type Cell = ReactElement<{ children?: ReactNode }>;
+
+/**
+ * The `<thead>` and `<tbody>` MDX hands to a table. Only the head is inspected, to
+ * work out whether it holds any content, so the body is left as a plain element.
+ */
+type TableSection = ReactElement<{ children: ReactElement<{ children: Cell | Cell[] }> }>;
+
+export default function MDXTable({
+  children,
+  ...props
+}: Omit<ComponentProps<'table'>, 'children'> & { children: TableSection[] }) {
   const tableHeadings = children[0].props.children.props.children;
 
   const hasTheadValue = !Array.isArray(tableHeadings) || tableHeadings.every(({ props }) => props.children);
diff --git a/tsconfig.json b/tsconfig.json
index 0762b92ab84..f231245b60b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
      * Ambient `declare module` cannot do this, as it does not apply to relative
      * imports.
      */
-    "allowArbitraryExtensions": true
+    "allowArbitraryExtensions": true,
+    "strict": true
   },
   /*
    * `src` holds every TypeScript file in the project, and `index.d.ts` declares the