v6.7.2

fixes #26809

.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/build-core-stencil-eval/action.yml

@@ -4,6 +4,8 @@ runs:
   using: 'composite'
   steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x

.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

@@ -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/pre-release.yml

@@ -1,48 +0,0 @@
-name: 'Ionic Pre-Release'
-
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        required: true
-        type: choice
-        description: Which version should be published?
-        options:
-          - prepatch
-          - preminor
-          - premajor
-      prefix:
-        required: true
-        type: choice
-        description: What kind of pre-release is this?
-        default: beta
-        options:
-          - alpha
-          - beta
-          - rc
-
-jobs:
-  build-ionic:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - name: Configure Identity
-        run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-        shell: bash
-      - name: Install Dependencies
-        run: npm ci --no-package-lock && lerna bootstrap --ignore-scripts -- --legacy-peer-deps
-        shell: bash
-      - name: Prepare NPM Token
-        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
-        shell: bash
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Release
-        run: |
-          HUSKY_SKIP_HOOKS=1 lerna publish $(echo "${{ github.event.inputs.version }}") --no-verify-access --yes --force-publish='*' --dist-tag next --no-git-tag-version --no-push --skip-npm --preid $(echo "${{ github.events.inputs.prefix }}")
-        shell: bash

.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
     secrets:

.github/workflows/release.yml

@@ -16,9 +16,7 @@ on:
         type: choice
         description: Which npm tag should this be published to?
         options:
-          - latest
-          - v5-lts
-          - v4-lts
+          - v6-lts
 
 jobs:
   release-ionic:

.github/workflows/stencil-eval.yml

@@ -7,7 +7,8 @@ on:
     # Run every Monday-Friday
     # at 6:00 UTC (6:00 am UTC)
     - cron: '00 06 * * 1-5'
-
+  workflow_dispatch:
+    # allows for manual invocations in the GitHub UI
 
 # When pushing a new commit we should
 # cancel the previous test run to not
@@ -17,34 +18,39 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  build-core:
+  build-core-with-stencil-eval:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
         with:
-          # Checkout the latest commit in this branch
-          ref: ${{ github.event.pull_request.head.sha }}
+          ref: feature-7.0
       - uses: ./.github/workflows/actions/build-core-stencil-eval
 
   test-core-clean-build:
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          ref: feature-7.0
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          ref: feature-7.0
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          ref: feature-7.0
       - uses: ./.github/workflows/actions/test-core-spec
 
   test-core-screenshot:
@@ -62,10 +68,12 @@ jobs:
         # to be the length of the shard array.
         shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
         totalShards: [20]
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          ref: feature-7.0
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -90,10 +98,12 @@ jobs:
         run: exit 1
 
   build-vue:
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
@@ -101,6 +111,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -112,6 +124,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -126,10 +140,12 @@ jobs:
         run: exit 1
 
   build-angular:
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
@@ -137,6 +153,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -148,6 +166,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -162,10 +182,12 @@ jobs:
         run: exit 1
 
   build-react:
-    needs: [build-core]
+    needs: [build-core-with-stencil-eval]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
@@ -173,18 +195,54 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+      with:
+        ref: feature-7.0
     - 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
+      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:
     - uses: actions/checkout@v3
+      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

BETA.md

@@ -1,107 +0,0 @@
-# Ionic Framework v6 Beta
-
-Thanks for your interest in trying out the Framework v6 beta! We are looking for developers to help test our new changes and provide feedback so that we can make Framework v6 the best release yet! Follow this guide to get setup with the beta.
-
-## Installation
-
-We have worked to make the Framework v6 migration as easy as possible, so the upgrade process should be a breeze!
-
-Developers can follow the guide below to begin updating their existing apps to Framework v6. If you want to try out Framework v6 in a new app, you can create a starter application using `ionic start` with the Ionic CLI and then follow the guide below. See https://ionicframework.com/docs/intro/cli for information on how to get started with a new Ionic Framework application.
-
-> Note: Framework v6 is currently in beta, so do not push any apps running v6 to production!
-
-### Ionic Vue
-
-Ionic Vue developers should first begin by upgrading to the latest version of `vue` and `vue-router`. As of Framework v6, `vue@3.0.6+` is required.
-
-```shell
-npm install vue@next vue-router@4
-```
-
-Ionic Vue users have access to the new Custom Elements build of Framework v6. To make the most out of this improvement, we recommend using Webpack 5. To do this, developers should first install the latest version of the Vue CLI:
-
-```shell
-npm install -g @vue/cli@next
-```
-
-From there, they can upgrade all Vue CLI plugins which will automatically migrate them to Webpack 5:
-
-```shell
-vue upgrade --next
-```
-
-The new Vue CLI will automatically generate two different bundles based on your `browserslist` configuration: one for modern browsers and one for legacy browsers. New Ionic Vue starter apps will only generate the bundle for modern browsers, but some older starter apps may need to have their `.browserslistrc` file updated. You can ensure your app only builds for modern browsers by setting `.browserlistrc` to have the following content:
-
-```
-> 1%, last 2 versions, not dead, not ie 11
-```
-
-From there, developers can install the Framework v6 beta:
-
-```shell
-npm install @ionic/vue@next @ionic/vue-router@next
-```
-
-Next, developers should review the breaking changes and make any changes necessary in their apps: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md
-
-After that, you should be good to go! Check out https://beta.ionicframework.com/docs for the Framework v6 documentation.
-
-### Ionic React
-
-Ionic React developers should first begin by upgrading to the latest version of `react` and `react-dom`. As of Framework v6, `react@17+` is required:
-
-```shell
-npm install react@latest react-dom@latest
-```
-
-From there, developers can install the Framework v6 beta:
-
-```shell
-npm install @ionic/react@next @ionic/react-router@next
-```
-
-Next, developers should review the breaking changes and make any changes necessary in their apps: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md
-
-After that, you should be good to go! Be sure to review the other breaking changes: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md
-
-Check out https://beta.ionicframework.com/docs for the Framework v6 documentation.
-
-### Ionic Angular
-
-Ionic Angular developers should first begin by upgrading to the latest version of Angular. As of Framework v6, Angular 11+ is required.
-
-Please see https://update.angular.io/ for a guide on how to update to the latest version of Angular.
-
-From there, developers can install the Framework v6 beta:
-
-```shell
-npm install @ionic/angular@next
-```
-
-Next, developers should review the breaking changes and make any changes necessary in their apps: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md
-
-After that, you should be good to go! Check out https://beta.ionicframework.com/docs for the Framework v6 documentation.
-
-### Ionic Core
-
-Developers using `@ionic/core` directly should install the Framework v6 beta directly:
-
-```shell
-npm install @ionic/core@next
-```
-
-If you are using Ionic Framework in a Stencil app, be sure to update to the latest version of Stencil as well:
-
-```shell
-npm install @stencil/core@latest
-```
-
-Next, developers should review the breaking changes and make any changes necessary in their apps: https://github.com/ionic-team/ionic-framework/blob/next/BREAKING.md
-
-After that, you should be good to go! Check out https://beta.ionicframework.com/docs for the Framework v6 documentation.
-
-## Providing Feedback
-
-Feedback should be provided on our GitHub repo by creating a new issue: https://github.com/ionic-team/ionic-framework/issues/new/choose
-
-Please note in the issue title that you are using the Framework v6 beta!

BREAKING.md

@@ -5,9 +5,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Versions
 
 - [Version 6.x](#version-6x)
-- [Version 5.x](#version-5x)
-- [Version 4.x](#version-4x)
-- [Legacy](#legacy)
+- [Version 5.x](./BREAKING_ARCHIVE/v5.md)
+- [Version 4.x](./BREAKING_ARCHIVE/v4.md)
+- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
 
 
 ## Version 6.x
@@ -397,666 +397,3 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 Starting with Android 5.0, the webview was moved to a separate application that can be updated independently of Android. This means that most Android 5.0+ devices are going to be running a modern version of Chromium. However, there are a still a subset of Android devices whose manufacturer has locked the webview version and does not allow the webview to update. These webviews are typically stuck at the version that was available when the device initially shipped.
 
 As a result, Ionic Framework only supports Android devices and emulators running Android 5.0+ with a webview of Chromium 60 or newer. For context, this is the version that Stencil can support with no polyfills: https://stenciljs.com/docs/browser-support
-
-
-
-## Version 5.x
-
-- [CSS](#css)
-  * [CSS Utilities](#css-utilities)
-  * [Display Classes](#display-classes)
-  * [Activated, Focused, Hover States](#activated-focused-hover-states)
-  * [Distributed Sass](#distributed-sass)
-- [Components](#components)
-  * [Action Sheet](#action-sheet)
-  * [Anchor](#anchor)
-  * [Back Button](#back-button)
-  * [Button](#button)
-  * [Card](#card)
-  * [Controllers](#controllers)
-  * [FAB Button](#fab-button)
-  * [Item](#item)
-  * [Header / Footer](#header---footer)
-  * [List Header](#list-header)
-  * [Menu](#menu)
-  * [Menu Button](#menu-button)
-  * [Nav Link](#nav-link)
-  * [Radio](#radio)
-  * [Searchbar](#searchbar)
-  * [Segment](#segment)
-  * [Segment Button](#segment-button)
-  * [Select Option](#select-option)
-  * [Skeleton Text](#skeleton-text)
-  * [Split Pane](#split-pane)
-  * [Toast](#toast)
-  * [Tabs](#tabs)
-- [Colors](#colors)
-- [Events](#events)
-- [Mode](#mode)
-- [Ionicons](#ionicons)
-
-
-### CSS
-
-#### CSS Utilities
-
-We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
-
-Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
-
-**Before**
-
-```html
-<ion-header text-center></ion-header>
-<ion-content padding></ion-content>
-<ion-label text-wrap></ion-label>
-<ion-item wrap></ion-item>
-```
-
-**After**
-
-```html
-<ion-header class="ion-text-center"></ion-header>
-<ion-content class="ion-padding"></ion-content>
-<ion-label class="ion-text-wrap"></ion-label>
-<ion-item class="ion-wrap"></ion-item>
-```
-
-
-#### Display Classes
-
-The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of the breakpoint for `.ion-hide-{breakpoint}-down` classes it will use the minimum of that breakpoint.
-
-The [Ionic breakpoints](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints) are the following:
-
-
-| Breakpoint Name | Width   |
-| ----------------| --------|
-| xs              | 0       |
-| sm              | 576px   |
-| md              | 768px   |
-| lg              | 992px   |
-| xl              | 1200px  |
-
-Previously, if you added the class `ion-hide-md-down` to an element, it would hide the element when the screen size was `991px` (the maximum of the `md` breakpoint) or smaller. Now, using this same class will hide the element when the maximum screen size is `768px`.
-
-Below is a table of how the media queries have changed for each class:
-
-| Class Name          | Ionic 4                      | Ionic 5                      |
-| --------------------| -----------------------------| -----------------------------|
-| `.ion-hide-down`    | `@media (max-width: 575px)`  | all screen sizes             |
-| `.ion-hide-sm-down` | `@media (max-width: 767px)`  | `@media (max-width: 576px)`  |
-| `.ion-hide-md-down` | `@media (max-width: 991px)`  | `@media (max-width: 768px)`  |
-| `.ion-hide-lg-down` | `@media (max-width: 1199px)` | `@media (max-width: 992px)`  |
-| `.ion-hide-xl-down` | all screen sizes             | `@media (max-width: 1200px)` |
-
-_Note that no changes were made to the `.ion-hide-{breakpoint}-up` classes._
-
-See the [CSS Utilities responsive display documentation](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) for more information.
-
-
-#### Activated, Focused, Hover States
-
-The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
-
-The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
-
-- Action Sheet
-- Back Button
-- Button
-- FAB Button
-- Item
-- Menu Button
-- Segment Button
-- Tab Button
-
-Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
-
-```css
---background-hover: rgba(255, 255, 255, 0.08);
-```
-
-If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
-
-```css
---background-hover: rgba(0, 0, 0, 0.08);
-```
-
-The new way adds the following variables:
-
-```css
---background-activated-opacity
---background-focused-opacity
---background-hover-opacity
-```
-
-It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names.
-
-This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
-
-
-##### Examples
-
-```css
-/* Setting the button background on hover to solid red */
-ion-button {
-  --background-hover: red;
-  --background-hover-opacity: 1;
-}
-
-/* Setting the action sheet button background on focus to an opaque green */
-ion-action-sheet {
-  --button-background-focus: green;
-  --button-background-focus-opacity: 0.5;
-}
-
-/*
- * Setting the fab button background on hover to match the text color with
- * the default --background-hover-opacity on md
- */
-.md ion-fab-button {
-  --color: #222;
-  --background-hover: #222;
-}
-```
-
-##### Global CSS Properties
-
-Some variables were renamed, removed or added. See the chart below for the changes.
-
-| Old variable                            | Status  | New variable                              |
-| ----------------------------------------| --------|-------------------------------------------|
-| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
-| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
-| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
-| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
-| `--ion-tab-bar-color-activated`         | renamed | `--ion-tab-bar-color-selected`            |
-|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
-| `--ion-toolbar-color-activated`         | removed |                                           |
-| `--ion-item-background-activated`       | removed |                                           |
-| `--ion-item-background-focused`         | removed |                                           |
-| `--ion-item-background-hover`           | removed |                                           |
-
-
-#### Distributed Sass
-
-The `scss` files have been removed from `dist/`. CSS variables should be used to theme instead.
-
-
-### Components
-
-#### Action Sheet
-
-The following CSS variables have been renamed or added:
-
-| Old                      | New                                        |
-|--------------------------| -------------------------------------------|
-|                          | `--button-background`                      |
-| `--background-activated` | `--button-background-activated`            |
-|                          | `--button-background-activated-opacity`    |
-| `--background-selected`  | `--button-background-selected`             |
-|                          | `--button-background-focused`              |
-|                          | `--button-background-focused-opacity`      |
-|                          | `--button-background-hover`                |
-|                          | `--button-background-hover-opacity`        |
-|                          | `--button-background-selected`             |
-|                          | `--button-background-selected-opacity`     |
-|                          | `--button-color`                           |
-|                          | `--button-color-activated`                 |
-|                          | `--button-color-focused`                   |
-|                          | `--button-color-hover`                     |
-|                          | `--button-color-selected`                  |
-
-See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
-
-
-#### Anchor
-
-The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
-
-#### Back Button
-
-- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-- [Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-#### Button
-
-- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-#### Card
-
-Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-
-
-#### Controllers
-
-The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
-
-**Before**
-
-```html
-<ion-loading-controller></ion-loading-controller>
-
-<script>
-  async function presentLoading() {
-    const loadingController = document.querySelector('ion-loading-controller');
-
-    const loading = await loadingController.create({
-      message: 'Hello',
-      duration: 2000
-    });
-    await loading.present();
-  }
-</script>
-
-```
-
-**After**
-
-```html
-<script type="module">
-  import { loadingController } from '@ionic/core';
-  window.loadingController = loadingController;
-</script>
-
-<script>
-  async function presentLoading() {
-    const loading = await loadingController.create({
-      message: 'Hello',
-      duration: 2000
-    });
-    await loading.present();
-  }
-</script>
-```
-
-#### FAB Button
-
-- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-
-#### Item
-
-- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-
-#### Header / Footer
-
-The `no-border` attribute has been removed, use `ion-no-border` class instead. See [CSS Utilities](#css-utilities) above for more information on why this change was made.
-
-
-#### List Header
-
-The list header has been redesigned to match the latest iOS spec. This may break the design of your application as the previous design had a small font size with uppercase text. The latest design includes a larger, bolder text.
-
-In addition, any text content inside of an `<ion-list-header>` should be wrapped in an `<ion-label>` in order to get the proper styling of the new design. If the label is missing, the button alignment in the list header may look off.
-
-**Before**
-
-```html
-<ion-list-header>
-  New This Week
-  <ion-button>See All</ion-button>
-</ion-list-header>
-```
-
-**After**
-
-```html
-<ion-list-header>
-  <ion-label>New This Week</ion-label>
-  <ion-button>See All</ion-button>
-</ion-list-header>
-```
-
-The button has also been updated to default to `fill="clear"` and `size="small"` when inside of a list header. If the old look of the list header or buttons is desired, use custom CSS or button properties to achieve it.
-
-For more information see the [List Header usage](https://ionicframework.com/docs/api/list-header#usage).
-
-
-#### Menu
-
-- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
-- The `side` values `left` and `right` have been removed, use `start` and `end` instead.
-- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-
-  **Before**
-
-  ```html
-  <ion-menu>...</ion-menu>
-  <ion-content main>...</ion-content>
-  ```
-
-  **After**
-
-  ```html
-  <ion-menu content-id="main"></ion-menu>
-  <ion-content id="main">...</ion-content>
-  ```
-- The presentation type in `ios` now defaults to `"overlay"`.
-
-
-#### Menu Button
-
-- [Focused, Hover States](#activated-focused-hover-states) have been updated.
-
-
-#### Nav Link
-
-The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
-
-
-#### Radio
-
-The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button.
-
-`ion-radio` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-radio-group` instead.
-
-**Before**
-
-```html
-<ion-radio checked>One</ion-radio>
-
-<ion-radio-group>
-  <ion-radio>One</ion-radio>
-  <ion-radio checked>Two</ion-radio>
-</ion-radio-group>
-```
-
-**After**
-
-```html
-<ion-radio-group value="one">
-  <ion-radio value="one">One</ion-radio>
-</ion-radio-group>
-
-<ion-radio-group value="two">
-  <ion-radio value="one">One</ion-radio>
-  <ion-radio value="two">Two</ion-radio>
-</ion-radio-group>
-```
-
-#### Searchbar
-
-##### Show Cancel Button
-
-The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`.
-
-**Before**
-
-```html
-<ion-searchbar show-cancel-button>
-<ion-searchbar show-cancel-button="true">
-<ion-searchbar show-cancel-button="false">
-```
-
-**After**
-
-```html
-<ion-searchbar show-cancel-button="focus">
-<ion-searchbar show-cancel-button="focus">
-<ion-searchbar show-cancel-button="never">
-```
-
-See the [Searchbar documentation](https://ionicframework.com/docs/api/searchbar#properties) for more information.
-
-##### Inputmode
-
-The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the inputmode property to `"search"`.
-
-
-#### Segment
-
-Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
-
-##### Renamed Events
-
-`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead.
-
-##### Button States
-
-- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
-  ```
-  --color-activated
-  --background-activated
-  ```
-- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
-
-##### Indicator Color
-
-- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
-- `--indicator-color-checked` has been removed
-- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
-- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
-  ```css
-  .md ion-segment::after {
-      position: absolute;
-      bottom: 0;
-      height: 2px;
-      width: 100%;
-      content: '';
-      background: rgba(0,0,0,0.5);
-      z-index: -1;
-  }
-  ```
-
-##### Background & Color
-
-A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
-
-```
---background: Background of the segment button
---background-checked: Background of the checked segment button
---background-disabled: Background of the disabled segment button
---background-hover: Background of the segment button on hover
-```
-
-> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
-
-The above variables *will not* be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
-
-```
---color: Color of the segment button
---color-checked: Color of the checked segment button
---color-disabled: Color of the disabled segment button
---color-hover: Color of the segment button on hover
-```
-
-###### Removed variables
-
-The following variables were removed due to the current spec no longer using them.
-
-- `--color-checked-disabled`
-- `--background-disabled`
-- `--color-disabled`
-- `--background-activated`
-- `--color-activated`
-
-##### Global CSS Properties
-
-Some variables were renamed or added. See the chart below for the new names.
-
-| Old variable                            | Status  | New variable                              |
-| ----------------------------------------| --------|-------------------------------------------|
-| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
-| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
-| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
-| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
-|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
-
-
-#### Segment Button
-
-The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button.
-
-**Before**
-
-```html
-<ion-segment>
-  <ion-segment-button>One</ion-segment-button>
-  <ion-segment-button checked>Two</ion-segment-button>
-  <ion-segment-button>Three</ion-segment-button>
-</ion-segment>
-```
-
-**After**
-
-```html
-<ion-segment value="two">
-  <ion-segment-button value="one">One</ion-segment-button>
-  <ion-segment-button value="two">Two</ion-segment-button>
-  <ion-segment-button value="three">Three</ion-segment-button>
-</ion-segment>
-```
-
-
-#### Select Option
-
-The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option.
-
-**Before**
-
-```html
-<ion-select>
-  <ion-select-option>One</ion-select-option>
-  <ion-select-option selected>Two</ion-select-option>
-</ion-select>
-```
-
-**After**
-
-```html
-<ion-select value="two">
-  <ion-select-option value="one">One</ion-select-option>
-  <ion-select-option value="two">Two</ion-select-option>
-</ion-select>
-```
-
-
-#### Skeleton Text
-
-The `width` property has been removed in favor of using CSS styling.
-
-
-#### Split Pane
-- Converted to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-  **Before**
-
-  ```html
-  <ion-split-pane>
-    ...
-    <div main>...</div>
-  </ion-split-pane>
-  ```
-
-  **After**
-
-  ```html
-  <ion-split-pane content-id="main">
-    ...
-    <div id="main">...</div>
-  </ion-split-pane>
-  ```
-
-#### Tabs
-
-- [Focused State](#activated-focused-hover-states) have been updated.
-
-#### Toast
-
-The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
-
-**Before**
-
-```javascript
-async presentToast() {
-  const toast = await this.toastController.create({
-    message: 'Your settings have been saved.',
-    showCloseButton: true,
-    closeButtonText: 'Close'
-  });
-  toast.present();
-}
-```
-
-**After**
-
-```javascript
-async presentToast() {
-  const toast = await this.toastController.create({
-    message: 'Your settings have been saved.',
-    buttons: [
-      {
-        text: 'Close',
-        role: 'cancel',
-        handler: () => {
-          console.log('Close clicked');
-        }
-      }
-    ]
-  });
-  toast.present();
-}
-```
-
-### Colors
-
-The default Ionic colors have been updated to the following:
-
-```scss
-primary:         #3880ff
-secondary:       #3dc2ff
-tertiary:        #5260ff
-success:         #2dd36f
-warning:         #ffc409
-danger:          #eb445a
-light:           #f4f5f8
-medium:          #92949c
-dark:            #222428
-```
-
-`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
-
-This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
-
-
-### Events
-
-The `@ionic/angular` Events service has been removed.
-
-- Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
-- Use "Redux" for advanced state management: https://ngrx.io
-
-
-### Mode
-
-Mode is now cascaded from the parent to the child component. Previously, if you wanted to update a component and its children to use the same mode, you'd have to set it on all components. For example, if you wanted to use a `md` segment no matter the mode, you'd have to write the following:
-
-```html
-<ion-segment mode="md">
-  <ion-segment-button mode="md">Button</ion-segment-button>
-  <ion-segment-button mode="md">Button</ion-segment-button>
-</ion-segment>
-```
-
-Now, the `mode` only needs to be set on the `ion-segment` and it will be inherited. If this behavior is not desired set a different mode on the child component.
-
-
-### Ionicons
-
-Ionicons 5 has been released! :tada: This brings many changes including a top to bottom re-draw of every icon, variants for each icon (filled, outline, and sharp), and the removal of auto-switching icons based on the platform.
-
-For more information, check out the [Ionicons Changelog](https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md)!
-
-
-
---------------------------------------------------------------------------------------------------
-
-## Version 4.x
-
-The list of the breaking changes introduced in Ionic Angular v4 can be found in [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).
-
-## Legacy
-
-For the breaking changes of the older legacy versions (versions 2.x & 3.x) of Ionic Framework, see the [v3 changelog](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md).

BREAKING_ARCHIVE/v5.md

@@ -0,0 +1,628 @@
+# Breaking Changes
+
+## Version 5.x
+
+- [CSS](#css)
+  - [CSS Utilities](#css-utilities)
+  - [Display Classes](#display-classes)
+  - [Activated, Focused, Hover States](#activated-focused-hover-states)
+  - [Distributed Sass](#distributed-sass)
+- [Components](#components)
+  - [Action Sheet](#action-sheet)
+  - [Anchor](#anchor)
+  - [Back Button](#back-button)
+  - [Button](#button)
+  - [Card](#card)
+  - [Controllers](#controllers)
+  - [FAB Button](#fab-button)
+  - [Item](#item)
+  - [Header / Footer](#header---footer)
+  - [List Header](#list-header)
+  - [Menu](#menu)
+  - [Menu Button](#menu-button)
+  - [Nav Link](#nav-link)
+  - [Radio](#radio)
+  - [Searchbar](#searchbar)
+  - [Segment](#segment)
+  - [Segment Button](#segment-button)
+  - [Select Option](#select-option)
+  - [Skeleton Text](#skeleton-text)
+  - [Split Pane](#split-pane)
+  - [Toast](#toast)
+  - [Tabs](#tabs)
+- [Colors](#colors)
+- [Events](#events)
+- [Mode](#mode)
+- [Ionicons](#ionicons)
+
+### CSS
+
+#### CSS Utilities
+
+We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
+
+Some examples of what's changed are below. _This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes._
+
+**Before**
+
+```html
+<ion-header text-center></ion-header>
+<ion-content padding></ion-content>
+<ion-label text-wrap></ion-label>
+<ion-item wrap></ion-item>
+```
+
+**After**
+
+```html
+<ion-header class="ion-text-center"></ion-header>
+<ion-content class="ion-padding"></ion-content>
+<ion-label class="ion-text-wrap"></ion-label>
+<ion-item class="ion-wrap"></ion-item>
+```
+
+#### Display Classes
+
+The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of the breakpoint for `.ion-hide-{breakpoint}-down` classes it will use the minimum of that breakpoint.
+
+The [Ionic breakpoints](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints) are the following:
+
+| Breakpoint Name | Width  |
+| --------------- | ------ |
+| xs              | 0      |
+| sm              | 576px  |
+| md              | 768px  |
+| lg              | 992px  |
+| xl              | 1200px |
+
+Previously, if you added the class `ion-hide-md-down` to an element, it would hide the element when the screen size was `991px` (the maximum of the `md` breakpoint) or smaller. Now, using this same class will hide the element when the maximum screen size is `768px`.
+
+Below is a table of how the media queries have changed for each class:
+
+| Class Name          | Ionic 4                      | Ionic 5                      |
+| ------------------- | ---------------------------- | ---------------------------- |
+| `.ion-hide-down`    | `@media (max-width: 575px)`  | all screen sizes             |
+| `.ion-hide-sm-down` | `@media (max-width: 767px)`  | `@media (max-width: 576px)`  |
+| `.ion-hide-md-down` | `@media (max-width: 991px)`  | `@media (max-width: 768px)`  |
+| `.ion-hide-lg-down` | `@media (max-width: 1199px)` | `@media (max-width: 992px)`  |
+| `.ion-hide-xl-down` | all screen sizes             | `@media (max-width: 1200px)` |
+
+_Note that no changes were made to the `.ion-hide-{breakpoint}-up` classes._
+
+See the [CSS Utilities responsive display documentation](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) for more information.
+
+#### Activated, Focused, Hover States
+
+The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
+
+The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
+
+- Action Sheet
+- Back Button
+- Button
+- FAB Button
+- Item
+- Menu Button
+- Segment Button
+- Tab Button
+
+Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
+
+```css
+--background-hover: rgba(255, 255, 255, 0.08);
+```
+
+If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
+
+```css
+--background-hover: rgba(0, 0, 0, 0.08);
+```
+
+The new way adds the following variables:
+
+```css
+--background-activated-opacity
+--background-focused-opacity
+--background-hover-opacity
+```
+
+It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names.
+
+This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
+
+##### Examples
+
+```css
+/* Setting the button background on hover to solid red */
+ion-button {
+  --background-hover: red;
+  --background-hover-opacity: 1;
+}
+
+/* Setting the action sheet button background on focus to an opaque green */
+ion-action-sheet {
+  --button-background-focus: green;
+  --button-background-focus-opacity: 0.5;
+}
+
+/*
+ * Setting the fab button background on hover to match the text color with
+ * the default --background-hover-opacity on md
+ */
+.md ion-fab-button {
+  --color: #222;
+  --background-hover: #222;
+}
+```
+
+##### Global CSS Properties
+
+Some variables were renamed, removed or added. See the chart below for the changes.
+
+| Old variable                         | Status  | New variable                               |
+| ------------------------------------ | ------- | ------------------------------------------ |
+| `--ion-toolbar-color-unchecked`      | renamed | `--ion-toolbar-segment-color`              |
+| `--ion-toolbar-color-checked`        | renamed | `--ion-toolbar-segment-color-checked`      |
+| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background`         |
+| `--ion-toolbar-background-checked`   | renamed | `--ion-toolbar-segment-background-checked` |
+| `--ion-tab-bar-color-activated`      | renamed | `--ion-tab-bar-color-selected`             |
+|                                      | added   | `--ion-toolbar-segment-indicator-color`    |
+| `--ion-toolbar-color-activated`      | removed |                                            |
+| `--ion-item-background-activated`    | removed |                                            |
+| `--ion-item-background-focused`      | removed |                                            |
+| `--ion-item-background-hover`        | removed |                                            |
+
+#### Distributed Sass
+
+The `scss` files have been removed from `dist/`. CSS variables should be used to theme instead.
+
+### Components
+
+#### Action Sheet
+
+The following CSS variables have been renamed or added:
+
+| Old                      | New                                     |
+| ------------------------ | --------------------------------------- |
+|                          | `--button-background`                   |
+| `--background-activated` | `--button-background-activated`         |
+|                          | `--button-background-activated-opacity` |
+| `--background-selected`  | `--button-background-selected`          |
+|                          | `--button-background-focused`           |
+|                          | `--button-background-focused-opacity`   |
+|                          | `--button-background-hover`             |
+|                          | `--button-background-hover-opacity`     |
+|                          | `--button-background-selected`          |
+|                          | `--button-background-selected-opacity`  |
+|                          | `--button-color`                        |
+|                          | `--button-color-activated`              |
+|                          | `--button-color-focused`                |
+|                          | `--button-color-hover`                  |
+|                          | `--button-color-selected`               |
+
+See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
+
+#### Anchor
+
+The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
+
+#### Back Button
+
+- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Card
+
+Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+
+#### Controllers
+
+The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
+
+**Before**
+
+```html
+<ion-loading-controller></ion-loading-controller>
+
+<script>
+  async function presentLoading() {
+    const loadingController = document.querySelector("ion-loading-controller");
+
+    const loading = await loadingController.create({
+      message: "Hello",
+      duration: 2000,
+    });
+    await loading.present();
+  }
+</script>
+```
+
+**After**
+
+```html
+<script type="module">
+  import { loadingController } from "@ionic/core";
+  window.loadingController = loadingController;
+</script>
+
+<script>
+  async function presentLoading() {
+    const loading = await loadingController.create({
+      message: "Hello",
+      duration: 2000,
+    });
+    await loading.present();
+  }
+</script>
+```
+
+#### FAB Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Item
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Header / Footer
+
+The `no-border` attribute has been removed, use `ion-no-border` class instead. See [CSS Utilities](#css-utilities) above for more information on why this change was made.
+
+#### List Header
+
+The list header has been redesigned to match the latest iOS spec. This may break the design of your application as the previous design had a small font size with uppercase text. The latest design includes a larger, bolder text.
+
+In addition, any text content inside of an `<ion-list-header>` should be wrapped in an `<ion-label>` in order to get the proper styling of the new design. If the label is missing, the button alignment in the list header may look off.
+
+**Before**
+
+```html
+<ion-list-header>
+  New This Week
+  <ion-button>See All</ion-button>
+</ion-list-header>
+```
+
+**After**
+
+```html
+<ion-list-header>
+  <ion-label>New This Week</ion-label>
+  <ion-button>See All</ion-button>
+</ion-list-header>
+```
+
+The button has also been updated to default to `fill="clear"` and `size="small"` when inside of a list header. If the old look of the list header or buttons is desired, use custom CSS or button properties to achieve it.
+
+For more information see the [List Header usage](https://ionicframework.com/docs/api/list-header#usage).
+
+#### Menu
+
+- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
+- The `side` values `left` and `right` have been removed, use `start` and `end` instead.
+- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
+
+  **Before**
+
+  ```html
+  <ion-menu>...</ion-menu> <ion-content main>...</ion-content>
+  ```
+
+  **After**
+
+  ```html
+  <ion-menu content-id="main"></ion-menu>
+  <ion-content id="main">...</ion-content>
+  ```
+
+- The presentation type in `ios` now defaults to `"overlay"`.
+
+#### Menu Button
+
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Nav Link
+
+The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
+
+#### Radio
+
+The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button.
+
+`ion-radio` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-radio-group` instead.
+
+**Before**
+
+```html
+<ion-radio checked>One</ion-radio>
+
+<ion-radio-group>
+  <ion-radio>One</ion-radio>
+  <ion-radio checked>Two</ion-radio>
+</ion-radio-group>
+```
+
+**After**
+
+```html
+<ion-radio-group value="one">
+  <ion-radio value="one">One</ion-radio>
+</ion-radio-group>
+
+<ion-radio-group value="two">
+  <ion-radio value="one">One</ion-radio>
+  <ion-radio value="two">Two</ion-radio>
+</ion-radio-group>
+```
+
+#### Searchbar
+
+##### Show Cancel Button
+
+The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`.
+
+**Before**
+
+```html
+<ion-searchbar show-cancel-button>
+  <ion-searchbar show-cancel-button="true">
+    <ion-searchbar show-cancel-button="false"></ion-searchbar></ion-searchbar
+></ion-searchbar>
+```
+
+**After**
+
+```html
+<ion-searchbar show-cancel-button="focus">
+  <ion-searchbar show-cancel-button="focus">
+    <ion-searchbar show-cancel-button="never"></ion-searchbar></ion-searchbar
+></ion-searchbar>
+```
+
+See the [Searchbar documentation](https://ionicframework.com/docs/api/searchbar#properties) for more information.
+
+##### Inputmode
+
+The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the inputmode property to `"search"`.
+
+#### Segment
+
+Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
+
+##### Renamed Events
+
+`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead.
+
+##### Button States
+
+- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
+  ```
+  --color-activated
+  --background-activated
+  ```
+- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
+
+##### Indicator Color
+
+- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
+- `--indicator-color-checked` has been removed
+- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
+- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
+  ```css
+  .md ion-segment::after {
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+  ```
+
+##### Background & Color
+
+A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
+
+```
+--background: Background of the segment button
+--background-checked: Background of the checked segment button
+--background-disabled: Background of the disabled segment button
+--background-hover: Background of the segment button on hover
+```
+
+> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
+
+The above variables _will not_ be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
+
+```
+--color: Color of the segment button
+--color-checked: Color of the checked segment button
+--color-disabled: Color of the disabled segment button
+--color-hover: Color of the segment button on hover
+```
+
+###### Removed variables
+
+The following variables were removed due to the current spec no longer using them.
+
+- `--color-checked-disabled`
+- `--background-disabled`
+- `--color-disabled`
+- `--background-activated`
+- `--color-activated`
+
+##### Global CSS Properties
+
+Some variables were renamed or added. See the chart below for the new names.
+
+| Old variable                         | Status  | New variable                               |
+| ------------------------------------ | ------- | ------------------------------------------ |
+| `--ion-toolbar-color-unchecked`      | renamed | `--ion-toolbar-segment-color`              |
+| `--ion-toolbar-color-checked`        | renamed | `--ion-toolbar-segment-color-checked`      |
+| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background`         |
+| `--ion-toolbar-background-checked`   | renamed | `--ion-toolbar-segment-background-checked` |
+|                                      | added   | `--ion-toolbar-segment-indicator-color`    |
+
+#### Segment Button
+
+The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button.
+
+**Before**
+
+```html
+<ion-segment>
+  <ion-segment-button>One</ion-segment-button>
+  <ion-segment-button checked>Two</ion-segment-button>
+  <ion-segment-button>Three</ion-segment-button>
+</ion-segment>
+```
+
+**After**
+
+```html
+<ion-segment value="two">
+  <ion-segment-button value="one">One</ion-segment-button>
+  <ion-segment-button value="two">Two</ion-segment-button>
+  <ion-segment-button value="three">Three</ion-segment-button>
+</ion-segment>
+```
+
+#### Select Option
+
+The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option.
+
+**Before**
+
+```html
+<ion-select>
+  <ion-select-option>One</ion-select-option>
+  <ion-select-option selected>Two</ion-select-option>
+</ion-select>
+```
+
+**After**
+
+```html
+<ion-select value="two">
+  <ion-select-option value="one">One</ion-select-option>
+  <ion-select-option value="two">Two</ion-select-option>
+</ion-select>
+```
+
+#### Skeleton Text
+
+The `width` property has been removed in favor of using CSS styling.
+
+#### Split Pane
+
+- Converted to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
+  **Before**
+
+  ```html
+  <ion-split-pane>
+    ...
+    <div main>...</div>
+  </ion-split-pane>
+  ```
+
+  **After**
+
+  ```html
+  <ion-split-pane content-id="main">
+    ...
+    <div id="main">...</div>
+  </ion-split-pane>
+  ```
+
+#### Tabs
+
+- [Focused State](#activated-focused-hover-states) have been updated.
+
+#### Toast
+
+The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
+
+**Before**
+
+```javascript
+async presentToast() {
+  const toast = await this.toastController.create({
+    message: 'Your settings have been saved.',
+    showCloseButton: true,
+    closeButtonText: 'Close'
+  });
+  toast.present();
+}
+```
+
+**After**
+
+```javascript
+async presentToast() {
+  const toast = await this.toastController.create({
+    message: 'Your settings have been saved.',
+    buttons: [
+      {
+        text: 'Close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Close clicked');
+        }
+      }
+    ]
+  });
+  toast.present();
+}
+```
+
+### Colors
+
+The default Ionic colors have been updated to the following:
+
+```scss
+primary:         #3880ff
+secondary:       #3dc2ff
+tertiary:        #5260ff
+success:         #2dd36f
+warning:         #ffc409
+danger:          #eb445a
+light:           #f4f5f8
+medium:          #92949c
+dark:            #222428
+```
+
+`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
+
+This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
+
+### Events
+
+The `@ionic/angular` Events service has been removed.
+
+- Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
+- Use "Redux" for advanced state management: https://ngrx.io
+
+### Mode
+
+Mode is now cascaded from the parent to the child component. Previously, if you wanted to update a component and its children to use the same mode, you'd have to set it on all components. For example, if you wanted to use a `md` segment no matter the mode, you'd have to write the following:
+
+```html
+<ion-segment mode="md">
+  <ion-segment-button mode="md">Button</ion-segment-button>
+  <ion-segment-button mode="md">Button</ion-segment-button>
+</ion-segment>
+```
+
+Now, the `mode` only needs to be set on the `ion-segment` and it will be inherited. If this behavior is not desired set a different mode on the child component.
+
+### Ionicons
+
+Ionicons 5 has been released! :tada: This brings many changes including a top to bottom re-draw of every icon, variants for each icon (filled, outline, and sharp), and the removal of auto-switching icons based on the platform.
+
+For more information, check out the [Ionicons Changelog](https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md)!

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>
@@ -77,8 +77,12 @@ Already have an Ionic app? These guides will help you migrate to the latest vers
 
 ### 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,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.7.2](https://github.com/ionic-team/ionic/compare/v6.7.1...v6.7.2) (2023-04-05)
+
+
+
+## [6.0.16](https://github.com/ionic-team/ionic/compare/v6.0.15...v6.0.16) (2022-04-08)
+
+
+### Bug Fixes
+
+* **angular:** button components now route correctly without reload ([#25071](https://github.com/ionic-team/ionic/issues/25071)) ([fb994fa](https://github.com/ionic-team/ionic/commit/fb994fa9a7721a3575fb8d123be34aea4bf076a4))
+
+
+
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+
+
+
+
+## [6.7.1](https://github.com/ionic-team/ionic/compare/v6.7.0...v6.7.1) (2023-03-29)
+
+**Note:** Version bump only for package @ionic/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
+
+
+
+
+
+## [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
+
+
+
+
+
+## [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
+
+
+
+
+
+## [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)
+
+
+
+
+
+# [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
+
+
+
+
+
+## [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
+
+
+
+
+
+## [6.5.5](https://github.com/ionic-team/ionic/compare/v6.5.4...v6.5.5) (2023-02-20)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.5.4](https://github.com/ionic-team/ionic/compare/v6.5.3...v6.5.4) (2023-02-15)
+
+
+### Bug Fixes
+
+* **deps:** update ionicons usage to v6.1.2 ([#26752](https://github.com/ionic-team/ionic/issues/26752)) ([c07933c](https://github.com/ionic-team/ionic/commit/c07933cb69b0c31d3e44263769a7a26ee81223f8))
+* **deps:** update ionicons usage to v6.1.3 ([#26772](https://github.com/ionic-team/ionic/issues/26772)) ([1c71983](https://github.com/ionic-team/ionic/commit/1c719833292d4cfbdecadf9838d8c783785222ad))
+
+
+
+
+
 ## [6.5.3](https://github.com/ionic-team/ionic/compare/v6.5.2...v6.5.3) (2023-02-08)
 
 **Note:** Version bump only for package @ionic/angular
@@ -410,7 +520,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [6.1.0](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.1.0) (2022-04-13)
+# [6.1.0](https://github.com/ionic-team/ionic/compare/v6.0.16...v6.1.0) (2022-04-13)
 
 
 ### Bug Fixes

angular/package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "@ionic/angular",
-  "version": "6.5.3",
+  "version": "6.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.5.3",
+      "version": "6.7.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.5.3",
-        "ionicons": "^6.1.1",
+        "@ionic/core": "^6.7.2",
+        "ionicons": "^6.1.3",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1006,12 +1006,12 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.3.tgz",
-      "integrity": "sha512-z4slJZEw0PLet2htICKmCh76sN6kY28GSaYLDV1b4O/ya6qgu4QDwPkKbg22E8fiXBALlilce2zJQ55Tx5C6Aw==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.1.tgz",
+      "integrity": "sha512-nUuSFV8gT+Ilb2w37gGlV34tVwpGloQMVbjnoNT/ItrQtckGVjKxEzwt27PFlJxKIT7f3OXIccKoW5l3A5NLMg==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "ionicons": "^6.1.3",
         "tslib": "^2.1.0"
       }
     },
@@ -3385,8 +3385,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.1",
-      "license": "MIT",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
+      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
@@ -7334,12 +7335,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.3.tgz",
-      "integrity": "sha512-z4slJZEw0PLet2htICKmCh76sN6kY28GSaYLDV1b4O/ya6qgu4QDwPkKbg22E8fiXBALlilce2zJQ55Tx5C6Aw==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.1.tgz",
+      "integrity": "sha512-nUuSFV8gT+Ilb2w37gGlV34tVwpGloQMVbjnoNT/ItrQtckGVjKxEzwt27PFlJxKIT7f3OXIccKoW5l3A5NLMg==",
       "requires": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "ionicons": "^6.1.3",
         "tslib": "^2.1.0"
       }
     },
@@ -8815,7 +8816,9 @@
       }
     },
     "ionicons": {
-      "version": "6.1.1",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
+      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
       "requires": {
         "@stencil/core": "^2.18.0"
       }

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.5.3",
+  "version": "6.7.2",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,8 +42,8 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.5.3",
-    "ionicons": "^6.1.1",
+    "@ionic/core": "^6.7.2",
+    "ionicons": "^6.1.3",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/scripts/sync.sh

@@ -5,8 +5,5 @@ set -e
 # Pack @ionic/core
 npm pack ../core
 
-# Pack @ionic/angular
-npm pack ./
-
 # Install Dependencies
 npm install *.tgz --no-save

angular/src/directives/overlays/modal.ts

@@ -80,7 +80,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

@@ -524,14 +524,14 @@ export declare interface IonDatetime extends Components.IonDatetime {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  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({
   selector: 'ion-datetime',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  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;

angular/src/index.ts

@@ -130,6 +130,7 @@ export {
   TextareaCustomEvent,
   ToastOptions,
   ToastButton,
+  ToastLayout,
   ToggleChangeEventDetail,
   ToggleCustomEvent,
 } from '@ionic/core';

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

@@ -64,5 +64,8 @@
     "wait-on": "^5.2.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 16"
   }
 }

angular/test/apps/ng13/package.json

@@ -64,5 +64,8 @@
     "wait-on": "^5.2.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 16"
   }
 }

angular/test/apps/ng14/package.json

@@ -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/package.json

@@ -64,5 +64,8 @@
     "wait-on": "^5.2.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 16"
   }
 }

angular/test/base/angular.json

@@ -143,6 +143,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', () => {

core/CHANGELOG.md

@@ -3,6 +3,163 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.7.2](https://github.com/ionic-team/ionic/compare/v6.7.1...v6.7.2) (2023-04-05)
+
+
+### Bug Fixes
+
+* **item-divider:** set padding-end for md ([#27070](https://github.com/ionic-team/ionic/issues/27070)) ([214e835](https://github.com/ionic-team/ionic/commit/214e83529f7115852c27a37869c8231330fdb8ac))
+* **picker-column-internal:** hide empty picker items from screenreaders ([#27114](https://github.com/ionic-team/ionic/issues/27114)) ([3ecfb9c](https://github.com/ionic-team/ionic/commit/3ecfb9ce43d9d5cf93f1f2be26a0922a16894362)), closes [#26809](https://github.com/ionic-team/ionic/issues/26809)
+
+
+
+## [6.0.16](https://github.com/ionic-team/ionic/compare/v6.0.15...v6.0.16) (2022-04-08)
+
+
+
+## [6.0.15](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.0.15) (2022-04-06)
+
+
+
+
+
+## [6.7.1](https://github.com/ionic-team/ionic/compare/v6.7.0...v6.7.1) (2023-03-29)
+
+
+### Bug Fixes
+
+* **item-sliding:** open method works with items added async ([#27035](https://github.com/ionic-team/ionic/issues/27035)) ([521063b](https://github.com/ionic-team/ionic/commit/521063bf241dc2c55bcd02a92ed8a418cfec6b1e)), closes [#26991](https://github.com/ionic-team/ionic/issues/26991)
+* **item:** use thumbnail's size when present ([#27014](https://github.com/ionic-team/ionic/issues/27014)) ([6cecdf4](https://github.com/ionic-team/ionic/commit/6cecdf41451a5c7aa908494dfad9fab1496a0c6c)), closes [#22935](https://github.com/ionic-team/ionic/issues/22935)
+* **radio-group:** radios participate in form submission ([#27018](https://github.com/ionic-team/ionic/issues/27018)) ([3b99c31](https://github.com/ionic-team/ionic/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1)), closes [#27016](https://github.com/ionic-team/ionic/issues/27016)
+* **select:** inherit white-space in select-text to allow text wrapping ([#26973](https://github.com/ionic-team/ionic/issues/26973)) ([19c1e25](https://github.com/ionic-team/ionic/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9)), closes [#19949](https://github.com/ionic-team/ionic/issues/19949)
+
+
+
+
+
+# [6.7.0](https://github.com/ionic-team/ionic/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/issues/26956)) ([3b0af7c](https://github.com/ionic-team/ionic/commit/3b0af7c55d4fa039be33d6605414761494d5af8f))
+
+
+
+
+
+## [6.6.3](https://github.com/ionic-team/ionic/compare/v6.6.2...v6.6.3) (2023-03-22)
+
+
+### Bug Fixes
+
+* **menu:** main content is not scrollable while swiping ([#26976](https://github.com/ionic-team/ionic/issues/26976)) ([88bd8a4](https://github.com/ionic-team/ionic/commit/88bd8a47c5e844d1d3a2b3b13621826faf776afb)), closes [#21193](https://github.com/ionic-team/ionic/issues/21193)
+
+
+
+
+
+## [6.6.2](https://github.com/ionic-team/ionic/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/issues/26390)) ([f809918](https://github.com/ionic-team/ionic/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic/issues/26381)
+* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic/commit/b8f893731471052df198824b7ece47606ffcc500))
+* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic/commit/27a5356fa2b72073d565e9d6f527107869faa3ee))
+* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic/issues/26207)
+* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic/issues/26944)
+
+
+
+
+
+## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic/issues/22468)
+* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic/issues/26851)
+* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic/issues/26908)
+* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic/issues/26854)) ([451d220](https://github.com/ionic-team/ionic/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic/issues/24714)
+* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd))
+
+
+
+
+
+# [6.6.0](https://github.com/ionic-team/ionic/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/issues/26746)) ([00d10f5](https://github.com/ionic-team/ionic/commit/00d10f5f6ad53850505bdad94b659b8801a3309d)), closes [#26745](https://github.com/ionic-team/ionic/issues/26745)
+
+
+### 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))
+* **picker-column:** assign custom aria-labels to column options ([#26749](https://github.com/ionic-team/ionic/issues/26749)) ([daa89a2](https://github.com/ionic-team/ionic/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63))
+* **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)
+
+
+### Bug Fixes
+
+* **content:** fullscreen values are recomputed on visible content ([#26847](https://github.com/ionic-team/ionic/issues/26847)) ([6dcd98b](https://github.com/ionic-team/ionic/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf)), closes [#26844](https://github.com/ionic-team/ionic/issues/26844)
+* **modal:** keyboard listener removed on dismiss ([#26856](https://github.com/ionic-team/ionic/issues/26856)) ([b4bcba3](https://github.com/ionic-team/ionic/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0))
+* **overlays:** focus trap refs cleared on dismiss ([#26855](https://github.com/ionic-team/ionic/issues/26855)) ([8d1d0fa](https://github.com/ionic-team/ionic/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314))
+
+
+
+
+
+## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
+
+
+### Bug Fixes
+
+* **card:** border radius does not overflow on paint in Safari ([#26539](https://github.com/ionic-team/ionic/issues/26539)) ([df5c8e2](https://github.com/ionic-team/ionic/commit/df5c8e231825b5e5b6923f322c94224a00d3b309)), closes [#26529](https://github.com/ionic-team/ionic/issues/26529)
+
+
+
+
+
+## [6.5.5](https://github.com/ionic-team/ionic/compare/v6.5.4...v6.5.5) (2023-02-20)
+
+
+### Bug Fixes
+
+* **datetime:** days of week and spacing buttons are not announced by screen readers ([#26813](https://github.com/ionic-team/ionic/issues/26813)) ([1a346b6](https://github.com/ionic-team/ionic/commit/1a346b62068076d0b0cc6b2dea4136e0f06576b8)), closes [#26811](https://github.com/ionic-team/ionic/issues/26811)
+* **hide-caret:** blur listener correctly removed ([#26808](https://github.com/ionic-team/ionic/issues/26808)) ([fef634f](https://github.com/ionic-team/ionic/commit/fef634f7f055f1672af50b56610f84c76e626814)), closes [#26807](https://github.com/ionic-team/ionic/issues/26807)
+* **input:** compositionend event is removed on unmount ([#26806](https://github.com/ionic-team/ionic/issues/26806)) ([caa8719](https://github.com/ionic-team/ionic/commit/caa8719cea2f4b3b460551224a8c4a69bd29afeb)), closes [#26805](https://github.com/ionic-team/ionic/issues/26805)
+* **sanitizer:** improve reliability of sanitizer ([#26820](https://github.com/ionic-team/ionic/issues/26820)) ([5e41391](https://github.com/ionic-team/ionic/commit/5e41391ed2585072095f42f7a6d40497f0e129d2))
+* **swipe-back:** gesture rtl setting is reactive ([#26795](https://github.com/ionic-team/ionic/issues/26795)) ([3a64de4](https://github.com/ionic-team/ionic/commit/3a64de49dbf470d470cb4516df2a5226ba751051)), closes [#26794](https://github.com/ionic-team/ionic/issues/26794)
+
+
+
+
+
+## [6.5.4](https://github.com/ionic-team/ionic/compare/v6.5.3...v6.5.4) (2023-02-15)
+
+
+### Bug Fixes
+
+* **content:** fullscreen works when rotating device ([#26782](https://github.com/ionic-team/ionic/issues/26782)) ([7b879fe](https://github.com/ionic-team/ionic/commit/7b879fec3d30b61c00faad035698ff643afaa78e)), closes [#26743](https://github.com/ionic-team/ionic/issues/26743)
+* **deps:** update ionicons usage to v6.1.2 ([#26752](https://github.com/ionic-team/ionic/issues/26752)) ([c07933c](https://github.com/ionic-team/ionic/commit/c07933cb69b0c31d3e44263769a7a26ee81223f8))
+* **deps:** update ionicons usage to v6.1.3 ([#26772](https://github.com/ionic-team/ionic/issues/26772)) ([1c71983](https://github.com/ionic-team/ionic/commit/1c719833292d4cfbdecadf9838d8c783785222ad))
+* **tap-click:** instant activate does not use a setTimeout ([#26748](https://github.com/ionic-team/ionic/issues/26748)) ([21c0806](https://github.com/ionic-team/ionic/commit/21c0806bbd1417b1e6239bc56272e18b3ff38f2e))
+
+
+
+
+
 ## [6.5.3](https://github.com/ionic-team/ionic/compare/v6.5.2...v6.5.3) (2023-02-08)
 
 
@@ -658,7 +815,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [6.1.0](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.1.0) (2022-04-13)
+# [6.1.0](https://github.com/ionic-team/ionic/compare/v6.0.16...v6.1.0) (2022-04-13)
 
 
 ### Bug Fixes

core/api.txt

@@ -377,6 +377,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
@@ -1386,6 +1387,7 @@ ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-toast,prop,icon,string | undefined,undefined,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": "6.5.3",
+  "version": "6.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.5.3",
+      "version": "6.7.2",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.1",
+        "ionicons": "^6.1.3",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -18,7 +18,7 @@
         "@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.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.4.0",
@@ -964,15 +964,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",
@@ -1512,19 +1503,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.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.1.tgz",
+      "integrity": "sha512-FTwjCuhlm1qHUGf4hWjfr64UMJD/z0hXYbk+O387Ioe6WdyZQ+0TBDAc6P+pHjx2xCv1VYNgrKbYrNixFWy4Dg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.32.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
         "node": ">=14"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -2584,36 +2578,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",
@@ -3666,15 +3630,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",
@@ -5316,9 +5271,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
-      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
+      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
       "dependencies": {
         "@stencil/core": "^2.18.0"
       }
@@ -8200,14 +8155,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.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.1.tgz",
+      "integrity": "sha512-GnEizysWMvoqHC3I9l8+4/ZxeLwLNdJJG76xdKGxzOcIZDcw5RSk/FKrFb5CuA+zcLpjIM2p9eR9Z4CuUDkWXg==",
       "dev": true,
       "hasInstallScript": true,
       "peer": true,
       "dependencies": {
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.32.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8217,9 +8172,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.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.1.tgz",
+      "integrity": "sha512-KZYUQC10mXD2Am1rGlidaalNGYk3LU1vZqqNk0gT4XPty1jOqgup8KDP8l2CUlqoNKhXM5IfGjWgW37xvGllBA==",
       "dev": true,
       "bin": {
         "playwright": "cli.js"
@@ -8358,77 +8313,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",
@@ -11128,14 +11012,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": {
@@ -11551,13 +11427,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.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.1.tgz",
+      "integrity": "sha512-FTwjCuhlm1qHUGf4hWjfr64UMJD/z0hXYbk+O387Ioe6WdyZQ+0TBDAc6P+pHjx2xCv1VYNgrKbYrNixFWy4Dg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
-        "playwright-core": "1.29.2"
+        "fsevents": "2.3.2",
+        "playwright-core": "1.32.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -12299,28 +12176,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": {
@@ -13089,14 +12944,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": {
@@ -14349,9 +14196,9 @@
       }
     },
     "ionicons": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.1.tgz",
-      "integrity": "sha512-Qe6mx25DFNwA9UL1rhewI5StI3uD4+BqB2KdvLjyWhtvoUXwyAsmfHLZuDANAHQowIKtTt6BZCt5/g5NIQ635Q==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
+      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
       "requires": {
         "@stencil/core": "^2.18.0"
       }
@@ -16465,19 +16312,19 @@
       }
     },
     "playwright": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.29.2.tgz",
-      "integrity": "sha512-hKBYJUtdmYzcjdhYDkP9WGtORwwZBBKAW8+Lz7sr0ZMxtJr04ASXVzH5eBWtDkdb0c3LLFsehfPBTRfvlfKJOA==",
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.1.tgz",
+      "integrity": "sha512-GnEizysWMvoqHC3I9l8+4/ZxeLwLNdJJG76xdKGxzOcIZDcw5RSk/FKrFb5CuA+zcLpjIM2p9eR9Z4CuUDkWXg==",
       "dev": true,
       "peer": true,
       "requires": {
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.32.1"
       }
     },
     "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.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.1.tgz",
+      "integrity": "sha512-KZYUQC10mXD2Am1rGlidaalNGYk3LU1vZqqNk0gT4XPty1jOqgup8KDP8l2CUlqoNKhXM5IfGjWgW37xvGllBA==",
       "dev": true
     },
     "postcss": {
@@ -16491,64 +16338,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": "6.5.3",
+  "version": "6.7.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^2.18.0",
-    "ionicons": "^6.1.1",
+    "ionicons": "^6.1.3",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
@@ -40,7 +40,7 @@
     "@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.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.4.0",

core/src/components.d.ts

@@ -5,16 +5,17 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, TitleSelectedDatesFormatter, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
+import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
 import { IonicSafeString } from "./utils/sanitization";
 import { AlertAttributes } from "./components/alert/alert-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { CounterFormatter } from "./components/item/item-interface";
 import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
 import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
 import { PinFormatter } from "./components/range/range-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SelectCompareFn } from "./components/select/select-interface";
-import { ToastAttributes, ToastPosition } from "./components/toast/toast-interface";
+import { ToastAttributes, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
 export namespace Components {
     interface IonAccordion {
         /**
@@ -191,7 +192,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;
         /**
@@ -757,6 +758,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.
          */
@@ -1034,7 +1039,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;
     }
@@ -1417,7 +1422,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;
         /**
@@ -2216,7 +2221,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;
         /**
@@ -2224,7 +2229,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;
     }
@@ -2976,12 +2981,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;
         /**
@@ -4138,7 +4147,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;
         /**
@@ -4723,6 +4732,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.
          */
@@ -5032,7 +5045,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;
     }
@@ -5407,7 +5420,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;
         /**
@@ -5610,7 +5623,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;
         /**
@@ -6175,7 +6188,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;
         /**
@@ -6183,7 +6196,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;
     }
@@ -6977,12 +6990,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;
         /**

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/test/basic/accordion.e2e.ts

@@ -7,6 +7,6 @@ test.describe('accordion: basic', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot()).toMatchSnapshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
+    await expect(page).toHaveScreenshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
   });
 });

core/src/components/accordion/test/multiple/accordion.e2e.ts

@@ -12,14 +12,14 @@ test.describe('accordion: multiple', () => {
 
     await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
 
-    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
+    await expect(accordionGroup).toHaveScreenshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
 
     await diningHeader.click();
     await page.waitForChanges();
 
     await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
 
-    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
+    await expect(accordionGroup).toHaveScreenshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
 
     await diningHeader.click();
     await attractionsHeader.click();
@@ -27,6 +27,6 @@ test.describe('accordion: multiple', () => {
 
     await expect(accordionGroup).toHaveJSProperty('value', []);
 
-    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
+    await expect(accordionGroup).toHaveScreenshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
   });
 });

core/src/components/accordion/test/nested/accordion.e2e.ts

@@ -11,24 +11,18 @@ test.describe('accordion: nested', () => {
   test('parent and child should not be disabled', async ({ page }) => {
     const enabledGroup = page.locator('ion-accordion-group#enabled');
 
-    expect(await enabledGroup.screenshot()).toMatchSnapshot(
-      `accordion-nested-enabled-${page.getSnapshotSettings()}.png`
-    );
+    await expect(enabledGroup).toHaveScreenshot(`accordion-nested-enabled-${page.getSnapshotSettings()}.png`);
   });
 
   test('parent should not be disabled when only child is disabled', async ({ page }) => {
     const nestedDisabledGroup = page.locator('ion-accordion-group#nested-disabled');
 
-    expect(await nestedDisabledGroup.screenshot()).toMatchSnapshot(
-      `accordion-child-disabled-${page.getSnapshotSettings()}.png`
-    );
+    await expect(nestedDisabledGroup).toHaveScreenshot(`accordion-child-disabled-${page.getSnapshotSettings()}.png`);
   });
 
   test('parent and child should be disabled when parent is disabled', async ({ page }) => {
     const parentDisabledGroup = page.locator('ion-accordion-group#parent-disabled');
 
-    expect(await parentDisabledGroup.screenshot()).toMatchSnapshot(
-      `accordion-parent-disabled-${page.getSnapshotSettings()}.png`
-    );
+    await expect(parentDisabledGroup).toHaveScreenshot(`accordion-parent-disabled-${page.getSnapshotSettings()}.png`);
   });
 });

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>

core/src/components/action-sheet/test/basic/action-sheet.e2e.ts

@@ -144,7 +144,7 @@ class ActionSheetFixture {
   }
 
   async screenshot(modifier: string) {
-    expect(await this.actionSheet.screenshot()).toMatchSnapshot(
+    await expect(this.actionSheet).toHaveScreenshot(
       `action-sheet-${modifier}-diff-${this.page.getSnapshotSettings()}.png`
     );
   }