chore: sync with main

chore: sync with main

Author: liamdebeasi

docs/angular/your-first-app.md

@@ -77,6 +77,12 @@ Next, create an Ionic Angular app that uses the “Tabs” starter template and
 ionic start photo-gallery tabs --type=angular --capacitor
 ```
 
+:::note
+
+When prompted to choose between `NgModules` and `Standalone`, opt for `NgModules` as this tutorial follows the `NgModules` approach.
+
+:::
+
 This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
 
 Next, change into the app folder:

docs/api/infinite-scroll.md

@@ -43,7 +43,7 @@ import CustomContent from '@site/static/usage/v8/infinite-scroll/custom-infinite
 
 ## Usage with Virtual Scroll
 
-Infinite scroll requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+Infinite scroll requires a scroll container. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
 
 ```html
 <ion-content scroll-y="false">
@@ -56,6 +56,12 @@ Infinite scroll requires a scroll container to function. When using a virtual sc
 </ion-content>
 ```
 
+:::note
+
+`virtual-scroll-element` refers to the scroll container responsible for scrolling the content. This may be a component provided directly by the virtual scroll solution you are using.
+
+:::
+
 ## Accessibility
 
 Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.

docs/api/input.md

@@ -170,6 +170,10 @@ import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md'
 
 Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color.
 
+:::note
+The `color` property does *not* change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1).
+:::
+
 import Colors from '@site/static/usage/v8/input/theming/colors/index.md';
 
 <Colors />

docs/api/toast.md

@@ -208,6 +208,10 @@ While this is not a complete list, here are some guidelines to follow when using
 
 * For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
 
+* If adding buttons to a toast, always provide alternative ways of completing the actions associated with each button. This ensures that even if the toast dismisses before a user can read it, they can still complete the actions shown in the toast.
+
+* Avoid showing a toast with buttons from inside another overlay such as a [modal](./modal). Modals and other overlays implement [focus trapping](./modal#focus-trapping) that will prevent screen readers from moving focus to the toast to complete the actions. This may be confusing for users since the toast will still be announced by screen readers. This is true even if alternative ways of completing the actions associated with each button are implemented. Consider creating a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) within the focus-trapped modal instead of using a toast.
+
 ## Interfaces
 
 ### ToastButton

docs/core-concepts/cross-platform.md

@@ -1,5 +1,5 @@
 ---
-disableHtmlPreviews: true
+title: Cross Platform
 ---
 
 # Cross Platform

docs/developing/config.md

@@ -191,6 +191,7 @@ Below are the config options that Ionic uses.
 | `popoverLeave`              | `AnimationBuilder`                                                                | Provides a custom leave animation for all `ion-popover`, overriding the default "animation".                                                                                                                                                                                        |
 | `refreshingIcon`            | `string`                                                                          | Overrides the default icon in all `<ion-refresh-content>` components.                                                                                                                                                                                                               |
 | `refreshingSpinner`         | `SpinnerTypes`                                                                    | Overrides the default spinner type in all `<ion-refresh-content>` components.                                                                                                                                                                                                       |
+| `rippleEffect`              | `boolean`                                                                         | If `true`, Material Design ripple effects will be enabled across the app.                                                                                                                                                                                                           |
 | `sanitizerEnabled`          | `boolean`                                                                         | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.                                                                                                                                                                                 |
 | `spinner`                   | `SpinnerTypes`                                                                    | Overrides the default spinner in all `<ion-spinner>` components.                                                                                                                                                                                                                    |
 | `statusTap`                 | `boolean`                                                                         | If `true`, clicking or tapping the status bar will cause the content to scroll to the top.                                                                                                                                                                                          |

docs/layout/css-utilities.md

@@ -1,7 +1,5 @@
 ---
 title: CSS Utilities
-initialTab: 'preview'
-inlineHtmlPreviews: true
 ---
 
 <head>

docs/layout/global-stylesheets.md

@@ -1,7 +1,5 @@
 ---
 title: Global Stylesheets
-initialTab: 'preview'
-inlineHtmlPreviews: true
 ---
 
 <head>

docs/layout/structure.md

@@ -1,6 +1,5 @@
 ---
 title: Structure
-initialTab: 'preview'
 ---
 
 import DocsCard from '@components/global/DocsCard';

docs/react/quickstart.md

@@ -171,7 +171,7 @@ When creating your own pages, don't forget to have `IonPage` be the root compone
 Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that.
 
 :::note
-For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components.
+For brevity, we're excluding repeating parts of our component, like the function declaration or import statements for other components.
 :::
 
 ```tsx
@@ -180,11 +180,10 @@ For brevity, we're excluding repeating part of our component, like the function
   <IonContent>
     <IonList>
       <IonItem>
-        <IonCheckbox slot="start" />
-        <IonLabel>
+        <IonCheckbox labelPlacement="end" justify="start">
           <h1>Create Idea</h1>
           <IonNote>Run Idea by Brandy</IonNote>
-        </IonLabel>
+        </IonCheckbox>
         <IonBadge color="success" slot="end">
           5 Days
         </IonBadge>
@@ -198,20 +197,17 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io
 
 ```tsx
 <IonItem>
-  <IonCheckbox slot="start" />
-  <IonLabel>
+  <IonCheckbox labelPlacement="end" justify="start">
     <h1>Create Idea</h1>
     <IonNote>Run Idea by Brandy</IonNote>
-  </IonLabel>
+  </IonCheckbox>
   <IonBadge color="success" slot="end">
     5 Days
   </IonBadge>
 </IonItem>
 ```
 
-Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content.
-
-From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API.
+Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API, and it is used in many Ionic Framework components. (For more information on slots, [see the MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).)
 
 Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon.