v6.2.9

resolves #25997

.github/CODEOWNERS

@@ -12,4 +12,4 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 # Global owners
-* @ionic-team/framework-core
+* @ionic-team/framework

.github/PROCESS.md

@@ -1,261 +0,0 @@
-# Process
-
-This document is to describe the internal process that the Ionic team uses for issue management, project planning and the development workflow.
-
-## Table of contents
- * [Project Boards](#project-boards)
- * [Managing Issues](#managing-issues)
- * [Workflow](#workflow)
- * [Releasing](#releasing)
-
-## Project Boards
-
-The project boards are located under the `Projects` tab in GitHub: https://github.com/ionic-team/ionic/projects/
-
-### Core Project Board
-
-The `Core` project board contains issues related to the `@ionic/core` package. A description of each column is below.
-
-#### Backlog :robot:
-
-Contains up to 20 issues that are important to work on soon but we don't think we can fit in the current sprint. If we finish everything we planned for the week we can pull from this column. Issues will automatically move to this column when they are added to the project board.
-
-#### On Deck :baseball:
-
-Contains issues that we believe we can accomplish in the current sprint. Issues should be manually moved to this column when we have our sprint planning meeting.
-
-#### In Progress :person_fencing:
-
-Issues and pull requests that are currently being worked on. Issues should be manually moved to this column and assigned to yourself when you begin working on them. Pull requests are automatically added to this column when added to the project board.
-
-#### Needs Review :thinking:
-
-Issues and pull requests that need review. Pull requests will automatically move here when a reviewer requests changes, or it no longer meets the minimum number of required approving reviews.
-
-#### Done :tada:
-
-Issues and pull requests that are completed. Issues will automatically move here when they are closed. Pull requests will automatically moved here when they are merged or closed with unmerged commits.
-
-
-## Managing Issues
-
-### Issues to Triage
-
-The issues that need to be triaged all have the `triage` label. In many cases the issue can be automatically processed by the Ionic Issue Bot by applying a specific label.
-
-Once another label is applied to the issue, the `triage` label is automatically removed by the bot.
-
-### Wrong Repository
-
-If an issue does not pertain to the Ionic Framework but does pertain to another repository, it should be moved to that repository. The bot has been set up to automatically create the issue in other repositories while closing and locking the issue in this repository. Use one of the following labels to perform that action:
-
-- ionitron: cli
-- ionitron: docs
-- ionitron: stencil
-- ionitron: native
-
-### Ionic Appflow Issues
-
-If the issue is associated with Ionic Appflow the submitter should be told to use the [Ionic Appflow Support Forum](https://ionic.zendesk.com/hc/en-us/requests/new). The issue should be closed and locked. Use the `ionitron: ionic appflow` label to accomplish this.
-
-### Support Questions
-
-If the issue is a support question, the submitter should be redirected to our [forum](https://forum.ionicframework.com). The issue should be closed and locked. Use the `ionitron: support` label to accomplish this.
-
-### Incomplete Template
-
-If the issue template has not been filled out completely, the issue should be closed and locked. The submitter should be informed to re-submit the issue making sure they fill the form out completely. Use the `ionitron: missing template` label to accomplish this.
-
-### Issues with Open Questions
-
-In many cases, the template is mostly filled out but just missing a thing or two or you may have a question or need clarification. In such a case, the submitter should be asked to supply that information.
-
-1. add a comment requesting the additional information or clarification
-1. add the `needs: reply` label to the task
-
-NOTE: be sure to perform those actions in the order stated. If you add the comment second it will trigger the removal of the label.
-
-If there is a response to the question, the bot will remove the `needs: reply` and apply the `triage` label. The issue will then go through the triage handling again.
-
-If there is no response within 14 days, the issue will be closed and locked.
-
-### Missing Code Reproduction
-
-If the information the submitter has supplied is not enough for you to reproduce the issue, add the `ionitron: needs reproduction` label. An automated comment will be added to the thread asking the submitter to provide a code reproduction of the issue.
-
-This label can also be added when the submitter has supplied some code, but not enough for you to reproduce the issue (i.e. code snippets).
-
-Issues with this label are not automatically closed and locked, so we manually close and lock them if there is no response within 14 days.
-
-## Workflow
-
-### Overview
-
-![](https://user-images.githubusercontent.com/6577830/53817482-80e6c480-3f33-11e9-9e09-be8dcf840ef8.png)
-
-We have two long-living branches:
-
-- `main`: completed features, bug fixes, refactors, chores
-- `stable`: the latest release
-
-The overall flow:
-
-1. Feature, refactor, and bug fix branches are created from `main`
-1. When a feature, refactor, or fix is complete it is merged into `main`
-1. A release branch is created from `main`
-1. When the release branch is done it is merged into `main` and `stable`
-1. If an issue in `stable` is detected a hotfix branch is created from `stable`
-1. Once the hotfix is complete it is merged to both `main` and `stable`
-1. All branches should follow the syntax of `{type}-{details}` where `{type}` is the type of branch (`hotfix`, `release`, or one of the [commit types](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format)) and `{details}` is a few hyphen separated words explaining the branch
-
-### Stable and Main Branches
-
-#### Stable Branch
-
-Branches created from `stable`:
-
-The following branch should be merged back to **both** `main` and `stable`:
-
-- A `hotfix` branch (e.g. `hotfix-missing-export`): a bug fix that is fixing a regression or issue with a published release
-
-A `hotfix` branch should be the **only** branch that is created from stable.
-
-#### Main Branch
-
-Branches created from `main`:
-
-The following branches should be merged back to `main` via a pull request:
-
-1. A feature branch (e.g. `feat-desktop-support`): an addition to the API that is not a bug fix or regression fix
-1. A bug fix branch (e.g. `fix-tab-color`): a bug fix that is not fixing a regression or issue with a published release
-1. All other types listed in the [commit message types](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format): `docs`, `style`, `refactor`, `perf`, `test`, `chore`
-
-The following branch should be merged back to **both** `main` and `stable`:
-
-1. A `release` branch (e.g. `release-4.1.x`): contains all fixes and (optionally) features that are tested and should go into the release
-
-
-### Feature Branches
-
-Each new feature should reside in its own branch, based on the `main` branch. When a feature is complete, it should go into a pull request that gets merged back into `main`. A pull request adding a feature should be approved by two team members. Features should never interact directly with `stable`.
-
-
-### Release Branches
-
-Once `main` has acquired enough features for a release (or a predetermined release date is approaching), fork a release branch off of `main`. Creating this branch starts the next release cycle, so no new features can be added after this point - only bug fixes, documentation generation, and other release-oriented tasks should go in this branch.
-
-Once the release is ready to ship, it will get merged into `stable` and `main`, then the release branch will be deleted. It’s important to merge back into `main` because critical updates may have been added to the release branch and they need to be accessible to new features. This should be done in a pull request after review.
-
-See the [steps for releasing](#releasing) below for detailed information on how to publish a release.
-
-### Version Branches
-
-Once a release has shipped and the release branch has been merged into `stable` and `main` it should also be merged into its corresponding version branch. These version branches allow us to ship updates for specific versions of the framework (i.e. Lets us ship a bug fix that only affects 4.2.x).
-
-Patch releases should be merged into their corresponding version branches. For example, a `release-4.1.1` branch should be merged into the `4.1.x` version branch and a `release-5.0.1` branch should be merged into the `5.0.x` version branch.
-
-When releasing a major version such as `5.0.0 ` or a minor version such as `4.1.0` , the version branch will not exist. The version branch should be created once the release branch has been merged into `stable` and `main`. For example, when releasing `4.1.0`, the `release-4.1.0` release branch should be merged into `stable` and `main` and then the `4.1.x` version branch should be created off the latest `stable`.
-
-
-### Hotfix Branches
-
-Maintenance or “hotfix” branches are used to quickly patch production releases. This is the only branch that should fork directly off of `stable`. As soon as the fix is complete, it should be merged into both `stable` and `main` (or the current release branch).
-
-
-### Examples
-
-#### Making a Change
-
-1. Create a branch from `main`.
-1. Make changes. Limit your changes to a "unit of work", meaning don't include irrelevant changes that may confuse and delay the change.
-1. Push changes.
-1. Create a PR with the base of `main`.
-1. Have someone approve your change (optional right now--at your discretion).
-
-    <img width="236" alt="image" src="https://user-images.githubusercontent.com/236501/47031893-913e0480-d136-11e8-9d9a-4b6297a4d7ba.png">
-
-1. Wait for status checks to succeed. Fix errors if any occur.
-
-    <img width="223" alt="All checks have passed" src="https://user-images.githubusercontent.com/236501/47031830-62c02980-d136-11e8-9055-08af1b717304.png">
-
-1. Click **Squash and merge**. Use the dropdown to select this option if necessary.
-
-    <img width="192" alt="Squash and merge button" src="https://user-images.githubusercontent.com/236501/47031620-da418900-d135-11e8-91ff-e84f2478b2b3.png">
-
-1. During confirmation, rewrite the commit message using our [Commit Message Format guidelines](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format). Keep the `(#1234)` at the end; it will create a link to the PR in the commit history and `CHANGELOG.md`. This is where commits on `main` become permanent.
-
-    <img width="672" alt="Squash and merge confirmation" src="https://user-images.githubusercontent.com/236501/47031753-31dff480-d136-11e8-9116-03934961bdc2.png">
-
-1. Confirm squash and merge into `main`.
-
-#### Updating from `main`
-
-1. Pull the latest changes locally.
-1. Merge the changes, fixing any conflicts.
-1. Push the merged changes.
-
-OR
-
-1. Click **Update branch** on the PR:
-
-    <img width="672" alt="Update branch button" src="https://user-images.githubusercontent.com/236501/47032205-66a07b80-d137-11e8-8c9b-ee37d2d147c9.png">
-
-1. Pull the merged changes locally.
-
-#### Hotfixes
-
-Hotfixes bypass `main` and should only be used for urgent fixes that can't wait for the next release to be ready.
-
-1. Create a branch from `stable`.
-1. Make changes.
-1. Run `npm run release.prepare`.
-1. Push changes.
-1. Create a PR, making sure the PR will merge into `stable`.
-1. Click **Squash and merge**. Use the dropdown to select this option if necessary.
-
-    <img width="192" alt="Squash and merge button" src="https://user-images.githubusercontent.com/236501/47031620-da418900-d135-11e8-91ff-e84f2478b2b3.png">
-
-1. During confirmation, rewrite the commit message using our [Commit Message Format guidelines](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format). Keep the `(#1234)` at the end; it will create a link to the PR in the commit history and `CHANGELOG.md`. This is where commits on `main` become permanent.
-
-    <img width="672" alt="Squash and merge confirmation" src="https://user-images.githubusercontent.com/236501/47031753-31dff480-d136-11e8-9116-03934961bdc2.png">
-
-1. Confirm squash and merge into `stable`.
-1. CI builds `stable`, performing the release.
-1. Create a PR to merge `stable` into `main`.
-1. Click **Merge pull request**. Use the dropdown to select this option if necessary.
-
-    <img width="191" alt="Merge pull request button" src="https://user-images.githubusercontent.com/236501/47032669-8be1b980-d138-11e8-9a90-d1518c223184.png">
-
-
-## Releasing
-
-1. Create the release branch from `main`, for example: `release-4.5.0`.
-
-1. For major or minor releases, create a version branch based off the latest version branch. For example, if releasing 4.5.0, create a branch called `4.5.x` based off `4.4.x`.
-
-1. Submit a pull request from the release branch into the version branch. Do not merge this pull request yet.
-
-1. Verify all tests are passing, fix any bugs if needed and make sure no undesired commits are in.
-
-1. Navigate to the root of the repository while on the release branch.
-
-1. Run `npm i` if it hasn't already been done.
-
-1. Run `npm run release.prepare`
-    - Select the version based on the type of commits and the [Ionic Versioning](https://ionicframework.com/docs/intro/versioning)
-    - After the process completes, verify the version number in all packages (`core`, `docs`, `angular`)
-    - Verify the changelog commits are accurate and follow the [proper format]((https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md#commit-message-format))
-    - For major or minor releases, ensure that the version number has an associated title (for example: `4.5.0 Boron`)
-    - Commit these changes with the version number as the message, e.g. `git commit -m "4.5.0"`
-
-1. *(Optional)* Run `npm run release -- --dry-run` to run the release without publishing and verify the version.
-
-1. Run `npm run release`
-
-1. Click **Merge pull request**. Use the dropdown to select this option if necessary.
-
-    <img width="191" alt="Merge pull request button" src="https://user-images.githubusercontent.com/236501/47032669-8be1b980-d138-11e8-9a90-d1518c223184.png">
-
-1. Rewrite the commit message to `merge release-[VERSION]` with the proper release branch. For example, if this release is for `4.5.0`, the message would be `merge release-4.5.0`.
-
-1. Submit a pull request from the release branch into `main`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.

CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.9](https://github.com/ionic-team/ionic-framework/compare/v6.2.8...v6.2.9) (2022-09-28)
+
+
+### Bug Fixes
+
+* **animation:** improve compatibility with ssr ([#25992](https://github.com/ionic-team/ionic-framework/issues/25992)) ([02234f6](https://github.com/ionic-team/ionic-framework/commit/02234f69e0333266b4d500f24b3bb002c099bda2)), closes [#25987](https://github.com/ionic-team/ionic-framework/issues/25987)
+* **chip:** default color has contrast on dark mode ([#25998](https://github.com/ionic-team/ionic-framework/issues/25998)) ([ef78a12](https://github.com/ionic-team/ionic-framework/commit/ef78a123e553e27d9c41c2735bf44c21cbfa7ade)), closes [#25997](https://github.com/ionic-team/ionic-framework/issues/25997)
+* **datetime:** expand/collapse icon is not announced to screen readers ([#26018](https://github.com/ionic-team/ionic-framework/issues/26018)) ([649d3cf](https://github.com/ionic-team/ionic-framework/commit/649d3cf688d44226f63783bf784f747d1a61476c))
+* **datetime:** swiping wheel no longer dismisses card modal ([#25981](https://github.com/ionic-team/ionic-framework/issues/25981)) ([7543c84](https://github.com/ionic-team/ionic-framework/commit/7543c84445e6698d29cafe75b423c33115bc534c))
+* **datetime:** switching month and year accounts for day ([#25996](https://github.com/ionic-team/ionic-framework/issues/25996)) ([11f44e9](https://github.com/ionic-team/ionic-framework/commit/11f44e94f4abe81892f33a057055e5f9b5092528)), closes [#25585](https://github.com/ionic-team/ionic-framework/issues/25585)
+* **datetime:** time button is easier to access with screen readers ([#26019](https://github.com/ionic-team/ionic-framework/issues/26019)) ([5846b41](https://github.com/ionic-team/ionic-framework/commit/5846b418a7e0b2f0bd025c2dac1f248ecb2d17c2))
+* **picker-internal:** fonts now render consistently ([#26020](https://github.com/ionic-team/ionic-framework/issues/26020)) ([54f99bd](https://github.com/ionic-team/ionic-framework/commit/54f99bd5b308386d43596677c9e9227dae822541))
+* **react:** overlays now define internal ionic components ([#25967](https://github.com/ionic-team/ionic-framework/issues/25967)) ([21dc893](https://github.com/ionic-team/ionic-framework/commit/21dc893f90a56d14d69330367daae6788e32652e)), closes [#25962](https://github.com/ionic-team/ionic-framework/issues/25962)
+* **vue:** back button handler only fires in routing context ([#26014](https://github.com/ionic-team/ionic-framework/issues/26014)) ([19f0fb7](https://github.com/ionic-team/ionic-framework/commit/19f0fb70452c8bd003743984a3d6522369eaa3b7))
+
+
+
+
+
+## [6.2.8](https://github.com/ionic-team/ionic-framework/compare/v6.2.7...v6.2.8) (2022-09-21)
+
+
+### Bug Fixes
+
+* **datetime:** account for 12AM with min times and 12 hour format ([#25952](https://github.com/ionic-team/ionic-framework/issues/25952)) ([55ebd6c](https://github.com/ionic-team/ionic-framework/commit/55ebd6cdf39c01b401e876b76e755bfa04db8f65)), closes [#25183](https://github.com/ionic-team/ionic-framework/issues/25183)
+* **item:** show the highlight on iOS when --highlight-height is set ([#25905](https://github.com/ionic-team/ionic-framework/issues/25905)) ([d7db133](https://github.com/ionic-team/ionic-framework/commit/d7db1333f13834ecb447b4b1da62cfffed9fb333))
+* **overlays:** focus trapping no longer includes disabled elements ([#25949](https://github.com/ionic-team/ionic-framework/issues/25949)) ([6cb5827](https://github.com/ionic-team/ionic-framework/commit/6cb5827d069c255ab0a9a8c319aba9994a4c5196))
+* **overlays:** focus trapping no longer includes hidden elements ([#25948](https://github.com/ionic-team/ionic-framework/issues/25948)) ([5c10f98](https://github.com/ionic-team/ionic-framework/commit/5c10f98ceb3ae42d3363b38ba786b9122676a59c))
+
+
+### Performance Improvements
+
+* **card:** avoid force compositing on ios ([#25942](https://github.com/ionic-team/ionic-framework/issues/25942)) ([174c3b3](https://github.com/ionic-team/ionic-framework/commit/174c3b30a0bce7e7ab13e5605348ec107af69dd6))
+
+
+
+
+
+## [6.2.7](https://github.com/ionic-team/ionic-framework/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic-framework/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic-framework/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic-framework/issues/18593)
+* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic-framework/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic-framework/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic-framework/issues/25895)
+* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic-framework/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic-framework/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic-framework/issues/25918)
+* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic-framework/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic-framework/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic-framework/issues/25908)
+* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic-framework/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic-framework/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic-framework/issues/24296)
+* **react:** add correct type for CreateAnimation ([#25931](https://github.com/ionic-team/ionic-framework/issues/25931)) ([89d3e3c](https://github.com/ionic-team/ionic-framework/commit/89d3e3c819b282e4d7ce716b9099eaab82ab4de2))
+* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic-framework/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic-framework/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic-framework/issues/25897)
+* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic-framework/issues/25928)) ([777109a](https://github.com/ionic-team/ionic-framework/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic-framework/issues/25893)
+
+
+
+
+
+## [6.2.6](https://github.com/ionic-team/ionic-framework/compare/v6.2.5...v6.2.6) (2022-09-07)
+
+
+### Bug Fixes
+
+* **datetime:** calendar day and years are now localized ([#25847](https://github.com/ionic-team/ionic-framework/issues/25847)) ([cbd1268](https://github.com/ionic-team/ionic-framework/commit/cbd1268a03204f05314f2ba284ad433457a9cf33)), closes [#25843](https://github.com/ionic-team/ionic-framework/issues/25843)
+* **datetime:** hourCycle formats hour correctly ([#25869](https://github.com/ionic-team/ionic-framework/issues/25869)) ([1a1491d](https://github.com/ionic-team/ionic-framework/commit/1a1491df0242da1cb3c9a7f128bbd4d5ce4dbf3e)), closes [#25862](https://github.com/ionic-team/ionic-framework/issues/25862)
+* **datetime:** month grid no longer loops on ios ([#25857](https://github.com/ionic-team/ionic-framework/issues/25857)) ([c938054](https://github.com/ionic-team/ionic-framework/commit/c938054605dffb6c3002a64a3d8aaf36892c7a93)), closes [#25752](https://github.com/ionic-team/ionic-framework/issues/25752)
+* **vue:** custom animation plays when replacing ([#25863](https://github.com/ionic-team/ionic-framework/issues/25863)) ([2d3661a](https://github.com/ionic-team/ionic-framework/commit/2d3661ae3894b98ac4b8b158594b8de0f0823073)), closes [#25831](https://github.com/ionic-team/ionic-framework/issues/25831)
+
+
+
+
+
 ## [6.2.5](https://github.com/ionic-team/ionic-framework/compare/v6.2.4...v6.2.5) (2022-08-31)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.9](https://github.com/ionic-team/ionic/compare/v6.2.8...v6.2.9) (2022-09-28)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.2.8](https://github.com/ionic-team/ionic/compare/v6.2.7...v6.2.8) (2022-09-21)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic/issues/18593)
+
+
+
+
+
+## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.2.5](https://github.com/ionic-team/ionic/compare/v6.2.4...v6.2.5) (2022-08-31)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.5",
+  "version": "6.2.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.2.5",
+      "version": "6.2.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.2.4",
+        "@ionic/core": "^6.2.8",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,12 +1023,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.4.tgz",
-      "integrity": "sha512-LDRIwG5plwTHELxQ/j3uEfLJ7YkzJzR1V4QGE+X59aE/l7XoXZyLb1NWFjY7glBbFHGQgSuPFWNhXFkyRBxRFQ==",
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.8.tgz",
+      "integrity": "sha512-tUUdvCPo9Z4RQXjvxNXBXQsVTFDAH2ju/HAhzZiAvdfwpHfpA39DWkXwAQeoV9gfFFblaOmCmeSq/8JP/FRn4A==",
       "dependencies": {
         "@stencil/core": "^2.17.4",
-        "ionicons": "^6.0.2",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       }
     },
@@ -1234,9 +1234,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3569,9 +3569,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
       "dependencies": {
         "@stencil/core": "~2.16.0"
       }
@@ -7951,12 +7951,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.4.tgz",
-      "integrity": "sha512-LDRIwG5plwTHELxQ/j3uEfLJ7YkzJzR1V4QGE+X59aE/l7XoXZyLb1NWFjY7glBbFHGQgSuPFWNhXFkyRBxRFQ==",
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.8.tgz",
+      "integrity": "sha512-tUUdvCPo9Z4RQXjvxNXBXQsVTFDAH2ju/HAhzZiAvdfwpHfpA39DWkXwAQeoV9gfFFblaOmCmeSq/8JP/FRn4A==",
       "requires": {
         "@stencil/core": "^2.17.4",
-        "ionicons": "^6.0.2",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -8111,9 +8111,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
     },
     "@types/estree": {
       "version": "0.0.39",
@@ -9818,9 +9818,9 @@
       }
     },
     "ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
       "requires": {
         "@stencil/core": "~2.16.0"
       }

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.5",
+  "version": "6.2.9",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.2.5",
+    "@ionic/core": "^6.2.9",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

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

@@ -308,8 +308,19 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
 
     this.activatedView = enteringView;
+
+    /**
+     * The top outlet is set prior to the entering view's transition completing,
+     * so that when we have nested outlets (e.g. ion-tabs inside an ion-router-outlet),
+     * the tabs outlet will be assigned as the top outlet when a view inside tabs is
+     * activated.
+     *
+     * In this scenario, activeWith is called for both the tabs and the root router outlet.
+     * To avoid a race condition, we assign the top outlet synchronously.
+     */
+    this.navCtrl.setTopOutlet(this);
+
     this.stackCtrl.setActive(enteringView).then((data) => {
-      this.navCtrl.setTopOutlet(this);
       this.activateEvents.emit(cmpRef.instance);
       this.stackEvents.emit(data);
     });

angular/test/README.md

@@ -2,6 +2,26 @@
 
 Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
 
+## 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.
+
+See https://angular.io/cli/cache for more information.
+
+### Disable Cache
+
+```
+ng cache disable
+```
+
+> Note: You may need to manually remove the `.angular` directory once after running this command.
+
+### Enable Cache
+
+```
+ng cache enable
+```
+
 ## 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.

angular/test/base/e2e/src/tabs.spec.ts

@@ -97,15 +97,27 @@ describe('Tabs', () => {
     it('should navigate deep then go home', () => {
       const tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
+      cy.ionPageVisible('app-tabs-tab1-nested');
+      cy.ionPageHidden('app-tabs-tab1');
+
       testTabTitle('Tab 1 - Page 2 (1)');
 
       cy.get('#goto-next').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.get('#tab-button-contact').click();
+      cy.ionPageVisible('app-tabs-tab2');
+      cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
+
       testTabTitle('Tab 2 - Page 1');
 
       cy.get('#tab-button-account').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab2');
+
       testTabTitle('Tab 1 - Page 2 (2)');
       cy.testStack('ion-tabs ion-router-outlet', [
         'app-tabs-tab1',
@@ -115,6 +127,16 @@ describe('Tabs', () => {
       ]);
 
       cy.get('#tab-button-account').click();
+
+      /**
+       * Wait for the leaving view to
+       * be unmounted otherwise testTabTitle
+       * may get the leaving view before it
+       * is unmounted.
+       */
+      cy.ionPageVisible('app-tabs-tab1');
+      cy.ionPageDoesNotExist('app-tabs-tab1-nested');
+
       testTabTitle('Tab 1 - Page 1');
       cy.testStack('ion-tabs ion-router-outlet', [
         'app-tabs-tab1',
@@ -225,24 +247,113 @@ describe('Tabs', () => {
     it('should navigate deep then go home and preserve navigation extras', () => {
       let tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
+      cy.ionPageVisible('app-tabs-tab1-nested');
+      cy.ionPageHidden('app-tabs-tab1');
+
       tab = testTabTitle('Tab 1 - Page 2 (1)');
 
       tab.find('#goto-next').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.ionTabClick('Tab Two');
+      cy.ionPageVisible('app-tabs-tab2');
+      cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
+
       testTabTitle('Tab 2 - Page 1');
 
       cy.ionTabClick('Tab One');
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab2');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.ionTabClick('Tab One');
+      /**
+       * Wait for the leaving view to
+       * be unmounted otherwise testTabTitle
+       * may get the leaving view before it
+       * is unmounted.
+       */
+      cy.ionPageVisible('app-tabs-tab1');
+      cy.ionPageDoesNotExist('app-tabs-tab1-nested');
+
       testTabTitle('Tab 1 - Page 1');
 
       testUrlContains(rootUrl);
     });
   })
 
+  describe('entry url - /tabs/account', () => {
+    beforeEach(() => {
+      cy.visit('/tabs/account');
+    });
+    it('should pop to previous view when leaving tabs outlet', () => {
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      cy.get('#goto-tab1-page2').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-global').click();
+
+      cy.get('ion-title').should('contain.text', 'Global Page');
+
+      cy.get('#goto-prev-pop').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-prev').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      /**
+       * Verifies that when entering the tabs outlet directly,
+       * the navController.pop() method does not pop the previous view,
+       * when you are at the root of the tabs outlet.
+       */
+      cy.get('#goto-previous-page').click();
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+    });
+  });
+
+  describe('entry url - /', () => {
+    it('should pop to the root outlet from the tabs outlet', () => {
+      cy.visit('/');
+
+      cy.get('ion-title').should('contain.text', 'Test App');
+
+      cy.get('ion-item').contains('Tabs test').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      cy.get('#goto-tab1-page2').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-global').click();
+
+      cy.get('ion-title').should('contain.text', 'Global Page');
+
+      cy.get('#goto-prev-pop').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-prev').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      cy.get('#goto-previous-page').click();
+
+      cy.get('ion-title').should('contain.text', 'Test App');
+
+    });
+  });
+
+
   describe('entry url - /tabs/account/nested/1', () => {
     beforeEach(() => {
       cy.visit('/tabs/account/nested/1');

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

@@ -55,6 +55,10 @@ const routes: Routes = [
     path: 'tabs',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
+  {
+    path: 'tabs-global',
+    loadChildren: () => import('./tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
+  },
   {
     path: 'nested-outlet',
     component: NestedOutletComponent,
@@ -68,7 +72,7 @@ const routes: Routes = [
         component: NestedOutletPage2Component
       }
     ]
-  }
+  },
 ];
 
 @NgModule({

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

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { TabsGlobalComponent } from "./tabs-global.component";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: TabsGlobalComponent
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class TabsGlobalRoutingModule { }

angular/test/base/src/app/tabs-global/tabs-global.component.html

@@ -0,0 +1,17 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>
+      Global Page
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-content>
+    <ion-button id="goto-prev-pop" (click)="navCtrl.pop()">Go To Previous</ion-button>
+  </ion-content>
+</ion-content>

angular/test/base/src/app/tabs-global/tabs-global.component.ts

@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+import { NavController } from "@ionic/angular";
+
+/**
+ * This component is used in conjunction with a tabs router-outlet,
+ * to validate the behavior of different routing APIs (e.g. NavController)
+ * when leaving and re-entering a router-outlet.
+ */
+@Component({
+  selector: 'app-tabs-global',
+  templateUrl: 'tabs-global.component.html'
+})
+export class TabsGlobalComponent {
+
+  constructor(public navCtrl: NavController) { }
+
+}

angular/test/base/src/app/tabs-global/tabs-global.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { TabsGlobalRoutingModule } from "./tabs-global-routing.module";
+import { TabsGlobalComponent } from "./tabs-global.component";
+
+@NgModule({
+  imports: [
+    IonicModule,
+    TabsGlobalRoutingModule
+  ],
+  declarations: [TabsGlobalComponent]
+})
+export class TabsGlobalModule { }

angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -12,6 +12,9 @@
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/contact" id="goto-tab2-page1">Go to Tab 2 - Page 1</ion-button>
+    <ion-button routerLink="/tabs-global" id="goto-global">Go to Global Page</ion-button>
+    <ion-button routerLink="/tabs-global" id="goto-prev" (click)="navCtrl.pop()">Go to Previous Page (NavController).
+    </ion-button>
     <ion-button routerLink="/tabs/account/nested/{{next()}}" id="goto-next">Go to Next</ion-button>
   </p>
 </ion-content>

angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -1,5 +1,6 @@
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs-tab1-nested',
@@ -9,7 +10,8 @@ export class TabsTab1NestedComponent implements OnInit {
   id = '';
   constructor(
     private route: ActivatedRoute,
-  ) {}
+    public navCtrl: NavController
+  ) { }
 
   ngOnInit() {
     this.id = this.route.snapshot.paramMap.get('id');
@@ -18,4 +20,5 @@ export class TabsTab1NestedComponent implements OnInit {
   next() {
     return parseInt(this.id, 10) + 1;
   }
+
 }

angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html

@@ -19,5 +19,6 @@
       id="goto-nested-page1-with-query-params">Go to Page 2 with Query Params</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
     <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
+    <ion-button (click)="navCtrl.pop()" id="goto-previous-page">Go to Previous Page</ion-button>
   </p>
 </ion-content>

angular/test/base/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -1,4 +1,5 @@
 import { Component, NgZone } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs-tab1',
@@ -9,6 +10,8 @@ export class TabsTab1Component {
   segment = 'one';
   changed = 'false';
 
+  constructor(public navCtrl: NavController) {}
+
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
     setTimeout(() => {

core/.eslintrc.js

@@ -16,7 +16,8 @@ module.exports = {
     "sourceType": "module"
   },
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "custom-rules"
   ],
   "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -29,6 +30,7 @@ module.exports = {
     ],
     "no-useless-catch": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "no-case-declarations": "off"
+    "no-case-declarations": "off",
+    "custom-rules/no-component-on-ready-method": "error"
   }
 };

core/CHANGELOG.md

@@ -3,6 +3,71 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.9](https://github.com/ionic-team/ionic/compare/v6.2.8...v6.2.9) (2022-09-28)
+
+
+### Bug Fixes
+
+* **animation:** improve compatibility with ssr ([#25992](https://github.com/ionic-team/ionic/issues/25992)) ([02234f6](https://github.com/ionic-team/ionic/commit/02234f69e0333266b4d500f24b3bb002c099bda2)), closes [#25987](https://github.com/ionic-team/ionic/issues/25987)
+* **chip:** default color has contrast on dark mode ([#25998](https://github.com/ionic-team/ionic/issues/25998)) ([ef78a12](https://github.com/ionic-team/ionic/commit/ef78a123e553e27d9c41c2735bf44c21cbfa7ade)), closes [#25997](https://github.com/ionic-team/ionic/issues/25997)
+* **datetime:** expand/collapse icon is not announced to screen readers ([#26018](https://github.com/ionic-team/ionic/issues/26018)) ([649d3cf](https://github.com/ionic-team/ionic/commit/649d3cf688d44226f63783bf784f747d1a61476c))
+* **datetime:** swiping wheel no longer dismisses card modal ([#25981](https://github.com/ionic-team/ionic/issues/25981)) ([7543c84](https://github.com/ionic-team/ionic/commit/7543c84445e6698d29cafe75b423c33115bc534c))
+* **datetime:** switching month and year accounts for day ([#25996](https://github.com/ionic-team/ionic/issues/25996)) ([11f44e9](https://github.com/ionic-team/ionic/commit/11f44e94f4abe81892f33a057055e5f9b5092528)), closes [#25585](https://github.com/ionic-team/ionic/issues/25585)
+* **datetime:** time button is easier to access with screen readers ([#26019](https://github.com/ionic-team/ionic/issues/26019)) ([5846b41](https://github.com/ionic-team/ionic/commit/5846b418a7e0b2f0bd025c2dac1f248ecb2d17c2))
+* **picker-internal:** fonts now render consistently ([#26020](https://github.com/ionic-team/ionic/issues/26020)) ([54f99bd](https://github.com/ionic-team/ionic/commit/54f99bd5b308386d43596677c9e9227dae822541))
+
+
+
+
+
+## [6.2.8](https://github.com/ionic-team/ionic/compare/v6.2.7...v6.2.8) (2022-09-21)
+
+
+### Bug Fixes
+
+* **datetime:** account for 12AM with min times and 12 hour format ([#25952](https://github.com/ionic-team/ionic/issues/25952)) ([55ebd6c](https://github.com/ionic-team/ionic/commit/55ebd6cdf39c01b401e876b76e755bfa04db8f65)), closes [#25183](https://github.com/ionic-team/ionic/issues/25183)
+* **item:** show the highlight on iOS when --highlight-height is set ([#25905](https://github.com/ionic-team/ionic/issues/25905)) ([d7db133](https://github.com/ionic-team/ionic/commit/d7db1333f13834ecb447b4b1da62cfffed9fb333))
+* **overlays:** focus trapping no longer includes disabled elements ([#25949](https://github.com/ionic-team/ionic/issues/25949)) ([6cb5827](https://github.com/ionic-team/ionic/commit/6cb5827d069c255ab0a9a8c319aba9994a4c5196))
+* **overlays:** focus trapping no longer includes hidden elements ([#25948](https://github.com/ionic-team/ionic/issues/25948)) ([5c10f98](https://github.com/ionic-team/ionic/commit/5c10f98ceb3ae42d3363b38ba786b9122676a59c))
+
+
+### Performance Improvements
+
+* **card:** avoid force compositing on ios ([#25942](https://github.com/ionic-team/ionic/issues/25942)) ([174c3b3](https://github.com/ionic-team/ionic/commit/174c3b30a0bce7e7ab13e5605348ec107af69dd6))
+
+
+
+
+
+## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic/issues/25895)
+* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic/issues/25918)
+* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic/issues/25908)
+* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic/issues/24296)
+* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic/issues/25897)
+* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic/issues/25928)) ([777109a](https://github.com/ionic-team/ionic/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic/issues/25893)
+
+
+
+
+
+## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
+
+
+### Bug Fixes
+
+* **datetime:** calendar day and years are now localized ([#25847](https://github.com/ionic-team/ionic/issues/25847)) ([cbd1268](https://github.com/ionic-team/ionic/commit/cbd1268a03204f05314f2ba284ad433457a9cf33)), closes [#25843](https://github.com/ionic-team/ionic/issues/25843)
+* **datetime:** hourCycle formats hour correctly ([#25869](https://github.com/ionic-team/ionic/issues/25869)) ([1a1491d](https://github.com/ionic-team/ionic/commit/1a1491df0242da1cb3c9a7f128bbd4d5ce4dbf3e)), closes [#25862](https://github.com/ionic-team/ionic/issues/25862)
+* **datetime:** month grid no longer loops on ios ([#25857](https://github.com/ionic-team/ionic/issues/25857)) ([c938054](https://github.com/ionic-team/ionic/commit/c938054605dffb6c3002a64a3d8aaf36892c7a93)), closes [#25752](https://github.com/ionic-team/ionic/issues/25752)
+
+
+
+
+
 ## [6.2.5](https://github.com/ionic-team/ionic/compare/v6.2.4...v6.2.5) (2022-08-31)
 
 

core/api.txt

@@ -33,7 +33,7 @@ ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) |
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
-ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
+ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-action-sheet,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-action-sheet,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-action-sheet,method,present,present() => Promise<void>
@@ -80,7 +80,7 @@ ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,fals
 ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
 ion-alert,prop,translucent,boolean,false,false,false
-ion-alert,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
+ion-alert,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-alert,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-alert,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-alert,method,present,present() => Promise<void>
@@ -401,7 +401,7 @@ ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,fal
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
 ion-datetime,method,confirm,confirm(closeOverlay?: boolean) => Promise<void>
-ion-datetime,method,reset,reset(startDate?: string | undefined) => Promise<void>
+ion-datetime,method,reset,reset(startDate?: string) => Promise<void>
 ion-datetime,event,ionBlur,void,true
 ion-datetime,event,ionCancel,void,true
 ion-datetime,event,ionChange,DatetimeChangeEventDetail,true
@@ -519,7 +519,7 @@ ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefine
 ion-input,scoped
 ion-input,prop,accept,string | undefined,undefined,false,false
 ion-input,prop,autocapitalize,string,'off',false,false
-ion-input,prop,autocomplete,"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
+ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
@@ -700,7 +700,7 @@ ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
 ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
-ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
+ion-loading,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-loading,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-loading,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-loading,method,present,present() => Promise<void>
@@ -793,7 +793,7 @@ ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,prop,swipeToClose,boolean,false,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
-ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
+ion-modal,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-modal,method,getCurrentBreakpoint,getCurrentBreakpoint() => Promise<number | undefined>
 ion-modal,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-modal,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -830,19 +830,19 @@ ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,unde
 ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
 ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
-ion-nav,method,canGoBack,canGoBack(view?: ViewController | undefined) => Promise<boolean>
+ion-nav,method,canGoBack,canGoBack(view?: ViewController) => Promise<boolean>
 ion-nav,method,getActive,getActive() => Promise<ViewController | undefined>
 ion-nav,method,getByIndex,getByIndex(index: number) => Promise<ViewController | undefined>
-ion-nav,method,getPrevious,getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>
-ion-nav,method,insert,insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,insertPages,insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,pop,pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,popTo,popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,popToRoot,popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,push,push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,removeIndex,removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,setPages,setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
+ion-nav,method,getPrevious,getPrevious(view?: ViewController) => Promise<ViewController | undefined>
+ion-nav,method,insert,insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,insertPages,insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,pop,pop(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,popTo,popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,popToRoot,popToRoot(opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,push,push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,removeIndex,removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,setPages,setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
+ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>
 ion-nav,event,ionNavDidChange,void,false
 ion-nav,event,ionNavWillChange,void,false
 
@@ -870,7 +870,7 @@ ion-picker,prop,keyboardClose,boolean,true,false,false
 ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,prop,showBackdrop,boolean,true,false,false
-ion-picker,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
+ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
 ion-picker,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-picker,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
@@ -916,10 +916,10 @@ ion-popover,prop,size,"auto" | "cover",'auto',false,false
 ion-popover,prop,translucent,boolean,false,false,false
 ion-popover,prop,trigger,string | undefined,undefined,false,false
 ion-popover,prop,triggerAction,"click" | "context-menu" | "hover",'click',false,false
-ion-popover,method,dismiss,dismiss(data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise<boolean>
+ion-popover,method,dismiss,dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>
 ion-popover,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-popover,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-popover,method,present,present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent<any> | undefined) => Promise<void>
+ion-popover,method,present,present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>
 ion-popover,event,didDismiss,OverlayEventDetail<any>,true
 ion-popover,event,didPresent,void,true
 ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail<any>,true
@@ -1042,7 +1042,7 @@ ion-reorder,part,icon
 
 ion-reorder-group,none
 ion-reorder-group,prop,disabled,boolean,true,false,false
-ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>
+ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[]) => Promise<any>
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
 
 ion-ripple-effect,shadow
@@ -1066,7 +1066,7 @@ ion-router,none
 ion-router,prop,root,string,'/',false,false
 ion-router,prop,useHash,boolean,true,false,false
 ion-router,method,back,back() => Promise<void>
-ion-router,method,push,push(path: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>
+ion-router,method,push,push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
 ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true
 
@@ -1089,7 +1089,7 @@ ion-row,shadow
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
-ion-searchbar,prop,autocomplete,"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
+ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
@@ -1189,7 +1189,7 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
-ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any>
+ion-select,method,open,open(event?: UIEvent) => Promise<any>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectChangeEventDetail<any>,true
@@ -1231,13 +1231,13 @@ ion-slides,method,length,length() => Promise<number>
 ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise<void>
 ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise<void>
 ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise<void>
-ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
-ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
-ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
+ion-slides,method,slideNext,slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>
+ion-slides,method,slidePrev,slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>
+ion-slides,method,slideTo,slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>
 ion-slides,method,startAutoplay,startAutoplay() => Promise<void>
 ion-slides,method,stopAutoplay,stopAutoplay() => Promise<void>
 ion-slides,method,update,update() => Promise<void>
-ion-slides,method,updateAutoHeight,updateAutoHeight(speed?: number | undefined) => Promise<void>
+ion-slides,method,updateAutoHeight,updateAutoHeight(speed?: number) => Promise<void>
 ion-slides,event,ionSlideDidChange,void,true
 ion-slides,event,ionSlideDoubleTap,void,true
 ion-slides,event,ionSlideDrag,void,true
@@ -1391,7 +1391,7 @@ ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,fals
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,translucent,boolean,false,false,false
-ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
+ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-toast,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-toast,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-toast,method,present,present() => Promise<void>

core/custom-rules/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'no-component-on-ready-method': require('./no-component-on-ready-method.js')
+  }
+}

core/custom-rules/no-component-on-ready-method.js

@@ -0,0 +1,23 @@
+module.exports = {
+    meta: {
+      messages: {
+        noComponentOnReadyMethod: 'Using the componentOnReady method is not allowed. Use the componentOnReady helper utility in src/utils/helpers.ts instead.',
+      },
+    },
+    create(context) {
+      return {
+        CallExpression(node) {
+          /**
+           * We only want to exclude usages of componentOnReady().
+           * Checking for the existence of the componentOnReady method
+           * is a way of determining if we are in a lazy loaded build
+           * or custom elements build, so we want to allow that.
+           */
+          const callee = node.callee;
+          if (callee.type === 'MemberExpression' && callee.property.name === 'componentOnReady') {
+            context.report({ node: node, messageId: 'noComponentOnReadyMethod' });
+          }
+      }
+    }
+  }
+};

core/custom-rules/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "eslint-plugin-custom-rules",
+  "version": "1.0.0",
+  "main": "index.js"
+}

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.5",
+  "version": "6.2.9",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^2.17.4",
+    "@stencil/core": "^2.18.0",
     "ionicons": "^6.0.3",
     "tslib": "^2.1.0"
   },
@@ -40,7 +40,7 @@
     "@axe-core/puppeteer": "^4.3.2",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@jest/core": "^26.6.3",
+    "@jest/core": "^27.5.1",
     "@playwright/test": "^1.23.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
@@ -48,7 +48,7 @@
     "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",
     "@stencil/vue-output-target": "^0.6.2",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@types/swiper": "5.4.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -58,6 +58,7 @@
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-custom-rules": "file:custom-rules",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "jest": "^26.4.1",
@@ -67,8 +68,8 @@
     "puppeteer": "^10.4.0",
     "rollup": "^2.26.4",
     "sass": "^1.26.10",
-    "serve": "^13.0.2",
-    "stylelint": "^13.6.1",
+    "serve": "^14.0.1",
+    "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",
     "swiper": "5.4.1",
     "typescript": "^4.0.5"

core/playwright.config.ts

@@ -91,7 +91,7 @@ const config: PlaywrightTestConfig = {
        * Increases the maximum allowed pixel difference to account
        * for slight browser rendering inconsistencies.
        */
-      maxDiffPixelRatio: 0.05
+      maxDiffPixelRatio: 0.02
     }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */

core/src/components.d.ts

@@ -96,7 +96,7 @@ export namespace Components {
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
-        "dismiss": (data?: any, role?: string | undefined) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Animation to use when the action sheet is presented.
          */
@@ -165,7 +165,7 @@ export namespace Components {
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
-        "dismiss": (data?: any, role?: string | undefined) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Animation to use when the alert is presented.
          */
@@ -372,11 +372,11 @@ export namespace Components {
          */
         "download": string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -400,11 +400,11 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**
@@ -812,7 +812,7 @@ export namespace Components {
         /**
           * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
          */
-        "reset": (startDate?: string | undefined) => Promise<void>;
+        "reset": (startDate?: string) => Promise<void>;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
@@ -1387,7 +1387,7 @@ export namespace Components {
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
-        "dismiss": (data?: any, role?: string | undefined) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Number of milliseconds to wait before dismissing the loading indicator.
          */
@@ -1571,7 +1571,7 @@ export namespace Components {
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
          */
-        "dismiss": (data?: any, role?: string | undefined) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Animation to use when the modal is presented.
          */
@@ -1665,7 +1665,7 @@ export namespace Components {
           * Returns `true` if the current view can go back.
           * @param view The view to check.
          */
-        "canGoBack": (view?: ViewController | undefined) => Promise<boolean>;
+        "canGoBack": (view?: ViewController) => Promise<boolean>;
         "delegate"?: FrameworkDelegate;
         /**
           * Get the active view.
@@ -1680,7 +1680,7 @@ export namespace Components {
           * Get the previous view.
           * @param view The view to get.
          */
-        "getPrevious": (view?: ViewController | undefined) => Promise<ViewController | undefined>;
+        "getPrevious": (view?: ViewController) => Promise<ViewController | undefined>;
         /**
           * Called by <ion-router> to retrieve the current component.
          */
@@ -1693,7 +1693,7 @@ export namespace Components {
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "insert": <T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "insert": <T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
           * @param insertIndex The index to insert the components at in the stack.
@@ -1701,26 +1701,26 @@ export namespace Components {
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "insertPages": (insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "insertPages": (insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Pop a component off of the navigation stack. Navigates back from the current component.
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "pop": (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "pop": (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Pop to a specific index in the navigation stack.
           * @param indexOrViewCtrl The index or view controller to pop to.
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "popTo": (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "popTo": (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Navigate back to the root of the stack, no matter how far back that is.
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "popToRoot": (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "popToRoot": (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
           * @param component The component to push onto the navigation stack.
@@ -1728,7 +1728,7 @@ export namespace Components {
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "push": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "push": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Removes a component from the navigation stack at the specified index.
           * @param startIndex The number to begin removal at.
@@ -1736,7 +1736,7 @@ export namespace Components {
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "removeIndex": (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "removeIndex": (startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Root NavComponent to load
          */
@@ -1751,7 +1751,7 @@ export namespace Components {
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "setPages": (views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "setPages": (views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Set the root for the current navigation stack to a component.
           * @param component The component to set as the root of the navigation stack.
@@ -1759,7 +1759,7 @@ export namespace Components {
           * @param opts The navigation options.
           * @param done The transition complete function.
          */
-        "setRoot": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "setRoot": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
         /**
           * Called by the router to update the view.
           * @param id The component tag.
@@ -1768,7 +1768,7 @@ export namespace Components {
           * @param animation an AnimationBuilder.
           * @return the status.
          */
-        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<RouteWrite>;
+        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
         /**
           * If the nav component should allow for swipe-to-go-back.
          */
@@ -1828,7 +1828,7 @@ export namespace Components {
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
-        "dismiss": (data?: any, role?: string | undefined) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Number of milliseconds to wait before dismissing the picker.
          */
@@ -1903,7 +1903,7 @@ export namespace Components {
         /**
           * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
          */
-        "setValue": (value?: string | number | undefined) => Promise<void>;
+        "setValue": (value?: string | number) => Promise<void>;
         /**
           * The selected option in the picker.
          */
@@ -1951,7 +1951,7 @@ export namespace Components {
           * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
           * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
          */
-        "dismiss": (data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
         /**
           * If `true`, the popover will be automatically dismissed when the content has been clicked.
          */
@@ -2003,7 +2003,7 @@ export namespace Components {
         /**
           * Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.
          */
-        "present": (event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent<any> | undefined) => Promise<void>;
+        "present": (event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>;
         /**
           * When opening a popover from a trigger, we should not be modifying the `event` prop from inside the component. Additionally, when pressing the "Right" arrow key, we need to shift focus to the first descendant in the newly presented popover.
          */
@@ -2226,7 +2226,7 @@ export namespace Components {
           * Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
           * @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
          */
-        "complete": (listOrReorder?: boolean | any[] | undefined) => Promise<any>;
+        "complete": (listOrReorder?: boolean | any[]) => Promise<any>;
         /**
           * If `true`, the reorder will be hidden.
          */
@@ -2289,7 +2289,7 @@ export namespace Components {
           * @param path The path to navigate to.
           * @param direction The direction of the animation. Defaults to `"forward"`.
          */
-        "push": (path: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>;
+        "push": (path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
         /**
           * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
          */
@@ -2334,14 +2334,14 @@ export namespace Components {
           * This property allows to create custom transition using AnimationBuilder functions.
          */
         "animation"?: AnimationBuilder;
-        "commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
+        "commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions) => Promise<boolean>;
         "delegate"?: FrameworkDelegate;
         "getRouteId": () => Promise<RouteID | undefined>;
         /**
           * The mode determines which platform styles to use.
          */
         "mode": "ios" | "md";
-        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<RouteWrite>;
+        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
         "swipeHandler"?: SwipeGestureHandler;
     }
     interface IonRow {
@@ -2525,7 +2525,7 @@ export namespace Components {
           * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.
           * @param event The user interface event that called the open.
          */
-        "open": (event?: UIEvent | undefined) => Promise<any>;
+        "open": (event?: UIEvent) => Promise<any>;
         /**
           * The text to display when the select is empty.
          */
@@ -2640,20 +2640,20 @@ export namespace Components {
           * @param speed The transition duration (in ms).
           * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
          */
-        "slideNext": (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
+        "slideNext": (speed?: number, runCallbacks?: boolean) => Promise<void>;
         /**
           * Transition to the previous slide.
           * @param speed The transition duration (in ms).
           * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events.
          */
-        "slidePrev": (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
+        "slidePrev": (speed?: number, runCallbacks?: boolean) => Promise<void>;
         /**
           * Transition to the specified slide.
           * @param index The index of the slide to transition to.
           * @param speed The transition duration (in ms).
           * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.
          */
-        "slideTo": (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
+        "slideTo": (index: number, speed?: number, runCallbacks?: boolean) => Promise<void>;
         /**
           * Start auto play.
          */
@@ -2670,7 +2670,7 @@ export namespace Components {
           * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.
           * @param speed The transition duration (in ms).
          */
-        "updateAutoHeight": (speed?: number | undefined) => Promise<void>;
+        "updateAutoHeight": (speed?: number) => Promise<void>;
     }
     interface IonSpinner {
         /**
@@ -2941,7 +2941,7 @@ export namespace Components {
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
          */
-        "dismiss": (data?: any, role?: string | undefined) => Promise<boolean>;
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
          */
@@ -4332,11 +4332,11 @@ declare namespace LocalJSX {
          */
         "download"?: string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -4368,11 +4368,11 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**

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

@@ -2,7 +2,9 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('accordion: multiple', () => {
-  test('should update value and not have visual regressions', async ({ page }) => {
+  test('should update value and visually expand items', async ({ page, skip }) => {
+    skip.rtl();
+
     await page.goto(`/src/components/accordion/test/multiple`);
     const accordionGroup = page.locator('ion-accordion-group');
     const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');

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

@@ -2,11 +2,33 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('accordion: nested', () => {
-  test('should not have visual regressions', async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+
     await page.goto(`/src/components/accordion/test/nested`);
+  });
 
-    await page.setIonViewport();
+  test('parent and child should not be disabled', async ({ page }) => {
+    const enabledGroup = page.locator('ion-accordion-group#enabled');
 
-    expect(await page.screenshot()).toMatchSnapshot(`accordion-nested-${page.getSnapshotSettings()}.png`);
+    expect(await enabledGroup.screenshot()).toMatchSnapshot(
+      `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`
+    );
+  });
+
+  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`
+    );
   });
 });

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

@@ -43,7 +43,7 @@
         <div class="grid ion-padding">
           <div class="grid-item">
             <h2>Nested</h2>
-            <ion-accordion-group expand="inset" value="attractions">
+            <ion-accordion-group id="enabled" expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
@@ -75,7 +75,7 @@
           </div>
           <div class="grid-item">
             <h2>Nested Disabled</h2>
-            <ion-accordion-group expand="inset" value="attractions">
+            <ion-accordion-group id="nested-disabled" expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
@@ -107,7 +107,7 @@
           </div>
           <div class="grid-item">
             <h2>Nested Parent Disabled</h2>
-            <ion-accordion-group expand="inset" value="attractions" disabled="true">
+            <ion-accordion-group id="parent-disabled" expand="inset" value="attractions" disabled="true">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>

core/src/components/avatar/test/basic/avatar.e2e.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('avatar: basic', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('Avatar does not test RTL behaviors. Usages of Avatar in slots are tested in components that use Avatar.');
+
+    await page.goto(`/src/components/avatar/test/basic`);
+
+    const avatar = page.locator('#avatar');
+    const avatarChip = page.locator('#avatar-chip');
+    const avatarItemStart = page.locator('#avatar-item-start');
+    const avatarItemEnd = page.locator('#avatar-item-end');
+
+    expect(await avatar.screenshot()).toMatchSnapshot(`avatar-diff-${page.getSnapshotSettings()}.png`);
+    expect(await avatarChip.screenshot()).toMatchSnapshot(`avatar-chip-diff-${page.getSnapshotSettings()}.png`);
+    expect(await avatarItemStart.screenshot()).toMatchSnapshot(
+      `avatar-item-start-diff-${page.getSnapshotSettings()}.png`
+    );
+    expect(await avatarItemEnd.screenshot()).toMatchSnapshot(`avatar-item-end-diff-${page.getSnapshotSettings()}.png`);
+  });
+});