chore: sync with main

ionic-team · Apr 25, 2024 · f03dd1d · f03dd1d
2 parents 9d20cab + 1e98976
commit f03dd1d
Show file tree

Hide file tree

Showing 467 changed files with 2,242 additions and 1,728 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -12,5 +12,3 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 * @ionic-team/framework
-
-/_templates/ @mapsandapps
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
@@ -244,10 +244,10 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 </ion-slides>
 ```
 
-To migrate, we would change the name of the event to `slidechange`:
+To migrate, we would change the name of the event to `swiperslidechange`:
 
 ```html
-<swiper-container (slidechange)="onSlideChange()">
+<swiper-container (swiperslidechange)="onSlideChange()">
   <swiper-slide>Slide 1</swiper-slide>
   <swiper-slide>Slide 2</swiper-slide>
   <swiper-slide>Slide 3</swiper-slide>
@@ -256,27 +256,27 @@ To migrate, we would change the name of the event to `slidechange`:
 
 Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
 
-| ion-slides Event          | Swiper Event                 |
-| ------------------------- | ---------------------------- |
-| `ionSlideWillChange`      | `slidechangetransitionstart` |
-| `ionSlideDidChange`       | `slidechangetransitionend`   |
-| `ionSlideDoubleTap`       | `doubletap`                  |
-| `ionSlideDrag`            | `slidermove`                 |
-| `ionSlideNextStart`       | `slidenexttransitionstart`   |
-| `ionSlideNextEnd`         | `slidenexttransitionend`     |
-| `ionSlidePrevStart`       | `slideprevtransitionstart`   |
-| `ionSlidePrevEnd`         | `slideprevtransitionend`     |
-| `ionSlideReachStart`      | `reachbeginning`             |
-| `ionSlideReachEnd`        | `reachend`                   |
-| `ionSlideTap`             | `tap`                        |
-| `ionSlideTouchStart`      | `touchstart`                 |
-| `ionSlideTouchEnd`        | `touchend`                   |
-| `ionSlideTransitionStart` | `transitionstart`            |
-| `ionSlideTransitionEnd`   | `transitionend`              |
-| `ionSlidesDidLoad`        | `init`                       |
+| ion-slides Event          | Swiper Event                       |
+| ------------------------- | ---------------------------------- |
+| `ionSlideWillChange`      | `swiperslidechangetransitionstart` |
+| `ionSlideDidChange`       | `swiperslidechange`                |
+| `ionSlideDoubleTap`       | `swiperdoubletap`                  |
+| `ionSlideDrag`            | `swiperslidermove`                 |
+| `ionSlideNextStart`       | `swiperslidenexttransitionstart`   |
+| `ionSlideNextEnd`         | `swiperslidenexttransitionend`     |
+| `ionSlidePrevStart`       | `swiperslideprevtransitionstart`   |
+| `ionSlidePrevEnd`         | `swiperslideprevtransitionend`     |
+| `ionSlideReachStart`      | `swiperreachbeginning`             |
+| `ionSlideReachEnd`        | `swiperreachend`                   |
+| `ionSlideTap`             | `swipertap`                        |
+| `ionSlideTouchStart`      | `swipertouchstart`                 |
+| `ionSlideTouchEnd`        | `swipertouchend`                   |
+| `ionSlideTransitionStart` | `swipertransitionstart`            |
+| `ionSlideTransitionEnd`   | `swipertransitionend`              |
+| `ionSlidesDidLoad`        | `swiperinit`                       |
 
 :::note
-All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
+All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a> and should be lowercased and prefixed with the word `swiper`.
 :::
 
 ## Methods

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
@@ -65,6 +65,14 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
 import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
 
 <Indeterminate />
+
+## Links inside of Labels
+
+Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
+
+import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md';
+
+<LabelLink />
 
 ## Theming
 

diff --git a/docs/api/modal.md b/docs/api/modal.md
@@ -98,10 +98,8 @@ Here's a simplified example illustrating how a child component can interact with
 import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss/child-state/index.md';
 
 <CanDismissChildStateExample />
-
-## Types of modals
 
-### Card Modal
+## Card Modal
 
 Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property on `ion-modal`.
 
@@ -117,7 +115,11 @@ import CardExample from '@site/static/usage/v8/modal/card/basic/index.md';
 
 <CardExample />
 
-### Sheet Modal
+## Sheet Modal
+
+:::info
+[Content](./content) should be used inside of the sheet modal if you want your modal content to be scrollable.
+:::
 
 Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`.
 
@@ -131,19 +133,23 @@ import SheetExample from '@site/static/usage/v8/modal/sheet/basic/index.md';
 
 <SheetExample />
 
-#### Interacting with background content
+### Interacting with background content
 
 import SheetBackgroundContentExample from '@site/static/usage/v8/modal/sheet/background-content/index.md';
 
 <SheetBackgroundContentExample />
 
-#### Auto Height Sheet
+### Custom Sheet Height
+
+Developers should use the `--height` CSS Variable to change the height of the sheet modal instead of changing the last breakpoint in the `breakpoints` array. The reason for this is changing the last breakpoint in the `breakpoints` array to a value less than `1` will cause some of the modal to be inaccessible outside of the viewport.
+
+The following example shows how to get a sheet modal that is automatically sized based on its content. Note that by keeping the maximum breakpoint at `1` we ensure that the entire modal is accessible in the viewport.
 
 import SheetAutoHeightExample from '@site/static/usage/v8/modal/sheet/auto-height/index.md';
 
 <SheetAutoHeightExample />
 
-#### Handle Behavior
+### Handle Behavior
 
 Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.
 

diff --git a/docs/api/title.md b/docs/api/title.md
@@ -49,6 +49,18 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsibl
 
 <CollapsibleLargeTitleButtons />
 
+## Accessibility
+
+### Headings
+
+When creating headings, we typically recommend using [semantic heading elements (h1-h6)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). However, there may be instances where you need to update Title to be treated as a particular heading by assistive technologies. For example, if you have a Title at the top of a view, you may want this to be considered a level 1 heading.
+
+To achieve this, developers should use the [`heading` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role) on Title. This will indicate to assistive technologies that Title is a type of heading. From there, developers should use the [`aria-level` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level) to set the heading level.
+
+For example, if we wanted to make a Title behave like an `h1` element, we would set `role="heading"` and `aria-level="1"` on the Title.
+
+Since multiple Title elements can be used on a view in conjunction with semantic heading elements, Ionic does not automatically set the Title's `role` or `aria-level`. It is the responsibility of the developer to handle this.
+
 ## Theming
 
 The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the toolbar containing the collapsible large title should always match the background color of the content.

diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md
@@ -47,4 +47,4 @@ For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cord
 ### Implementations
 
 - **iOS**: <a href="https://developer.apple.com/documentation/webkit/wkwebview" target="_blank">WKWebView</a>
-- **Android**: <a href="https://developer.chrome.com/multidevice/webview/overview" target="_blank">Web View for Android</a>
+- **Android**: <a href="https://developer.android.com/reference/android/webkit/WebView" target="_blank">WebView for Android</a>
diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.md
@@ -14,7 +14,7 @@ First, we’ll update the photo saving functionality to support mobile. In the `
 
 ```tsx
 const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
-  let base64Data: string;
+  let base64Data: string | Blob;
   // "hybrid" will detect Cordova or Capacitor;
   if (isPlatform('hybrid')) {
     const file = await Filesystem.readFile({

diff --git a/docs/reference/support.md b/docs/reference/support.md
@@ -20,16 +20,16 @@ Given the reality of time and resource constraints as well as the desire to keep
 
 The current status of each Ionic Framework version is:
 
-| Version |      Status      |   Released   | Maintenance Ends | Ext. Support Ends |
-| :-----: | :--------------: | :----------: | :--------------: | :---------------: |
-|   V8    |   Pre-Release    |     TBD      |       TBD        |        TBD        |
-|   V7    |    **Active**    | Mar 29, 2023 |       TBD        |        TBD        |
-|   V6    | Extended Support | Dec 8, 2021  |   Sep 29, 2023   |   Mar 29, 2024    |
-|   V5    |  End of Support  | Feb 11, 2020 |   June 8, 2022   |    Dec 8, 2022    |
-|   V4    |  End of Support  | Jan 23, 2019 |   Aug 11, 2020   |   Sept 30, 2022   |
-|   V3    |  End of Support  | Apr 5, 2017  |   Oct 30, 2019   |   Aug 11, 2020    |
-|   V2    |  End of Support  | Jan 25, 2017 |   Apr 5, 2017    |    Apr 5, 2017    |
-|   V1    |  End of Support  | May 12, 2015 |   Jan 25, 2017   |   Jan 25, 2017    |
+| Version |     Status     |   Released   | Maintenance Ends | Ext. Support Ends |
+| :-----: | :------------: | :----------: | :--------------: | :---------------: |
+|   V8    |   **Active**   | Apr 17, 2024 |       TBD        |        TBD        |
+|   V7    |  Maintenance   | Mar 29, 2023 |   Oct 17, 2024   |   Apr 17, 2025    |
+|   V6    | End of Support | Dec 8, 2021  |   Sep 29, 2023   |   Mar 29, 2024    |
+|   V5    | End of Support | Feb 11, 2020 |   June 8, 2022   |    Dec 8, 2022    |
+|   V4    | End of Support | Jan 23, 2019 |   Aug 11, 2020   |   Sept 30, 2022   |
+|   V3    | End of Support | Apr 5, 2017  |   Oct 30, 2019   |   Aug 11, 2020    |
+|   V2    | End of Support | Jan 25, 2017 |   Apr 5, 2017    |    Apr 5, 2017    |
+|   V1    | End of Support | May 12, 2015 |   Jan 25, 2017   |   Jan 25, 2017    |
 
 - **Maintenance**: Only critical bug and security fixes. No major feature improvements.
 - **Extended Support**: For teams and organizations that require additional long term maintenance support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise).

diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
@@ -194,7 +194,7 @@ color-scheme: light dark;
 | ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
 | ![Application without color-scheme](/img/theming/color-scheme-light.png) | ![Application with color-scheme](/img/theming/color-scheme-dark.png) |
 
-For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
+For more information regarding `color-scheme`, please see the [Web.dev guide on color schemes](https://web.dev/color-scheme/).
 
 :::note
 `color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode).
@@ -225,7 +225,7 @@ It is important to pay attention to the specificity if you want to override any
 :::
 
 :::info
-The contents of Ionic's dark palette can be [viewed on GitHub](https://github.com/ionic-team/ionic-framework/blob/feature-8.0/core/src/css/palettes/dark.scss). The CSS used to apply the **always** dark palette can be found [here](https://github.com/ionic-team/ionic-framework/blob/feature-8.0/core/src/css/palettes/dark.always.scss).
+The contents of Ionic's dark palette can be [viewed on GitHub](https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.scss). The CSS used to apply the **always** dark palette can be found in the [repository](https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.always.scss).
 :::
 
 </TabItem>
@@ -244,7 +244,7 @@ It is important to pay attention to the specificity if you want to override any
 :::
 
 :::info
-The contents of Ionic's dark palette can be [viewed on GitHub](https://github.com/ionic-team/ionic-framework/blob/feature-8.0/core/src/css/palettes/dark.scss). The CSS used to apply the **system** dark palette can be found [here](https://github.com/ionic-team/ionic-framework/blob/feature-8.0/core/src/css/palettes/dark.system.scss).
+The contents of Ionic's dark palette can be [viewed on GitHub](https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.scss). The CSS used to apply the **system** dark palette can be found in the [repository](https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.system.scsss).
 :::
 
 </TabItem>
@@ -262,7 +262,7 @@ It is important to pay attention to the specificity if you want to override any
 :::
 
 :::info
-The contents of Ionic's dark palette can be [viewed on GitHub](https://github.com/ionic-team/ionic-framework/blob/feature-8.0/core/src/css/palettes/dark.scss). The CSS used to apply the **class** dark palette can be found [here](https://github.com/ionic-team/ionic-framework/blob/feature-8.0/core/src/css/palettes/dark.class.scss).
+The contents of Ionic's dark palette can be [viewed on GitHub](https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.scss). The CSS used to apply the **class** dark palette can be found in the [repository](https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/palettes/dark.class.scss).
 :::
 
 </TabItem>

diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md
@@ -31,9 +31,9 @@ The high contrast palette can be enabled by importing the following stylesheet i
 
 <TabItem value="angular">
 
-```css
+```scss
 @import '@ionic/angular/css/palettes/high-contrast.always.css'; // Light palette
-// @import '@ionic/angular/css/palettes/high-contrast.always.css'; // Dark palette
+// @import '@ionic/angular/css/palettes/high-contrast-dark.always.css'; // Dark palette
 ```
 
 </TabItem>