ionic-team · thetaPC · Sep 10, 2026 · Sep 8, 2026 · Sep 9, 2026
@@ -99,17 +99,17 @@ npm run spellcheck
 - A **directory** or anything matching a **regular expression**, update the following file: `cspell.json`
   - For example, we don't want to flag anything inside of code ticks (<code>`</code>) or code blocks (<code>```</code>), so there are regular expressions added to ignore anything inside of these.
 - An **entire line**, add the following comment above it:
-  ```markdown
-  <!-- cspell:disable-next-line -->
+  ```mdx
+  {/* cspell:disable-next-line */}
   ```
 - **Multiple lines**, add comments above and below the lines to be ignored:
 
-  ```markdown
-  <!-- cspell:disable -->
+  ```mdx
+  {/* cspell:disable */}
 
   <p>Everything inside of these comments will be ignored by the spell checkr. Proofread your own words carefully.</p>
 
-  <!-- cspell:enable -->
+  {/* cspell:enable */}
   ```
 
 > [!IMPORTANT]

@@ -21,12 +21,12 @@ 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.mdx](../docs/api/button.mdx)) by doing something similar to the following example:
 
 ```
 ## Feature
 
-import Feature from '@site/static/usage/v9/button/feature/index.md';
+import Feature from '@site/static/usage/v9/button/feature/index.mdx';
 
 <Feature />
 ```
@@ -10,72 +10,72 @@ by [`rdlabo`](https://twitter.com/rdlabo)
 
 Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks.
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by [Paul Halliday](https://developer.school)
 
 ### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf)
 
 As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required.
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by [Joshua Morony](https://www.joshmorony.com/blog)
 
 ### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Chris Griffith
 
 ### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by [Joshua Morony](https://www.joshmorony.com/blog)
 
 Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning the latest and greatest version of Ionic. It is targeted at beginners and works its way through the basics of Ionic, to example applications of varying complexity, and then to the steps required to build and publish your application (on the app stores or as a PWA). It has been updated for every major release, so you can rest easy knowing that you're not learning outdated tech.
 
 ### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Simon Reimler
 
 ### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Sani Yusuf
 
 ### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Jorge Vergara
 
 This book will help you go from not knowing what Firebase is to be able to use the different APIs for your Ionic Applications. It will take you from “_What’s Firebase?_” to building scalable, production-ready apps and it’s always up-to-date with latest Ionic and Firebase versions.
 
 ### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Hoc Phan
 
 ### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by James Griffiths
 
 ### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Arvind Ravulavaru
 
 ### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3)
 
-<!-- cspell:disable-next-line -->
+{/* cspell:disable-next-line */}
 
 by Arvind Ravulavaru
@@ -548,18 +548,18 @@ Ionic 9 は Capacitor 7 以降を公式にサポートします。ネイティ
 
 ### Input
 
-#### `autocorrect` プロパティの型が Boolean に変更 {#input-autocorrect-property-type-changed-to-boolean}
+#### `autocorrect` プロパティの型が Boolean に変更 {/* #input-autocorrect-property-type-changed-to-boolean */}
 
 `ion-input` の `autocorrect` プロパティは、`'on' | 'off'` ではなく `boolean`（デフォルト `false`）になりました。属性は文字列 `"false"` 以外の任意の値で `true` に強制されるため、`autocorrect="off"` はオートコレクトを有効にします。
 
 - オートコレクトを無効のままにする（デフォルト）には、属性を削除してください。
 - 有効にするにはプロパティバインディングを使用してください: `[autocorrect]="true"`（Angular）、`autocorrect={true}`（React）、または `:autocorrect="true"`（Vue）。
 
-#### フローティングラベルの動作 {#input-floating-label-behavior}
+#### フローティングラベルの動作 {/* #input-floating-label-behavior */}
 
 フローティングラベルは、入力にスロット付きコンテンツが含まれていても自動ではフロートしなくなりました。ラベルは、入力にフォーカスがあるとき、または値があるときにのみフロートします。
 
-#### 内部 DOM 構造の変更 {#input-internal-dom-structure-changes}
+#### 内部 DOM 構造の変更 {/* #input-internal-dom-structure-changes */}
 
 内部 DOM 構造は、スロット付きコンテンツ付きのフローティングラベルをサポートするために再編成されました。
 
@@ -676,7 +676,7 @@ React と Vue では、`swipeBackEnabled` 設定オプションはアウトレ
 
 ### Searchbar
 
-#### `autocorrect` プロパティの型が Boolean に変更 {#searchbar-autocorrect-property-type-changed-to-boolean}
+#### `autocorrect` プロパティの型が Boolean に変更 {/* #searchbar-autocorrect-property-type-changed-to-boolean */}
 
 `ion-searchbar` の `autocorrect` プロパティは、`'on' | 'off'` ではなく `boolean`（デフォルト `false`）になりました。属性は文字列 `"false"` 以外の任意の値で `true` に強制されるため、`autocorrect="off"` はオートコレクトを有効にします。
 
@@ -697,11 +697,11 @@ React と Vue では、`swipeBackEnabled` 設定オプションはアウトレ
 
 以前は、`selected` ロールはセレクトの現在値に一致するオプションにだけ割り当てられていました。dismiss ロールはタップしたボタンを反映するため、これは次の 1 ケースでのみ表面化していました。すでに選択済みのオプションを再選択すると、アクションシートは `ionActionSheetDidDismiss` で `role: "selected"` として閉じました。他のオプションをタップすると値が変わり、`role: ""` で閉じました。ロールが割り当てられなくなったため、どちらのケースも `role: undefined` で閉じます。値が選ばれたことを検出するためにこのロールを調べていたアプリ（たとえば、基になるアクションシートの `onDidDismiss` 結果から `role` を読む場合）は、代わりに `ion-select` の `ionChange` イベントをリッスンしてください。選択が変わると選択値が発行されます。
 
-#### フローティングラベルの動作 {#select-floating-label-behavior}
+#### フローティングラベルの動作 {/* #select-floating-label-behavior */}
 
 フローティングラベルは、セレクトにスロット付きコンテンツが含まれていても自動ではフロートしなくなりました。ラベルは、セレクトにフォーカスがあるとき、または値があるときにのみフロートします。さらに、フローティングラベル使用時は、セレクトにフォーカスがあるときだけプレースホルダーが表示されます。
 
-#### 内部 DOM 構造の変更 {#select-internal-dom-structure-changes}
+#### 内部 DOM 構造の変更 {/* #select-internal-dom-structure-changes */}
 
 内部 DOM 構造は、スロット付きコンテンツ付きのフローティングラベルをサポートするために再編成されました。これにより、公開されているいくつかの shadow part の構造と位置が変わります。
 
@@ -735,11 +735,11 @@ React と Vue では、`swipeBackEnabled` 設定オプションはアウトレ
 
 ### Textarea
 
-#### フローティングラベルの動作 {#textarea-floating-label-behavior}
+#### フローティングラベルの動作 {/* #textarea-floating-label-behavior */}
 
 フローティングラベルは、テキストエリアにスロット付きコンテンツが含まれていても自動ではフロートしなくなりました。ラベルは、テキストエリアにフォーカスがあるとき、または値があるときにのみフロートします。
 
-#### 内部 DOM 構造の変更 {#textarea-internal-dom-structure-changes}
+#### 内部 DOM 構造の変更 {/* #textarea-internal-dom-structure-changes */}
 
 内部 DOM 構造は、スロット付きコンテンツ付きのフローティングラベルをサポートするために再編成されました。
 

@@ -97,21 +97,6 @@ module.exports = function (context, options) {
           createData(`${basePath}/custom-props.mdx`, data.customProps),
           createData(`${basePath}/slots.mdx`, data.slots)
         );
-
-        /**
-         * TODO(FW-6456): Remove once every page on this branch imports the `.mdx` names.
-         *
-         * Transitional: this branch's `docs/` pages and its `versioned_docs` copies still
-         * import the `.md` names. Those are rewritten separately, so the old names have to
-         * keep being emitted until they are.
-         */
-        promises.push(
-          createData(`${basePath}/props.md`, data.props),
-          createData(`${basePath}/events.md`, data.events),
-          createData(`${basePath}/methods.md`, data.methods),
-          createData(`${basePath}/parts.md`, data.parts),
-          createData(`${basePath}/slots.md`, data.slots)
-        );
       }
 
       await Promise.all(promises);
@@ -127,17 +112,6 @@ module.exports = function (context, options) {
           alias: {
             '@ionic-internal/component-api': `${context.siteDir}/.docusaurus/docusaurus-plugin-ionic-component-api/default`,
           },
-          /**
-           * TODO(FW-6456): Remove once every page on this branch imports the `.mdx` names.
-           *
-           * Lets a `.md` import resolve to a `.mdx` file, so pages can be moved over in
-           * batches rather than all at once. Matches the entry on `main`.
-           *
-           * Applies to every `.md` import, so a stale `.mdx` next to a `.md` will shadow it.
-           */
-          extensionAlias: {
-            '.md': ['.mdx', '.md'],
-          },
         },
       };
     },
@@ -248,7 +222,7 @@ ${properties
     }
 
     return `
-### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} {#${propertyHeadingId(prop.name)}}
+### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} {/* #${propertyHeadingId(prop.name)} */}
 
 | | |
 | --- | --- |
@@ -310,7 +284,7 @@ function renderMethods({ methods }) {
 ${methods
   .map(
     (method) => `
-### ${method.name} {#${methodHeadingId(method.name)}}
+### ${method.name} {/* #${methodHeadingId(method.name)} */}
 
 | | |
 | --- | --- |

@@ -50,7 +50,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
 
@@ -60,7 +60,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.

@@ -26,20 +26,6 @@ An item is considered "clickable" if it has an `href` or `button` property set.
 
 By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
 
-<!--
-
-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](../theming/css-variables.mdx) for more information.
-
--->
-
 ## Item Placement
 
 Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements.

@@ -32,8 +32,6 @@ Be sure to run `ionic <command> --help` in your project directory.
 For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular.
 :::
 
-<!-- TODO: image? -->
-
 ## Architecture
 
 The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">GitHub repository</a>.

@@ -42,7 +42,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <!-- prettier-ignore -->
+  {/* prettier-ignore */}
   <p>Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.</p>
 </DocsCard>
 

@@ -4,8 +4,6 @@ sidebar_label: What are PWAs?
 
 # Progressive Web Apps
 
-<!-- TOC goes here -->
-
 ### The web...but better
 
 A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users.
@@ -40,15 +38,15 @@ To be considered a Progressive Web App, your app must be:
 
 - Linkable - Easily share via URL and not require complex installation.
 
-<!-- cspell:disable -->
+{/* cspell:disable */}
 
 <em>
   <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
     Addy Osmani: Progressive web apps
   </a>
 </em>
 
-<!-- cspell:enable -->
+{/* cspell:enable */}
 
 There is a lot here, but it boils down to a few points for Ionic apps.