From 9ede9a3bc54013dea6211dbe4cf01aab89b6efb2 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 8 Sep 2022 13:43:29 -0400
Subject: [PATCH] fix(docs): TOC navigation renders correct headings (#2539)

---
 docs/api/accordion-group.md                   |  7 ++--
 docs/api/action-sheet.md                      |  5 ++-
 docs/api/app.md                               |  5 ++-
 docs/api/back-button.md                       |  5 ++-
 docs/api/backdrop.md                          |  7 ++--
 docs/api/breadcrumb.md                        |  7 ++--
 docs/api/button.md                            | 10 +++---
 docs/api/buttons.md                           |  5 ++-
 docs/api/card-content.md                      |  9 ++---
 docs/api/card-header.md                       |  7 ++--
 docs/api/card-subtitle.md                     |  7 ++--
 docs/api/card-title.md                        |  9 +++--
 docs/api/card.md                              |  9 +++--
 docs/api/checkbox.md                          |  1 -
 docs/api/col.md                               |  5 ++-
 docs/api/content.md                           |  5 ++-
 docs/api/fab-button.md                        |  5 ++-
 docs/api/fab-list.md                          |  7 ++--
 docs/api/fab.md                               |  5 ++-
 docs/api/footer.md                            |  6 ++--
 docs/api/grid.md                              |  5 ++-
 docs/api/header.md                            |  7 ++--
 docs/api/img.md                               |  5 ++-
 docs/api/infinite-scroll-content.md           |  9 ++---
 docs/api/infinite-scroll.md                   |  4 +--
 docs/api/input.md                             |  5 ++-
 docs/api/item-divider.md                      |  4 +--
 docs/api/item-group.md                        |  7 ++--
 docs/api/item-option.md                       |  5 ++-
 docs/api/item-options.md                      |  6 ++--
 docs/api/item-sliding.md                      |  5 ++-
 docs/api/item.md                              |  5 ++-
 docs/api/list-header.md                       |  7 ++--
 docs/api/list.md                              |  6 ++--
 docs/api/menu-button.md                       |  5 ++-
 docs/api/menu-toggle.md                       |  5 ++-
 docs/api/menu.md                              |  5 ++-
 docs/api/nav-link.md                          |  7 ++--
 docs/api/nav.md                               |  6 ++--
 docs/api/note.md                              |  5 ++-
 docs/api/progress-bar.md                      |  5 ++-
 docs/api/radio-group.md                       |  7 ++--
 docs/api/radio.md                             |  5 ++-
 docs/api/refresher-content.md                 |  7 ++--
 docs/api/refresher.md                         |  6 ++--
 docs/api/reorder-group.md                     |  6 ++--
 docs/api/reorder.md                           |  5 ++-
 docs/api/ripple-effect.md                     |  9 +++--
 docs/api/route-redirect.md                    |  6 ++--
 docs/api/route.md                             |  6 ++--
 docs/api/router-link.md                       |  5 ++-
 docs/api/router-outlet.md                     |  5 ++-
 docs/api/router.md                            |  5 ++-
 docs/api/row.md                               |  5 ++-
 docs/api/searchbar.md                         |  5 ++-
 docs/api/segment-button.md                    |  5 ++-
 docs/api/segment.md                           |  5 ++-
 docs/api/select-option.md                     |  5 ++-
 docs/api/slide.md                             |  5 ++-
 docs/api/slides.md                            |  6 ++--
 docs/api/spinner.md                           |  5 ++-
 docs/api/split-pane.md                        |  5 ++-
 docs/api/tab-bar.md                           |  5 ++-
 docs/api/tab-button.md                        |  5 ++-
 docs/api/tab.md                               |  5 ++-
 docs/api/tabs.md                              |  5 ++-
 docs/api/textarea.md                          |  5 ++-
 docs/api/title.md                             |  5 ++-
 docs/api/toggle.md                            |  5 ++-
 docs/api/toolbar.md                           |  5 ++-
 docs/api/virtual-scroll.md                    |  6 ++--
 scripts/api-playground-init.js                |  5 ++-
 .../page/api/APITOCInline/index.tsx           | 35 -------------------
 73 files changed, 149 insertions(+), 299 deletions(-)
 delete mode 100644 src/components/page/api/APITOCInline/index.tsx

diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index aa3020206b8..c623b749b12 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/accordion-group/props.md';
 import Events from '@site/static/auto-generated/accordion-group/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/accordion-group/parts.md';
 import CustomProps from '@site/static/auto-generated/accordion-group/custom-props.md';
 import Slots from '@site/static/auto-generated/accordion-group/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 69135c3d513..5245548a7c9 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/action-sheet/props.md';
 import Events from '@site/static/auto-generated/action-sheet/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/action-sheet/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/app.md b/docs/api/app.md
index 2e0645a063d..aa500d8cdff 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/app/props.md';
 import Events from '@site/static/auto-generated/app/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/app/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 615a04c61ee..89ae57ad0ee 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/back-button/props.md';
 import Events from '@site/static/auto-generated/back-button/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/back-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 177cd990b0d..9a1cc9a01a2 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/backdrop/props.md';
 import Events from '@site/static/auto-generated/backdrop/events.md';
@@ -14,19 +15,15 @@ import Parts from '@site/static/auto-generated/backdrop/parts.md';
 import CustomProps from '@site/static/auto-generated/backdrop/custom-props.md';
 import Slots from '@site/static/auto-generated/backdrop/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 799cc91a3e7..d2772cbe493 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/breadcrumb/props.md';
 import Events from '@site/static/auto-generated/breadcrumb/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/breadcrumb/parts.md';
 import CustomProps from '@site/static/auto-generated/breadcrumb/custom-props.md';
 import Slots from '@site/static/auto-generated/breadcrumb/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/button.md b/docs/api/button.md
index 17834e8ba83..cc1630a1d44 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/button/props.md';
 import Events from '@site/static/auto-generated/button/events.md';
@@ -14,26 +15,23 @@ import Parts from '@site/static/auto-generated/button/parts.md';
 import CustomProps from '@site/static/auto-generated/button/custom-props.md';
 import Slots from '@site/static/auto-generated/button/slots.md';
 
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
 <head>
   <title>ion-button: Design and Style Buttons with Custom CSS Properties</title>
   <meta name="description" content="ion-button provides a clickable element for use anywhere needing standard button functionality. Design and style button elements with custom CSS properties." />
 </head>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
-
-
 Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.
 
 ## Expand
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 7e247b828ec..4bebd69b8ea 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/buttons/props.md';
 import Events from '@site/static/auto-generated/buttons/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/buttons/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 75d361f515b..487697a1e51 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/card-content/props.md';
 import Events from '@site/static/auto-generated/card-content/events.md';
@@ -12,19 +13,13 @@ import Parts from '@site/static/auto-generated/card-content/parts.md';
 import CustomProps from '@site/static/auto-generated/card-content/custom-props.md';
 import Slots from '@site/static/auto-generated/card-content/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index 88dceee3cb7..561969dcc40 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/card-header/props.md';
 import Events from '@site/static/auto-generated/card-header/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/card-header/parts.md';
 import CustomProps from '@site/static/auto-generated/card-header/custom-props.md';
 import Slots from '@site/static/auto-generated/card-header/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 11fbe3a3e77..23d338d74d5 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/card-subtitle/props.md';
 import Events from '@site/static/auto-generated/card-subtitle/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/card-subtitle/parts.md';
 import CustomProps from '@site/static/auto-generated/card-subtitle/custom-props.md';
 import Slots from '@site/static/auto-generated/card-subtitle/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 096a7a7219a..ea8baee1541 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/card-title/props.md';
 import Events from '@site/static/auto-generated/card-title/events.md';
@@ -12,22 +13,20 @@ import Parts from '@site/static/auto-generated/card-title/parts.md';
 import CustomProps from '@site/static/auto-generated/card-title/custom-props.md';
 import Slots from '@site/static/auto-generated/card-title/slots.md';
 
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
 <head>
   <title>ion-card-title | Ionic App Card Title Component and Properties</title>
   <meta name="description" content="ion-card-title is a child component of ion-card. Read to learn more about card title properties and how this component is used on Ionic Framework apps." />
 </head>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/card.md b/docs/api/card.md
index 48afa83b762..d6a7e93a506 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/card/props.md';
 import Events from '@site/static/auto-generated/card/events.md';
@@ -14,22 +15,20 @@ import Parts from '@site/static/auto-generated/card/parts.md';
 import CustomProps from '@site/static/auto-generated/card/custom-props.md';
 import Slots from '@site/static/auto-generated/card/slots.md';
 
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
 <head>
   <title>ion-card: Card UI Components for Ionic Framework API</title>
   <meta name="description" content="ion-card UI components are entry points to more detailed information. Cards can be single components or made up of some header, title, subtitle, and content." />
 </head>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 6b15c69765b..5fbda397bc0 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -15,7 +15,6 @@ import Slots from '@site/static/auto-generated/checkbox/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
diff --git a/docs/api/col.md b/docs/api/col.md
index 7b990adf3fc..42912662e71 100644
--- a/docs/api/col.md
+++ b/docs/api/col.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/col/props.md';
 import Events from '@site/static/auto-generated/col/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/col/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/content.md b/docs/api/content.md
index ee2c258044c..add18a8e3f6 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/content/props.md';
 import Events from '@site/static/auto-generated/content/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/content/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index ae84d8c2d7c..94b2421bee2 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/fab-button/props.md';
 import Events from '@site/static/auto-generated/fab-button/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/fab-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index 99b7b7ddb18..f74f89eb1e6 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/fab-list/props.md';
 import Events from '@site/static/auto-generated/fab-list/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/fab-list/parts.md';
 import CustomProps from '@site/static/auto-generated/fab-list/custom-props.md';
 import Slots from '@site/static/auto-generated/fab-list/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 6c8edec36cd..dec144aa20d 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/fab/props.md';
 import Events from '@site/static/auto-generated/fab/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/fab/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/footer.md b/docs/api/footer.md
index c25ef97b48b..b84948be28a 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/footer/props.md';
 import Events from '@site/static/auto-generated/footer/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/footer/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/grid.md b/docs/api/grid.md
index 000dcc16283..cf46fc98e81 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/grid/props.md';
 import Events from '@site/static/auto-generated/grid/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/grid/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/header.md b/docs/api/header.md
index c692ddedad1..81d742c0f31 100644
--- a/docs/api/header.md
+++ b/docs/api/header.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/header/props.md';
 import Events from '@site/static/auto-generated/header/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/header/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/img.md b/docs/api/img.md
index 410fa0a90fb..3b0b3e4a30d 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/img/props.md';
 import Events from '@site/static/auto-generated/img/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/img/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 02c077e7596..4210400d911 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/infinite-scroll-content/props.md';
 import Events from '@site/static/auto-generated/infinite-scroll-content/events.md';
@@ -12,19 +13,13 @@ import Parts from '@site/static/auto-generated/infinite-scroll-content/parts.md'
 import CustomProps from '@site/static/auto-generated/infinite-scroll-content/custom-props.md';
 import Slots from '@site/static/auto-generated/infinite-scroll-content/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md
index f45ba5b3e80..8515c816ab5 100644
--- a/docs/api/infinite-scroll.md
+++ b/docs/api/infinite-scroll.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/infinite-scroll/props.md';
 import Events from '@site/static/auto-generated/infinite-scroll/events.md';
@@ -20,13 +21,12 @@ import Slots from '@site/static/auto-generated/infinite-scroll/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
   autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
diff --git a/docs/api/input.md b/docs/api/input.md
index 53686f74f57..1dd3b8cb3d6 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/input/props.md';
 import Events from '@site/static/auto-generated/input/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/input/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 6b99a537c9f..dc63b122aa1 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -18,16 +18,14 @@ import Slots from '@site/static/auto-generated/item-divider/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 0ee07c99ffb..9a110fa7ecf 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/item-group/props.md';
 import Events from '@site/static/auto-generated/item-group/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/item-group/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index ef012820497..54a92feb8d0 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/item-option/props.md';
 import Events from '@site/static/auto-generated/item-option/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/item-option/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index d73d1dc5d57..086df2b1bb6 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/item-options/props.md';
 import Events from '@site/static/auto-generated/item-options/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/item-options/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index fc9fa85a117..badc345cf0e 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/item-sliding/props.md';
 import Events from '@site/static/auto-generated/item-sliding/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/item-sliding/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/item.md b/docs/api/item.md
index f0ffefc9f1a..107764b2264 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/item/props.md';
 import Events from '@site/static/auto-generated/item/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/item/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 666f90e7699..117c4c1ad44 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/list-header/props.md';
 import Events from '@site/static/auto-generated/list-header/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/list-header/parts.md';
 import CustomProps from '@site/static/auto-generated/list-header/custom-props.md';
 import Slots from '@site/static/auto-generated/list-header/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/list.md b/docs/api/list.md
index 2ca87ee4274..1b2d149d4a3 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/list/props.md';
 import Events from '@site/static/auto-generated/list/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/list/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 39080919e9a..e4e10198f8d 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/menu-button/props.md';
 import Events from '@site/static/auto-generated/menu-button/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/menu-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 3d1fa90bcad..c68df94d1ca 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/menu-toggle/props.md';
 import Events from '@site/static/auto-generated/menu-toggle/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/menu-toggle/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 06da15d9de4..81f3b26337d 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/menu/props.md';
 import Events from '@site/static/auto-generated/menu/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/menu/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 76161afb226..d0e38399092 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/nav-link/props.md';
 import Events from '@site/static/auto-generated/nav-link/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/nav-link/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 68fefd1fec1..0903afbab34 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/nav/props.md';
 import Events from '@site/static/auto-generated/nav/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/note.md b/docs/api/note.md
index 74f532882d4..23606008724 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/note/props.md';
 import Events from '@site/static/auto-generated/note/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/note/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 2534c34d4e4..474e390ebf1 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/progress-bar/props.md';
 import Events from '@site/static/auto-generated/progress-bar/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/progress-bar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index db0e8c50e2d..6f7d717ca35 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/radio-group/props.md';
 import Events from '@site/static/auto-generated/radio-group/events.md';
@@ -18,16 +19,12 @@ import Slots from '@site/static/auto-generated/radio-group/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 7814629570e..ab96264fff1 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/radio/props.md';
 import Events from '@site/static/auto-generated/radio/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/radio/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 837090b7880..950df33fbf9 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/refresher-content/props.md';
 import Events from '@site/static/auto-generated/refresher-content/events.md';
@@ -12,19 +13,15 @@ import Parts from '@site/static/auto-generated/refresher-content/parts.md';
 import CustomProps from '@site/static/auto-generated/refresher-content/custom-props.md';
 import Slots from '@site/static/auto-generated/refresher-content/slots.md';
 
-
-
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 3e74f331e33..e0ada62c6e8 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/refresher/props.md';
 import Events from '@site/static/auto-generated/refresher/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/refresher/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index a82e419cb2e..ae4d0475e64 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/reorder-group/props.md';
 import Events from '@site/static/auto-generated/reorder-group/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/reorder-group/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 1b63f0874eb..b068945c2ff 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/reorder/props.md';
 import Events from '@site/static/auto-generated/reorder/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/reorder/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 8388c6670af..690bee9ffbc 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/ripple-effect/props.md';
 import Events from '@site/static/auto-generated/ripple-effect/events.md';
@@ -12,22 +13,20 @@ import Parts from '@site/static/auto-generated/ripple-effect/parts.md';
 import CustomProps from '@site/static/auto-generated/ripple-effect/custom-props.md';
 import Slots from '@site/static/auto-generated/ripple-effect/slots.md';
 
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
 <head>
   <title>ion-ripple-effect | Ripple Effect Button Component for Ionic Apps</title>
   <meta name="description" content="The ripple effect button component adds the Material Design ink ripple interaction effect. It can only be used in an ion-app and can be added to any component." />
 </head>
 
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index beff634f922..8c98cef2c2e 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/route-redirect/props.md';
 import Events from '@site/static/auto-generated/route-redirect/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/route-redirect/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/route.md b/docs/api/route.md
index 3c8764727ab..52e2e294a2a 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/route/props.md';
 import Events from '@site/static/auto-generated/route/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/route/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index ac7b3786de1..5d7d812ecfc 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/router-link/props.md';
 import Events from '@site/static/auto-generated/router-link/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/router-link/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md
index 7f4438819bd..f733b0c1248 100644
--- a/docs/api/router-outlet.md
+++ b/docs/api/router-outlet.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/router-outlet/props.md';
 import Events from '@site/static/auto-generated/router-outlet/events.md';
@@ -15,16 +16,14 @@ import Slots from '@site/static/auto-generated/router-outlet/slots.md';
 
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/router.md b/docs/api/router.md
index cadfea87581..9684f77170a 100644
--- a/docs/api/router.md
+++ b/docs/api/router.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/router/props.md';
 import Events from '@site/static/auto-generated/router/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/router/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/row.md b/docs/api/row.md
index 4642f474f28..c150d7d09a1 100644
--- a/docs/api/row.md
+++ b/docs/api/row.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/row/props.md';
 import Events from '@site/static/auto-generated/row/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/row/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index 9461f424ce6..7e364f4c862 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/searchbar/props.md';
 import Events from '@site/static/auto-generated/searchbar/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/searchbar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md
index cc89dddc90b..bb2724f20b1 100644
--- a/docs/api/segment-button.md
+++ b/docs/api/segment-button.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/segment-button/props.md';
 import Events from '@site/static/auto-generated/segment-button/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/segment-button/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/segment.md b/docs/api/segment.md
index 75c47759916..f7d2567c28b 100644
--- a/docs/api/segment.md
+++ b/docs/api/segment.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/segment/props.md';
 import Events from '@site/static/auto-generated/segment/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/segment/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/select-option.md b/docs/api/select-option.md
index f26ce97edab..19496f85a5f 100644
--- a/docs/api/select-option.md
+++ b/docs/api/select-option.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/select-option/props.md';
 import Events from '@site/static/auto-generated/select-option/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/select-option/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/slide.md b/docs/api/slide.md
index eccb4af0f7f..41a28cbc57c 100644
--- a/docs/api/slide.md
+++ b/docs/api/slide.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/slide/props.md';
 import Events from '@site/static/auto-generated/slide/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/slide/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/slides.md b/docs/api/slides.md
index 5aaacdc85a0..6c227cdc423 100644
--- a/docs/api/slides.md
+++ b/docs/api/slides.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/slides/props.md';
 import Events from '@site/static/auto-generated/slides/events.md';
@@ -20,16 +21,13 @@ import Slots from '@site/static/auto-generated/slides/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/spinner.md b/docs/api/spinner.md
index f2b843241a5..f3d22322154 100644
--- a/docs/api/spinner.md
+++ b/docs/api/spinner.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/spinner/props.md';
 import Events from '@site/static/auto-generated/spinner/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/spinner/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md
index ef32a396e06..4c992665270 100644
--- a/docs/api/split-pane.md
+++ b/docs/api/split-pane.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/split-pane/props.md';
 import Events from '@site/static/auto-generated/split-pane/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/split-pane/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md
index f75ca44d985..491a74b30d2 100644
--- a/docs/api/tab-bar.md
+++ b/docs/api/tab-bar.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/tab-bar/props.md';
 import Events from '@site/static/auto-generated/tab-bar/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/tab-bar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md
index 07ab7b202e5..4c6b7a26f3d 100644
--- a/docs/api/tab-button.md
+++ b/docs/api/tab-button.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/tab-button/props.md';
 import Events from '@site/static/auto-generated/tab-button/events.md';
@@ -15,16 +16,14 @@ import Slots from '@site/static/auto-generated/tab-button/slots.md';
 
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tab.md b/docs/api/tab.md
index 6885b5401f4..cbdd6d16333 100644
--- a/docs/api/tab.md
+++ b/docs/api/tab.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/tab/props.md';
 import Events from '@site/static/auto-generated/tab/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/tab/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/tabs.md b/docs/api/tabs.md
index 2971127450c..e12003025f7 100644
--- a/docs/api/tabs.md
+++ b/docs/api/tabs.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/tabs/props.md';
 import Events from '@site/static/auto-generated/tabs/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/tabs/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 50e39fa33b1..9f225b49a71 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/textarea/props.md';
 import Events from '@site/static/auto-generated/textarea/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/textarea/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="scoped" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/title.md b/docs/api/title.md
index d29fcdf210d..e4fd4103366 100644
--- a/docs/api/title.md
+++ b/docs/api/title.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/title/props.md';
 import Events from '@site/static/auto-generated/title/events.md';
@@ -18,16 +19,14 @@ import Slots from '@site/static/auto-generated/title/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index c7038ff7208..29587289ed2 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/toggle/props.md';
 import Events from '@site/static/auto-generated/toggle/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/toggle/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md
index e9401c05480..8056b27fa50 100644
--- a/docs/api/toolbar.md
+++ b/docs/api/toolbar.md
@@ -6,6 +6,7 @@ demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/toolbar/props.md';
 import Events from '@site/static/auto-generated/toolbar/events.md';
@@ -20,16 +21,14 @@ import Slots from '@site/static/auto-generated/toolbar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/docs/api/virtual-scroll.md b/docs/api/virtual-scroll.md
index 102220df3fb..dc041724c4d 100644
--- a/docs/api/virtual-scroll.md
+++ b/docs/api/virtual-scroll.md
@@ -4,6 +4,7 @@ hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/virtual-scroll/props.md';
 import Events from '@site/static/auto-generated/virtual-scroll/events.md';
@@ -18,16 +19,13 @@ import Slots from '@site/static/auto-generated/virtual-scroll/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
 
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 
diff --git a/scripts/api-playground-init.js b/scripts/api-playground-init.js
index 6879486e5d2..c979662dbfd 100644
--- a/scripts/api-playground-init.js
+++ b/scripts/api-playground-init.js
@@ -82,6 +82,7 @@ ${Object.entries(frontmatter)
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import TOCInline from '@theme/TOCInline';
 
 import Props from '@site/static/auto-generated/${tag.slice(4)}/props.md';
 import Events from '@site/static/auto-generated/${tag.slice(4)}/events.md';
@@ -104,16 +105,14 @@ function renderReadme({ readme, encapsulation }) {
 
   return `
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 ${encapsulation !== 'none' ? `<EncapsulationPill type="${encapsulation}" />` : ''}
 
 <h2 className="table-of-contents__title">Contents</h2>
 
-<APITOCInline
+<TOCInline
   toc={toc}
   maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
 />
 
 ${addAdmonitions(rest)}
diff --git a/src/components/page/api/APITOCInline/index.tsx b/src/components/page/api/APITOCInline/index.tsx
deleted file mode 100644
index 4ab6fd9c586..00000000000
--- a/src/components/page/api/APITOCInline/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import TOCInline from '@theme/TOCInline';
-
-/**
- * Docusaurus has an issue with parsing custom headings in markdown files that are introduced
- * from importing another MDX file.
- * - https://github.com/facebook/docusaurus/issues/3915
- * - https://github.com/facebook/docusaurus/issues/6201
- *
- * This component is a workaround for this issue.
- *
- * This component accepts the autogenerated markdown files and reads their contents
- * to autogenerate TOC items in the primary TOC.
- *
- * Markdown files without contents are ignored.
- */
-export default function APITocInline({ toc, minHeadingLevel, maxHeadingLevel, autogenerated }): JSX.Element {
-  for (const mdxContent of autogenerated) {
-    const contents = mdxContent({});
-    if (contents?.props?.children?.length > 0) {
-      const id = contents.props.children[0].props.id;
-      const value = contents.props.children[0].props.children;
-
-      if (!toc.find((item) => item.id === id)) {
-        toc.push({
-          id,
-          value,
-          level: 2,
-          children: [],
-        });
-      }
-    }
-  }
-  return <TOCInline toc={toc} minHeadingLevel={minHeadingLevel} maxHeadingLevel={maxHeadingLevel} />;
-}