chore(docs): pad admonitions with blank lines

docs/angular/build-options.md

@@ -10,7 +10,9 @@ The Standalone approach uses modern Angular APIs and is the recommended way to b
 ## Standalone
 
 :::info
+
 Ionic UI components as Angular standalone components is supported starting in Ionic v7.5.
+
 :::
 
 ### Overview
@@ -30,13 +32,17 @@ Refer to the [Standalone Migration Guide](#migrating-from-modules-to-standalone)
 1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up.
 
 :::info[Code splitting]
+
 Ionic ships standalone components from a single entry point (`@ionic/angular`). Bundlers such as Webpack and esbuild cannot split code from a single entry point across separate chunks, so the Ionic components you import are included in the main bundle rather than in the chunk for the route or component where they are used. Unused components are still tree-shaken out of the build.
+
 :::
 
 ### Usage with Standalone-based Applications
 
 :::warning
+
 All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+
 :::
 
 **Bootstrapping and Configuration**
@@ -203,7 +209,9 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 ### Usage with NgModule-based Applications
 
 :::warning
+
 All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+
 :::
 
 **Bootstrapping and Configuration**
@@ -366,7 +374,9 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 ## Modules
 
 :::warning[Deprecation Notice]
+
 The Modules approach, including `IonicModule`, is **deprecated** and will be removed in a future major release. Existing applications will continue to work during the deprecation period but should migrate using the [Standalone migration guide](#migrating-from-modules-to-standalone). New applications should use the [Standalone](#standalone) approach.
+
 :::
 
 ### Overview
@@ -405,9 +415,11 @@ export class AppModule {}
 ## Migrating from Modules to Standalone
 
 :::tip
+
 Try our automated utility for migrating to standalone!
 
 Refer to the [standalone migration codemods](https://github.com/ionic-team/ionic-angular-standalone-codemods) for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo.
+
 :::
 
 The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate.

docs/angular/lifecycle.md

@@ -27,7 +27,9 @@ Ionic embraces the life cycle events provided by Angular. The two Angular events
 For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks).
 
 :::note
+
 Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly.
+
 :::
 
 ## Ionic Page Events

docs/angular/navigation.md

@@ -168,7 +168,9 @@ import { LoginComponent } from './login.component';
 ```
 
 :::note
+
 We're excluding some additional content and only including the necessary parts.
+
 :::
 
 Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component.
@@ -194,7 +196,9 @@ 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).
+
 :::
 
 To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components).

docs/angular/performance.md

@@ -69,5 +69,7 @@ For more information, refer to the [Angular NgForOf change propagation documenta
 {/* cspell:enable */}
 
 :::note
+
 Do you have a guide you'd like to share? Click the _Edit this page_ button below.
+
 :::

docs/angular/pwa.md

@@ -25,11 +25,15 @@ ng add @angular/pwa
 Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA.
 
 :::note
+
 By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+
 :::
 
 :::note
+
 Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+
 :::
 
 ## Service Worker configuration
@@ -77,7 +81,9 @@ npm install -g firebase-tools
 ```
 
 :::note
+
 If it's the first time you use firebase-tools, login to your Google account with `firebase login` command.
+
 :::
 
 With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
@@ -91,7 +97,9 @@ Create a new Firebase project or select an existing one.
 **"What do you want to use as your public directory?"** Enter "www".
 
 :::note
+
 Answering this next question will ensure that routing, hard reload, and deep linking work in the app:
+
 :::
 
 **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".

docs/angular/quickstart.md

@@ -72,7 +72,9 @@ Your new app's directory will look like this:
 ```
 
 :::info
+
 All file paths in the examples below are relative to the project root directory.
+
 :::
 
 Let's walk through these files to understand the app's structure.
@@ -175,7 +177,9 @@ 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]
+
 For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+
 :::
 
 ## Add an Ionic Component
@@ -257,7 +261,9 @@ import { RouterLink } from '@angular/router';
 ```
 
 :::info
+
 Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information.
+
 :::
 
 ## Add Icons to the New Page

docs/angular/slides.md

@@ -14,7 +14,9 @@ import TabItem from '@theme/TabItem';
 </head>
 
 :::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.
+
 :::
 
 We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. Swiper 9 introduced [Swiper Element](https://swiperjs.com/element) as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
@@ -191,7 +193,9 @@ export class HomePage {
 ```
 
 :::note
+
 If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+
 :::
 
 ## Properties
@@ -227,7 +231,9 @@ Below is a full list of property changes when going from `ion-slides` to Swiper
 | pager   | Use the `pagination` property instead.                                                                                                  |
 
 :::note
+
 All properties available in Swiper Element can be found in the [Swiper API parameters documentation](https://swiperjs.com/swiper-api#parameters).
+
 :::
 
 ## Events
@@ -276,7 +282,9 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe
 | `ionSlidesDidLoad`        | `swiperinit`                       |
 
 :::note
+
 All events available in Swiper Element can be found in the [Swiper API events documentation](https://swiperjs.com/swiper-api#events) and should be lowercased and prefixed with the word `swiper`.
+
 :::
 
 ## Methods
@@ -328,7 +336,9 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El
 | `stopAutoplay()`     | Use the `autoplay` property instead.                                                 |
 
 :::note
+
 All methods and properties available on the Swiper instance can be found in the [Swiper API methods and properties documentation](https://swiperjs.com/swiper-api#methods-and-properties).
+
 :::
 
 ## Effects
@@ -340,7 +350,9 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im
 ```
 
 :::note
+
 For more information on effects in Swiper, please refer to the [Swiper API fade effect documentation](https://swiperjs.com/swiper-api#fade-effect).
+
 :::
 
 ## Wrap Up

docs/angular/storage.md

@@ -14,7 +14,9 @@ sidebar_label: Storage
 There are a variety of options available for storing data within an Ionic application. It is best to choose options that best fit the needs of your application. A single application may have requirements that span multiple options.
 
 :::info
+
 Some storage options involve third-party plugins or products. In such cases, we neither endorse nor support those plugins or products. We are mentioning them here for informational purposes only.
+
 :::
 
 Here are some common use cases and solutions:

docs/angular/your-first-app.md

@@ -25,7 +25,9 @@ Here’s the finished app running on all 3 platforms:
 ></iframe>
 
 :::note
+
 Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md).
+
 :::
 
 ## What We'll Build
@@ -55,17 +57,21 @@ Download and install these right away to ensure an optimal Ionic development exp
 Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
 
 :::note
+
 To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+
 :::
 
 ```shell
 npm install -g @ionic/cli native-run cordova-res
 ```
 
 :::note
+
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
 Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+
 :::
 
 ## Create an App

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

@@ -105,7 +105,9 @@ export class Tab2Page {
 ```
 
 :::note
+
 In a standalone app there is no global icon registry, so each icon you reference by name (like `camera`) must be registered with `addIcons`. Import the specific Ionic components a page uses from `@ionic/angular` and list them in the component's `imports` array.
+
 :::
 
 Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the FAB is tapped/clicked:

docs/angular/your-first-app/4-loading-photos.md

@@ -265,9 +265,11 @@ export class Tab2Page implements OnInit {
 ```
 
 :::note
+
 If you encounter broken image links or missing photos after following these steps, you may need to open your browser's dev tools and clear both [localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) and [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb).
 
 In localStorage, look for domain `http://localhost:8100` and key `CapacitorStorage.photos`. In IndexedDB, find a store called "FileStorage". Your photos will have a key like `/DATA/123456789012.jpeg`.
+
 :::
 
 That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android!

docs/angular/your-first-app/6-deploying-mobile.md

@@ -47,7 +47,9 @@ ionic cap sync
 ## iOS Deployment
 
 :::important
+
 To build an iOS app, you’ll need a Mac computer.
+
 :::
 
 Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete.

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

@@ -217,7 +217,9 @@ button img {
 Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪
 
 :::note
+
 Remember, you can find the [complete source code for this app](https://github.com/ionic-team/tutorial-photo-gallery-angular) on GitHub.
+
 :::
 
 In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.

docs/angular/zoneless.md

@@ -27,7 +27,9 @@ You do not need to change these. Angular schedules change detection for them in
 - Navigation, route transitions, and tab switching.
 
 :::note[Angular 22]
+
 Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#onpush-change-detection-on-angular-22).
+
 :::
 
 ## What needs a notification

docs/api/accordion.md

@@ -40,9 +40,11 @@ import Toggle from '@site/static/usage/v9/accordion/toggle/index.mdx';
 ## Listen for Accordion State Changes
 
 :::caution
+
 Most `ionChange` events emitted by other components such as [Input](./input) and [Textarea](./textarea) bubble. As a result, these events will bubble up and cause your `ionChange` listener on the Accordion Group to fire if the associated components are used inside of an Accordion.
 
 When using other components that emit `ionChange` inside of Accordion it is recommended to have the `ionChange` callback on Accordion Group check the `target` key on the event passed to the callback to verify that `ionChange` is coming from the Accordion Group and not any descendants.
+
 :::
 
 Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.

docs/api/alert.md

@@ -109,7 +109,9 @@ import Customization from '@site/static/usage/v9/alert/customization/index.mdx';
 <Customization />
 
 :::note
+
 If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+
 :::
 
 ## Accessibility

docs/api/badge.md

@@ -34,7 +34,9 @@ import Basic from '@site/static/usage/v9/badge/basic/index.mdx';
 Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.
 
 :::info
+
 Empty badges are only available for `md` mode.
+
 :::
 
 import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.mdx';

docs/api/button.md

@@ -92,7 +92,9 @@ There are many cases where a button's text content may overflow the container. I
 The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release.
 
 :::info
+
 The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width.
+
 :::
 
 import TextWrapping from '@site/static/usage/v9/button/text-wrapping/index.mdx';

docs/api/checkbox.md

@@ -42,7 +42,9 @@ import LabelPlacement from '@site/static/usage/v9/checkbox/label-placement/index
 Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
 
 :::note
+
 Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+
 :::
 
 import Alignment from '@site/static/usage/v9/checkbox/alignment/index.mdx';
@@ -58,7 +60,9 @@ import Justify from '@site/static/usage/v9/checkbox/justify/index.mdx';
 <Justify />
 
 :::note
+
 `ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
+
 :::
 
 ## Indeterminate Checkboxes