chore(i18n, docs): rename doc pages and usage partials to .mdx

.prettierignore

@@ -20,8 +20,8 @@ docs/cli/commands
 # Prettier's mdx parser reflows those children and moves link text onto its own
 # line, which MDX then wraps in a paragraph, rendering invalid HTML such as
 # <a><p>Android SDK</p></a>. Formatting these files reintroduces that markup.
-docs/reference/glossary.md
-versioned_docs/version-v*/reference/glossary.md
+docs/reference/glossary.mdx
+versioned_docs/version-v*/reference/glossary.md*
 
 # Archived versions
 versioned_docs/version-v5

cspell.json

@@ -10,7 +10,8 @@
   "ignoreRegExpList": [
     "/(```+)[\\s\\S]+?\\1/g",
     "`([^`]*)`",
-    "/:[a-zA-Z0-9-_\\+]+:/g"
+    "/:[a-zA-Z0-9-_\\+]+:/g",
+    "/\\]\\([^)]*\\)/g"
   ],
   "ignorePaths": [
     "docs/cli",

docs/angular/add-to-existing.md → docs/angular/add-to-existing.mdx

@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.md) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.md).
+This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx).
 
 :::tip
 
@@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 
 :::info
 
-While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).
+While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 :::
 
@@ -96,7 +96,7 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for details.
+This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for details.
 
 ## Using Individual Components
 
@@ -123,7 +123,7 @@ import { IonButton, IonDatetime } from '@ionic/angular';
 export class App {}
 ```
 
-Visit the [components](/docs/components.md) page for all of the available Ionic components.
+Visit the [components](/docs/components.mdx) page for all of the available Ionic components.
 
 ## Using Ionic Pages
 
@@ -172,7 +172,7 @@ Replace the existing `styles` array in `angular.json` with the following:
 ]
 ```
 
-These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md).
+These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx).
 
 #### 2. Set up Theming
 
@@ -191,7 +191,7 @@ Create a `src/theme/variables.css` file with the following content:
 @import '@ionic/angular/css/palettes/dark.system.css';
 ```
 
-This file enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
+This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.
 
 #### 3. Update the App Component
 

docs/angular/navigation.md → docs/angular/navigation.mdx

@@ -194,7 +194,7 @@ export class AppRoutingModule {}
 ```
 
 :::tip
-If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone).
+If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `<a>` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.mdx#migrating-from-modules-to-standalone).
 :::
 
 To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).

docs/angular/quickstart.md → docs/angular/quickstart.mdx

@@ -172,15 +172,15 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/docs/api/title.md#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。
+これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/docs/api/title.mdx#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。
 
 :::tip[詳細を学ぶ]
-Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/docs/api/header.md)、[Toolbar](/docs/api/toolbar.md)、[Title](/docs/api/title.md)、および[Content](/docs/api/content.md)のドキュメントを参照してください。
+Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/docs/api/header.mdx)、[Toolbar](/docs/api/toolbar.mdx)、[Title](/docs/api/title.mdx)、および[Content](/docs/api/content.mdx)のドキュメントを参照してください。
 :::
 
 ## Ionic コンポーネントを追加
 
-より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、`ion-content`の最後に[Button](/docs/api/button.md)を追加します：
+より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、`ion-content`の最後に[Button](/docs/api/button.mdx)を追加します：
 
 ```html title="src/app/home/home.page.html"
 <ion-content>
@@ -211,7 +211,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md):
+In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router';
 ```
 
 :::info
-ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/docs/angular/navigation.md#navigating-to-different-routes)を参照してください。
+ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/docs/angular/navigation.mdx#navigating-to-different-routes)を参照してください。
 :::
 
 ## 新しいページにアイコンを追加
@@ -301,7 +301,7 @@ export class NewPage implements OnInit {
 
 または、`app.component.ts`でアイコンを登録して、アプリ全体で使用することもできます。
 
-詳細については、[Icon のドキュメント](/docs/api/icon.md)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。
+詳細については、[Icon のドキュメント](/docs/api/icon.mdx)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。
 
 ## コンポーネントメソッドを呼び出す
 
@@ -387,7 +387,7 @@ Ionic コンポーネントのメソッドを呼び出すには：
 1. コンポーネントの`ViewChild`参照を作成します
 2. コンポーネントインスタンスでメソッドを直接呼び出します
 
-各コンポーネントの利用可能なメソッドは、API ドキュメントの[Methods](/docs/api/content.md#methods)セクションで見つけることができます。
+各コンポーネントの利用可能なメソッドは、API ドキュメントの[Methods](/docs/api/content.mdx#methods)セクションで見つけることができます。
 
 ## デバイスで実行
 

docs/angular/your-first-app.md → docs/angular/your-first-app.mdx

@@ -25,7 +25,7 @@ Ionic の素晴らしいところは、1 つのコードベースで、使い慣
 ></iframe>
 
 :::note
-Ionic 4 および Cordova をカバーした前のバージョンのガイドをお探しですか？[Ionic 4 および Cordova ガイド](../developer-resources/guides/first-app-v4/intro.md)を参照してください。
+Ionic 4 および Cordova をカバーした前のバージョンのガイドをお探しですか？[Ionic 4 および Cordova ガイド](../developer-resources/guides/first-app-v4/intro.mdx)を参照してください。
 :::
 
 ## 構築するもの
@@ -34,7 +34,7 @@ Ionic 4 および Cordova をカバーした前のバージョンのガイドを
 
 ハイライトには以下が含まれます：
 
-- Ionic Framework の[UI コンポーネント](../components.md)を使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。
+- Ionic Framework の[UI コンポーネント](../components.mdx)を使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。
 - Ionic の公式ネイティブアプリランタイムである[Capacitor](https://capacitorjs.com)を使用して、ネイティブ iOS および Android モバイルアプリとしてデプロイ。
 - Capacitor の[Camera](../native/camera.md)、[Filesystem](../native/filesystem.md)、[Preferences](../native/preferences.md) API によって提供される Photo Gallery 機能。
 
@@ -65,7 +65,7 @@ npm install -g @ionic/cli native-run cordova-res
 :::note
 `-g`オプションは*グローバルにインストール*を意味します。パッケージをグローバルにインストールすると、`EACCES`権限エラーが発生する可能性があります。
 
-npm を管理者権限なしでグローバルに操作できるように設定することを検討してください。詳細は [権限エラーの解決](../developing/tips.md#resolving-permission-errors) を参照してください。
+npm を管理者権限なしでグローバルに操作できるように設定することを検討してください。詳細は [権限エラーの解決](../developing/tips.mdx#resolving-permission-errors) を参照してください。
 :::
 
 ## アプリの作成
@@ -168,7 +168,7 @@ ionic serve
 </ion-content>
 ```
 
-`ion-header`は上部のナビゲーションとツールバーを表し、「Tab 2」がタイトルです（iOS の[折りたたみ可能な大きなタイトル](../api/title.md#collapsible-large-titles)サポートにより、2 つあります）。両方の`ion-title`要素を次のように変更します：
+`ion-header`は上部のナビゲーションとツールバーを表し、「Tab 2」がタイトルです（iOS の[折りたたみ可能な大きなタイトル](../api/title.mdx#collapsible-large-titles)サポートにより、2 つあります）。両方の`ion-title`要素を次のように変更します：
 
 ```html
 <ion-header [translucent]="true">
@@ -190,7 +190,7 @@ ionic serve
 </ion-content>
 ```
 
-アプリの視覚的な側面を`<ion-content>`に配置します。この場合、デバイスのカメラを開くボタンと、カメラでキャプチャした画像を表示する場所を追加します。まず、ページの下部に[フローティングアクションボタン](../api/fab.md)（FAB）を追加し、カメラ画像をアイコンとして設定します。
+アプリの視覚的な側面を`<ion-content>`に配置します。この場合、デバイスのカメラを開くボタンと、カメラでキャプチャした画像を表示する場所を追加します。まず、ページの下部に[フローティングアクションボタン](../api/fab.mdx)（FAB）を追加し、カメラ画像をアイコンとして設定します。
 
 ```html
 <ion-header [translucent]="true">

docs/angular/your-first-app/2-taking-photos.md → docs/angular/your-first-app/2-taking-photos.mdx

@@ -229,7 +229,7 @@ export interface UserPhoto {
 }
 ```
 
-Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `<img>` element and set its `src` property to the photo's path.
+Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.mdx) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `<img>` element and set its `src` property to the photo's path.
 
 ```html
 <ion-header [translucent]="true">

docs/angular/your-first-app/5-adding-mobile.md → docs/angular/your-first-app/5-adding-mobile.mdx

@@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the
 
 Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device.
 
-Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
+Import the Ionic [Platform API](../platform.mdx) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile).
 
 Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform.
 
@@ -88,7 +88,7 @@ private async savePicture(photo: Photo) {
 }
 ```
 
-When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
+When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
 
 ```ts
 import { Injectable, inject, signal } from '@angular/core';

docs/angular/your-first-app/7-live-reload.md → docs/angular/your-first-app/7-live-reload.mdx

@@ -13,7 +13,7 @@ sidebar_label: ライブリロード
 
 ここまでで、どこでも動作するクロスプラットフォームアプリを簡単に開発できることがわかりました。開発の速度はかなり速いですが、もっと速くできる方法があると言ったらどう思いますか？
 
-We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
 
 ## Live Reload
 
@@ -156,7 +156,7 @@ export class Tab2Page implements OnInit {
 }
 ```
 
-Open `tab2.page.html` and wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+Open `tab2.page.html` and wrap each image in a `<button>` element with a click handler. When the app user taps on a photo in our gallery, we'll display an [Action Sheet](../../api/action-sheet.mdx) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-header [translucent]="true">

docs/angular/your-first-app/8-distribute.md → docs/angular/your-first-app/8-distribute.mdx

@@ -102,6 +102,6 @@ For access to the ability to create a Native Configuration, you will need to be
 
 Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!
 
-There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](../../components.mdx) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
 
 Happy app building! 💙