chore(i18n, usage): rename playground partials to .mdx and update imports

docs/angular/navigation.md

@@ -201,7 +201,7 @@ To get started with standalone components [visit Angular's official docs](https:
 
 ## Live Example
 
-import NavigationPlayground from '@site/static/usage/v9/navigation/index.md';
+import NavigationPlayground from '@site/static/usage/v9/navigation/index.mdx';
 
 <NavigationPlayground defaultFramework="angular" />
 

docs/api/accordion.md

@@ -22,15 +22,15 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ## 基本的な使い方
 
-import Basic from '@site/static/usage/v9/accordion/basic/index.md';
+import Basic from '@site/static/usage/v9/accordion/basic/index.mdx';
 
 <Basic />
 
 ## アコーディオンをトグルする方法
 
 どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
 
-import Toggle from '@site/static/usage/v9/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v9/accordion/toggle/index.mdx';
 
 <Toggle />
 
@@ -44,15 +44,15 @@ import Toggle from '@site/static/usage/v9/accordion/toggle/index.md';
 
 開発者は `ionChange` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。
 
-import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index.mdx';
 
 <ListenChanges />
 
 ## 複数のアコーディオン
 
 開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
 
-import Multiple from '@site/static/usage/v9/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v9/accordion/multiple/index.mdx';
 
 <Multiple />
 
@@ -62,15 +62,15 @@ import Multiple from '@site/static/usage/v9/accordion/multiple/index.md';
 
 個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。
 
-import DisableIndividual from '@site/static/usage/v9/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v9/accordion/disable/individual/index.mdx';
 
 <DisableIndividual />
 
 ### アコーディオングループ
 
 アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。
 
-import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.mdx';
 
 <DisableGroup />
 
@@ -80,15 +80,15 @@ import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md
 
 個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。
 
-import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individual/index.mdx';
 
 <ReadonlyIndividual />
 
 ### アコーディオングループ
 
 アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。
 
-import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.mdx';
 
 <ReadonlyGroup />
 
@@ -112,7 +112,7 @@ import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.
 
 `expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
 
-import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expansion-styles/index.mdx';
 
 <ExpansionStyles />
 
@@ -136,7 +136,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
 }
 ```
 
-import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customization/advanced-expansion-styles/index.mdx';
 
 <AdvancedExpansionStyles />
 
@@ -148,15 +148,15 @@ import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customizati
 
 どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
 
-import Icons from '@site/static/usage/v9/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v9/accordion/customization/icons/index.mdx';
 
 <Icons />
 
 ### テーマ
 
 `ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と  [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。
 
-import Theming from '@site/static/usage/v9/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v9/accordion/customization/theming/index.mdx';
 
 <Theming />
 
@@ -166,7 +166,7 @@ import Theming from '@site/static/usage/v9/accordion/customization/theming/index
 
 デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。
 
-import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibility/animations/index.mdx';
 
 <AccessibilityAnimations />
 

docs/api/action-sheet.md

@@ -27,7 +27,7 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ
 
 `ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
 
-import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.md';
+import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.mdx';
 
 <Trigger />
 
@@ -37,15 +37,15 @@ import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.md'
 
 `isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
 
-import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.md';
+import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.mdx';
 
 <IsOpen />
 
 ## Controller アクションシート
 
 アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
 
-import Controller from '@site/static/usage/v9/action-sheet/controller/index.md';
+import Controller from '@site/static/usage/v9/action-sheet/controller/index.mdx';
 
 <Controller />
 
@@ -59,7 +59,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを
 
 `didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
 
-import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/index.md';
+import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/index.mdx';
 
 <RoleInfo />
 
@@ -83,15 +83,15 @@ import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/in
 }
 ```
 
-import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.md';
+import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.mdx';
 
 <Styling />
 
 ## CSSカスタムプロパティ
 
 [CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
 
-import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css-properties/index.md';
+import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css-properties/index.mdx';
 
 <CssCustomProperties />
 

docs/api/alert.md

@@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 `ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
 
-import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.md';
+import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.mdx';
 
 <Trigger />
 
@@ -36,15 +36,15 @@ import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.md';
 
 `isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
 
-import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.md';
+import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.mdx';
 
 <IsOpen />
 
 ## Controller Alerts
 
 `alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができます。
 
-import Controller from '@site/static/usage/v9/alert/presenting/controller/index.md';
+import Controller from '@site/static/usage/v9/alert/presenting/controller/index.mdx';
 
 <Controller />
 
@@ -54,7 +54,7 @@ import Controller from '@site/static/usage/v9/alert/presenting/controller/index.
 
 オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
 
-import Buttons from '@site/static/usage/v9/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v9/alert/buttons/index.mdx';
 
 <Buttons />
 
@@ -65,13 +65,13 @@ Alertには、複数の異なるInputを含めることもでき、そのデー
 
 ### Text Inputs Example
 
-import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.mdx';
 
 <TextInputs />
 
 ### Radio Example
 
-import Radios from '@site/static/usage/v9/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v9/alert/inputs/radios/index.mdx';
 
 <Radios />
 
@@ -101,7 +101,7 @@ Alertはscopedによるカプセル化を使用しており、実行時に各ス
 }
 ```
 
-import Customization from '@site/static/usage/v9/alert/customization/index.md';
+import Customization from '@site/static/usage/v9/alert/customization/index.mdx';
 
 <Customization />
 

docs/api/app.md

@@ -30,7 +30,7 @@ AppはIonicアプリケーションのコンテナ要素です。1つのプロ
 
 Ionicは、`ion-focusable`クラスを持つコンポーネント用のフォーカスユーティリティを提供します。これらのユーティリティは、<kbd>Tab</kbd>などの特定のキーボードキーが押されたときに、コンポーネントのフォーカスを自動的に管理します。コンポーネントは、`ion-app`の`setFocus`メソッドを使用して、ユーザーのアクションに応じてプログラムでフォーカスを設定することもできます。
 
-import SetFocus from '@site/static/usage/v9/app/set-focus/index.md';
+import SetFocus from '@site/static/usage/v9/app/set-focus/index.mdx';
 
 <SetFocus />
 

docs/api/avatar.md

@@ -24,27 +24,27 @@ Avatarは、単独で使用することも、任意の要素の内部で使用
 
 ## 基本的な使い方
 
-import Basic from '@site/static/usage/v9/avatar/basic/index.md';
+import Basic from '@site/static/usage/v9/avatar/basic/index.mdx';
 
 <Basic />
 
 ## Chip Avatar
 
-import Chip from '@site/static/usage/v9/avatar/chip/index.md';
+import Chip from '@site/static/usage/v9/avatar/chip/index.mdx';
 
 <Chip />
 
 ## Item Avatar
 
-import Item from '@site/static/usage/v9/avatar/item/index.md';
+import Item from '@site/static/usage/v9/avatar/item/index.mdx';
 
 <Item />
 
 ## テーマ
 
 ## CSSカスタムプロパティ
 
-import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index.mdx';
 
 <CSSProps />
 

docs/api/back-button.md

@@ -21,15 +21,15 @@ Back Buttonは、クリックされるとアプリの履歴に戻るようにナ
 
 ## 基本的な使い方
 
-import Basic from '@site/static/usage/v9/back-button/basic/index.md';
+import Basic from '@site/static/usage/v9/back-button/basic/index.mdx';
 
 <Basic />
 
 ## カスタムのBack Button
 
 デフォルトでは、戻るボタンは`ios`では`"chevron-back"`アイコン付きで`"Back"`のテキストを表示し、`md`では`"arrow-back-sharp"`アイコンを表示します。これは、各戻るボタンコンポーネントごとに`icon`または`text`プロパティを設定することでカスタマイズ可能です。あるいは、グローバル設定で`backButtonIcon`または`backButtonText`プロパティを使用してグローバルに設定することもできます。詳細は[Configドキュメント](../developing/config)を参照してください。
 
-import Custom from '@site/static/usage/v9/back-button/custom/index.md';
+import Custom from '@site/static/usage/v9/back-button/custom/index.mdx';
 
 <Custom />
 

docs/api/backdrop.md

@@ -18,7 +18,7 @@ Backdropは、他のコンポーネントをオーバーレイするためフル
 
 Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。
 
-import Basic from '@site/static/usage/v9/backdrop/basic/index.md';
+import Basic from '@site/static/usage/v9/backdrop/basic/index.mdx';
 
 <Basic />
 
@@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v9/backdrop/basic/index.md';
 
 コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。
 
-import Styling from '@site/static/usage/v9/backdrop/styling/index.md';
+import Styling from '@site/static/usage/v9/backdrop/styling/index.mdx';
 
 <Styling />
 

docs/api/badge.md

@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ## 基本的な使い方
 
-import Basic from '@site/static/usage/v9/badge/basic/index.md';
+import Basic from '@site/static/usage/v9/badge/basic/index.mdx';
 
 <Basic />
 
@@ -33,21 +33,21 @@ import Basic from '@site/static/usage/v9/badge/basic/index.md';
 空のバッジは`md`モードでのみ利用可能です。
 :::
 
-import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.md';
+import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.mdx';
 
 <InsideTabBar />
 
 ## テーマ
 
 ### Colors
 
-import Colors from '@site/static/usage/v9/badge/theming/colors/index.md';
+import Colors from '@site/static/usage/v9/badge/theming/colors/index.mdx';
 
 <Colors />
 
 ### CSS Properties
 
-import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.md';
+import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.mdx';
 
 <CSSProps />