ionic-team · thetaPC · Sep 8, 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,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.mdx](../docs/api/button.mdx)) by doing something similar to the following example:
 
 ```
 ## Feature

@@ -558,18 +558,18 @@ The native `<img>` element does not emit Ionic's custom events. Use the standard
 
 ### Input
 
-#### `autocorrect` Property Type Changed to Boolean {#input-autocorrect-property-type-changed-to-boolean}
+#### `autocorrect` Property Type Changed to Boolean {/* #input-autocorrect-property-type-changed-to-boolean */}
 
 The `autocorrect` property on `ion-input` is now a `boolean` (default `false`) instead of `'on' | 'off'`. Because the attribute coerces to `true` for any value other than the string `"false"`, `autocorrect="off"` now enables autocorrect.
 
 - Remove the attribute to keep autocorrect disabled (the default).
 - Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue).
 
-#### Floating Label Behavior {#input-floating-label-behavior}
+#### Floating Label Behavior {/* #input-floating-label-behavior */}
 
 Floating labels no longer automatically float when the input contains slotted content. Labels float only when the input is focused or has a value.
 
-#### Internal DOM Structure Changes {#input-internal-dom-structure-changes}
+#### Internal DOM Structure Changes {/* #input-internal-dom-structure-changes */}
 
 The internal DOM structure has been reorganized to support floating labels with slotted content.
 
@@ -686,7 +686,7 @@ The `swipeBackEnabled` config option is still respected as the initial default a
 
 ### Searchbar
 
-#### `autocorrect` Property Type Changed to Boolean {#searchbar-autocorrect-property-type-changed-to-boolean}
+#### `autocorrect` Property Type Changed to Boolean {/* #searchbar-autocorrect-property-type-changed-to-boolean */}
 
 The `autocorrect` property on `ion-searchbar` is now a `boolean` (default `false`) instead of `'on' | 'off'`. Because the attribute coerces to `true` for any value other than the string `"false"`, `autocorrect="off"` now enables autocorrect.
 
@@ -707,11 +707,11 @@ When using `interface="action-sheet"`, `ion-select` no longer assigns the `selec
 
 Previously, the `selected` role was assigned only to the option matching the select's current value. Because the dismiss role mirrors the tapped button, this surfaced in just one case: re-selecting the already-selected option dismissed the action sheet with `role: "selected"` in `ionActionSheetDidDismiss`. Tapping any other option changed the value and dismissed with `role: ""`. Now that the role is no longer assigned, both cases dismiss with `role: undefined`. Apps that inspected this role to detect that a value was chosen, such as reading `role` from the underlying action sheet's `onDidDismiss` result, should listen for `ion-select`'s `ionChange` event instead, which emits the selected value when the selection changes.
 
-#### Floating Label Behavior {#select-floating-label-behavior}
+#### Floating Label Behavior {/* #select-floating-label-behavior */}
 
 Floating labels no longer automatically float when the select contains slotted content. Labels float only when the select is focused or has a value. Additionally, when using a floating label, the placeholder is only visible when the select is focused.
 
-#### Internal DOM Structure Changes {#select-internal-dom-structure-changes}
+#### Internal DOM Structure Changes {/* #select-internal-dom-structure-changes */}
 
 The internal DOM structure has been reorganized to support floating labels with slotted content. This changes the structure and location of several exposed shadow parts.
 
@@ -745,11 +745,11 @@ Use the new `part="start"`, `part="control"`, and `part="end"` parts to target t
 
 ### Textarea
 
-#### Floating Label Behavior {#textarea-floating-label-behavior}
+#### Floating Label Behavior {/* #textarea-floating-label-behavior */}
 
 Floating labels no longer automatically float when the textarea contains slotted content. Labels float only when the textarea is focused or has a value.
 
-#### Internal DOM Structure Changes {#textarea-internal-dom-structure-changes}
+#### Internal DOM Structure Changes {/* #textarea-internal-dom-structure-changes */}
 
 The internal DOM structure has been reorganized to support floating labels with slotted content.
 

@@ -86,32 +86,6 @@ module.exports = function (context, options) {
           createData(`${basePath}/custom-props.mdx`, data.customProps),
           createData(`${basePath}/slots.mdx`, data.slots)
         );
-
-        /**
-         * TODO(FW-6456): Remove once all branches import the `.mdx` names instead of `.md`.
-         * Transitional: the `.md` names are still imported by pages this repo does not
-         * control on every branch at once.
-         *
-         * - `scripts/i18n.sh` copies the `translation/jp` branch's `docs/` tree into
-         *   `i18n/ja` on every build, and those copies still import `.md`.
-         * - Major branches keep their own api pages. Until each is rewritten, a sync that
-         *   brings this plugin over would otherwise leave them importing names it no longer
-         *   emits.
-         *
-         * Emitted unconditionally on purpose. Guarding on locale only holds on a branch whose
-         * pages have already been rewritten, so it reintroduces exactly the coupling this
-         * avoids. These land in `.docusaurus`, not a docs content root, so they are never
-         * routed as pages and the duplicate basenames cannot collide.
-         *
-         * Remove once `translation/jp` and every live branch import the `.mdx` names.
-         */
-        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,21 +101,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 branch imports the `.mdx` names.
-           *
-           * Lets a `.md` import resolve to a `.mdx` file. The Japanese site is
-           * built from this branch's tree combined with prose pulled from
-           * `translation/jp`, so a rename here breaks those imports until that
-           * branch catches up. This has to merge first, and the translation
-           * branch can then follow at any interval.
-           *
-           * Applies to every `.md` import in the repo, so a stale `.mdx` next
-           * to a `.md` will shadow it.
-           */
-          extensionAlias: {
-            '.md': ['.mdx', '.md'],
-          },
         },
       };
     },

@@ -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.
 

@@ -4,72 +4,72 @@
 
 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