v7.0.0-rc.4

BREAKING CHANGE:

The `innerHTMLTemplatesEnabled` Ionic Config now defaults to `false`. Developers can set this option to `true` if they would like to continue to use custom HTML features in `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast`.

.github/COMPONENT-GUIDE.md

@@ -141,7 +141,7 @@ Style the `ion-activated` class based on the spec for that element:
 }
 ```
 
-> Order is important! Activated should be before the focused & hover states.
+> Order is important! Activated should be after the focused & hover states.
 
 
 #### User Customization
@@ -307,7 +307,7 @@ Style the `:hover` based on the spec for that element:
 }
 ```
 
-> Order is important! Hover should be after the activated and focused states.
+> Order is important! Hover should be before the activated state.
 
 
 #### User Customization
@@ -729,7 +729,7 @@ For example, if you wanted `transform-origin` to be RTL-aware, you would use the
 @include transform-origin(start, center);
 ```
 
-This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode. 
+This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode.
 
 These mixins depend on the `:host-context` pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
 
@@ -753,4 +753,4 @@ class={{
 :host(.my-cmp-rtl) {
   transform-origin: right center;
 }
-```
+```

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,8 +1,10 @@
 name: 🐛 Bug Report
 description: Create a report to help us improve Ionic Framework
 title: 'bug: '
+
 body:
   - type: checkboxes
+    id: prerequisites
     attributes:
       label: Prerequisites
       description: Please ensure you have completed all of the following.
@@ -13,46 +15,67 @@ body:
           required: true
         - label: I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
           required: true
-  - type: checkboxes
+
+  - type: dropdown
+    id: affected-versions
     attributes:
       label: Ionic Framework Version
-      description: Please select which versions of Ionic Framework this issue impacts. For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3.
+      description: Which version(s) of Ionic Framework does this issue impact? For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3.
       options:
-        - label: v4.x
-        - label: v5.x
-        - label: v6.x
-        - label: v7.x
-        - label: Nightly
+        - v4.x
+        - v5.x
+        - v6.x
+        - v7.x
+        - Nightly
+      multiple: true
+    validations:
+      required: true
+
   - type: textarea
+    id: current-behavior
     attributes:
       label: Current Behavior
       description: A clear description of what the bug is and how it manifests.
     validations:
       required: true
+
   - type: textarea
+    id: expected-behavior
     attributes:
       label: Expected Behavior
       description: A clear description of what you expected to happen.
     validations:
       required: true
+
   - type: textarea
+    id: steps-to-reproduce
     attributes:
       label: Steps to Reproduce
       description: Please explain the steps required to duplicate this issue.
+      placeholder: |
+        1.
+        2.
+        3.
     validations:
       required: true
+
   - type: input
+    id: reproduction-url
     attributes:
       label: Code Reproduction URL
       description: Please reproduce this issue in a blank Ionic Framework starter application and provide a link to the repo. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.
       placeholder: https://github.com/...
+
   - type: textarea
+    id: ionic-info
     attributes:
       label: Ionic Info
       description: Please run `ionic info` from within your Ionic Framework project directory and paste the output below.
     validations:
       required: true
+
   - type: textarea
+    id: additional-information
     attributes:
       label: Additional Information
       description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -2,7 +2,9 @@ name: 💡 Feature Request
 description: Suggest an idea for Ionic Framework
 title: 'feat: '
 body:
+
   - type: checkboxes
+    id: prerequisites
     attributes:
       label: Prerequisites
       description: Please ensure you have completed all of the following.
@@ -13,31 +15,43 @@ body:
           required: true
         - label: I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.
           required: true
+
   - type: textarea
+    id: description
     attributes:
       label: Describe the Feature Request
       description: A clear and concise description of what the feature does.
     validations:
       required: true
+
   - type: textarea
+    id: use-case
     attributes:
       label: Describe the Use Case
       description: A clear and concise use case for what problem this feature would solve.
     validations:
       required: true
+
   - type: textarea
+    id: proposed-solution
     attributes:
       label: Describe Preferred Solution
       description: A clear and concise description of what you how you want this feature to be added to Ionic Framework.
+
   - type: textarea
+    id: alternatives-considered
     attributes:
       label: Describe Alternatives
       description: A clear and concise description of any alternative solutions or features you have considered.
+
   - type: textarea
+    id: related-code
     attributes:
       label: Related Code
       description: If you are able to illustrate the feature request with an example, please provide a sample Ionic Framework application. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app.
+
   - type: textarea
+    id: additional-information
     attributes:
       label: Additional Information
       description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to implement, Stack Overflow links, forum links, etc.

.github/dependabot.yml

@@ -4,6 +4,8 @@ updates:
     directory: "/core"
     schedule:
       interval: "daily"
+    versioning-strategy: increase
     allow:
       - dependency-name: "@playwright/test"
-        dependency-name: "@axe-core/playwright"
+      - dependency-name: "@axe-core/playwright"
+      - dependency-name: "@stencil/core"

.github/workflows/actions/test-react-e2e/action.yml

@@ -1,5 +1,8 @@
 name: 'Test React E2E'
 description: 'Test React E2E'
+inputs:
+  app:
+    description: 'The specific test application'
 runs:
   using: 'composite'
   steps:
@@ -21,19 +24,24 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
+    - name: Create Test App
+      run: ./build.sh ${{ inputs.app }}
+      shell: bash
+      working-directory: ./packages/react/test
     - name: Install Dependencies
       run: npm install
       shell: bash
-      working-directory: ./packages/react/test-app
-    - name: Sync
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+    - name: Sync Built Changes
       run: npm run sync
       shell: bash
-      working-directory: ./packages/react/test-app
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
     - name: Build
       run: npm run build
       shell: bash
-      working-directory: ./packages/react/test-app
-    - name: Run E2E Tests
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+    - name: Run Tests
       run: npm run e2e
       shell: bash
-      working-directory: ./packages/react/test-app
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -1,5 +1,8 @@
 name: 'Test React Router E2E'
-description: 'Test React Router '
+description: 'Test React Router'
+inputs:
+  app:
+    description: 'The specific test application'
 runs:
   using: 'composite'
   steps:
@@ -21,19 +24,23 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
+    - name: Create Test App
+      run: ./build.sh ${{ inputs.app }}
+      shell: bash
+      working-directory: ./packages/react-router/test
     - name: Install Dependencies
       run: npm install
       shell: bash
-      working-directory: ./packages/react-router/test-app
-    - name: Sync
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}
+    - name: Sync Built Changes
       run: npm run sync
       shell: bash
-      working-directory: ./packages/react-router/test-app
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}
     - name: Build
       run: npm run build
       shell: bash
-      working-directory: ./packages/react-router/test-app
-    - name: Run E2E Tests
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}
+    - name: Run Tests
       run: npm run e2e
       shell: bash
-      working-directory: ./packages/react-router/test-app
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}

.github/workflows/build.yml

@@ -135,7 +135,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng12, ng13, ng14, ng15]
+        apps: [ng14, ng15]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
@@ -168,15 +168,45 @@ jobs:
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [reactrouter5]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-react-router-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-router-e2e:
+    if: ${{ always() }}
+    needs: test-react-router-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-router-e2e.result != 'success' }}
+        run: exit 1
 
   test-react-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [react17, react18]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-react-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-e2e:
+    if: ${{ always() }}
+    needs: test-react-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-e2e.result != 'success' }}
+        run: exit 1

.github/workflows/release-ionic.yml

@@ -8,7 +8,7 @@ on:
         type: string
         required: true
       tag:
-        description: 'The tag to publish to on NPM.'
+        description: 'The tag to publish to NPM.'
         type: string
         required: true
       preid:

.github/workflows/stencil-eval.yml

@@ -200,6 +200,10 @@ jobs:
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [reactrouter5]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
@@ -207,8 +211,23 @@ jobs:
       with:
         ref: feature-7.0
     - uses: ./.github/workflows/actions/test-react-router-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-router-e2e:
+    if: ${{ always() }}
+    needs: test-react-router-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-router-e2e.result != 'success' }}
+        run: exit 1
 
   test-react-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [react17, react18]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
@@ -216,3 +235,14 @@ jobs:
       with:
         ref: feature-7.0
     - uses: ./.github/workflows/actions/test-react-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-e2e:
+    if: ${{ always() }}
+    needs: test-react-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-e2e.result != 'success' }}
+        run: exit 1

.gitignore

@@ -78,4 +78,10 @@ angular/test/build/
 # vue
 packages/vue/test/build/
 
+# react
+packages/react/test/build/
+
+# react router
+packages/react-router/test/build/
+
 .npmrc

BREAKING.md

@@ -17,6 +17,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Accordion Group](#version-7x-accordion-group)
   - [Action Sheet](#version-7x-action-sheet)
   - [Back Button](#version-7x-back-button)
+  - [Button](#version-7x-button)
   - [Card Header](#version-7x-card-header)
   - [Checkbox](#version-7x-checkbox)
   - [Datetime](#version-7x-datetime)
@@ -34,6 +35,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Textarea](#version-7x-textarea)
   - [Toggle](#version-7x-toggle)
   - [Virtual Scroll](#version-7x-virtual-scroll)
+- [Config](#version-7x-config)
 - [Types](#version-7x-types)
   - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
 - [JavaScript Frameworks](#version-7x-javascript-frameworks)
@@ -59,7 +61,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 | Framework | Supported Version     |
 | --------- | --------------------- |
-| Angular   | 13+                   |
+| Angular   | 14+                   |
 | React     | 17+                   |
 | Vue       | 3.0.6+                |
 
@@ -74,7 +76,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 <h4 id="version-7x-accordion-group">Accordion Group</h4>
 
--`ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
+- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
 
 - Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
 
@@ -88,6 +90,21 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | ---------- | -------------- | --------- |
 | `--height` | `100%`         | `auto`    |
 
+<h4 id="version-7x-button">Button</h4>
+
+- Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token                              | Previous Value | New Value |
+| ---------------------------------- | -------------- | --------- |
+| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
+| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
+| `$button-ios-height`               | `2.8em`        | `3.1em`   |
+| `$button-ios-border-radius`        | `10px`         | `14px`    |
+| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
+| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
+
 <h4 id="version-7x-back-button">Back Button</h4>
 
 - Back Button is updated to align with the design specification for iOS.
@@ -123,7 +140,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 <h4 id="version-7x-input">Input</h4>
 
-- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus or from clicking the clear action within the input.
+- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
 
   - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
 
@@ -196,7 +213,7 @@ Ionic now listens on the `keydown` event instead of the `keyup` event when deter
 
 <h4 id="version-7x-searchbar">Searchbar</h4>
 
-- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus.
+- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
 
   - If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
 
@@ -204,6 +221,8 @@ Ionic now listens on the `keydown` event instead of the `keyup` event when deter
 
 - The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
 
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
 **Design tokens**
 
 | Token                   | Previous Value | New Value |
@@ -279,6 +298,10 @@ Developers using the component will need to migrate to a virtual scroll solution
 
 Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
 
+<h2 id="version-7x-config">Config</h2>
+
+- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
+
 <h2 id="version-7x-types">Types</h2>
 
 <h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
@@ -289,8 +312,12 @@ Any references to the virtual scroll types from `@ionic/core` have been removed.
 
 <h4 id="version-7x-angular">Angular</h4>
 
+- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
 - `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
 
+- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
 <h4 id="version-7x-react">React</h4>
 
 `@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.

CHANGELOG.md

@@ -3,6 +3,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.0.0-rc.4](https://github.com/ionic-team/ionic-framework/compare/v6.7.0...v7.0.0-rc.4) (2023-03-27)
+
+
+### Bug Fixes
+
+* **fab, tab-button:** rtl alignment in safari and firefox ([#26986](https://github.com/ionic-team/ionic-framework/issues/26986)) ([e23fd9e](https://github.com/ionic-team/ionic-framework/commit/e23fd9eceed289284eb047261c0d6bdab6ac5e8e)), closes [#22739](https://github.com/ionic-team/ionic-framework/issues/22739)
+* **many:** innerHTML is disabled by default ([#27029](https://github.com/ionic-team/ionic-framework/issues/27029)) ([b7e4603](https://github.com/ionic-team/ionic-framework/commit/b7e46038e0eee611bb9f5d83772804e83b19a63d))
+* **radio-group:** radios participate in form submission ([#27018](https://github.com/ionic-team/ionic-framework/issues/27018)) ([3b99c31](https://github.com/ionic-team/ionic-framework/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1)), closes [#27016](https://github.com/ionic-team/ionic-framework/issues/27016)
+* **segment:** change event fires when clicking ([#27010](https://github.com/ionic-team/ionic-framework/issues/27010)) ([3e0a905](https://github.com/ionic-team/ionic-framework/commit/3e0a905e81b2308450dcd2dc20489b7988f0e647)), closes [#27002](https://github.com/ionic-team/ionic-framework/issues/27002)
+* **select:** inherit white-space in select-text to allow text wrapping ([#26973](https://github.com/ionic-team/ionic-framework/issues/26973)) ([19c1e25](https://github.com/ionic-team/ionic-framework/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9)), closes [#19949](https://github.com/ionic-team/ionic-framework/issues/19949)
+
+
+### BREAKING CHANGES
+
+* **many:** The `innerHTMLTemplatesEnabled` Ionic Config now defaults to `false`. Developers can set this option to `true` if they would like to continue to use custom HTML features in `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast`.
+
+
+
+# [7.0.0-rc.3](https://github.com/ionic-team/ionic-framework/compare/v6.6.3...v7.0.0-rc.3) (2023-03-22)
+
+
+
+# [7.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v6.6.2...v7.0.0-rc.2) (2023-03-15)
+
+
+### Bug Fixes
+
+* **input, select, textarea:** border color is set on host ([#26941](https://github.com/ionic-team/ionic-framework/issues/26941)) ([4810e6f](https://github.com/ionic-team/ionic-framework/commit/4810e6f2ac075cf5cd8065a1c10ad57db119beff))
+* **input, textarea:** show error state after touch ([#26940](https://github.com/ionic-team/ionic-framework/issues/26940)) ([ef33270](https://github.com/ionic-team/ionic-framework/commit/ef33270b55122574e0fdb32187410d8d8a4fa1ae)), closes [#26939](https://github.com/ionic-team/ionic-framework/issues/26939) [#21643](https://github.com/ionic-team/ionic-framework/issues/21643)
+* **many:** disabled control in item does not receive active/hover states ([#26867](https://github.com/ionic-team/ionic-framework/issues/26867)) ([f829672](https://github.com/ionic-team/ionic-framework/commit/f829672a6aa4477d1ce26f624f7316e6c5a1d514)), closes [#26706](https://github.com/ionic-team/ionic-framework/issues/26706)
+* **toggle:** label is announced once on ios ([#26937](https://github.com/ionic-team/ionic-framework/issues/26937)) ([f71d9b1](https://github.com/ionic-team/ionic-framework/commit/f71d9b1101786aa39016e458ca0da3f1e871d093))
+
+
+
+# [7.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v7.0.0-rc.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **input, textarea:** disabled state is applied when true ([#26892](https://github.com/ionic-team/ionic-framework/issues/26892)) ([569401b](https://github.com/ionic-team/ionic-framework/commit/569401b1c8959f236ab6931e7c58063d4681402a)), closes [#26881](https://github.com/ionic-team/ionic-framework/issues/26881)
+* **item:** prevent slotted form controls from taking whole width of item ([#26897](https://github.com/ionic-team/ionic-framework/issues/26897)) ([78f5d96](https://github.com/ionic-team/ionic-framework/commit/78f5d960cf4a056b52f65d4731a7ee0771031306))
+* **many:** add aria-hidden to decorative icons ([#26922](https://github.com/ionic-team/ionic-framework/issues/26922)) ([78303dc](https://github.com/ionic-team/ionic-framework/commit/78303dccaa2b3e7e6fb107a5c0f0f213d8e39a7c))
+* **select:** popover is full width when used with floating/stacked labels ([#26907](https://github.com/ionic-team/ionic-framework/issues/26907)) ([7bc22f2](https://github.com/ionic-team/ionic-framework/commit/7bc22f2bbfa1d170f05d66f44b53cd28c4038bc5)), closes [#26903](https://github.com/ionic-team/ionic-framework/issues/26903)
+* **vue:** input components update refs on ionInput ([#26876](https://github.com/ionic-team/ionic-framework/issues/26876)) ([7d9ce74](https://github.com/ionic-team/ionic-framework/commit/7d9ce7420a4c041a6d21041c15680e809cd55e8d)), closes [#26700](https://github.com/ionic-team/ionic-framework/issues/26700)
+
+
+
+# [7.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
+
+
+
+# [7.0.0-beta.6](https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
+
+
+### Bug Fixes
+
+* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic-framework/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic-framework/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
+* **button:** update for ios spec ([#26864](https://github.com/ionic-team/ionic-framework/issues/26864)) ([df37357](https://github.com/ionic-team/ionic-framework/commit/df3735765a7639d200a85834d8c3d72546e29791))
+* **datetime:** aria-label for show/hide year picker ([#26848](https://github.com/ionic-team/ionic-framework/issues/26848)) ([ac66215](https://github.com/ionic-team/ionic-framework/commit/ac66215399954c972267b9d18bbd5aa5ef41a4c1))
+
+
+### BREAKING CHANGES
+
+* **button:** Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token                              | Previous Value | New Value |
+| ---------------------------------- | -------------- | --------- |
+| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
+| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
+| `$button-ios-height`               | `2.8em`        | `3.1em`   |
+| `$button-ios-border-radius`        | `10px`         | `14px`    |
+| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
+| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
+
+
+
+# [7.0.0-beta.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
+
+
+### Bug Fixes
+
+* **content:** adjust transition shadow to match new iOS version ([#26839](https://github.com/ionic-team/ionic-framework/issues/26839)) ([f006e4b](https://github.com/ionic-team/ionic-framework/commit/f006e4bc09fcdcb5a34da4e17eb6037bf1e2445c))
+* **form:** shadow components using aria-labelledby do not use modern syntax ([#26836](https://github.com/ionic-team/ionic-framework/issues/26836)) ([fcfdd9e](https://github.com/ionic-team/ionic-framework/commit/fcfdd9e9ba9969947d8b9dfefbea4522d08753ed)), closes [#26829](https://github.com/ionic-team/ionic-framework/issues/26829)
+* **scroll-padding:** correct padding is added ([#26810](https://github.com/ionic-team/ionic-framework/issues/26810)) ([eefd17d](https://github.com/ionic-team/ionic-framework/commit/eefd17d492f2fe24639cf20603fac04d6eb94e3f)), closes [#26803](https://github.com/ionic-team/ionic-framework/issues/26803)
+
+
+### Features
+
+* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic-framework/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic-framework/commit/1dee16f3a25dedf831afc09f9c400a42e861beea))
+* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic-framework/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic-framework/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic-framework/issues/26828)
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `detail` payload for the `ionInput` event now on `ion-searchbar` contains an object with the current `value` as well as the native event that triggered `ionInput`.
+* **angular,angular-server:** Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
+The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
+
+
 # [7.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
 
 
@@ -198,6 +301,205 @@ Developers can add the following CSS to their global stylesheet if they need the
 
 
 
+# [6.7.0](https://github.com/ionic-team/ionic-framework/compare/v6.6.3...v6.7.0) (2023-03-23)
+
+
+### Features
+
+* **config:** add option to disable custom html functionality ([#26956](https://github.com/ionic-team/ionic-framework/issues/26956)) ([3b0af7c](https://github.com/ionic-team/ionic-framework/commit/3b0af7c55d4fa039be33d6605414761494d5af8f))
+
+
+
+
+
+# [7.0.0-rc.3](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.2...v7.0.0-rc.3) (2023-03-22)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+## [6.6.3](https://github.com/ionic-team/ionic-framework/compare/v6.6.2...v6.6.3) (2023-03-22)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+### Bug Fixes
+
+* **menu:** main content is not scrollable while swiping ([#26976](https://github.com/ionic-team/ionic-framework/issues/26976)) ([88bd8a4](https://github.com/ionic-team/ionic-framework/commit/88bd8a47c5e844d1d3a2b3b13621826faf776afb)), closes [#21193](https://github.com/ionic-team/ionic-framework/issues/21193)
+
+
+
+
+
+# [7.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.1...v7.0.0-rc.2) (2023-03-15)
+
+### Bug Fixes
+
+* **input, select, textarea:** border color is set on host ([#26941](https://github.com/ionic-team/ionic-framework/issues/26941)) ([4810e6f](https://github.com/ionic-team/ionic-framework/commit/4810e6f2ac075cf5cd8065a1c10ad57db119beff))
+* **input, textarea:** show error state after touch ([#26940](https://github.com/ionic-team/ionic-framework/issues/26940)) ([ef33270](https://github.com/ionic-team/ionic-framework/commit/ef33270b55122574e0fdb32187410d8d8a4fa1ae)), closes [#26939](https://github.com/ionic-team/ionic-framework/issues/26939) [#21643](https://github.com/ionic-team/ionic-framework/issues/21643)
+* **many:** disabled control in item does not receive active/hover states ([#26867](https://github.com/ionic-team/ionic-framework/issues/26867)) ([f829672](https://github.com/ionic-team/ionic-framework/commit/f829672a6aa4477d1ce26f624f7316e6c5a1d514)), closes [#26706](https://github.com/ionic-team/ionic-framework/issues/26706)
+* **toggle:** label is announced once on ios ([#26937](https://github.com/ionic-team/ionic-framework/issues/26937)) ([f71d9b1](https://github.com/ionic-team/ionic-framework/commit/f71d9b1101786aa39016e458ca0da3f1e871d093))
+
+
+
+
+
+## [6.6.2](https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2) (2023-03-15)
+
+
+### Bug Fixes
+
+* **accordion:** include margins during expand animation ([#26390](https://github.com/ionic-team/ionic-framework/issues/26390)) ([f809918](https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic-framework/issues/26381)
+* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic-framework/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500))
+* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic-framework/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee))
+* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic-framework/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic-framework/issues/26207)
+* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic-framework/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic-framework/issues/26944)
+
+
+
+
+
+# [7.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **input, textarea:** disabled state is applied when true ([#26892](https://github.com/ionic-team/ionic-framework/issues/26892)) ([569401b](https://github.com/ionic-team/ionic-framework/commit/569401b1c8959f236ab6931e7c58063d4681402a)), closes [#26881](https://github.com/ionic-team/ionic-framework/issues/26881)
+* **item:** prevent slotted form controls from taking whole width of item ([#26897](https://github.com/ionic-team/ionic-framework/issues/26897)) ([78f5d96](https://github.com/ionic-team/ionic-framework/commit/78f5d960cf4a056b52f65d4731a7ee0771031306))
+* **many:** add aria-hidden to decorative icons ([#26922](https://github.com/ionic-team/ionic-framework/issues/26922)) ([78303dc](https://github.com/ionic-team/ionic-framework/commit/78303dccaa2b3e7e6fb107a5c0f0f213d8e39a7c))
+* **select:** popover is full width when used with floating/stacked labels ([#26907](https://github.com/ionic-team/ionic-framework/issues/26907)) ([7bc22f2](https://github.com/ionic-team/ionic-framework/commit/7bc22f2bbfa1d170f05d66f44b53cd28c4038bc5)), closes [#26903](https://github.com/ionic-team/ionic-framework/issues/26903)
+* **vue:** input components update refs on ionInput ([#26876](https://github.com/ionic-team/ionic-framework/issues/26876)) ([7d9ce74](https://github.com/ionic-team/ionic-framework/commit/7d9ce7420a4c041a6d21041c15680e809cd55e8d)), closes [#26700](https://github.com/ionic-team/ionic-framework/issues/26700)
+
+
+
+
+
+## [6.6.1](https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1) (2023-03-08)
+
+* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic-framework/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic-framework/issues/26916)
+* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic-framework/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic-framework/issues/22468)
+* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic-framework/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic-framework/issues/26851)
+* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic-framework/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic-framework/issues/26908)
+* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic-framework/issues/26854)) ([451d220](https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic-framework/issues/24714)
+* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic-framework/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd))
+* **react:** inline overlays dismiss when parent component unmounts ([#26245](https://github.com/ionic-team/ionic-framework/issues/26245)) ([c0e1bf9](https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8)), closes [#25775](https://github.com/ionic-team/ionic-framework/issues/25775) [#26185](https://github.com/ionic-team/ionic-framework/issues/26185)
+
+
+
+
+
+# [7.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+# [7.0.0-beta.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
+
+
+### Bug Fixes
+
+* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic-framework/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic-framework/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
+* **button:** update for ios spec ([#26864](https://github.com/ionic-team/ionic-framework/issues/26864)) ([df37357](https://github.com/ionic-team/ionic-framework/commit/df3735765a7639d200a85834d8c3d72546e29791))
+* **datetime:** aria-label for show/hide year picker ([#26848](https://github.com/ionic-team/ionic-framework/issues/26848)) ([ac66215](https://github.com/ionic-team/ionic-framework/commit/ac66215399954c972267b9d18bbd5aa5ef41a4c1))
+
+
+### BREAKING CHANGES
+
+* **button:** Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token                              | Previous Value | New Value |
+| ---------------------------------- | -------------- | --------- |
+| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
+| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
+| `$button-ios-height`               | `2.8em`        | `3.1em`   |
+| `$button-ios-border-radius`        | `10px`         | `14px`    |
+| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
+| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
+
+
+
+
+# [6.6.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.7...v6.6.0) (2023-03-01)
+
+
+### Bug Fixes
+
+
+* **modal:** dialog styles work on old chrome versions ([#26746](https://github.com/ionic-team/ionic-framework/issues/26746)) ([00d10f5](https://github.com/ionic-team/ionic-framework/commit/00d10f5f6ad53850505bdad94b659b8801a3309d)), closes [#26745](https://github.com/ionic-team/ionic-framework/issues/26745)
+
+### Features
+
+
+* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic-framework/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic-framework/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de))
+* **picker-column:** assign custom aria-labels to column options ([#26749](https://github.com/ionic-team/ionic-framework/issues/26749)) ([daa89a2](https://github.com/ionic-team/ionic-framework/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63))
+* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic-framework/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic-framework/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
+
+
+
+
+
+## [6.5.7](https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v6.5.7) (2023-03-01)
+
+
+### Bug Fixes
+
+
+* **content:** fullscreen values are recomputed on visible content ([#26847](https://github.com/ionic-team/ionic-framework/issues/26847)) ([6dcd98b](https://github.com/ionic-team/ionic-framework/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf)), closes [#26844](https://github.com/ionic-team/ionic-framework/issues/26844)
+* **modal:** keyboard listener removed on dismiss ([#26856](https://github.com/ionic-team/ionic-framework/issues/26856)) ([b4bcba3](https://github.com/ionic-team/ionic-framework/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0))
+* **overlays:** focus trap refs cleared on dismiss ([#26855](https://github.com/ionic-team/ionic-framework/issues/26855)) ([8d1d0fa](https://github.com/ionic-team/ionic-framework/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314))
+
+
+
+
+
+# [7.0.0-beta.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
+
+
+### Bug Fixes
+
+ **content:** adjust transition shadow to match new iOS version ([#26839](https://github.com/ionic-team/ionic-framework/issues/26839)) ([f006e4b](https://github.com/ionic-team/ionic-framework/commit/f006e4bc09fcdcb5a34da4e17eb6037bf1e2445c))
+* **form:** shadow components using aria-labelledby do not use modern syntax ([#26836](https://github.com/ionic-team/ionic-framework/issues/26836)) ([fcfdd9e](https://github.com/ionic-team/ionic-framework/commit/fcfdd9e9ba9969947d8b9dfefbea4522d08753ed)), closes [#26829](https://github.com/ionic-team/ionic-framework/issues/26829)
+* **scroll-padding:** correct padding is added ([#26810](https://github.com/ionic-team/ionic-framework/issues/26810)) ([eefd17d](https://github.com/ionic-team/ionic-framework/commit/eefd17d492f2fe24639cf20603fac04d6eb94e3f)), closes [#26803](https://github.com/ionic-team/ionic-framework/issues/26803)
+
+### Features
+
+* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic-framework/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic-framework/commit/1dee16f3a25dedf831afc09f9c400a42e861beea))
+* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic-framework/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic-framework/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic-framework/issues/26828)
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `detail` payload for the `ionInput` event now on `ion-searchbar` contains an object with the current `value` as well as the native event that triggered `ionInput`.
+* **angular,angular-server:** Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
+The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
+
+
+
+
+# [7.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
+
+
+### Bug Fixes
+
+* **checkbox:** screen readers announce state correctly ([#26817](https://github.com/ionic-team/ionic-framework/issues/26817)) ([7312b06](https://github.com/ionic-team/ionic-framework/commit/7312b0696d6b9ceb2e4518cad2ab29d45d2eddbe)), closes [#25740](https://github.com/ionic-team/ionic-framework/issues/25740)
+* **select:** emit single ionChange event for popover option selection ([#26796](https://github.com/ionic-team/ionic-framework/issues/26796)) ([7578aa3](https://github.com/ionic-team/ionic-framework/commit/7578aa3c598451b6df1cf1eca26ad288c0526121)), closes [#26789](https://github.com/ionic-team/ionic-framework/issues/26789)
+
+
+
+
+
 ## [6.5.6](https://github.com/ionic-team/ionic-framework/compare/v6.5.5...v6.5.6) (2023-02-22)
 
 

README.md

@@ -32,7 +32,7 @@
 </p>
 
 <h2 align="center">
-  <a href="https://ionicframework.com/getting-started/">Quickstart</a>
+  <a href="https://ionicframework.com/docs/intro/cli">Quickstart</a>
   <span> · </span>
   <a href="https://ionicframework.com/docs/">
     Documentation
@@ -42,7 +42,7 @@
   <span> · </span>
   <a href="https://blog.ionicframework.com/">Blog</a>
   <br />
-  Community: 
+  Community:
   <a href="https://ionic.link/discord">Discord</a>
   <span> · </span>
   <a href="https://forum.ionicframework.com/">Forums</a>
@@ -71,14 +71,19 @@ an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
 
 Already have an Ionic app? These guides will help you migrate to the latest versions.
 
+* [Migrate from v6 to v7](https://ionicframework.com/docs/v7/updating/7-0)
 * [Migrate from v5 to v6](https://ionicframework.com/docs/reference/migration#migrating-from-ionic-5x-to-ionic-6x)
 * [Migrate from v4 to v5](https://ionicframework.com/docs/reference/migration#migrating-from-ionic-4x-to-ionic-5x)
 * [Migrate from v3 to v4](https://ionicframework.com/docs/reference/migration#migrating-from-ionic-30-to-ionic-40)
 
 ### Examples
 
-The [Ionic Conference App](https://github.com/ionic-team/ionic-conference-app) is a full featured Ionic app.
-It is the perfect starting point for learning and building your own app.
+The Ionic Conference App is a full featured Ionic app. It is the perfect starting point for learning and building your own app.
+
+- [Angular Ionic Conference App](https://github.com/ionic-team/ionic-conference-app)
+- [React Ionic Conference App](https://github.com/ionic-team/ionic-react-conference-app)
+<!-- TODO(FW-3811): add this when the vue conference app is updated -->
+<!-- - [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app) -->
 
 ### Contributing
 

angular/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.0.0-rc.4](https://github.com/ionic-team/ionic/compare/v6.7.0...v7.0.0-rc.4) (2023-03-27)
+
+
+
+# [7.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v6.6.3...v7.0.0-rc.3) (2023-03-22)
+
+
+
+# [7.0.0-rc.2](https://github.com/ionic-team/ionic/compare/v6.6.2...v7.0.0-rc.2) (2023-03-15)
+
+
+
+# [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v6.6.1...v7.0.0-rc.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **many:** add aria-hidden to decorative icons ([#26922](https://github.com/ionic-team/ionic/issues/26922)) ([78303dc](https://github.com/ionic-team/ionic/commit/78303dccaa2b3e7e6fb107a5c0f0f213d8e39a7c))
+
+
+
+# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
+
+
+
+# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v6.6.0...v7.0.0-beta.6) (2023-03-01)
+
+
+### Bug Fixes
+
+* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
+
+
+
+# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
+
+
+### Features
+
+* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic/commit/1dee16f3a25dedf831afc09f9c400a42e861beea))
+* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic/issues/26828)
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `detail` payload for the `ionInput` event now on `ion-searchbar` contains an object with the current `value` as well as the native event that triggered `ionInput`.
+* **angular,angular-server:** Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
+The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
+
+
 # [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
 
 
@@ -99,6 +151,135 @@ Angular:
 
 
 
+# [6.7.0](https://github.com/ionic-team/ionic/compare/v6.6.3...v6.7.0) (2023-03-23)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [7.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.2...v7.0.0-rc.3) (2023-03-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.6.3](https://github.com/ionic-team/ionic/compare/v6.6.2...v6.6.3) (2023-03-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [7.0.0-rc.2](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.1..v7.0.0-rc.2) (2023-03-15)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [7.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **many:** add aria-hidden to decorative icons ([#26922](https://github.com/ionic-team/ionic/issues/26922)) ([78303dc](https://github.com/ionic-team/ionic/commit/78303dccaa2b3e7e6fb107a5c0f0f213d8e39a7c))
+
+
+
+
+
+## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic/issues/26916)
+
+
+
+
+
+
+# [7.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [7.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01)
+
+
+### Bug Fixes
+
+* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee))
+
+
+
+
+
+# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
+
+
+### Features
+
+* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de))
+* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
+
+
+
+
+
+## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
+
+### Features 
+
+* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic/commit/1dee16f3a25dedf831afc09f9c400a42e861beea))
+* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic/issues/26828)
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `detail` payload for the `ionInput` event now on `ion-searchbar` contains an object with the current `value` as well as the native event that triggered `ionInput`.
+* **angular,angular-server:** Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
+The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
+
+
+
+
+# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
 
 **Note:** Version bump only for package @ionic/angular

angular/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": ["@ionic/core", "ionicons", "jsonc-parser"]
+}

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-rc.4",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -27,7 +27,7 @@
     "build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
     "build.link": "npm run build && node scripts/link-copy.js",
-    "build.ng": "ng-packagr -p package.json -c tsconfig.json",
+    "build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
     "clean": "node scripts/clean.js",
     "clean-generated": "node ./scripts/clean-generated.js",
     "lint": "npm run eslint && npm run prettier -- --write --cache",
@@ -41,57 +41,54 @@
     "tsc": "tsc -p .",
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
+  "exports": {
+    "./css/*": {
+      "style": "./css/*"
+    }
+  },
   "dependencies": {
-    "@ionic/core": "^7.0.0-beta.4",
-    "ionicons": "^6.1.3",
+    "@ionic/core": "^7.0.0-rc.4",
+    "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
-    "tslib": "^2.0.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=12.0.0",
-    "@angular/forms": ">=12.0.0",
-    "@angular/router": ">=12.0.0",
-    "rxjs": ">=6.6.0",
+    "@angular/core": ">=14.0.0",
+    "@angular/forms": ">=14.0.0",
+    "@angular/router": ">=14.0.0",
+    "rxjs": ">=7.5.0",
     "zone.js": ">=0.11.0"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^12.0.0",
-    "@angular-devkit/schematics": "^12.0.0",
-    "@angular-eslint/eslint-plugin": "^12.5.0",
-    "@angular-eslint/eslint-plugin-template": "^12.5.0",
-    "@angular-eslint/template-parser": "^12.5.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/forms": "^12.0.0",
-    "@angular/router": "^12.0.0",
+    "@angular-devkit/core": "^14.0.0",
+    "@angular-devkit/schematics": "^14.0.0",
+    "@angular-eslint/eslint-plugin": "^14.0.0",
+    "@angular-eslint/eslint-plugin-template": "^14.0.0",
+    "@angular-eslint/template-parser": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@schematics/angular": "^12.2.9",
+    "@schematics/angular": "^14.0.0",
     "@types/node": "12.12.5",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.25.2",
     "fs-extra": "^7.0.0",
-    "ng-packagr": "^12.0.0",
+    "ng-packagr": "^14.0.0",
     "prettier": "^2.4.1",
-    "rxjs": "^6.6.2",
-    "typescript": "4.2.4",
-    "typescript-eslint-language-service": "^4.1.5",
+    "rxjs": "~7.5.0",
+    "typescript": "~4.7.2",
+    "typescript-eslint-language-service": "^5.0.0",
     "zone.js": "~0.11.4"
   },
   "prettier": "@ionic/prettier-config",
-  "schematics": "./schematics/collection.json",
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/index.ts"
-    },
-    "allowedNonPeerDependencies": [
-      "@ionic/core",
-      "ionicons",
-      "jsonc-parser"
-    ]
-  }
+  "schematics": "./schematics/collection.json"
 }

angular/src/di/r3_injector.ts

@@ -1,34 +0,0 @@
-/**
- * This class is taken directly from Angular's codebase. It can be removed once
- * we remove support for < Angular 14. The replacement class will come from @angular/core.
- *
- * TODO: FW-1641: Remove this class once Angular 13 support is dropped.
- *
- */
-import { Injector, ProviderToken, InjectFlags } from '@angular/core';
-/**
- * An `Injector` that's part of the environment injector hierarchy, which exists outside of the
- * component tree.
- *
- * @developerPreview
- */
-export abstract class EnvironmentInjector implements Injector {
-  /**
-   * Retrieves an instance from the injector based on the provided token.
-   * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
-   * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
-   */
-  abstract get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
-  /**
-   * @deprecated from v4.0.0 use ProviderToken<T>
-   * @suppress {duplicate}
-   */
-  abstract get(token: any, notFoundValue?: any): any;
-
-  abstract destroy(): void;
-
-  /**
-   * @internal
-   */
-  abstract onDestroy?(callback: () => void): void;
-}

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,6 +1,5 @@
 import { Location } from '@angular/common';
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
   Injector,
@@ -8,24 +7,23 @@ import {
   OnDestroy,
   OnInit,
   ViewContainerRef,
+  inject,
   Attribute,
   Directive,
   EventEmitter,
   Optional,
   Output,
   SkipSelf,
-  Input,
+  EnvironmentInjector,
 } from '@angular/core';
-import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET } from '@angular/router';
+import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Data } from '@angular/router';
 import { componentOnReady } from '@ionic/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
 
-import { EnvironmentInjector } from '../../di/r3_injector';
 import { AnimationBuilder } from '../../ionic-core';
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
-import { isComponentFactoryResolver } from '../../util/util';
 
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
@@ -58,22 +56,20 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
   tabsPrefix: string | undefined;
 
-  /**
-   * @experimental
-   *
-   * The `EnvironmentInjector` provider instance from the parent component.
-   * Required for using standalone components with `ion-router-outlet`.
-   *
-   * Will be deprecated and removed when Angular 13 support is dropped.
-   */
-  @Input() environmentInjector: EnvironmentInjector;
-
   @Output() stackEvents = new EventEmitter<any>();
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('activate') activateEvents = new EventEmitter<any>();
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('deactivate') deactivateEvents = new EventEmitter<any>();
 
+  private parentContexts = inject(ChildrenOutletContexts);
+  private location = inject(ViewContainerRef);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  // Ionic providers
+  private config = inject(Config);
+  private navCtrl = inject(NavController);
+
   set animation(animation: AnimationBuilder) {
     this.nativeEl.animation = animation;
   }
@@ -95,13 +91,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   }
 
   constructor(
-    private parentContexts: ChildrenOutletContexts,
-    private location: ViewContainerRef,
     @Attribute('name') name: string,
     @Optional() @Attribute('tabs') tabs: string,
-    private config: Config,
-    private navCtrl: NavController,
-    @Optional() private componentFactoryResolver: ComponentFactoryResolver,
     commonLocation: Location,
     elementRef: ElementRef,
     router: Router,
@@ -112,8 +103,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     this.nativeEl = elementRef.nativeElement;
     this.name = name || PRIMARY_OUTLET;
     this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
-    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
-    parentContexts.onChildOutletCreated(this.name, this as any);
+    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, this.navCtrl, zone, commonLocation);
+    this.parentContexts.onChildOutletCreated(this.name, this as any);
   }
 
   ngOnDestroy(): void {
@@ -125,12 +116,17 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   }
 
   ngOnInit(): void {
+    this.initializeOutletWithName();
+  }
+
+  // Note: Ionic deviates from the Angular Router implementation here
+  private initializeOutletWithName() {
     if (!this.activated) {
       // If the outlet was not instantiated at the time the route got activated we need to populate
       // the outlet when it is initialized (ie inside a NgIf)
       const context = this.getContext();
       if (context?.route) {
-        this.activateWith(context.route, context.resolver || null);
+        this.activateWith(context.route, context.injector);
       }
     }
 
@@ -159,7 +155,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     return this._activatedRoute as ActivatedRoute;
   }
 
-  get activatedRouteData(): any {
+  get activatedRouteData(): Data {
     if (this._activatedRoute) {
       return this._activatedRoute.snapshot.data;
     }
@@ -221,10 +217,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
   }
 
-  activateWith(
-    activatedRoute: ActivatedRoute,
-    resolverOrInjector?: ComponentFactoryResolver | EnvironmentInjector | null
-  ): void {
+  activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector | null): void {
     if (this.isActivated) {
       throw new Error('Cannot activate an already activated outlet');
     }
@@ -252,22 +245,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
        * We check for the presence of this property to determine if the route is
        * using standalone components.
        */
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      if (snapshot.routeConfig!.component == null && this.environmentInjector == null) {
-        console.warn(
-          '[Ionic Warning]: You must supply an environmentInjector to use standalone components with routing:\n\n' +
-            'In your component class, add:\n\n' +
-            `   import { EnvironmentInjector } from '@angular/core';\n` +
-            '   constructor(public environmentInjector: EnvironmentInjector) {}\n' +
-            '\n' +
-            'In your router outlet template, add:\n\n' +
-            '   <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>\n\n' +
-            'Alternatively, if you are routing within ion-tabs:\n\n' +
-            '   <ion-tabs [environmentInjector]="environmentInjector"></ion-tabs>'
-        );
-        return;
-      }
-
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       // We create an activated route proxy object that will maintain future updates for this component
@@ -277,43 +254,15 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
 
       const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
 
-      /**
-       * The resolver is not always provided and is required in Angular 12.
-       * Fallback to the class-level provider when the resolver is not set.
-       */
-      resolverOrInjector = resolverOrInjector || this.componentFactoryResolver;
-
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const component = snapshot.routeConfig!.component ?? snapshot.component;
 
-      if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
-        // Backwards compatibility for Angular 13 and lower
-        const factory = resolverOrInjector.resolveComponentFactory(component);
-        cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
-      } else {
-        /**
-         * Angular 14 and higher.
-         *
-         * TODO: FW-1641: Migrate once Angular 13 support is dropped.
-         *
-         * When we drop < Angular 14, we can replace the following code with:
-         * ```ts
-          const environmentInjector = resolverOrInjector ?? this.environmentInjector;
-            cmpRef = this.activated = location.createComponent(component, {
-              index: location.length,
-              injector,
-              environmentInjector,
-            });
-         * ```
-         * where `this.environmentInjector` is a provider of `EnvironmentInjector` from @angular/core.
-         */
-        const environmentInjector = resolverOrInjector ?? this.environmentInjector;
-        cmpRef = this.activated = this.location.createComponent(component, {
-          index: this.location.length,
-          injector,
-          environmentInjector,
-        } as any);
-      }
+      cmpRef = this.activated = this.location.createComponent(component, {
+        index: this.location.length,
+        injector,
+        environmentInjector: environmentInjector ?? this.environmentInjector,
+      });
+
       // Once the component is created we can push it to our local subject supplied to the proxy
       component$.next(cmpRef.instance);
 

angular/src/directives/navigation/ion-tabs.ts

@@ -1,6 +1,5 @@
-import { Component, ContentChild, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
+import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
 
-import { EnvironmentInjector } from '../../di/r3_injector';
 import { NavController } from '../../providers/nav-controller';
 import { IonTabBar } from '../proxies';
 
@@ -11,12 +10,7 @@ import { StackEvent } from './stack-utils';
   selector: 'ion-tabs',
   template: ` <ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner">
-      <ion-router-outlet
-        #outlet
-        tabs="true"
-        [environmentInjector]="environmentInjector"
-        (stackEvents)="onPageSelected($event)"
-      ></ion-router-outlet>
+      <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
     <ng-content></ng-content>`,
   styles: [
@@ -52,16 +46,6 @@ export class IonTabs {
   @ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
   @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
 
-  /**
-   * @experimental
-   *
-   * The `EnvironmentInjector` provider instance from the parent component.
-   * Required for using standalone components with `ion-router-outlet`.
-   *
-   * Will be deprecated and removed when Angular 13 support is dropped.
-   */
-  @Input() environmentInjector: EnvironmentInjector;
-
   @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
   @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
 

angular/src/directives/navigation/nav-delegate.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, ElementRef, Injector, ViewContainerRef, Directive } from '@angular/core';
+import { ElementRef, Injector, Directive, EnvironmentInjector } from '@angular/core';
 
 import { AngularDelegate } from '../../providers/angular-delegate';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
@@ -29,13 +29,12 @@ export class NavDelegate {
   protected el: HTMLElement;
   constructor(
     ref: ElementRef,
-    resolver: ComponentFactoryResolver,
+    environmentInjector: EnvironmentInjector,
     injector: Injector,
-    angularDelegate: AngularDelegate,
-    location: ViewContainerRef
+    angularDelegate: AngularDelegate
   ) {
     this.el = ref.nativeElement;
-    ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
+    ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
     proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
   }
 }

angular/src/directives/overlays/modal.ts

@@ -79,7 +79,7 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ion-page" *ngIf="isCmpOpen || keepContentsMounted">
+  template: `<div class="ion-delegate-host ion-page" *ngIf="isCmpOpen || keepContentsMounted">
     <ng-container [ngTemplateOutlet]="template"></ng-container>
   </div>`,
   inputs: [

angular/src/directives/proxies.ts

@@ -657,7 +657,7 @@ Set `scrollEvents` to `true` to enable.
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
@@ -665,7 +665,7 @@ Set `scrollEvents` to `true` to enable.
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
 })
 export class IonDatetime {
   protected el: HTMLElement;
@@ -1019,7 +1019,7 @@ event is not necessarily fired for each alteration to an element's value.
 Depending on the way the users interacts with the element, the `ionChange`
 event fires at a different moment:
 - When the user commits the change explicitly (e.g. by selecting a date
-from a date picker for `<ion-input type="date">`, etc.).
+from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.).
 - When the element loses focus after its value has changed: for elements
 where the user's interaction is typing.
    */
@@ -1862,21 +1862,23 @@ export class IonSearchbar {
 }
 
 
+import type { SearchbarInputEventDetail as IIonSearchbarSearchbarInputEventDetail } from '@ionic/core';
 import type { SearchbarChangeEventDetail as IIonSearchbarSearchbarChangeEventDetail } from '@ionic/core';
 
 export declare interface IonSearchbar extends Components.IonSearchbar {
   /**
    * Emitted when the `value` of the `ion-searchbar` element has changed.
    */
-  ionInput: EventEmitter<CustomEvent<KeyboardEvent | null>>;
+  ionInput: EventEmitter<CustomEvent<IIonSearchbarSearchbarInputEventDetail>>;
   /**
    * The `ionChange` event is fired for `<ion-searchbar>` elements when the user
 modifies the element's value. Unlike the `ionInput` event, the `ionChange`
 event is not necessarily fired for each alteration to an element's value.
 
-The `ionChange` event is fired when the element loses focus after its value
-has been modified. This includes modifications made when clicking the clear
-or cancel buttons.
+The `ionChange` event is fired when the value has been committed
+by the user. This can happen when the element loses focus or
+when the "Enter" key is pressed. `ionChange` can also fire
+when clicking the clear or cancel buttons.
    */
   ionChange: EventEmitter<CustomEvent<IIonSearchbarSearchbarChangeEventDetail>>;
   /**
@@ -2255,7 +2257,7 @@ export declare interface IonTitle extends Components.IonTitle {}
 
 
 @ProxyCmp({
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
   methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
 })
 @Component({
@@ -2263,7 +2265,7 @@ export declare interface IonTitle extends Components.IonTitle {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
+  inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
 })
 export class IonToast {
   protected el: HTMLElement;

angular/src/index.ts

@@ -114,6 +114,7 @@ export {
   ScrollCustomEvent,
   SearchbarCustomEvent,
   SearchbarChangeEventDetail,
+  SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
   SelectChangeEventDetail,
@@ -123,6 +124,7 @@ export {
   TextareaCustomEvent,
   ToastOptions,
   ToastButton,
+  ToastLayout,
   ToggleChangeEventDetail,
   ToggleCustomEvent,
 } from '@ionic/core';

angular/src/providers/angular-delegate.ts

@@ -1,11 +1,12 @@
 import {
   ApplicationRef,
-  ComponentFactoryResolver,
   NgZone,
-  ViewContainerRef,
   Injectable,
-  InjectionToken,
   Injector,
+  EnvironmentInjector,
+  inject,
+  createComponent,
+  InjectionToken,
   ComponentRef,
 } from '@angular/core';
 import {
@@ -17,27 +18,24 @@ import {
   LIFECYCLE_WILL_UNLOAD,
 } from '@ionic/core';
 
-import { EnvironmentInjector } from '../di/r3_injector';
 import { NavParams } from '../directives/navigation/nav-params';
-import { isComponentFactoryResolver } from '../util/util';
 
 // TODO(FW-2827): types
 
 @Injectable()
 export class AngularDelegate {
-  constructor(private zone: NgZone, private appRef: ApplicationRef) {}
+  private zone = inject(NgZone);
+  private applicationRef = inject(ApplicationRef);
 
   create(
-    resolverOrInjector: ComponentFactoryResolver,
+    environmentInjector: EnvironmentInjector,
     injector: Injector,
-    location?: ViewContainerRef,
     elementReferenceKey?: string
   ): AngularFrameworkDelegate {
     return new AngularFrameworkDelegate(
-      resolverOrInjector,
+      environmentInjector,
       injector,
-      location,
-      this.appRef,
+      this.applicationRef,
       this.zone,
       elementReferenceKey
     );
@@ -45,14 +43,13 @@ export class AngularDelegate {
 }
 
 export class AngularFrameworkDelegate implements FrameworkDelegate {
-  private elRefMap = new WeakMap<HTMLElement, any>();
+  private elRefMap = new WeakMap<HTMLElement, ComponentRef<any>>();
   private elEventsMap = new WeakMap<HTMLElement, () => void>();
 
   constructor(
-    private resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
+    private environmentInjector: EnvironmentInjector,
     private injector: Injector,
-    private location: ViewContainerRef | undefined,
-    private appRef: ApplicationRef,
+    private applicationRef: ApplicationRef,
     private zone: NgZone,
     private elementReferenceKey?: string
   ) {}
@@ -78,10 +75,9 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
 
         const el = attachView(
           this.zone,
-          this.resolverOrInjector,
+          this.environmentInjector,
           this.injector,
-          this.location,
-          this.appRef,
+          this.applicationRef,
           this.elRefMap,
           this.elEventsMap,
           container,
@@ -115,40 +111,37 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
 
 export const attachView = (
   zone: NgZone,
-  resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
+  environmentInjector: EnvironmentInjector,
   injector: Injector,
-  location: ViewContainerRef | undefined,
-  appRef: ApplicationRef,
-  elRefMap: WeakMap<HTMLElement, any>,
+  applicationRef: ApplicationRef,
+  elRefMap: WeakMap<HTMLElement, ComponentRef<any>>,
   elEventsMap: WeakMap<HTMLElement, () => void>,
   container: any,
   component: any,
   params: any,
   cssClasses: string[] | undefined
 ): any => {
-  let componentRef: ComponentRef<any>;
+  /**
+   * Wraps the injector with a custom injector that
+   * provides NavParams to the component.
+   *
+   * NavParams is a legacy feature from Ionic v3 that allows
+   * Angular developers to provide data to a component
+   * and access it by providing NavParams as a dependency
+   * in the constructor.
+   *
+   * The modern approach is to access the data directly
+   * from the component's class instance.
+   */
   const childInjector = Injector.create({
     providers: getProviders(params),
     parent: injector,
   });
 
-  if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
-    // Angular 13 and lower
-    const factory = resolverOrInjector.resolveComponentFactory(component);
-    componentRef = location
-      ? location.createComponent(factory, location.length, childInjector)
-      : factory.create(childInjector);
-  } else if (location) {
-    // Angular 14
-    const environmentInjector = resolverOrInjector;
-    componentRef = location.createComponent(component, {
-      index: location.indexOf,
-      injector: childInjector,
-      environmentInjector,
-    } as any);
-  } else {
-    return null;
-  }
+  const componentRef = createComponent<any>(component, {
+    environmentInjector,
+    elementInjector: childInjector,
+  });
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;
@@ -156,17 +149,15 @@ export const attachView = (
     Object.assign(instance, params);
   }
   if (cssClasses) {
-    for (const clazz of cssClasses) {
-      hostElement.classList.add(clazz);
+    for (const cssClass of cssClasses) {
+      hostElement.classList.add(cssClass);
     }
   }
   const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
   container.appendChild(hostElement);
 
-  if (!location) {
-    appRef.attachView(componentRef.hostView);
-  }
-  componentRef.changeDetectorRef.reattach();
+  applicationRef.attachView(componentRef.hostView);
+
   elRefMap.set(hostElement, componentRef);
   elEventsMap.set(hostElement, unbindEvents);
   return hostElement;

angular/src/providers/modal-controller.ts

@@ -1,32 +1,24 @@
-import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
+import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
 import { ModalOptions, modalController } from '@ionic/core';
 
-import { EnvironmentInjector } from '../di/r3_injector';
 import { OverlayBaseController } from '../util/overlay';
 
 import { AngularDelegate } from './angular-delegate';
 
 @Injectable()
 export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
-  constructor(
-    private angularDelegate: AngularDelegate,
-    private resolver: ComponentFactoryResolver,
-    private injector: Injector,
-    // TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
-    @Optional() private environmentInjector: EnvironmentInjector
-  ) {
+  private angularDelegate = inject(AngularDelegate);
+  private injector = inject(Injector);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  constructor() {
     super(modalController);
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(
-        this.resolver ?? this.environmentInjector,
-        this.injector,
-        undefined,
-        'modal'
-      ),
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
     });
   }
 }

angular/src/providers/platform.ts

@@ -262,10 +262,11 @@ const readQueryParam = (url: string, key: string) => {
 };
 
 const proxyEvent = <T>(emitter: Subject<T>, el: EventTarget, eventName: string) => {
-  if (el as any) {
-    el.addEventListener(eventName, (ev: Event | undefined | null) => {
+  if (el) {
+    el.addEventListener(eventName, (ev) => {
       // ?? cordova might emit "null" events
-      emitter.next(ev != null ? ((ev as any).detail as T) : undefined);
+      const value = ev != null ? (ev as any).detail : undefined;
+      emitter.next(value);
     });
   }
 };

angular/src/providers/popover-controller.ts

@@ -1,32 +1,24 @@
-import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
+import { Injector, Injectable, inject, EnvironmentInjector } from '@angular/core';
 import { PopoverOptions, popoverController } from '@ionic/core';
 
-import { EnvironmentInjector } from '../di/r3_injector';
 import { OverlayBaseController } from '../util/overlay';
 
 import { AngularDelegate } from './angular-delegate';
 
 @Injectable()
 export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
-  constructor(
-    private angularDelegate: AngularDelegate,
-    private resolver: ComponentFactoryResolver,
-    private injector: Injector,
-    // TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
-    @Optional() private environmentInjector: EnvironmentInjector
-  ) {
+  private angularDelegate = inject(AngularDelegate);
+  private injector = inject(Injector);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  constructor() {
     super(popoverController);
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(
-        this.resolver ?? this.environmentInjector,
-        this.injector,
-        undefined,
-        'popover'
-      ),
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
     });
   }
 }

angular/src/schematics/utils/devkit-utils/ast-utils.ts

@@ -332,7 +332,7 @@ export function getFirstNgModuleName(source: ts.SourceFile): string | undefined
   // Then walk parent pointers up the AST, looking for the ClassDeclaration parent of the NgModule
   // metadata.
   const moduleClass = findClassDeclarationParent(ngModulesMetadata[0]);
-  if (!moduleClass || !moduleClass.name) {
+  if (!moduleClass?.name) {
     return undefined;
   }
 

angular/src/util/util.ts

@@ -1,5 +1,3 @@
-import { ComponentFactoryResolver } from '@angular/core';
-
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
 
@@ -12,7 +10,3 @@ export const raf = (h: any): any => {
   }
   return setTimeout(h);
 };
-
-export const isComponentFactoryResolver = (item: any): item is ComponentFactoryResolver => {
-  return !!item.resolveComponentFactory;
-};

angular/test/README.md

@@ -2,9 +2,21 @@
 
 Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
 
+## Syncing Local Changes
+
+The Angular test app supports syncing your locally built changes for validation.
+
+1. Build the `core` and `packages/angular` projects using `npm run build`.
+2. [Build the Angular test app](#test-app-build-structure).
+3. Navigate to the built test app.
+4. Install dependencies using `npm install`.
+5. Sync your local changes using `npm run sync`.
+
+From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).
+
 ## Application Cache
 
-Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. When testing changes by directly modifying Ionic's source code in `node_modules`, you may need to manually clear the `.angular` cache and restart the local server every time you make a change. As a result, it may be desirable to disable the `.angular` cache while making changes to the code.
+Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the `.angular` cache is disabled by default in the test app projects.
 
 See https://angular.io/cli/cache for more information.
 
@@ -22,6 +34,8 @@ ng cache disable
 ng cache enable
 ```
 
+> Note: You will need to delete the `.angular` cache and restart the dev server every time you want to sync local changes of Ionic.
+
 ## Test App Build Structure
 
 Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
@@ -86,4 +100,4 @@ Note: You may encounter some other peer dependency issues not covered by the Ang
 7. Open `./github/workflows/build.yml` and find the `test-angular-e2e` job.
 8. Find the `apps` field under `matrix`.
 9. Add "ng14" to the `apps` field.
-10. Committ these changes and push.
+10. Commit these changes and push.

angular/test/apps/ng12/package.json

@@ -1,68 +0,0 @@
-{
-  "name": "ionic-angular-test-app",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "sync:build": "sh scripts/build-ionic.sh",
-    "sync": "sh scripts/sync.sh",
-    "build": "ng build --configuration production --no-progress",
-    "lint": "ng lint",
-    "postinstall": "ngcc",
-    "serve:ssr": "node dist/test-app/server/main.js",
-    "build:ssr": "ng build --prod && ng run test-app:server:production",
-    "dev:ssr": "ng run test-app:serve-ssr",
-    "prerender": "ng run test-app:prerender",
-    "cy.open": "cypress open",
-    "cy.run": "cypress run",
-    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
-    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
-  },
-  "dependencies": {
-    "@angular/animations": "^12.2.16",
-    "@angular/common": "^12.2.16",
-    "@angular/compiler": "^12.2.16",
-    "@angular/core": "^12.2.16",
-    "@angular/forms": "^12.2.16",
-    "@angular/platform-browser": "^12.2.16",
-    "@angular/platform-browser-dynamic": "^12.2.16",
-    "@angular/platform-server": "^12.2.16",
-    "@angular/router": "^12.2.16",
-    "@ionic/angular": "^6.1.15",
-    "@ionic/angular-server": "^6.1.15",
-    "@nguniversal/express-engine": "^12.1.3",
-    "core-js": "^2.6.11",
-    "express": "^4.15.2",
-    "ionicons": "^6.0.4",
-    "rxjs": "^6.5.5",
-    "tslib": "^2.0.0",
-    "typescript-eslint-language-service": "^4.1.5",
-    "zone.js": "^0.11.4"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.18",
-    "@angular-eslint/builder": "^12.7.0",
-    "@angular-eslint/eslint-plugin": "^12.7.0",
-    "@angular-eslint/eslint-plugin-template": "^12.7.0",
-    "@angular-eslint/schematics": "^12.7.0",
-    "@angular-eslint/template-parser": "^12.7.0",
-    "@angular/cli": "^12.2.16",
-    "@angular/compiler-cli": "^12.2.16",
-    "@angular/language-service": "^12.2.16",
-    "@nguniversal/builders": "^12.1.3",
-    "@types/express": "^4.17.7",
-    "@types/node": "^12.12.54",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
-    "concurrently": "^6.0.0",
-    "cypress": "^10.2.0",
-    "eslint": "^7.26.0",
-    "ts-loader": "^6.2.2",
-    "ts-node": "^8.3.0",
-    "typescript": "~4.3.5",
-    "wait-on": "^5.2.1",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.2"
-  }
-}

angular/test/apps/ng12/src/app/form/form.component.ts

@@ -1,51 +0,0 @@
-import { Component } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'app-form',
-  templateUrl: './form.component.html',
-})
-export class FormComponent {
-
-  submitted = 'false';
-  profileForm: FormGroup;
-  outsideToggle = new FormControl(true);
-
-  constructor(fb: FormBuilder) {
-    this.profileForm = fb.group({
-      datetime: ['2010-08-20', Validators.required],
-      select: [undefined, Validators.required],
-      toggle: [false],
-      input: ['', Validators.required],
-      input2: ['Default Value'],
-      checkbox: [false],
-    }, {
-      updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
-    });
-  }
-
-  setTouched() {
-    const formControl = this.profileForm.get('input');
-    formControl.markAsTouched();
-  }
-
-  onSubmit() {
-    this.submitted = 'true';
-  }
-
-  setValues() {
-    this.profileForm.patchValue({
-      datetime: '2010-08-20',
-      select: 'nes',
-      toggle: true,
-      input: 'Some value',
-      input2: 'Another values',
-      checkbox: true
-    });
-  }
-
-  markAllAsTouched() {
-    this.profileForm.markAllAsTouched();
-  }
-
-}

angular/test/apps/ng12/src/app/modal-example/modal-example.component.ts

@@ -1,74 +0,0 @@
-import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
-
-@Component({
-  selector: 'app-modal-example',
-  templateUrl: './modal-example.component.html',
-})
-export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
-
-  @Input() value: string;
-
-  form = new FormGroup({
-    select: new FormControl([])
-  });
-
-  valueFromParams: string;
-  onInit = 0;
-  willEnter = 0;
-  didEnter = 0;
-  willLeave = 0;
-  didLeave = 0;
-
-  modal: HTMLElement;
-
-  constructor(
-    private modalCtrl: ModalController,
-    @Optional() public nav: IonNav,
-    navParams: NavParams
-  ) {
-    this.valueFromParams = navParams.get('prop');
-  }
-
-  ngOnInit() {
-    NgZone.assertInAngularZone();
-    this.onInit++;
-  }
-
-  setSelect(value: null | undefined) {
-    this.form.get('select').setValue(value);
-  }
-
-  ionViewWillEnter() {
-    if (this.onInit !== 1) {
-      throw new Error('ngOnInit was not called');
-    }
-    NgZone.assertInAngularZone();
-    this.willEnter++;
-  }
-  ionViewDidEnter() {
-    NgZone.assertInAngularZone();
-    this.didEnter++;
-  }
-  ionViewWillLeave() {
-    NgZone.assertInAngularZone();
-    this.willLeave++;
-  }
-  ionViewDidLeave() {
-    NgZone.assertInAngularZone();
-    this.didLeave++;
-  }
-  closeModal() {
-    this.modalCtrl.dismiss();
-  }
-
-  push() {
-    this.nav.push(ModalExampleComponent, {
-      'value': 'pushed!'
-    });
-  }
-  pop() {
-    this.nav.pop();
-  }
-}

angular/test/apps/ng12/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "importHelpers": true,
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "module": "es2020",
-    "target": "es2015",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ],
-    "plugins": [
-      {
-        "name": "typescript-eslint-language-service"
-      }
-    ]
-  }
-}

angular/test/apps/ng13/package.json

@@ -1,68 +0,0 @@
-{
-  "name": "ionic-angular-test-app",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "sync:build": "sh scripts/build-ionic.sh",
-    "sync": "sh scripts/sync.sh",
-    "build": "ng build --configuration production --no-progress",
-    "lint": "ng lint",
-    "postinstall": "ngcc",
-    "serve:ssr": "node dist/test-app/server/main.js",
-    "build:ssr": "ng build --prod && ng run test-app:server:production",
-    "dev:ssr": "ng run test-app:serve-ssr",
-    "prerender": "ng run test-app:prerender",
-    "cy.open": "cypress open",
-    "cy.run": "cypress run",
-    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
-    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
-  },
-  "dependencies": {
-    "@angular/animations": "^13.1.3",
-    "@angular/common": "^13.1.3",
-    "@angular/compiler": "^13.1.3",
-    "@angular/core": "^13.1.3",
-    "@angular/forms": "^13.1.3",
-    "@angular/platform-browser": "^13.1.3",
-    "@angular/platform-browser-dynamic": "^13.1.3",
-    "@angular/platform-server": "^13.1.3",
-    "@angular/router": "^13.1.3",
-    "@ionic/angular": "^6.1.15",
-    "@ionic/angular-server": "^6.1.15",
-    "@nguniversal/express-engine": "^13.1.1",
-    "core-js": "^2.6.11",
-    "express": "^4.15.2",
-    "ionicons": "^6.0.4",
-    "rxjs": "^6.5.5",
-    "tslib": "^2.0.0",
-    "typescript-eslint-language-service": "^4.1.5",
-    "zone.js": "^0.11.4"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^13.1.4",
-    "@angular-eslint/builder": "13.0.1",
-    "@angular-eslint/eslint-plugin": "13.0.1",
-    "@angular-eslint/eslint-plugin-template": "13.0.1",
-    "@angular-eslint/schematics": "13.0.1",
-    "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cli": "^13.1.4",
-    "@angular/compiler-cli": "^13.1.3",
-    "@angular/language-service": "^13.1.3",
-    "@nguniversal/builders": "^13.0.2",
-    "@types/express": "^4.17.7",
-    "@types/node": "^12.12.54",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
-    "concurrently": "^6.0.0",
-    "cypress": "^10.2.0",
-    "eslint": "^7.26.0",
-    "ts-loader": "^6.2.2",
-    "ts-node": "^8.3.0",
-    "typescript": "~4.6.0",
-    "wait-on": "^5.2.1",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.2"
-  }
-}

angular/test/apps/ng13/src/app/form/form.component.ts

@@ -1,51 +0,0 @@
-import { Component } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'app-form',
-  templateUrl: './form.component.html',
-})
-export class FormComponent {
-
-  submitted = 'false';
-  profileForm: FormGroup;
-  outsideToggle = new FormControl(true);
-
-  constructor(fb: FormBuilder) {
-    this.profileForm = fb.group({
-      datetime: ['2010-08-20', Validators.required],
-      select: [undefined, Validators.required],
-      toggle: [false],
-      input: ['', Validators.required],
-      input2: ['Default Value'],
-      checkbox: [false],
-    }, {
-      updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
-    });
-  }
-
-  setTouched() {
-    const formControl = this.profileForm.get('input');
-    formControl.markAsTouched();
-  }
-
-  onSubmit() {
-    this.submitted = 'true';
-  }
-
-  setValues() {
-    this.profileForm.patchValue({
-      datetime: '2010-08-20',
-      select: 'nes',
-      toggle: true,
-      input: 'Some value',
-      input2: 'Another values',
-      checkbox: true
-    });
-  }
-
-  markAllAsTouched() {
-    this.profileForm.markAllAsTouched();
-  }
-
-}

angular/test/apps/ng13/src/app/modal-example/modal-example.component.ts

@@ -1,74 +0,0 @@
-import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
-
-@Component({
-  selector: 'app-modal-example',
-  templateUrl: './modal-example.component.html',
-})
-export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
-
-  @Input() value: string;
-
-  form = new FormGroup({
-    select: new FormControl([])
-  });
-
-  valueFromParams: string;
-  onInit = 0;
-  willEnter = 0;
-  didEnter = 0;
-  willLeave = 0;
-  didLeave = 0;
-
-  modal: HTMLElement;
-
-  constructor(
-    private modalCtrl: ModalController,
-    @Optional() public nav: IonNav,
-    navParams: NavParams
-  ) {
-    this.valueFromParams = navParams.get('prop');
-  }
-
-  ngOnInit() {
-    NgZone.assertInAngularZone();
-    this.onInit++;
-  }
-
-  setSelect(value: null | undefined) {
-    this.form.get('select').setValue(value);
-  }
-
-  ionViewWillEnter() {
-    if (this.onInit !== 1) {
-      throw new Error('ngOnInit was not called');
-    }
-    NgZone.assertInAngularZone();
-    this.willEnter++;
-  }
-  ionViewDidEnter() {
-    NgZone.assertInAngularZone();
-    this.didEnter++;
-  }
-  ionViewWillLeave() {
-    NgZone.assertInAngularZone();
-    this.willLeave++;
-  }
-  ionViewDidLeave() {
-    NgZone.assertInAngularZone();
-    this.didLeave++;
-  }
-  closeModal() {
-    this.modalCtrl.dismiss();
-  }
-
-  push() {
-    this.nav.push(ModalExampleComponent, {
-      'value': 'pushed!'
-    });
-  }
-  pop() {
-    this.nav.pop();
-  }
-}

angular/test/apps/ng13/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "importHelpers": true,
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "module": "es2020",
-    "target": "es2015",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ],
-    "plugins": [
-      {
-        "name": "typescript-eslint-language-service"
-      }
-    ]
-  }
-}

angular/test/apps/ng14/package.json

@@ -31,12 +31,11 @@
     "@angular/router": "^14.1.0",
     "@ionic/angular": "^6.1.15",
     "@ionic/angular-server": "^6.1.15",
-    "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
     "ionicons": "^6.0.4",
-    "rxjs": "^6.5.5",
-    "tslib": "^2.0.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
     "typescript-eslint-language-service": "^4.1.5",
     "zone.js": "^0.11.4"
   },
@@ -53,8 +52,8 @@
     "@nguniversal/builders": "^14.0.3",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "concurrently": "^6.0.0",
     "cypress": "^10.2.0",
     "eslint": "^7.26.0",
@@ -64,5 +63,8 @@
     "wait-on": "^5.2.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 16"
   }
 }

angular/test/apps/ng14/src/app/app.component.html

@@ -1,3 +1,3 @@
 <ion-app>
-  <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+  <ion-router-outlet></ion-router-outlet>
 </ion-app>

angular/test/apps/ng14/src/app/app.component.ts

@@ -1,11 +1,8 @@
-import { Component, EnvironmentInjector } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-
-  constructor(public environmentInjector: EnvironmentInjector) { }
-}
+export class AppComponent { }

angular/test/apps/ng14/src/app/version-test/version-test-routing.module.ts

@@ -3,12 +3,7 @@ import { RouterModule } from "@angular/router";
 
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      {
-        path: 'standalone',
-        loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
-      }
-    ])
+    RouterModule.forChild([])
   ],
   exports: [RouterModule]
 })

angular/test/apps/ng15/e2e/src/standalone-routing.spec.ts

@@ -1,9 +0,0 @@
-describe('Routing with Standalone Components', () => {
-  beforeEach(() => {
-    cy.visit('/version-test/standalone');
-  });
-
-  it('should render the component', () => {
-    cy.get('ion-content').contains('This is a standalone component rendered from a route.');
-  });
-});

angular/test/apps/ng15/package.json

@@ -42,15 +42,15 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^15.0.0",
-    "@angular-eslint/builder": "^15.0.0-alpha.0",
-    "@angular-eslint/eslint-plugin": "^15.0.0-alpha.0",
-    "@angular-eslint/eslint-plugin-template": "^15.0.0-alpha.0",
-    "@angular-eslint/schematics": "^15.0.0-alpha.0",
-    "@angular-eslint/template-parser": "^15.0.0-alpha.0",
+    "@angular-eslint/builder": "^15.0.0",
+    "@angular-eslint/eslint-plugin": "^15.0.0",
+    "@angular-eslint/eslint-plugin-template": "^15.0.0",
+    "@angular-eslint/schematics": "^15.0.0",
+    "@angular-eslint/template-parser": "^15.0.0",
     "@angular/cli": "^15.0.0",
     "@angular/compiler-cli": "^15.0.0",
     "@angular/language-service": "^15.0.0",
-    "@nguniversal/builders": "^15.0.0-next.0",
+    "@nguniversal/builders": "^15.0.0",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
     "@typescript-eslint/eslint-plugin": "4.28.2",
@@ -64,5 +64,8 @@
     "wait-on": "^5.2.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 16"
   }
 }

angular/test/apps/ng15/src/app/app.component.html

@@ -1,3 +1,3 @@
 <ion-app>
-  <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
+  <ion-router-outlet></ion-router-outlet>
 </ion-app>

angular/test/apps/ng15/src/app/app.component.ts

@@ -1,11 +1,8 @@
-import { Component, EnvironmentInjector } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-
-  constructor(public environmentInjector: EnvironmentInjector) { }
-}
+export class AppComponent { }

angular/test/apps/ng15/src/app/version-test/standalone/standalone.component.html

@@ -1,4 +0,0 @@
-<ion-content>
-  <p>This is a standalone component rendered from a route.</p>
-  <ion-button routerLink="/">Return home</ion-button>
-</ion-content>

angular/test/apps/ng15/src/app/version-test/standalone/standalone.component.ts

@@ -1,12 +0,0 @@
-import { Component } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-standalone',
-  templateUrl: './standalone.component.html',
-  standalone: true,
-  imports: [IonicModule, RouterModule]
-})
-export class StandaloneComponent { }

angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts

@@ -3,12 +3,7 @@ import { RouterModule } from "@angular/router";
 
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      {
-        path: 'standalone',
-        loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
-      }
-    ])
+    RouterModule.forChild([])
   ],
   exports: [RouterModule]
 })

angular/test/base/angular.json

@@ -33,9 +33,7 @@
                 "output": "./svg"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -89,10 +87,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "server": {
@@ -143,6 +138,9 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "cache": {
+      "enabled": false
+    }
   }
 }

angular/test/base/e2e/src/keep-contents-mounted.spec.ts

@@ -27,6 +27,12 @@ describe('overlays - keepContentsMounted', () => {
 
       cy.get('ion-modal ion-content').should('exist');
     });
+
+    it('should has ion-delegate-host on mount', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('ion-modal .ion-delegate-host').should('exist');
+    });
   })
   describe('popover', () => {
     it('should not mount component if false', () => {

angular/test/base/e2e/src/standalone-routing.spec.ts

@@ -1,6 +1,6 @@
 describe('Routing with Standalone Components', () => {
   beforeEach(() => {
-    cy.visit('/version-test/standalone');
+    cy.visit('/standalone');
   });
 
   it('should render the component', () => {

angular/test/base/scripts/sync.sh

@@ -13,3 +13,6 @@ npm pack ../../../../packages/angular-server/dist
 
 # Install Dependencies
 npm install *.tgz --no-save
+
+# Delete Angular cache directory
+rm -rf .angular/

angular/test/base/src/app/app-routing.module.ts

@@ -39,6 +39,7 @@ const routes: Routes = [
   { path: 'router-link-page', component: RouterLinkPageComponent },
   { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
   { path: 'router-link-page3', component: RouterLinkPage3Component },
+  { path: 'standalone', loadComponent: () => import('./standalone/standalone.component').then(c => c.StandaloneComponent) },
   { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
   {
     path: 'navigation',

angular/test/base/src/styles.css

@@ -1,14 +1,14 @@
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import '~@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
-@import "~@ionic/angular/css/structure.css";
-@import "~@ionic/angular/css/typography.css";
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
-@import "~@ionic/angular/css/float-elements.css";
-@import "~@ionic/angular/css/text-alignment.css";
-@import "~@ionic/angular/css/text-transformation.css";
-@import "~@ionic/angular/css/flex-utils.css";
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';

core/api.txt

@@ -392,6 +392,7 @@ ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,fal
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,firstDayOfWeek,number,0,false,false
+ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
 ion-datetime,prop,hourCycle,"h12" | "h23" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,isDateEnabled,((dateIsoString: string) => boolean) | undefined,undefined,false,false
@@ -1162,7 +1163,7 @@ ion-searchbar,event,ionCancel,void,true
 ion-searchbar,event,ionChange,SearchbarChangeEventDetail,true
 ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
-ion-searchbar,event,ionInput,KeyboardEvent | null,true
+ion-searchbar,event,ionInput,SearchbarInputEventDetail,true
 ion-searchbar,css-prop,--background
 ion-searchbar,css-prop,--border-radius
 ion-searchbar,css-prop,--box-shadow
@@ -1420,6 +1421,7 @@ ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,fals
 ion-toast,prop,icon,string | undefined,undefined,false,false
 ion-toast,prop,isOpen,boolean,false,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false
+ion-toast,prop,layout,"baseline" | "stacked",'baseline',false,false
 ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
 ion-toast,prop,mode,"ios" | "md",undefined,false,false

core/package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-rc.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.0-beta.4",
+      "version": "7.0.0-rc.4",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.0.0",
-        "ionicons": "^6.1.1",
+        "@stencil/core": "^3.1.0",
+        "ionicons": "^7.0.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -18,12 +18,12 @@
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.29.0",
+        "@playwright/test": "^1.32.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.5.0",
         "@stencil/react-output-target": "^0.4.0",
-        "@stencil/sass": "^3.0.0-dev.2023.2.16.0",
+        "@stencil/sass": "^3.0.0",
         "@stencil/vue-output-target": "^0.7.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
@@ -962,15 +962,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -1510,19 +1501,22 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.29.2.tgz",
-      "integrity": "sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz",
+      "integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.32.0"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
         "node": ">=14"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1600,9 +1594,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.0.0.tgz",
-      "integrity": "sha512-MYhrOlnzAtBUJH0FEggaP2pwm5GUvkB4wYRpZZFtUzGXAPamvrsreUf8QsGe0C4NdFdk8NlUauFxEEGE3z1+Sw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-Zfe+evaw9m2L/HkTO97Hu8go2ThXrObyWkVqa7V3HjTnq+8TUd/nwld9PC0bOItC/eyMRXsWHdEDCpJAZ1tEVQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1621,9 +1615,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.0-dev.2023.2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0-dev.2023.2.16.0.tgz",
-      "integrity": "sha512-9kgpaN8WTtRXZq+V7W5M/+UHTrcywYHhkH4VMwgfjXSglYVfHu6So+HsC3GGmPcx7WE4p8/ClaaHkWKhx6BYsQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
+      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
@@ -2576,36 +2570,6 @@
         "url": "https://tidelift.com/funding/github/npm/autoprefixer"
       }
     },
-    "node_modules/autoprefixer/node_modules/postcss": {
-      "version": "7.0.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/postcss"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/axe-core": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz",
@@ -3658,15 +3622,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dir-glob/node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -5299,9 +5254,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
-      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.0.0.tgz",
+      "integrity": "sha512-5G9gBxaUfJm0aAr/Kg5Eb/d7d+pMC65yiHjlkGATLrHSZgAzlc9l6ho0dCSdfq3wGef2QiZeNsvyChPVggfXwQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
@@ -8195,14 +8150,14 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.29.2.tgz",
-      "integrity": "sha512-hKBYJUtdmYzcjdhYDkP9WGtORwwZBBKAW8+Lz7sr0ZMxtJr04ASXVzH5eBWtDkdb0c3LLFsehfPBTRfvlfKJOA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.0.tgz",
+      "integrity": "sha512-zQVzxTGoC/ak2Zu0l3CeBGQ6z5oOka5ecUOk+5QbmAerih6CaVsjY9BjjhiN+UOImd3xLiNeCcmLEWcXlz1Dlg==",
       "dev": true,
       "hasInstallScript": true,
       "peer": true,
       "dependencies": {
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.32.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8212,9 +8167,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.29.2.tgz",
-      "integrity": "sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz",
+      "integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==",
       "dev": true,
       "bin": {
         "playwright": "cli.js"
@@ -8353,77 +8308,6 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
-    "node_modules/postcss/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/postcss/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
-    },
-    "node_modules/postcss/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/postcss/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss/node_modules/supports-color": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -11099,14 +10983,6 @@
         "get-package-type": "^0.1.0",
         "js-yaml": "^3.13.1",
         "resolve-from": "^5.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-          "dev": true
-        }
       }
     },
     "@istanbuljs/schema": {
@@ -11522,13 +11398,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.29.2.tgz",
-      "integrity": "sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz",
+      "integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
-        "playwright-core": "1.29.2"
+        "fsevents": "2.3.2",
+        "playwright-core": "1.32.0"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11590,9 +11467,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.0.0.tgz",
-      "integrity": "sha512-MYhrOlnzAtBUJH0FEggaP2pwm5GUvkB4wYRpZZFtUzGXAPamvrsreUf8QsGe0C4NdFdk8NlUauFxEEGE3z1+Sw=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-Zfe+evaw9m2L/HkTO97Hu8go2ThXrObyWkVqa7V3HjTnq+8TUd/nwld9PC0bOItC/eyMRXsWHdEDCpJAZ1tEVQ=="
     },
     "@stencil/react-output-target": {
       "version": "0.4.0",
@@ -11602,9 +11479,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.0-dev.2023.2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0-dev.2023.2.16.0.tgz",
-      "integrity": "sha512-9kgpaN8WTtRXZq+V7W5M/+UHTrcywYHhkH4VMwgfjXSglYVfHu6So+HsC3GGmPcx7WE4p8/ClaaHkWKhx6BYsQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
+      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
       "dev": true,
       "requires": {}
     },
@@ -12264,28 +12141,6 @@
         "num2fraction": "^1.2.2",
         "postcss": "^7.0.32",
         "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "axe-core": {
@@ -13054,14 +12909,6 @@
       "dev": true,
       "requires": {
         "path-type": "^4.0.0"
-      },
-      "dependencies": {
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-          "dev": true
-        }
       }
     },
     "dom-serializer": {
@@ -14305,9 +14152,9 @@
       }
     },
     "ionicons": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
-      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.0.0.tgz",
+      "integrity": "sha512-5G9gBxaUfJm0aAr/Kg5Eb/d7d+pMC65yiHjlkGATLrHSZgAzlc9l6ho0dCSdfq3wGef2QiZeNsvyChPVggfXwQ==",
       "requires": {
         "@stencil/core": "^2.18.0"
       },
@@ -16428,19 +16275,19 @@
       }
     },
     "playwright": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.29.2.tgz",
-      "integrity": "sha512-hKBYJUtdmYzcjdhYDkP9WGtORwwZBBKAW8+Lz7sr0ZMxtJr04ASXVzH5eBWtDkdb0c3LLFsehfPBTRfvlfKJOA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.0.tgz",
+      "integrity": "sha512-zQVzxTGoC/ak2Zu0l3CeBGQ6z5oOka5ecUOk+5QbmAerih6CaVsjY9BjjhiN+UOImd3xLiNeCcmLEWcXlz1Dlg==",
       "dev": true,
       "peer": true,
       "requires": {
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.32.0"
       }
     },
     "playwright-core": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.29.2.tgz",
-      "integrity": "sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz",
+      "integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==",
       "dev": true
     },
     "postcss": {
@@ -16454,64 +16301,6 @@
         "supports-color": "^6.1.0"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-rc.4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,8 +31,8 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.0.0",
-    "ionicons": "^6.1.1",
+    "@stencil/core": "^3.1.0",
+    "ionicons": "^7.0.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
@@ -40,12 +40,12 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.29.0",
+    "@playwright/test": "^1.32.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.5.0",
     "@stencil/react-output-target": "^0.4.0",
-    "@stencil/sass": "^3.0.0-dev.2023.2.16.0",
+    "@stencil/sass": "^3.0.0",
     "@stencil/vue-output-target": "^0.7.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",

core/src/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -32,14 +32,14 @@ import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, Rang
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
 import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
-import { SearchbarChangeEventDetail } from "./components/searchbar/searchbar-interface";
+import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail } from "./components/segment/segment-interface";
 import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-import { ToastButton, ToastPosition } from "./components/toast/toast-interface";
+import { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
 export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -68,14 +68,14 @@ export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, Rang
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
 export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
-export { SearchbarChangeEventDetail } from "./components/searchbar/searchbar-interface";
+export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail } from "./components/segment/segment-interface";
 export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-export { ToastButton, ToastPosition } from "./components/toast/toast-interface";
+export { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export namespace Components {
     interface IonAccordion {
@@ -96,7 +96,7 @@ export namespace Components {
          */
         "toggleIcon": string;
         /**
-          * The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.
+          * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
          */
         "toggleIconSlot": 'start' | 'end';
         /**
@@ -272,7 +272,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -619,11 +619,11 @@ export namespace Components {
          */
         "indeterminate": boolean;
         /**
-          * How to pack the label and checkbox within a line. `'start'`: The label and checkbox will appear on the left in LTR and on the right in RTL. `'end'`: The label and checkbox will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `'start'`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `'end'`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement": 'start' | 'end' | 'fixed';
         /**
@@ -854,6 +854,10 @@ export namespace Components {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek": number;
+        /**
+          * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
+         */
+        "highlightedDates"?: DatetimeHighlight[] | DatetimeHighlightCallback;
         /**
           * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
          */
@@ -867,7 +871,7 @@ export namespace Components {
          */
         "isDateEnabled"?: (dateIsoString: string) => boolean;
         /**
-          * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.
+          * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
          */
         "locale": string;
         /**
@@ -899,11 +903,11 @@ export namespace Components {
          */
         "name": string;
         /**
-          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.
+          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
          */
         "preferWheel": boolean;
         /**
-          * Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.
+          * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
          */
         "presentation": DatetimePresentation;
         /**
@@ -1131,7 +1135,7 @@ export namespace Components {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -1194,7 +1198,7 @@ export namespace Components {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -1214,7 +1218,7 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -1330,7 +1334,7 @@ export namespace Components {
          */
         "download": string | undefined;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -1550,7 +1554,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -2068,7 +2072,7 @@ export namespace Components {
     }
     interface IonPopover {
         /**
-          * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
+          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
          */
         "alignment"?: PositionAlign;
         /**
@@ -2160,7 +2164,7 @@ export namespace Components {
          */
         "presentFromTrigger": (event?: any, focusDescendant?: boolean) => Promise<void>;
         /**
-          * Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
+          * Describes what to position the popover relative to. If `"trigger"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `"event"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
          */
         "reference": PositionReference;
         /**
@@ -2168,11 +2172,11 @@ export namespace Components {
          */
         "showBackdrop": boolean;
         /**
-          * Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.
+          * Describes which side of the `reference` point to position the popover on. The `"start"` and `"end"` values are RTL-aware, and the `"left"` and `"right"` values are not.
          */
         "side": PositionSide;
         /**
-          * Describes how to calculate the popover width. If `'cover'`, the popover width will match the width of the trigger. If `'auto'`, the popover width will be determined by the content in the popover.
+          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover.
          */
         "size": PopoverSize;
         /**
@@ -2184,7 +2188,7 @@ export namespace Components {
          */
         "trigger": string | undefined;
         /**
-          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
+          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
          */
         "triggerAction": TriggerAction;
     }
@@ -2224,11 +2228,11 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * How to pack the label and radio within a line. `'start'`: The label and radio will appear on the left in LTR and on the right in RTL. `'end'`: The label and radio will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and radio will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `'start'`: The label will appear to the left of the radio in LTR and to the right in RTL. `'end'`: The label will appear to the right of the radio in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement": 'start' | 'end' | 'fixed';
         /**
@@ -2286,7 +2290,7 @@ export namespace Components {
          */
         "dualKnobs": boolean;
         /**
-          * Where to place the label relative to the range. `'start'`: The label will appear to the left of the range in LTR and to the right in RTL. `'end'`: The label will appear to the right of the range in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement": 'start' | 'end' | 'fixed';
         /**
@@ -2378,7 +2382,7 @@ export namespace Components {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -2386,7 +2390,7 @@ export namespace Components {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -2674,7 +2678,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -2686,7 +2690,7 @@ export namespace Components {
          */
         "interfaceOptions": any;
         /**
-          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and select will appear on the left in LTR and on the right in RTL. `'end'`: The label and select will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and select will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
@@ -2694,7 +2698,7 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the select. `'start'`: The label will appear to the left of the select in LTR and to the right in RTL. `'end'`: The label will appear to the right of the select in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `'stacked'`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `'floating'` or `'stacked'` we recommend initializing the select with either a `value` or a `placeholder`.
+          * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -2735,7 +2739,7 @@ export namespace Components {
          */
         "shape"?: 'round';
         /**
-          * the value of the select.
+          * The value of the select.
          */
         "value"?: any | null;
     }
@@ -2857,7 +2861,7 @@ export namespace Components {
          */
         "href": string | undefined;
         /**
-          * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
+          * Set the layout of the text and icon in the tab bar. It defaults to `"icon-top"`.
          */
         "layout"?: TabButtonLayout;
         /**
@@ -2960,7 +2964,7 @@ export namespace Components {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -2980,7 +2984,7 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the textarea. `'start'`: The label will appear to the left of the textarea in LTR and to the right in RTL. `'end'`: The label will appear to the right of the textarea in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `'stacked'`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -3105,12 +3109,16 @@ export namespace Components {
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
         "keyboardClose": boolean;
+        /**
+          * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
+         */
+        "layout": ToastLayout;
         /**
           * Animation to use when the toast is dismissed.
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -3161,11 +3169,11 @@ export namespace Components {
          */
         "enableOnOffLabels": boolean | undefined;
         /**
-          * How to pack the label and toggle within a line. `'start'`: The label and toggle will appear on the left in LTR and on the right in RTL. `'end'`: The label and toggle will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the toggle in LTR and to the right in RTL. `'end'`: The label will appear to the right of the toggle in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement": 'start' | 'end' | 'fixed';
         /**
@@ -4040,7 +4048,7 @@ declare namespace LocalJSX {
          */
         "toggleIcon"?: string;
         /**
-          * The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`.
+          * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
          */
         "toggleIconSlot"?: 'start' | 'end';
         /**
@@ -4227,7 +4235,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -4621,11 +4629,11 @@ declare namespace LocalJSX {
          */
         "indeterminate"?: boolean;
         /**
-          * How to pack the label and checkbox within a line. `'start'`: The label and checkbox will appear on the left in LTR and on the right in RTL. `'end'`: The label and checkbox will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `'start'`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `'end'`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed';
         /**
@@ -4844,6 +4852,10 @@ declare namespace LocalJSX {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek"?: number;
+        /**
+          * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
+         */
+        "highlightedDates"?: DatetimeHighlight[] | DatetimeHighlightCallback;
         /**
           * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
          */
@@ -4857,7 +4869,7 @@ declare namespace LocalJSX {
          */
         "isDateEnabled"?: (dateIsoString: string) => boolean;
         /**
-          * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.
+          * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
          */
         "locale"?: string;
         /**
@@ -4917,11 +4929,11 @@ declare namespace LocalJSX {
          */
         "onIonValueChange"?: (event: IonDatetimeCustomEvent<DatetimeChangeEventDetail>) => void;
         /**
-          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.
+          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
          */
         "preferWheel"?: boolean;
         /**
-          * Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.
+          * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
          */
         "presentation"?: DatetimePresentation;
         /**
@@ -5157,7 +5169,7 @@ declare namespace LocalJSX {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -5220,7 +5232,7 @@ declare namespace LocalJSX {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -5236,7 +5248,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -5276,7 +5288,7 @@ declare namespace LocalJSX {
          */
         "onIonBlur"?: (event: IonInputCustomEvent<FocusEvent>) => void;
         /**
-          * The `ionChange` event is fired for `<ion-input>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
+          * The `ionChange` event is fired for `<ion-input>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
          */
         "onIonChange"?: (event: IonInputCustomEvent<InputChangeEventDetail>) => void;
         /**
@@ -5368,7 +5380,7 @@ declare namespace LocalJSX {
          */
         "download"?: string | undefined;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -5572,7 +5584,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -5795,7 +5807,7 @@ declare namespace LocalJSX {
          */
         "onDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
         /**
-          * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
+          * Emitted after the modal has presented. Shorthand for ionModalDidPresent.
          */
         "onDidPresent"?: (event: IonModalCustomEvent<void>) => void;
         /**
@@ -6041,7 +6053,7 @@ declare namespace LocalJSX {
     }
     interface IonPopover {
         /**
-          * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
+          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
          */
         "alignment"?: PositionAlign;
         /**
@@ -6145,7 +6157,7 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonPopoverCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
-          * Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
+          * Describes what to position the popover relative to. If `"trigger"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `"event"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
          */
         "reference"?: PositionReference;
         /**
@@ -6153,11 +6165,11 @@ declare namespace LocalJSX {
          */
         "showBackdrop"?: boolean;
         /**
-          * Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not.
+          * Describes which side of the `reference` point to position the popover on. The `"start"` and `"end"` values are RTL-aware, and the `"left"` and `"right"` values are not.
          */
         "side"?: PositionSide;
         /**
-          * Describes how to calculate the popover width. If `'cover'`, the popover width will match the width of the trigger. If `'auto'`, the popover width will be determined by the content in the popover.
+          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover.
          */
         "size"?: PopoverSize;
         /**
@@ -6169,7 +6181,7 @@ declare namespace LocalJSX {
          */
         "trigger"?: string | undefined;
         /**
-          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
+          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
          */
         "triggerAction"?: TriggerAction;
     }
@@ -6209,11 +6221,11 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * How to pack the label and radio within a line. `'start'`: The label and radio will appear on the left in LTR and on the right in RTL. `'end'`: The label and radio will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and radio will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `'start'`: The label will appear to the left of the radio in LTR and to the right in RTL. `'end'`: The label will appear to the right of the radio in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed';
         /**
@@ -6289,7 +6301,7 @@ declare namespace LocalJSX {
          */
         "dualKnobs"?: boolean;
         /**
-          * Where to place the label relative to the range. `'start'`: The label will appear to the left of the range in LTR and to the right in RTL. `'end'`: The label will appear to the right of the range in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed';
         /**
@@ -6409,7 +6421,7 @@ declare namespace LocalJSX {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -6417,7 +6429,7 @@ declare namespace LocalJSX {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -6602,7 +6614,7 @@ declare namespace LocalJSX {
          */
         "onIonCancel"?: (event: IonSearchbarCustomEvent<void>) => void;
         /**
-          * The `ionChange` event is fired for `<ion-searchbar>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  The `ionChange` event is fired when the element loses focus after its value has been modified. This includes modifications made when clicking the clear or cancel buttons.
+          * The `ionChange` event is fired for `<ion-searchbar>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons.
          */
         "onIonChange"?: (event: IonSearchbarCustomEvent<SearchbarChangeEventDetail>) => void;
         /**
@@ -6616,7 +6628,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the `value` of the `ion-searchbar` element has changed.
          */
-        "onIonInput"?: (event: IonSearchbarCustomEvent<KeyboardEvent | null>) => void;
+        "onIonInput"?: (event: IonSearchbarCustomEvent<SearchbarInputEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
@@ -6732,7 +6744,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -6744,7 +6756,7 @@ declare namespace LocalJSX {
          */
         "interfaceOptions"?: any;
         /**
-          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and select will appear on the left in LTR and on the right in RTL. `'end'`: The label and select will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and select will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
@@ -6752,7 +6764,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the select. `'start'`: The label will appear to the left of the select in LTR and to the right in RTL. `'end'`: The label will appear to the right of the select in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `'stacked'`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `'floating'` or `'stacked'` we recommend initializing the select with either a `value` or a `placeholder`.
+          * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -6812,7 +6824,7 @@ declare namespace LocalJSX {
          */
         "shape"?: 'round';
         /**
-          * the value of the select.
+          * The value of the select.
          */
         "value"?: any | null;
     }
@@ -6935,7 +6947,7 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
+          * Set the layout of the text and icon in the tab bar. It defaults to `"icon-top"`.
          */
         "layout"?: TabButtonLayout;
         /**
@@ -7038,7 +7050,7 @@ declare namespace LocalJSX {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -7054,7 +7066,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the textarea. `'start'`: The label will appear to the left of the textarea in LTR and to the right in RTL. `'end'`: The label will appear to the right of the textarea in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `'stacked'`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -7193,12 +7205,16 @@ declare namespace LocalJSX {
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
         "keyboardClose"?: boolean;
+        /**
+          * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
+         */
+        "layout"?: ToastLayout;
         /**
           * Animation to use when the toast is dismissed.
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -7269,11 +7285,11 @@ declare namespace LocalJSX {
          */
         "enableOnOffLabels"?: boolean | undefined;
         /**
-          * How to pack the label and toggle within a line. `'start'`: The label and toggle will appear on the left in LTR and on the right in RTL. `'end'`: The label and toggle will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the toggle in LTR and to the right in RTL. `'end'`: The label will appear to the right of the toggle in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed';
         /**

core/src/components/accordion/accordion.scss

@@ -57,6 +57,14 @@
   max-height: 0;
 }
 
+/**
+ * Prevent margins of content-wrapper
+ * from collapsing, breaking the animation.
+ */
+:host(.accordion-expanding) #content-wrapper {
+  overflow: auto;
+}
+
 :host(.accordion-disabled) #header,
 :host(.accordion-readonly) #header,
 :host(.accordion-disabled) #content,

core/src/components/accordion/accordion.tsx

@@ -77,7 +77,7 @@ export class Accordion implements ComponentInterface {
 
   /**
    * The slot inside of `ion-item` to
-   * place the toggle icon. Defaults to `'end'`.
+   * place the toggle icon. Defaults to `"end"`.
    */
   @Prop() toggleIconSlot: 'start' | 'end' = 'end';
 

core/src/components/accordion/test/standalone/index.html

@@ -77,6 +77,26 @@
             </ion-accordion>
           </ion-accordion-group>
         </div>
+
+        <div class="grid-item">
+          <h2>Margins In Content</h2>
+
+          <ion-accordion-group>
+            <ion-accordion>
+              <ion-item slot="header"> Accordion </ion-item>
+              <ion-card slot="content" style="margin: 100px 16px">
+                <ion-card-header>
+                  <ion-card-title>Card Title</ion-card-title>
+                  <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+                </ion-card-header>
+
+                <ion-card-content>
+                  Here's a small text description for the card content. Nothing more, nothing less.
+                </ion-card-content>
+              </ion-card>
+            </ion-accordion>
+          </ion-accordion-group>
+        </div>
       </div>
     </main>
   </body>