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.
 

docs/techniques/security.md

@@ -1,6 +1,5 @@
 ---
 title: Security
-disableHtmlPreviews: true
 ---
 
 <head>

docs/theming/advanced.md

@@ -1,8 +1,6 @@
 ---
 title: Advanced Theming
 sidebar_label: Advanced
-initialTab: 'preview'
-inlineHtmlPreviews: true
 ---
 
 import CodeColor from '@components/page/theming/CodeColor';

docs/theming/colors.md

@@ -1,7 +1,5 @@
 ---
 title: Colors
-initialTab: 'preview'
-inlineHtmlPreviews: true
 ---
 
 import LayeredColorsSelect from '@components/page/theming/LayeredColorsSelect';

docs/theming/css-variables.md

@@ -18,7 +18,7 @@ Ionic components are built with <a href="https://developer.mozilla.org/en-US/doc
 
 CSS variables can be set globally in an application in the `:root` selector. They can also be applied only for a specific mode. See [Ionic Variables](#ionic-variables) for more information on the global variables Ionic provides.
 
-When using the Ionic CLI to start an Angular project, the `src/theme/variables.scss` file is created where you can override the default Ionic Variables.
+When using the Ionic CLI to start an Angular, React or Vue project, the `src/theme/variables.scss` file is created where you can override the default Ionic Variables.
 
 ```css
 /* Set variables for all modes */

docs/theming/dark-mode.md

@@ -1,7 +1,5 @@
 ---
 title: Dark Mode
-initialTab: 'preview'
-inlineHtmlPreviews: true
 ---
 
 import Tabs from '@theme/Tabs';

docs/troubleshooting/build.md

@@ -1,5 +1,4 @@
 ---
-disableHtmlPreviews: true
 title: Build Errors
 ---
 

docs/vue/quickstart.md

@@ -282,12 +282,11 @@ For brevity, we are excluding repeating parts of our component, like the functio
     <ion-content>
       <ion-list>
         <ion-item>
-          <ion-checkbox slot="start"></ion-checkbox>
-          <ion-label>
+          <ion-checkbox label-placement="end" justify="start">
             <h1>Create Idea</h1>
             <ion-note>Run Idea By Brandy</ion-note>
-          </ion-label>
-          <ion-badge color="success" slot="end"> 5 Days </ion-badge>
+          </ion-checkbox>
+          <ion-badge color="success" slot="end">5 Days</ion-badge>
         </ion-item>
       </ion-list>
     </ion-content>
@@ -301,7 +300,6 @@ For brevity, we are excluding repeating parts of our component, like the functio
     IonContent,
     IonHeader,
     IonItem,
-    IonLabel,
     IonList,
     IonNote,
     IonPage,
@@ -315,16 +313,15 @@ Here in our `IonContent`, we are adding an `IonList` and a much more involved `I
 
 ```html
 <ion-item>
-  <ion-checkbox slot="start"></ion-checkbox>
-  <ion-label>
+  <ion-checkbox label-placement="end" justify="start">
     <h1>Create Idea</h1>
     <ion-note>Run Idea By Brandy</ion-note>
-  </ion-label>
-  <ion-badge color="success" slot="end"> 5 Days </ion-badge>
+  </ion-checkbox>
+  <ion-badge color="success" slot="end">5 Days</ion-badge>
 </ion-item>
 ```
 
-Looking at our code, 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 Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2.
+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 Vue API, but a web standards API, and it is used across many Ionic Framework components. Additionally, this is different from the slots API you may recall from Vue 2. (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 Framework, 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 will need three components: a FAB, a FAB Button, and an Icon.
 
@@ -353,7 +350,6 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonNote,
     IonPage,

package.json

@@ -15,11 +15,11 @@
     "deploy": "docusaurus deploy",
     "docusaurus": "docusaurus",
     "generate-markdown": "node scripts/native.mjs && concurrently \"node scripts/cli.mjs\" \"node scripts/release-notes.mjs\"",
-    "lint": "npm run prettier -- --write --cache",
+    "lint": "npm run prettier -- --write",
     "serve": "docusaurus serve",
     "playground:new": "hygen playground new",
     "prestart": "npm run generate-markdown",
-    "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\"",
+    "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\" --cache",
     "start": "docusaurus start",
     "swizzle": "docusaurus swizzle",
     "spellcheck": "cspell --no-progress \"**/*.md\""

scripts/release-notes.mjs

@@ -43,7 +43,7 @@ const getReleases = async () => {
           return releasePattern.test(release.tag_name);
         })
         .map((release) => {
-          const body = renderMarkdown(release.body.replace(/^#.*/, '')).contents;
+          const body = renderMarkdown(release.body.replace(/^#.*/, '')).value;
           const published_at = parseDate(release.published_at);
           const version = release.tag_name.replace('v', '');
           const type = getVersionType(version);

static/code/stackblitz/v6/angular/package.json

@@ -2,6 +2,6 @@
   "dependencies": {
     "@ionic/angular": "^6.0.0",
     "@ionic/core": "^6.0.0",
-    "@angular/platform-browser-dynamic": "17.0.8"
+    "@angular/platform-browser-dynamic": "17.1.1"
   }
 }