chore(docs): migrate admonition titles and heading IDs to MDX syntax

docs/angular/quickstart.md

@@ -174,7 +174,7 @@ And the template, in the `home.page.html` file, uses those components:
 
 This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
-:::tip Learn More
+:::tip[Learn More]
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 

docs/angular/slides.md

@@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-:::warning Looking for `ion-slides`?
+:::warning[Looking for `ion-slides`?]
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

docs/angular/virtual-scroll.md

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::warning Looking for `ion-virtual-scroll`?
+:::warning[Looking for `ion-virtual-scroll`?]
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
 

docs/api/picker-legacy.md

@@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="scoped" />
 
-:::warning Deprecation Notice
+:::warning[Deprecation Notice]
 
 `ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.md) as soon as possible.
 

docs/api/tabs.md

@@ -42,7 +42,7 @@ import Router from '@site/static/usage/v8/tabs/router/index.md';
 
 <Router />
 
-:::tip Best Practices
+:::tip[Best Practices]
 
 Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
 

docs/developing/android.md

@@ -14,7 +14,7 @@ sidebar_label: Developing for Android
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-:::info Looking for the legacy Android guide?
+:::info[Looking for the legacy Android guide?]
 
 The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android).
 

docs/developing/ios.md

@@ -15,7 +15,7 @@ skipIntros: true
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-:::info Looking for the legacy iOS guide?
+:::info[Looking for the legacy iOS guide?]
 
 The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios).
 

docs/javascript/quickstart.md

@@ -67,7 +67,7 @@ Your new app's directory will look like this:
     └── style.css
 ```
 
-:::warning Delete files
+:::warning[Delete files]
 The `counter.js` and `style.css` files can be deleted. We will not be using them.
 :::
 
@@ -226,7 +226,7 @@ customElements.define('home-page', HomePage);
 
 This creates a custom element called `home-page` that contains the layout for your Home page. The page uses Ionic's layout components to create a header with a toolbar and scrollable content area.
 
-:::tip Learn More
+:::tip[Learn More]
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 

docs/layout/css-utilities.md

@@ -224,7 +224,7 @@ The table below shows the default behavior, where `{modifier}` is any of the fol
 
 ### Deprecated Classes
 
-:::warning Deprecation Notice
+:::warning[Deprecation Notice]
 
 The following classes are deprecated and will be removed in the next major release. Use the recommended `.ion-display-*` classes instead.
 
@@ -443,7 +443,7 @@ The table below shows the default behavior, where `{property}` is one of the fol
 
 ### Deprecated Classes
 
-:::warning Deprecation Notice
+:::warning[Deprecation Notice]
 
 The following classes are deprecated and will be removed in the next major release. Use the recommended `.ion-flex-*` classes instead.
 

docs/react/quickstart.md

@@ -158,7 +158,7 @@ export default Home;
 
 This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
-:::tip Learn More
+:::tip[Learn More]
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 

docs/react/slides.md

@@ -10,7 +10,7 @@ title: Migrating From IonSlides to Swiper.js
   />
 </head>
 
-:::warning Looking for `IonSlides`?
+:::warning[Looking for `IonSlides`?]
 
 `IonSlides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 

docs/react/virtual-scroll.md

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::warning Looking for `ion-virtual-scroll`?
+:::warning[Looking for `ion-virtual-scroll`?]
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.
 

docs/theming/dark-mode.md

@@ -64,7 +64,7 @@ import AlwaysDarkMode from '@site/static/usage/v8/theming/always-dark-mode/index
 
 <AlwaysDarkMode />
 
-:::caution Important
+:::caution[Important]
 Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark palette, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element.
 :::
 
@@ -117,7 +117,7 @@ import SystemDarkMode from '@site/static/usage/v8/theming/system-dark-mode/index
 
 <SystemDarkMode />
 
-:::caution Important
+:::caution[Important]
 Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark palette, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element.
 :::
 
@@ -170,7 +170,7 @@ import ClassDarkMode from '@site/static/usage/v8/theming/class-dark-mode/index.m
 
 <ClassDarkMode />
 
-:::caution Important
+:::caution[Important]
 The `.ion-palette-dark` class **must** be added to the `html` element in order to work with the imported dark palette.
 :::
 

docs/troubleshooting/runtime.md

@@ -138,9 +138,8 @@ This change will only affect applications that depend on zone.js `0.8.27` or
 newer. Older versions will not be affected by this change.
 
 :::note
-This flag is automatically included when creating an Ionic app via
+This flag is automatically included when creating an Ionic app via the Ionic CLI.
 :::
-the Ionic CLI.
 
 ## Cordova plugins not working in the browser
 
@@ -210,7 +209,7 @@ class MyApp {
 
 <!-- This is referenced in Ionic Framework component documentation so we explicitly define the anchor so it remains consistent. -->
 
-## Accessing `this` in a function callback returns `undefined` {#accessing-this}
+## Accessing `this` in a function callback returns `undefined` {/* #accessing-this */}
 
 Certain components, such as [counterFormatter on ion-input](../api/input#counterformatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`:
 

docs/updating/4-0.md

@@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
 This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository.
 :::
 

docs/updating/5-0.md

@@ -10,7 +10,7 @@ Migrating an app from Ionic 4 to 5 requires a few updates to the API properties,
 This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository.
 :::
 

docs/updating/6-0.md

@@ -8,7 +8,7 @@ title: Updating to v6
 This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v6.md) in the Ionic Framework repository.
 :::
 

docs/updating/7-0.md

@@ -8,7 +8,7 @@ title: Updating to v7
 This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) in the Ionic Framework repository.
 :::
 

docs/updating/8-0.md

@@ -8,7 +8,7 @@ title: Updating to v8
 This guide assumes that you have already updated your app to the latest version of Ionic 7. Make sure you have followed the [Upgrading to Ionic 7 Guide](./7-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 7 to Ionic 8, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-8x) in the Ionic Framework repository.
 :::
 

docs/vue/quickstart.md

@@ -162,7 +162,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 
 This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
-:::tip Learn More
+:::tip[Learn More]
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 

docs/vue/slides.md

@@ -10,7 +10,7 @@ title: Migrating From ion-slides to Swiper.js
   />
 </head>
 
-:::warning Looking for `ion-slides`?
+:::warning[Looking for `ion-slides`?]
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

docs/vue/virtual-scroll.md

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::warning Looking for `ion-virtual-scroll`?
+:::warning[Looking for `ion-virtual-scroll`?]
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below.
 

versioned_docs/version-v7/angular/navigation.md

@@ -175,7 +175,7 @@ Here, we have a typical Angular Module setup, along with a RouterModule import,
 
 ## Standalone Components
 
-:::caution Experimental API
+:::caution[Experimental API]
 
 Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
 

versioned_docs/version-v7/angular/quickstart.md

@@ -174,7 +174,7 @@ And the template, in the `home.page.html` file, uses those components:
 
 This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
-:::tip Learn More
+:::tip[Learn More]
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 

versioned_docs/version-v7/angular/slides.md

@@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-:::caution Looking for `ion-slides`?
+:::caution[Looking for `ion-slides`?]
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

versioned_docs/version-v7/angular/virtual-scroll.md

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+:::caution[Looking for `ion-virtual-scroll`?]
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
 

versioned_docs/version-v7/api/tabs.md

@@ -30,7 +30,7 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don
 
 The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component.
 
-:::note Framework Support
+:::note[Framework Support]
 
 Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
 
@@ -44,7 +44,7 @@ import Router from '@site/static/usage/v7/tabs/router/index.md';
 
 <Router />
 
-:::tip Best Practices
+:::tip[Best Practices]
 
 Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
 

versioned_docs/version-v7/developing/android.md

@@ -14,7 +14,7 @@ sidebar_label: Developing for Android
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-:::info Looking for the legacy Android guide?
+:::info[Looking for the legacy Android guide?]
 
 The Developing for Android guide has officially migrated to the [Capacitor documentation for Android](https://capacitorjs.com/docs/android). If you need to access the legacy documentation, you can find it under the [legacy developing for Android guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android).
 

versioned_docs/version-v7/developing/ios.md

@@ -15,7 +15,7 @@ skipIntros: true
 import DocsCard from '@components/global/DocsCard';
 import DocsCards from '@components/global/DocsCards';
 
-:::info Looking for the legacy iOS guide?
+:::info[Looking for the legacy iOS guide?]
 
 The Developing for iOS guide has officially migrated to the [Capacitor documentation for iOS](https://capacitorjs.com/docs/ios). If you need to access the legacy documentation, you can find it under the [legacy developing for iOS guide](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios).
 

versioned_docs/version-v7/react/quickstart.md

@@ -158,7 +158,7 @@ export default Home;
 
 This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
-:::tip Learn More
+:::tip[Learn More]
 For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
 :::
 

versioned_docs/version-v7/react/slides.md

@@ -10,7 +10,7 @@ title: Migrating From IonSlides to Swiper.js
   />
 </head>
 
-:::caution Looking for `IonSlides`?
+:::caution[Looking for `IonSlides`?]
 
 `IonSlides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 

versioned_docs/version-v7/react/virtual-scroll.md

@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+:::caution[Looking for `ion-virtual-scroll`?]
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.
 

versioned_docs/version-v7/troubleshooting/runtime.md

@@ -138,9 +138,8 @@ This change will only affect applications that depend on zone.js `0.8.27` or
 newer. Older versions will not be affected by this change.
 
 :::note
-This flag is automatically included when creating an Ionic app via
+This flag is automatically included when creating an Ionic app via the Ionic CLI.
 :::
-the Ionic CLI.
 
 ## Cordova plugins not working in the browser
 
@@ -210,7 +209,7 @@ class MyApp {
 
 <!-- This is referenced in Ionic Framework component documentation so we explicitly define the anchor so it remains consistent. -->
 
-## Accessing `this` in a function callback returns `undefined` {#accessing-this}
+## Accessing `this` in a function callback returns `undefined` {/* #accessing-this */}
 
 Certain components, such as [counterFormatter on ion-input](../api/input#counterformatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`:
 

versioned_docs/version-v7/updating/4-0.md

@@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
 This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository.
 :::
 

versioned_docs/version-v7/updating/5-0.md

@@ -10,7 +10,7 @@ Migrating an app from Ionic 4 to 5 requires a few updates to the API properties,
 This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository.
 :::
 

versioned_docs/version-v7/updating/6-0.md

@@ -8,7 +8,7 @@ title: Updating to v6
 This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository.
 :::
 

versioned_docs/version-v7/updating/7-0.md

@@ -8,7 +8,7 @@ title: Updating to v7
 This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide.
 :::
 
-:::info Breaking Changes
+:::info[Breaking Changes]
 For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) in the Ionic Framework repository.
 :::