ionic-team · thetaPC · Apr 19, 2024 · Feb 15, 2024 · Feb 15, 2024 · Feb 15, 2024
diff --git a/_templates/README.md b/_templates/README.md
@@ -21,7 +21,7 @@ If you need a component for multiple versions of Ionic Framework, you (currently
 
 ## Usage
 
-Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.md)) by doing something similar to the following example:
+Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.mdx)) by doing something similar to the following example:
 
 ```
 ## Feature

diff --git a/docs/angular/build-options.md → docs/angular/build-options.mdx b/docs/angular/build-options.md → docs/angular/build-options.mdx
diff --git a/docs/angular/lifecycle.md → docs/angular/lifecycle.mdx b/docs/angular/lifecycle.md → docs/angular/lifecycle.mdx
diff --git a/docs/angular/navigation.md → docs/angular/navigation.mdx b/docs/angular/navigation.md → docs/angular/navigation.mdx
diff --git a/docs/angular/overview.md → docs/angular/overview.mdx b/docs/angular/overview.md → docs/angular/overview.mdx
diff --git a/docs/angular/performance.md → docs/angular/performance.mdx b/docs/angular/performance.md → docs/angular/performance.mdx
@@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see
 
 ## From the Community
 
-<!-- cspell:disable -->
+{/* cspell:disable */}
 
 [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony
 
@@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see
 
 [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
 
-<!-- cspell:enable -->
+{/* cspell:enable */}
 
 :::note
 Do you have a guide you'd like to share? Click the _Edit this page_ button below.

diff --git a/docs/angular/platform.md → docs/angular/platform.mdx b/docs/angular/platform.md → docs/angular/platform.mdx
diff --git a/docs/angular/pwa.md → docs/angular/pwa.mdx b/docs/angular/pwa.md → docs/angular/pwa.mdx
diff --git a/docs/angular/slides.md → docs/angular/slides.mdx b/docs/angular/slides.md → docs/angular/slides.mdx
diff --git a/docs/angular/storage.md → docs/angular/storage.mdx b/docs/angular/storage.md → docs/angular/storage.mdx
diff --git a/docs/angular/testing.md → docs/angular/testing.mdx b/docs/angular/testing.md → docs/angular/testing.mdx
diff --git a/docs/angular/virtual-scroll.md → docs/angular/virtual-scroll.mdx b/docs/angular/virtual-scroll.md → docs/angular/virtual-scroll.mdx
diff --git a/docs/angular/your-first-app.md → docs/angular/your-first-app.mdx b/docs/angular/your-first-app.md → docs/angular/your-first-app.mdx
diff --git a/...angular/your-first-app/2-taking-photos.md → ...ngular/your-first-app/2-taking-photos.mdx b/...angular/your-first-app/2-taking-photos.md → ...ngular/your-first-app/2-taking-photos.mdx
diff --git a/...angular/your-first-app/3-saving-photos.md → ...ngular/your-first-app/3-saving-photos.mdx b/...angular/your-first-app/3-saving-photos.md → ...ngular/your-first-app/3-saving-photos.mdx
diff --git a/...ngular/your-first-app/4-loading-photos.md → ...gular/your-first-app/4-loading-photos.mdx b/...ngular/your-first-app/4-loading-photos.md → ...gular/your-first-app/4-loading-photos.mdx
diff --git a/...angular/your-first-app/5-adding-mobile.md → ...ngular/your-first-app/5-adding-mobile.mdx b/...angular/your-first-app/5-adding-mobile.md → ...ngular/your-first-app/5-adding-mobile.mdx
diff --git a/...ular/your-first-app/6-deploying-mobile.md → ...lar/your-first-app/6-deploying-mobile.mdx b/...ular/your-first-app/6-deploying-mobile.md → ...lar/your-first-app/6-deploying-mobile.mdx
diff --git a/docs/angular/your-first-app/7-live-reload.md → .../angular/your-first-app/7-live-reload.mdx b/docs/angular/your-first-app/7-live-reload.md → .../angular/your-first-app/7-live-reload.mdx
diff --git a/docs/angular/your-first-app/8-distribute.md → docs/angular/your-first-app/8-distribute.mdx b/docs/angular/your-first-app/8-distribute.md → docs/angular/your-first-app/8-distribute.mdx
diff --git a/docs/api/accordion-group.md → docs/api/accordion-group.mdx b/docs/api/accordion-group.md → docs/api/accordion-group.mdx
diff --git a/docs/api/accordion.md → docs/api/accordion.mdx b/docs/api/accordion.md → docs/api/accordion.mdx
diff --git a/docs/api/action-sheet.md → docs/api/action-sheet.mdx b/docs/api/action-sheet.md → docs/api/action-sheet.mdx
diff --git a/docs/api/alert.md → docs/api/alert.mdx b/docs/api/alert.md → docs/api/alert.mdx
diff --git a/docs/api/app.md → docs/api/app.mdx b/docs/api/app.md → docs/api/app.mdx
diff --git a/docs/api/avatar.md → docs/api/avatar.mdx b/docs/api/avatar.md → docs/api/avatar.mdx
diff --git a/docs/api/back-button.md → docs/api/back-button.mdx b/docs/api/back-button.md → docs/api/back-button.mdx
diff --git a/docs/api/backdrop.md → docs/api/backdrop.mdx b/docs/api/backdrop.md → docs/api/backdrop.mdx
diff --git a/docs/api/badge.md → docs/api/badge.mdx b/docs/api/badge.md → docs/api/badge.mdx
diff --git a/docs/api/breadcrumb.md → docs/api/breadcrumb.mdx b/docs/api/breadcrumb.md → docs/api/breadcrumb.mdx
diff --git a/docs/api/breadcrumbs.md → docs/api/breadcrumbs.mdx b/docs/api/breadcrumbs.md → docs/api/breadcrumbs.mdx
diff --git a/docs/api/button.md → docs/api/button.mdx b/docs/api/button.md → docs/api/button.mdx
diff --git a/docs/api/buttons.md → docs/api/buttons.mdx b/docs/api/buttons.md → docs/api/buttons.mdx
@@ -62,7 +62,7 @@ This feature is only available for iOS.
 
 :::
 
-<!-- Reuse the playground from the Title directory -->
+{/* Reuse the playground from the Title directory */}
 import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md';
 
 <CollapsibleLargeTitleButtons />

diff --git a/docs/api/card-content.md → docs/api/card-content.mdx b/docs/api/card-content.md → docs/api/card-content.mdx
diff --git a/docs/api/card-header.md → docs/api/card-header.mdx b/docs/api/card-header.md → docs/api/card-header.mdx
diff --git a/docs/api/card-subtitle.md → docs/api/card-subtitle.mdx b/docs/api/card-subtitle.md → docs/api/card-subtitle.mdx
diff --git a/docs/api/card-title.md → docs/api/card-title.mdx b/docs/api/card-title.md → docs/api/card-title.mdx
diff --git a/docs/api/card.md → docs/api/card.mdx b/docs/api/card.md → docs/api/card.mdx
diff --git a/docs/api/checkbox.md → docs/api/checkbox.mdx b/docs/api/checkbox.md → docs/api/checkbox.mdx
diff --git a/docs/api/chip.md → docs/api/chip.mdx b/docs/api/chip.md → docs/api/chip.mdx
diff --git a/docs/api/col.md → docs/api/col.mdx b/docs/api/col.md → docs/api/col.mdx
diff --git a/docs/api/content.md → docs/api/content.mdx b/docs/api/content.md → docs/api/content.mdx
diff --git a/docs/api/datetime-button.md → docs/api/datetime-button.mdx b/docs/api/datetime-button.md → docs/api/datetime-button.mdx
@@ -47,8 +47,7 @@ import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/
 
 `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
 
-<!--
-## Customization
+{/* ## Customization
 
 TODO
 
@@ -58,8 +57,7 @@ TODO
 
 ### Theming
 
-TODO
--->
+TODO */}
 
 ## Properties
 <Props />

diff --git a/docs/api/datetime.md → docs/api/datetime.mdx b/docs/api/datetime.md → docs/api/datetime.mdx
diff --git a/docs/api/fab-button.md → docs/api/fab-button.mdx b/docs/api/fab-button.md → docs/api/fab-button.mdx
diff --git a/docs/api/fab-list.md → docs/api/fab-list.mdx b/docs/api/fab-list.md → docs/api/fab-list.mdx
diff --git a/docs/api/fab.md → docs/api/fab.mdx b/docs/api/fab.md → docs/api/fab.mdx
diff --git a/docs/api/footer.md → docs/api/footer.mdx b/docs/api/footer.md → docs/api/footer.mdx
diff --git a/docs/api/grid.md → docs/api/grid.mdx b/docs/api/grid.md → docs/api/grid.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.mdx) and [column(s)](col.mdx). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
 ## Overview
 

diff --git a/docs/api/header.md → docs/api/header.mdx b/docs/api/header.md → docs/api/header.mdx
diff --git a/docs/api/icon.md → docs/api/icon.mdx b/docs/api/icon.md → docs/api/icon.mdx
diff --git a/docs/api/img.md → docs/api/img.mdx b/docs/api/img.md → docs/api/img.mdx
diff --git a/docs/api/infinite-scroll-content.md → docs/api/infinite-scroll-content.mdx b/docs/api/infinite-scroll-content.md → docs/api/infinite-scroll-content.mdx
@@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
 
-For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content).
 
 ## Properties
 <Props />

diff --git a/docs/api/infinite-scroll.md → docs/api/infinite-scroll.mdx b/docs/api/infinite-scroll.md → docs/api/infinite-scroll.mdx
diff --git a/docs/api/input.md → docs/api/input.mdx b/docs/api/input.md → docs/api/input.mdx
@@ -155,9 +155,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
 
 :::note
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 :::
 
 import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md';

diff --git a/docs/api/item-divider.md → docs/api/item-divider.mdx b/docs/api/item-divider.md → docs/api/item-divider.mdx
diff --git a/docs/api/item-group.md → docs/api/item-group.mdx b/docs/api/item-group.md → docs/api/item-group.mdx
diff --git a/docs/api/item-option.md → docs/api/item-option.mdx b/docs/api/item-option.md → docs/api/item-option.mdx
diff --git a/docs/api/item-options.md → docs/api/item-options.mdx b/docs/api/item-options.md → docs/api/item-options.mdx
diff --git a/docs/api/item-sliding.md → docs/api/item-sliding.mdx b/docs/api/item-sliding.md → docs/api/item-sliding.mdx
diff --git a/docs/api/item.md → docs/api/item.mdx b/docs/api/item.md → docs/api/item.mdx
@@ -178,21 +178,15 @@ import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md';
 
 <DetailArrows />
 
-
-<!--
-
-TODO add this functionality back as a css variable
+{/* TODO add this functionality back as a css variable
 
 This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable:
 
 ```css
 --item-detail-push-show: true;
 ```
 
-See the [theming documentation](/docs/theming/css-variables) for more information.
-
--->
-
+See the [theming documentation](/docs/theming/css-variables) for more information. */}
 
 ## Item Lines
 

diff --git a/docs/api/label.md → docs/api/label.mdx b/docs/api/label.md → docs/api/label.mdx
@@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required.
+Label is an element used primarily to add text content to [Item](./item.mdx) components. Label can also be used inside of form control components such as [Input](./input.mdx) or [Radio](./radio.mdx) when specifying the visible label, but it is not required.
 
 The position of the label inside of an item can be inline, fixed, stacked, or floating.
 

diff --git a/docs/api/list-header.md → docs/api/list-header.mdx b/docs/api/list-header.md → docs/api/list-header.mdx
diff --git a/docs/api/list.md → docs/api/list.mdx b/docs/api/list.md → docs/api/list.mdx
diff --git a/docs/api/loading.md → docs/api/loading.mdx b/docs/api/loading.md → docs/api/loading.mdx
diff --git a/docs/api/menu-button.md → docs/api/menu-button.mdx b/docs/api/menu-button.md → docs/api/menu-button.mdx
diff --git a/docs/api/menu-toggle.md → docs/api/menu-toggle.mdx b/docs/api/menu-toggle.md → docs/api/menu-toggle.mdx
diff --git a/docs/api/menu.md → docs/api/menu.mdx b/docs/api/menu.md → docs/api/menu.mdx
diff --git a/docs/api/modal.md → docs/api/modal.mdx b/docs/api/modal.md → docs/api/modal.mdx
diff --git a/docs/api/nav-link.md → docs/api/nav-link.mdx b/docs/api/nav-link.md → docs/api/nav-link.mdx
diff --git a/docs/api/nav.md → docs/api/nav.mdx b/docs/api/nav.md → docs/api/nav.mdx
diff --git a/docs/api/note.md → docs/api/note.mdx b/docs/api/note.md → docs/api/note.mdx
diff --git a/docs/api/picker.md → docs/api/picker.mdx b/docs/api/picker.md → docs/api/picker.mdx
diff --git a/docs/api/popover.md → docs/api/popover.mdx b/docs/api/popover.md → docs/api/popover.mdx
diff --git a/docs/api/progress-bar.md → docs/api/progress-bar.mdx b/docs/api/progress-bar.md → docs/api/progress-bar.mdx
@@ -48,7 +48,7 @@ import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/inde
 
 ## Progress Bars in Toolbars
 
-<!-- Reuse the playground from the Toolbar directory -->
+{/* Reuse the playground from the Toolbar directory */}
 import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md';
 
 <Toolbar />

diff --git a/docs/api/radio-group.md → docs/api/radio-group.mdx b/docs/api/radio-group.md → docs/api/radio-group.mdx
diff --git a/docs/api/radio.md → docs/api/radio.mdx b/docs/api/radio.md → docs/api/radio.mdx
diff --git a/docs/api/range.md → docs/api/range.mdx b/docs/api/range.md → docs/api/range.mdx
diff --git a/docs/api/refresher-content.md → docs/api/refresher-content.mdx b/docs/api/refresher-content.md → docs/api/refresher-content.mdx
diff --git a/docs/api/refresher.md → docs/api/refresher.mdx b/docs/api/refresher.md → docs/api/refresher.mdx
diff --git a/docs/api/reorder-group.md → docs/api/reorder-group.mdx b/docs/api/reorder-group.md → docs/api/reorder-group.mdx
diff --git a/docs/api/reorder.md → docs/api/reorder.mdx b/docs/api/reorder.md → docs/api/reorder.mdx
diff --git a/docs/api/ripple-effect.md → docs/api/ripple-effect.mdx b/docs/api/ripple-effect.md → docs/api/ripple-effect.mdx
diff --git a/docs/api/route-redirect.md → docs/api/route-redirect.mdx b/docs/api/route-redirect.md → docs/api/route-redirect.mdx
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 A route redirect can only be used with an `ion-router` as a direct child of it.
 
 :::note
- Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+ Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 :::
 
 

diff --git a/docs/api/route.md → docs/api/route.mdx b/docs/api/route.md → docs/api/route.mdx
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 The route component takes a component and renders it when the Browser URL matches the url property.
 
 :::note
- Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+ Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.mdx) and the Angular router.
 :::
 
 

diff --git a/docs/api/router-link.md → docs/api/router-link.mdx b/docs/api/router-link.md → docs/api/router-link.mdx
diff --git a/docs/api/router-outlet.md → docs/api/router-outlet.mdx b/docs/api/router-outlet.md → docs/api/router-outlet.mdx
diff --git a/docs/api/router.md → docs/api/router.mdx b/docs/api/router.md → docs/api/router.mdx
diff --git a/docs/api/row.md → docs/api/row.mdx b/docs/api/row.md → docs/api/row.mdx
diff --git a/docs/api/searchbar.md → docs/api/searchbar.mdx b/docs/api/searchbar.md → docs/api/searchbar.mdx
@@ -58,7 +58,7 @@ import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md
 
 Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.
 
-<!-- Reuse the playground from the Toolbar directory -->
+{/* Reuse the playground from the Toolbar directory */}
 import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md';
 
 <Toolbar />

diff --git a/docs/api/segment-button.md → docs/api/segment-button.mdx b/docs/api/segment-button.md → docs/api/segment-button.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-Segment buttons are groups of related buttons inside of a [segment](segment.md). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
+Segment buttons are groups of related buttons inside of a [segment](segment.mdx). They are displayed in a horizontal row. A segment button can be selected by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time.
 
 
 ## Basic Usage

diff --git a/docs/api/segment.md → docs/api/segment.mdx b/docs/api/segment.md → docs/api/segment.mdx
@@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v8/segment/scrollable/index.md';
 
 ## Segments in Toolbars
 
-<!-- Reuse the playground from the Toolbar directory -->
+{/* Reuse the playground from the Toolbar directory */}
 import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md';
 
 <Toolbar />

diff --git a/docs/api/select-option.md → docs/api/select-option.mdx b/docs/api/select-option.md → docs/api/select-option.mdx
diff --git a/docs/api/select.md → docs/api/select.mdx b/docs/api/select.md → docs/api/select.mdx
@@ -86,7 +86,7 @@ import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multipl
 
 ## Interfaces
 
-By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
+By default, select uses [ion-alert](alert.mdx) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.mdx) or [ion-popover](popover.mdx) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
 
 ### Alert
 
@@ -165,7 +165,7 @@ import ButtonTextExample from '@site/static/usage/v8/select/customization/button
 
 Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
 
-See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts.
+See the [ion-alert docs](alert.mdx), [ion-action-sheet docs](action-sheet.mdx), and [ion-popover docs](popover.mdx) for the properties that each interface accepts.
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
 
@@ -178,9 +178,9 @@ import InterfaceOptionsExample from '@site/static/usage/v8/select/customization/
 The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open.
 
 :::note
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 :::
 
 import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md';
@@ -205,11 +205,11 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty
 
 Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
 
-- [Alert Customization](alert.md#customization)
-- [Action Sheet Customization](action-sheet.md#customization)
-- [Popover Customization](popover.md#customization)
+- [Alert Customization](alert.mdx#customization)
+- [Action Sheet Customization](action-sheet.mdx#customization)
+- [Popover Customization](popover.mdx#customization)
 
-However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options.
+However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options.
 
 ### Custom Toggle Icons
 

diff --git a/docs/api/skeleton-text.md → docs/api/skeleton-text.mdx b/docs/api/skeleton-text.md → docs/api/skeleton-text.mdx
diff --git a/docs/api/spinner.md → docs/api/spinner.mdx b/docs/api/spinner.md → docs/api/spinner.mdx
diff --git a/docs/api/split-pane.md → docs/api/split-pane.mdx b/docs/api/split-pane.md → docs/api/split-pane.mdx
diff --git a/docs/api/tab-bar.md → docs/api/tab-bar.mdx b/docs/api/tab-bar.md → docs/api/tab-bar.mdx
@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-The tab bar is a UI component that contains a set of [tab buttons](tab-button.md). A tab bar must be provided inside of [tabs](tabs.md) to communicate with each [tab](tab.md).
+The tab bar is a UI component that contains a set of [tab buttons](tab-button.mdx). A tab bar must be provided inside of [tabs](tabs.mdx) to communicate with each [tab](tab.mdx).
 
 
 

diff --git a/docs/api/tab-button.md → docs/api/tab-button.mdx b/docs/api/tab-button.md → docs/api/tab-button.mdx
@@ -18,9 +18,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-A tab button is a UI component that is placed inside of a [tab bar](tab-bar.md). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.md).
+A tab button is a UI component that is placed inside of a [tab bar](tab-bar.mdx). The tab button can specify the layout of the icon and label and connect to a [tab view](tab.mdx).
 
-See the [tabs documentation](tabs.md) for more details on configuring tabs.
+See the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 
 

diff --git a/docs/api/tab.md → docs/api/tab.mdx b/docs/api/tab.md → docs/api/tab.mdx
@@ -19,14 +19,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 
-The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
+The tab component is a child component of [tabs](tabs.mdx). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
 
 :::note
  Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
 :::
 
 
-See the [tabs documentation](tabs.md) for more details on configuring tabs.
+See the [tabs documentation](tabs.mdx) for more details on configuring tabs.
 
 
 

diff --git a/docs/api/tabs.md → docs/api/tabs.mdx b/docs/api/tabs.md → docs/api/tabs.mdx
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
 Tabs are a top level navigation component to implement a tab-based navigation.
-The component is a container of individual [Tab](tab.md) components.
+The component is a container of individual [Tab](tab.mdx) components.
 
 The `ion-tabs` component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion-tabs`.
 

diff --git a/docs/api/text.md → docs/api/text.mdx b/docs/api/text.md → docs/api/text.mdx
diff --git a/docs/api/textarea.md → docs/api/textarea.mdx b/docs/api/textarea.md → docs/api/textarea.mdx
@@ -116,9 +116,9 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi
 Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
 
 :::note
-In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+In most cases, [Icon](./icon.mdx) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
 
-If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.mdx). This ensures that the content can be tabbed to.
 :::
 
 import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.md';

diff --git a/docs/api/thumbnail.md → docs/api/thumbnail.mdx b/docs/api/thumbnail.md → docs/api/thumbnail.mdx
diff --git a/docs/api/title.md → docs/api/title.mdx b/docs/api/title.md → docs/api/title.mdx
@@ -42,7 +42,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large
 
 ### Collapsible Buttons
 
-The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed.
+The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed.
 
 
 import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md';

diff --git a/docs/api/toast.md → docs/api/toast.mdx b/docs/api/toast.md → docs/api/toast.mdx
@@ -66,7 +66,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit
 
 ### Relative Positioning
 
-If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
+If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.mdx), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
 
 import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md';
 
@@ -90,7 +90,7 @@ import StackedPlayground from '@site/static/usage/v8/toast/layout/index.md';
 
 ## Icons
 
-An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
+An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.mdx) instead.
 
 import IconPlayground from '@site/static/usage/v8/toast/icon/index.md';
 

diff --git a/docs/api/toggle.md → docs/api/toggle.mdx b/docs/api/toggle.md → docs/api/toggle.mdx
diff --git a/docs/api/toolbar.md → docs/api/toolbar.mdx b/docs/api/toolbar.md → docs/api/toolbar.mdx