v6.2.1-nightly.20220801

Resolves #25602

.github/workflows/release.yml

@@ -61,4 +61,21 @@ jobs:
           git add .
           git commit -m "chore(): update package lock files"
           git push
+      # Purge the JSDeliver CDN cache so
+      # component playgrounds always load
+      # the latest version of Ionic.
+      - name: Purge JSDelivr Cache
+        run: | 
+          curl -X POST \
+            https://purge.jsdelivr.net/ \
+            -H 'cache-control: no-cache' \
+            -H 'content-type: application/json' \
+            -d '{
+          "path": [
+            "/npm/@ionic/core@6/dist/ionic/ionic.esm.js",
+            "/npm/@ionic/core@latest/dist/ionic/ionic.esm.js",
+            "/npm/@ionic/core@6/css/ionic.bundle.css,
+            "/npm/@ionic/core@latest/css/ionic.bundle.css
+          ]}'
+
 

CHANGELOG.md

@@ -3,13 +3,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.1-nightly.20220801](https://github.com/ionic-team/ionic-framework/compare/v6.2.0...v6.2.1-nightly.20220801) (2022-08-01)
+
+
+### Bug Fixes
+
+* **nav:** exclude nav from custom dialog ([#25689](https://github.com/ionic-team/ionic-framework/issues/25689)) ([d1e517b](https://github.com/ionic-team/ionic-framework/commit/d1e517bfef03b822dfa7651681013277762eda08)), closes [#25677](https://github.com/ionic-team/ionic-framework/issues/25677) [#25688](https://github.com/ionic-team/ionic-framework/issues/25688)
+* **react:** IonNav apply properties to page components  ([#25603](https://github.com/ionic-team/ionic-framework/issues/25603)) ([61e4ffe](https://github.com/ionic-team/ionic-framework/commit/61e4ffe47f73034808b65ee37342f540ee5a6a97)), closes [#25602](https://github.com/ionic-team/ionic-framework/issues/25602)
+
+
+
+
+
+# [6.2.0](https://github.com/ionic-team/ionic-framework/compare/v6.1.15...v6.2.0) (2022-07-27)
+
+
+### Bug Fixes
+
+* **datetime:** account for previous years with preferWheel ([#25656](https://github.com/ionic-team/ionic-framework/issues/25656)) ([3a7f5f1](https://github.com/ionic-team/ionic-framework/commit/3a7f5f166ee8d8d7e1861313e2bc6f4856e4fbe9))
+* **datetime:** switching months in wheel picker now selected nearest neighbor ([#25559](https://github.com/ionic-team/ionic-framework/issues/25559)) ([dd256e1](https://github.com/ionic-team/ionic-framework/commit/dd256e1313fa1c307f30b0dbb7fd0d1da8c555f7))
+* **datetime:** switching presentation closes month/year picker ([#25667](https://github.com/ionic-team/ionic-framework/issues/25667)) ([57a21ad](https://github.com/ionic-team/ionic-framework/commit/57a21adb38331ee5d74dacd1b0a2568f41a2d21e))
+* **nav:** pop() will unmount views within a modal ([#25638](https://github.com/ionic-team/ionic-framework/issues/25638)) ([db28794](https://github.com/ionic-team/ionic-framework/commit/db28794f0b75f2824ae26c101a8c52af70f43ffd)), closes [#25637](https://github.com/ionic-team/ionic-framework/issues/25637) [#21831](https://github.com/ionic-team/ionic-framework/issues/21831)
+* **picker-column-internal:** tabbing between columns works ([#25464](https://github.com/ionic-team/ionic-framework/issues/25464)) ([db02772](https://github.com/ionic-team/ionic-framework/commit/db027721ac299e7d23c42b52b0274be06b909f89))
+* **textarea:** textarea with autogrow will size to its contents ([#24205](https://github.com/ionic-team/ionic-framework/issues/24205)) ([a9cf2ab](https://github.com/ionic-team/ionic-framework/commit/a9cf2ab87012cdb6360d10536a29213adda3f585)), closes [#24793](https://github.com/ionic-team/ionic-framework/issues/24793) [#21242](https://github.com/ionic-team/ionic-framework/issues/21242)
+* **vue:** input v-model accepts numbers ([#25666](https://github.com/ionic-team/ionic-framework/issues/25666)) ([ab65e9a](https://github.com/ionic-team/ionic-framework/commit/ab65e9a7b51c3a3f8c59962d3e1faff1564ab801)), closes [#25575](https://github.com/ionic-team/ionic-framework/issues/25575)
+
+
+### Features
+
+* **angular, react, vue:** add support for autoMountComponent ([#25552](https://github.com/ionic-team/ionic-framework/issues/25552)) ([805dfa0](https://github.com/ionic-team/ionic-framework/commit/805dfa05663098ef9c02b0745a383b5e7555908b))
+* **datetime-button:** add button for displaying datetime in overlays ([#25655](https://github.com/ionic-team/ionic-framework/issues/25655)) ([4997331](https://github.com/ionic-team/ionic-framework/commit/499733105e4be23405e8afeeb26fee5cd2afc25b)), closes [#24316](https://github.com/ionic-team/ionic-framework/issues/24316)
+* **datetime:** add multiple date selection ([#25514](https://github.com/ionic-team/ionic-framework/issues/25514)) ([9d31608](https://github.com/ionic-team/ionic-framework/commit/9d31608f2d471f531eb253832c8558d1effaf68a))
+* **datetime:** add wheel style picker for dates and times ([#25468](https://github.com/ionic-team/ionic-framework/issues/25468)) ([3d19771](https://github.com/ionic-team/ionic-framework/commit/3d19771185301870a2eb60f1ef4afd6f1c182494))
+* **datetime:** localize am/pm labels in time picker ([#25389](https://github.com/ionic-team/ionic-framework/issues/25389)) ([6bc0acc](https://github.com/ionic-team/ionic-framework/commit/6bc0acc4279a18c3309b11eeec76676c5015419a)), closes [#16279](https://github.com/ionic-team/ionic-framework/issues/16279)
+* **modal:** clicking handle advances to the next breakpoint ([#25540](https://github.com/ionic-team/ionic-framework/issues/25540)) ([7cdc388](https://github.com/ionic-team/ionic-framework/commit/7cdc388b7805cbf23c9e1e928aa977cd77ebc8c4)), closes [#24069](https://github.com/ionic-team/ionic-framework/issues/24069)
+* **picker-column-internal:** add ability to disable items ([#25412](https://github.com/ionic-team/ionic-framework/issues/25412)) ([8b7c079](https://github.com/ionic-team/ionic-framework/commit/8b7c07968e1a60389a22e5af0e0cac62d31d397a))
+* **range:** add reference point for start position of range slider ([#25598](https://github.com/ionic-team/ionic-framework/issues/25598)) ([c2781cc](https://github.com/ionic-team/ionic-framework/commit/c2781cc1c3b7e56a0e6f6c03cfa04fc2c82d6e8a)), closes [#24348](https://github.com/ionic-team/ionic-framework/issues/24348)
+* **toggle:** on/off icons for toggle ([#25459](https://github.com/ionic-team/ionic-framework/issues/25459)) ([bc0bdc4](https://github.com/ionic-team/ionic-framework/commit/bc0bdc438ba72c695f9d961ddf837ec45e7816dd)), closes [#20524](https://github.com/ionic-team/ionic-framework/issues/20524)
+
+
+
+
+
+## [6.1.15](https://github.com/ionic-team/ionic-framework/compare/v6.1.14...v6.1.15) (2022-07-20)
+
+
+### Bug Fixes
+
+* **datetime:** use scroll listener to detect month changes ([#25586](https://github.com/ionic-team/ionic-framework/issues/25586)) ([b7afcb0](https://github.com/ionic-team/ionic-framework/commit/b7afcb0f0c36d84f3b4d65844df28e6293bc1ea5)), closes [#25257](https://github.com/ionic-team/ionic-framework/issues/25257) [#25608](https://github.com/ionic-team/ionic-framework/issues/25608) [#24980](https://github.com/ionic-team/ionic-framework/issues/24980)
+* **fab-button:** aria attributes are inherited ([#25635](https://github.com/ionic-team/ionic-framework/issues/25635)) ([64ae3d2](https://github.com/ionic-team/ionic-framework/commit/64ae3d2b9729c5c6be8644b1df6c8b3d40584d3b)), closes [#25633](https://github.com/ionic-team/ionic-framework/issues/25633)
+* **modal:** allow for custom dialog implementations ([#25630](https://github.com/ionic-team/ionic-framework/issues/25630)) ([a6f3ae6](https://github.com/ionic-team/ionic-framework/commit/a6f3ae67ab91ab95408ad425156167edc3570978)), closes [#24080](https://github.com/ionic-team/ionic-framework/issues/24080)
+* **react:** swipe to go back gesture works on ios ([#25563](https://github.com/ionic-team/ionic-framework/issues/25563)) ([7ec3683](https://github.com/ionic-team/ionic-framework/commit/7ec3683e94e5397022560ce8489532ff40d3f40c)), closes [#22342](https://github.com/ionic-team/ionic-framework/issues/22342)
+
+
+### Performance Improvements
+
+* **input:** passive event listener for touch start events ([#25610](https://github.com/ionic-team/ionic-framework/issues/25610)) ([2d1efdb](https://github.com/ionic-team/ionic-framework/commit/2d1efdbe6dd9436badab4684f2a484476489c166)), closes [#25599](https://github.com/ionic-team/ionic-framework/issues/25599)
+
+
+
+
+
+## [6.1.14](https://github.com/ionic-team/ionic-framework/compare/v6.1.13...v6.1.14) (2022-07-13)
+
+
+### Bug Fixes
+
+* **datetime:** datetime works within stencil apps ([#25592](https://github.com/ionic-team/ionic-framework/issues/25592)) ([7b10fa6](https://github.com/ionic-team/ionic-framework/commit/7b10fa6476c2c2896c6810c57b3160f8c8896faa)), closes [#25591](https://github.com/ionic-team/ionic-framework/issues/25591)
+* **react:** IonNav works with react ([#25565](https://github.com/ionic-team/ionic-framework/issues/25565)) ([420f9bb](https://github.com/ionic-team/ionic-framework/commit/420f9bbebd41f3eab6def795bcdd1933d5c5a47a)), closes [#24002](https://github.com/ionic-team/ionic-framework/issues/24002)
+
+
+
+
+
+## [6.1.13](https://github.com/ionic-team/ionic-framework/compare/v6.1.12...v6.1.13) (2022-07-06)
+
+
+### Bug Fixes
+
+* **all:** long press now preserves activated state ([#25551](https://github.com/ionic-team/ionic-framework/issues/25551)) ([a8286f6](https://github.com/ionic-team/ionic-framework/commit/a8286f6e42f734a027416ac6cd659e3dce4edccb)), closes [#25544](https://github.com/ionic-team/ionic-framework/issues/25544)
+* **datetime:** typing in time now updates value ([#25561](https://github.com/ionic-team/ionic-framework/issues/25561)) ([1b1b1a3](https://github.com/ionic-team/ionic-framework/commit/1b1b1a3800c4d044b4a3e7418f534e9271770ec6)), closes [#25560](https://github.com/ionic-team/ionic-framework/issues/25560)
+
+
+
+
+
+## [6.1.12](https://github.com/ionic-team/ionic-framework/compare/v6.1.11...v6.1.12) (2022-06-29)
+
+
+### Bug Fixes
+
+* **angular:** warn devs that standalone components are not supported ([#25516](https://github.com/ionic-team/ionic-framework/issues/25516)) ([c53785c](https://github.com/ionic-team/ionic-framework/commit/c53785c0c786113f3516c09fa512687ecb84c717))
+* **datetime:** add dev warnings when setting out of bounds value ([#25513](https://github.com/ionic-team/ionic-framework/issues/25513)) ([5dfaf63](https://github.com/ionic-team/ionic-framework/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0))
+
+
+
+
+
 ## [6.1.11](https://github.com/ionic-team/ionic-framework/compare/v6.1.10...v6.1.11) (2022-06-22)
 
 
 ### Bug Fixes
 
 * **datetime:** closing time picker no longer changes month ([#25478](https://github.com/ionic-team/ionic-framework/issues/25478)) ([f9ab9b5](https://github.com/ionic-team/ionic-framework/commit/f9ab9b54ddb5a3004673e4aaa9cb62fd8e97ba07)), closes [#25438](https://github.com/ionic-team/ionic-framework/issues/25438)
-* **item:** multiple input appearance when using datetime ([#25484](https://github.com/ionic-team/ionic-framework/issues/25484)) ([3089f38](https://github.com/ionic-team/ionic-framework/commit/3089f38f4d335c44e9913e874813dd4205c2b160)), closes [#25479](https://github.com/ionic-team/ionic-framework/issues/25479)
 * **item:** multiple input appearance when using datetime ([#25498](https://github.com/ionic-team/ionic-framework/issues/25498)) ([1a8d23d](https://github.com/ionic-team/ionic-framework/commit/1a8d23da8125d54c3119eacb51206f7541c9f410)), closes [#25484](https://github.com/ionic-team/ionic-framework/issues/25484) [#25483](https://github.com/ionic-team/ionic-framework/issues/25483)
 * **overlays:** focus is not moved if active element is in overlay ([#25481](https://github.com/ionic-team/ionic-framework/issues/25481)) ([dcc2da2](https://github.com/ionic-team/ionic-framework/commit/dcc2da2800e69d938b4a62db436d9f07d9663dce)), closes [#24127](https://github.com/ionic-team/ionic-framework/issues/24127) [#24820](https://github.com/ionic-team/ionic-framework/issues/24820)
 * **refresher:** quickly swiping down no longer causes duplicate refresh ([#25476](https://github.com/ionic-team/ionic-framework/issues/25476)) ([3abfa78](https://github.com/ionic-team/ionic-framework/commit/3abfa780ccb32484b4d9f1b509e7ab910dfb901a)), closes [#25418](https://github.com/ionic-team/ionic-framework/issues/25418)

LICENSE

@@ -1,23 +1,21 @@
-Copyright 2015-present Drifty Co.
-http://drifty.com/
-
 MIT License
 
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
+Copyright (c) 2015-present Drifty Co.
 
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

angular/CHANGELOG.md

@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.1-nightly.20220801](https://github.com/ionic-team/ionic/compare/v6.2.0...v6.2.1-nightly.20220801) (2022-08-01)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [6.2.0](https://github.com/ionic-team/ionic/compare/v6.1.15...v6.2.0) (2022-07-27)
+
+
+### Features
+
+* **angular, react, vue:** add support for autoMountComponent ([#25552](https://github.com/ionic-team/ionic/issues/25552)) ([805dfa0](https://github.com/ionic-team/ionic/commit/805dfa05663098ef9c02b0745a383b5e7555908b))
+* **datetime-button:** add button for displaying datetime in overlays ([#25655](https://github.com/ionic-team/ionic/issues/25655)) ([4997331](https://github.com/ionic-team/ionic/commit/499733105e4be23405e8afeeb26fee5cd2afc25b)), closes [#24316](https://github.com/ionic-team/ionic/issues/24316)
+* **datetime:** add multiple date selection ([#25514](https://github.com/ionic-team/ionic/issues/25514)) ([9d31608](https://github.com/ionic-team/ionic/commit/9d31608f2d471f531eb253832c8558d1effaf68a))
+* **datetime:** add wheel style picker for dates and times ([#25468](https://github.com/ionic-team/ionic/issues/25468)) ([3d19771](https://github.com/ionic-team/ionic/commit/3d19771185301870a2eb60f1ef4afd6f1c182494))
+* **modal:** clicking handle advances to the next breakpoint ([#25540](https://github.com/ionic-team/ionic/issues/25540)) ([7cdc388](https://github.com/ionic-team/ionic/commit/7cdc388b7805cbf23c9e1e928aa977cd77ebc8c4)), closes [#24069](https://github.com/ionic-team/ionic/issues/24069)
+* **range:** add reference point for start position of range slider ([#25598](https://github.com/ionic-team/ionic/issues/25598)) ([c2781cc](https://github.com/ionic-team/ionic/commit/c2781cc1c3b7e56a0e6f6c03cfa04fc2c82d6e8a)), closes [#24348](https://github.com/ionic-team/ionic/issues/24348)
+
+
+
+
+
+## [6.1.15](https://github.com/ionic-team/ionic/compare/v6.1.14...v6.1.15) (2022-07-20)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.14](https://github.com/ionic-team/ionic/compare/v6.1.13...v6.1.14) (2022-07-13)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.13](https://github.com/ionic-team/ionic/compare/v6.1.12...v6.1.13) (2022-07-06)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.12](https://github.com/ionic-team/ionic/compare/v6.1.11...v6.1.12) (2022-06-29)
+
+
+### Bug Fixes
+
+* **angular:** warn devs that standalone components are not supported ([#25516](https://github.com/ionic-team/ionic/issues/25516)) ([c53785c](https://github.com/ionic-team/ionic/commit/c53785c0c786113f3516c09fa512687ecb84c717))
+
+
+
+
+
 ## [6.1.11](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11) (2022-06-22)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.11",
+  "version": "6.2.1-nightly.20220801",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.10",
+      "version": "6.2.1-nightly.20220801",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.10",
+        "@ionic/core": "^6.2.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
-      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
+      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -7939,9 +7939,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
-      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
+      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.11",
+  "version": "6.2.1-nightly.20220801",
   "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.1.11",
+    "@ionic/core": "6.2.1-nightly.20220801",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

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

@@ -233,8 +233,25 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       this.updateActivatedRouteProxy(cmpRef.instance, activatedRoute);
     } else {
       const snapshot = (activatedRoute as any)._futureSnapshot;
+
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const component = snapshot.routeConfig!.component as any;
+
+      /**
+       * Angular 14 introduces a new `loadComponent` property to the route config,
+       * that assigns the component to load to the `component` property of
+       * the route snapshot. We can check for the presence of this property
+       * to determine if the route is using standalone components.
+       *
+       * TODO: FW-1631: Remove this check when supporting standalone components
+       */
+      if (component == null && snapshot.component) {
+        console.warn(
+          '[Ionic Warning]: Standalone components are not currently supported with ion-router-outlet. You can track this feature request at https://github.com/ionic-team/ionic-framework/issues/25404'
+        );
+        return;
+      }
+
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       // We create an activated route proxy object that will maintain future updates for this component

angular/src/directives/overlays/modal.ts

@@ -54,6 +54,7 @@ export declare interface IonModal extends Components.IonModal {
 @ProxyCmp({
   inputs: [
     'animated',
+    'keepContentsMounted',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
@@ -62,6 +63,7 @@ export declare interface IonModal extends Components.IonModal {
     'enterAnimation',
     'event',
     'handle',
+    'handleBehavior',
     'initialBreakpoint',
     'isOpen',
     'keyboardClose',
@@ -78,9 +80,12 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
+  template: `<div class="ion-page" *ngIf="isCmpOpen || keepContentsMounted">
+    <ng-container [ngTemplateOutlet]="template"></ng-container>
+  </div>`,
   inputs: [
     'animated',
+    'keepContentsMounted',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
@@ -89,6 +94,7 @@ export declare interface IonModal extends Components.IonModal {
     'enterAnimation',
     'event',
     'handle',
+    'handleBehavior',
     'initialBreakpoint',
     'isOpen',
     'keyboardClose',

angular/src/directives/overlays/popover.ts

@@ -51,6 +51,7 @@ export declare interface IonPopover extends Components.IonPopover {
     'alignment',
     'animated',
     'arrow',
+    'keepContentsMounted',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',
@@ -73,11 +74,12 @@ export declare interface IonPopover extends Components.IonPopover {
 @Component({
   selector: 'ion-popover',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container>`,
+  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || keepContentsMounted"></ng-container>`,
   inputs: [
     'alignment',
     'animated',
     'arrow',
+    'keepContentsMounted',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',

angular/src/directives/proxies-list.txt

@@ -23,6 +23,7 @@ export const DIRECTIVES = [
   d.IonCol,
   d.IonContent,
   d.IonDatetime,
+  d.IonDatetimeButton,
   d.IonFab,
   d.IonFabButton,
   d.IonFabList,

angular/src/directives/proxies.ts

@@ -524,14 +524,14 @@ export declare interface IonDatetime extends Components.IonDatetime {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
   selector: 'ion-datetime',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
 })
 export class IonDatetime {
   protected el: HTMLElement;
@@ -543,6 +543,27 @@ export class IonDatetime {
 }
 
 
+export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['color', 'datetime', 'disabled', 'mode']
+})
+@Component({
+  selector: 'ion-datetime-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color', 'datetime', 'disabled', 'mode']
+})
+export class IonDatetimeButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({
@@ -1304,13 +1325,13 @@ mouse drag, touch gesture, or keyboard interaction.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
   selector: 'ion-range',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 export class IonRange {
   protected el: HTMLElement;
@@ -1979,13 +2000,13 @@ export declare interface IonToggle extends Components.IonToggle {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
 })
 export class IonToggle {
   protected el: HTMLElement;

angular/test/test-app/cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    specPattern: './e2e/**/*.spec.ts',
+    baseUrl: 'http://localhost:4200/',
+    excludeSpecPattern: '**/examples/*',
+  },
+})

angular/test/test-app/cypress.json

@@ -1,8 +0,0 @@
-{
-  "integrationFolder": "./e2e",
-  "testFiles": "**/*.spec.ts",
-  "baseUrl": "http://localhost:4200/",
-  "ignoreTestFiles": "**/examples/*",
-  "video": false,
-  "screenshotOnRunFailure": false
-}

angular/test/test-app/cypress/support/commands.js

@@ -25,7 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
-  const increment = (complete) ? 60 : 25;
+  const increment = complete ? 60 : 25;
   cy.get(selector)
     .first()
     .trigger('mousedown', 0, 275, { which: 1, force: true })
@@ -37,18 +37,16 @@ Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-rout
     .wait(50)
     .trigger('mousemove', increment * 4, 275, { which: 1, force: true })
     .wait(50)
-    .trigger('mouseup', increment * 4, 275, { which: 1, force: true })
+    .trigger('mouseup', increment * 4, 275, { which: 1, force: true });
   cy.wait(150);
-})
+});
 
 Cypress.Commands.add('testStack', (selector, expected) => {
   cy.document().then((doc) => {
-    const children = Array.from(
-      doc.querySelector(selector).children
-    ).map(el => el.tagName.toLowerCase());
+    const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
     expect(children).to.deep.equal(expected);
-  })
-})
+  });
+});
 
 Cypress.Commands.add('testLifeCycle', (selector, expected) => {
   cy.get(`${selector} #ngOnInit`).invoke('text').should('equal', '1');
@@ -56,24 +54,26 @@ Cypress.Commands.add('testLifeCycle', (selector, expected) => {
   cy.get(`${selector} #ionViewDidEnter`).invoke('text').should('equal', expected.ionViewDidEnter.toString());
   cy.get(`${selector} #ionViewWillLeave`).invoke('text').should('equal', expected.ionViewWillLeave.toString());
   cy.get(`${selector} #ionViewDidLeave`).invoke('text').should('equal', expected.ionViewDidLeave.toString());
-})
+});
 
 Cypress.Commands.add('ionPageVisible', (selector) => {
   cy.get(selector)
     .should('have.class', 'ion-page')
     .should('not.have.class', 'ion-page-hidden')
     .should('not.have.class', 'ion-page-invisible')
-    .should('have.length', 1)
-})
+    .should('have.length', 1);
+});
 
 Cypress.Commands.add('ionPageHidden', (selector) => {
-  cy.get(selector)
-    .should('have.class', 'ion-page')
-    .should('have.class', 'ion-page-hidden')
-    .should('have.length', 1)
-})
+  cy.get(selector).should('have.class', 'ion-page').should('have.class', 'ion-page-hidden').should('have.length', 1);
+});
 
 Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
-  cy.get(selector)
-    .should('not.exist')
+  cy.get(selector).should('not.exist');
+});
+
+Cypress.Commands.add('ionTabClick', (tabText) => {
+  // TODO: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
+  cy.wait(250);
+  cy.contains('ion-tab-button', tabText).click({ force: true });
 });

angular/test/test-app/cypress/support/index.d.ts

@@ -63,6 +63,11 @@ declare namespace Cypress {
      * ```
      */
     ionPageDoesNotExist(selector: string): Chainable<any>
+
+    /**
+     * Clicks on a tab button with the given text.
+     */
+    ionTabClick(tabText: string): Chainable<any>;
   }
 }
 

angular/test/test-app/e2e/src/form.spec.ts

@@ -39,6 +39,9 @@ describe('Form', () => {
       cy.get('ion-input.required').invoke('prop', 'value', 'Some value');
       testStatus('INVALID');
 
+      // TODO: FW-1160 - Remove when v7 is released
+      cy.wait(300);
+
       cy.get('ion-select').invoke('prop', 'value', 'nes');
       testStatus('INVALID');
 

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

@@ -0,0 +1,60 @@
+describe('overlays - keepContentsMounted', () => {
+  describe('modal', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/modal-inline');
+
+      cy.get('ion-modal ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal ion-content').should('exist');
+
+      cy.get('ion-modal ion-button').click();
+
+      cy.get('ion-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+  })
+  describe('popover', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/popover-inline');
+
+      cy.get('ion-popover ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('#open-popover').click();
+
+      cy.get('ion-popover ion-content').should('exist');
+
+      cy.get('ion-popover ion-button').click();
+
+      cy.get('ion-popover')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+  });
+});

angular/test/test-app/e2e/src/popover.spec.ts

@@ -4,10 +4,17 @@ describe('Popovers: Inline', () => {
   });
 
   it('should initially have no items', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
     cy.get('ion-list ion-item').should('not.exist');
   });
 
   it('should have items after 1500ms', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
     cy.wait(1500);
 
     cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');

angular/test/test-app/e2e/src/tabs.spec.ts

@@ -230,13 +230,13 @@ describe('Tabs', () => {
       tab.find('#goto-next').click();
       testTabTitle('Tab 1 - Page 2 (2)');
 
-      cy.get('#tab-button-contact').click();
+      cy.ionTabClick('Tab Two');
       testTabTitle('Tab 2 - Page 1');
 
-      cy.get('#tab-button-account').click();
+      cy.ionTabClick('Tab One');
       testTabTitle('Tab 1 - Page 2 (2)');
 
-      cy.get('#tab-button-account').click();
+      cy.ionTabClick('Tab One');
       testTabTitle('Tab 1 - Page 1');
 
       testUrlContains(rootUrl);

angular/test/test-app/e2e/src/virtual-scroll.spec.ts

@@ -5,10 +5,7 @@ describe('Virtual Scroll', () => {
   })
 
   it('should open virtual-scroll', () => {
-    cy.document().then((doc) => {
-      const virtualElements = doc.querySelectorAll('ion-virtual-scroll > *');
-      expect(virtualElements.length).to.be.greaterThan(0);
-    });
+    cy.get('ion-virtual-scroll > *').its('length').should('be.gt', 0);
   });
 });
 

angular/test/test-app/package.json

@@ -56,7 +56,7 @@
     "@typescript-eslint/eslint-plugin": "4.28.2",
     "@typescript-eslint/parser": "4.28.2",
     "concurrently": "^6.0.0",
-    "cypress": "^6.7.1",
+    "cypress": "^10.2.0",
     "eslint": "^7.26.0",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",

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

@@ -31,6 +31,7 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
   { path: 'view-child', component: ViewChildComponent },
+  { path: 'keep-contents-mounted', loadChildren: () => import('./keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
   { path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },

angular/test/test-app/src/app/keep-contents-mounted/index.ts

@@ -0,0 +1,2 @@
+export * from './keep-contents-mounted.component';
+export * from './keep-contents-mounted.module';

angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts

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

angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.html

@@ -0,0 +1,22 @@
+<ion-content>
+  <ion-button id="open-modal" (click)="modal.present()">Open Modal</ion-button>
+  <ion-button id="open-popover" (click)="popover.present()">Open Popover</ion-button>
+
+  <ion-modal [keepContentsMounted]="true" #modal>
+    <ng-template>
+      <ion-content>
+        <ion-button (click)="modal.dismiss()">Dismiss</ion-button>
+        Modal Content
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+
+  <ion-popover [keepContentsMounted]="true" #popover>
+    <ng-template>
+      <ion-content>
+        <ion-button (click)="popover.dismiss()">Dismiss</ion-button>
+        Popover Content
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+</ion-content>

angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+/**
+ * Validates that inline modals correctly mount
+ * inner components when keepContentsMounted is
+ * enabled.
+ */
+@Component({
+  selector: 'app-keep-contents-mounted',
+  templateUrl: 'keep-contents-mounted.component.html'
+})
+export class OverlayKeepContentsMounted {
+}

angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { OverlayKeepContentsMountedRoutingModule } from "./keep-contents-mounted-routing.module";
+import { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
+
+@NgModule({
+  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
+  declarations: [OverlayKeepContentsMounted],
+  exports: [OverlayKeepContentsMounted]
+})
+export class OverlayAutoMountModule { }

angular/test/test-app/src/app/popover-inline/popover-inline.component.html

@@ -1,4 +1,6 @@
-<ion-popover [isOpen]="true">
+<ion-button (click)="openPopover(popover)">Open Popover</ion-button>
+
+<ion-popover #popover>
   <ng-template>
     <ion-content>
       <ion-list>

angular/test/test-app/src/app/popover-inline/popover-inline.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from "@angular/core";
+import { Component } from "@angular/core";
 
 /**
  * Validates that inline popovers will correctly display
@@ -9,11 +9,13 @@ import { AfterViewInit, Component } from "@angular/core";
   selector: 'app-popover-inline',
   templateUrl: 'popover-inline.component.html'
 })
-export class PopoverInlineComponent implements AfterViewInit {
+export class PopoverInlineComponent {
 
   items: string[] = [];
 
-  ngAfterViewInit(): void {
+  openPopover(popover: HTMLIonPopoverElement) {
+    popover.present();
+
     setTimeout(() => {
       this.items = ['A', 'B', 'C', 'D'];
     }, 1000);

core/CHANGELOG.md

@@ -3,6 +3,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.1-nightly.20220801](https://github.com/ionic-team/ionic/compare/v6.2.0...v6.2.1-nightly.20220801) (2022-08-01)
+
+
+### Bug Fixes
+
+* **nav:** exclude nav from custom dialog ([#25689](https://github.com/ionic-team/ionic/issues/25689)) ([d1e517b](https://github.com/ionic-team/ionic/commit/d1e517bfef03b822dfa7651681013277762eda08)), closes [#25677](https://github.com/ionic-team/ionic/issues/25677) [#25688](https://github.com/ionic-team/ionic/issues/25688)
+
+
+
+
+
+# [6.2.0 Chromium](https://github.com/ionic-team/ionic-framework/compare/v6.1.15...v6.2.0) (2022-07-27)
+
+
+### Bug Fixes
+
+* **datetime:** account for previous years with preferWheel ([#25656](https://github.com/ionic-team/ionic-framework/issues/25656)) ([3a7f5f1](https://github.com/ionic-team/ionic-framework/commit/3a7f5f166ee8d8d7e1861313e2bc6f4856e4fbe9))
+* **datetime:** switching months in wheel picker now selected nearest neighbor ([#25559](https://github.com/ionic-team/ionic-framework/issues/25559)) ([dd256e1](https://github.com/ionic-team/ionic-framework/commit/dd256e1313fa1c307f30b0dbb7fd0d1da8c555f7))
+* **datetime:** switching presentation closes month/year picker ([#25667](https://github.com/ionic-team/ionic-framework/issues/25667)) ([57a21ad](https://github.com/ionic-team/ionic-framework/commit/57a21adb38331ee5d74dacd1b0a2568f41a2d21e))
+* **nav:** pop() will unmount views within a modal ([#25638](https://github.com/ionic-team/ionic-framework/issues/25638)) ([db28794](https://github.com/ionic-team/ionic-framework/commit/db28794f0b75f2824ae26c101a8c52af70f43ffd)), closes [#25637](https://github.com/ionic-team/ionic-framework/issues/25637) [#21831](https://github.com/ionic-team/ionic-framework/issues/21831)
+* **textarea:** textarea with autogrow will size to its contents ([#24205](https://github.com/ionic-team/ionic-framework/issues/24205)) ([a9cf2ab](https://github.com/ionic-team/ionic-framework/commit/a9cf2ab87012cdb6360d10536a29213adda3f585)), closes [#24793](https://github.com/ionic-team/ionic-framework/issues/24793) [#21242](https://github.com/ionic-team/ionic-framework/issues/21242)
+* **vue:** input v-model accepts numbers ([#25666](https://github.com/ionic-team/ionic-framework/issues/25666)) ([ab65e9a](https://github.com/ionic-team/ionic-framework/commit/ab65e9a7b51c3a3f8c59962d3e1faff1564ab801)), closes [#25575](https://github.com/ionic-team/ionic-framework/issues/25575)
+
+
+### Features
+
+* **angular, react, vue:** add support for autoMountComponent ([#25552](https://github.com/ionic-team/ionic-framework/issues/25552)) ([805dfa0](https://github.com/ionic-team/ionic-framework/commit/805dfa05663098ef9c02b0745a383b5e7555908b))
+* **datetime-button:** add button for displaying datetime in overlays ([#25655](https://github.com/ionic-team/ionic-framework/issues/25655)) ([4997331](https://github.com/ionic-team/ionic-framework/commit/499733105e4be23405e8afeeb26fee5cd2afc25b)), closes [#24316](https://github.com/ionic-team/ionic-framework/issues/24316)
+* **datetime:** add multiple date selection ([#25514](https://github.com/ionic-team/ionic-framework/issues/25514)) ([9d31608](https://github.com/ionic-team/ionic-framework/commit/9d31608f2d471f531eb253832c8558d1effaf68a)), closes [#24674](https://github.com/ionic-team/ionic-framework/issues/24674)
+* **datetime:** add wheel style picker for dates and times ([#25468](https://github.com/ionic-team/ionic-framework/issues/25468)) ([3d19771](https://github.com/ionic-team/ionic-framework/commit/3d19771185301870a2eb60f1ef4afd6f1c182494)), closes [#23981](https://github.com/ionic-team/ionic-framework/issues/23981)
+* **datetime:** localize am/pm labels in time picker ([#25389](https://github.com/ionic-team/ionic-framework/issues/25389)) ([6bc0acc](https://github.com/ionic-team/ionic-framework/commit/6bc0acc4279a18c3309b11eeec76676c5015419a)), closes [#16279](https://github.com/ionic-team/ionic-framework/issues/16279)
+* **modal:** clicking handle advances to the next breakpoint ([#25540](https://github.com/ionic-team/ionic-framework/issues/25540)) ([7cdc388](https://github.com/ionic-team/ionic-framework/commit/7cdc388b7805cbf23c9e1e928aa977cd77ebc8c4)), closes [#24069](https://github.com/ionic-team/ionic-framework/issues/24069)
+* **range:** add reference point for start position of range slider ([#25598](https://github.com/ionic-team/ionic-framework/issues/25598)) ([c2781cc](https://github.com/ionic-team/ionic-framework/commit/c2781cc1c3b7e56a0e6f6c03cfa04fc2c82d6e8a)), closes [#24348](https://github.com/ionic-team/ionic-framework/issues/24348)
+* **toggle:** on/off icons for toggle ([#25459](https://github.com/ionic-team/ionic-framework/issues/25459)) ([bc0bdc4](https://github.com/ionic-team/ionic-framework/commit/bc0bdc438ba72c695f9d961ddf837ec45e7816dd)), closes [#20524](https://github.com/ionic-team/ionic-framework/issues/20524)
+
+
+
+
+## [6.1.15](https://github.com/ionic-team/ionic/compare/v6.1.14...v6.1.15) (2022-07-20)
+
+
+### Bug Fixes
+
+* **datetime:** use scroll listener to detect month changes ([#25586](https://github.com/ionic-team/ionic/issues/25586)) ([b7afcb0](https://github.com/ionic-team/ionic/commit/b7afcb0f0c36d84f3b4d65844df28e6293bc1ea5)), closes [#25257](https://github.com/ionic-team/ionic/issues/25257) [#25608](https://github.com/ionic-team/ionic/issues/25608) [#24980](https://github.com/ionic-team/ionic/issues/24980)
+* **fab-button:** aria attributes are inherited ([#25635](https://github.com/ionic-team/ionic/issues/25635)) ([64ae3d2](https://github.com/ionic-team/ionic/commit/64ae3d2b9729c5c6be8644b1df6c8b3d40584d3b)), closes [#25633](https://github.com/ionic-team/ionic/issues/25633)
+* **modal:** allow for custom dialog implementations ([#25630](https://github.com/ionic-team/ionic/issues/25630)) ([a6f3ae6](https://github.com/ionic-team/ionic/commit/a6f3ae67ab91ab95408ad425156167edc3570978)), closes [#24080](https://github.com/ionic-team/ionic/issues/24080)
+
+
+### Performance Improvements
+
+* **input:** passive event listener for touch start events ([#25610](https://github.com/ionic-team/ionic/issues/25610)) ([2d1efdb](https://github.com/ionic-team/ionic/commit/2d1efdbe6dd9436badab4684f2a484476489c166)), closes [#25599](https://github.com/ionic-team/ionic/issues/25599)
+
+
+
+
+
+## [6.1.14](https://github.com/ionic-team/ionic/compare/v6.1.13...v6.1.14) (2022-07-13)
+
+
+### Bug Fixes
+
+* **datetime:** datetime works within stencil apps ([#25592](https://github.com/ionic-team/ionic/issues/25592)) ([7b10fa6](https://github.com/ionic-team/ionic/commit/7b10fa6476c2c2896c6810c57b3160f8c8896faa)), closes [#25591](https://github.com/ionic-team/ionic/issues/25591)
+
+
+
+
+
+## [6.1.13](https://github.com/ionic-team/ionic/compare/v6.1.12...v6.1.13) (2022-07-06)
+
+
+### Bug Fixes
+
+* **all:** long press now preserves activated state ([#25551](https://github.com/ionic-team/ionic/issues/25551)) ([a8286f6](https://github.com/ionic-team/ionic/commit/a8286f6e42f734a027416ac6cd659e3dce4edccb)), closes [#25544](https://github.com/ionic-team/ionic/issues/25544)
+* **datetime:** typing in time now updates value ([#25561](https://github.com/ionic-team/ionic/issues/25561)) ([1b1b1a3](https://github.com/ionic-team/ionic/commit/1b1b1a3800c4d044b4a3e7418f534e9271770ec6)), closes [#25560](https://github.com/ionic-team/ionic/issues/25560)
+
+
+
+
+
+## [6.1.12](https://github.com/ionic-team/ionic/compare/v6.1.11...v6.1.12) (2022-06-29)
+
+
+### Bug Fixes
+
+* **datetime:** add dev warnings when setting out of bounds value ([#25513](https://github.com/ionic-team/ionic/issues/25513)) ([5dfaf63](https://github.com/ionic-team/ionic/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0))
+
+
+
+
+
 ## [6.1.11](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11) (2022-06-22)
 
 

core/api.txt

@@ -387,7 +387,9 @@ ion-datetime,prop,min,string | undefined,undefined,false,false
 ion-datetime,prop,minuteValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,mode,"ios" | "md",undefined,false,false
 ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,false,false
+ion-datetime,prop,multiple,boolean,false,false,false
 ion-datetime,prop,name,string,this.inputId,false,false
+ion-datetime,prop,preferWheel,boolean,false,false,false
 ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false
 ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,showClearButton,boolean,false,false,false
@@ -395,7 +397,7 @@ ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
-ion-datetime,prop,value,null | string | undefined,undefined,false,false
+ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,false
 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>
@@ -408,6 +410,13 @@ ion-datetime,css-prop,--background
 ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 
+ion-datetime-button,shadow
+ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
+ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
+ion-datetime-button,prop,disabled,boolean,false,false,true
+ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
+ion-datetime-button,part,native
+
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false
@@ -772,9 +781,11 @@ ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
 ion-modal,prop,canDismiss,(() => Promise<boolean>) | boolean | undefined,undefined,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,handle,boolean | undefined,undefined,false,false
+ion-modal,prop,handleBehavior,"cycle" | "none" | undefined,'none',false,false
 ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false
 ion-modal,prop,isOpen,boolean,false,false,false
+ion-modal,prop,keepContentsMounted,boolean,false,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
@@ -894,6 +905,7 @@ ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undef
 ion-popover,prop,event,any,undefined,false,false
 ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,isOpen,boolean,false,false,false
+ion-popover,prop,keepContentsMounted,boolean,false,false,false
 ion-popover,prop,keyboardClose,boolean,true,false,false
 ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,mode,"ios" | "md",undefined,false,false
@@ -967,6 +979,7 @@ ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 
 ion-range,shadow
+ion-range,prop,activeBarStart,number | undefined,undefined,false,false
 ion-range,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-range,prop,debounce,number,0,false,false
 ion-range,prop,disabled,boolean,false,false,false
@@ -1314,7 +1327,7 @@ ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 
 ion-textarea,scoped
-ion-textarea,prop,autoGrow,boolean,false,false,false
+ion-textarea,prop,autoGrow,boolean,false,false,true
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
@@ -1413,6 +1426,7 @@ ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
+ion-toggle,prop,enableOnOffLabels,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.11",
+  "version": "6.2.1-nightly.20220801",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -41,13 +41,13 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^26.6.3",
-    "@playwright/test": "^1.20.0",
+    "@playwright/test": "^1.23.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",
-    "@stencil/vue-output-target": "^0.6.1",
+    "@stencil/vue-output-target": "^0.6.2",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
     "@types/swiper": "5.4.0",

core/src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
+import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
 import { IonicSafeString } from "./utils/sanitization";
 import { AlertAttributes } from "./components/alert/alert-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -785,14 +785,22 @@ export namespace Components {
           * Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.
          */
         "monthValues"?: number[] | number | string;
+        /**
+          * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        "multiple": boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.
+         */
+        "preferWheel": boolean;
         /**
           * Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.
          */
-        "presentation": 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
+        "presentation": DatetimePresentation;
         /**
           * If `true`, the datetime appears normal but is not interactive.
          */
@@ -822,14 +830,32 @@ export namespace Components {
          */
         "size": 'cover' | 'fixed';
         /**
-          * The value of the datetime as a valid ISO 8601 datetime string.
+          * The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple="true"`.
          */
-        "value"?: string | null;
+        "value"?: string | string[] | null;
         /**
           * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
          */
         "yearValues"?: number[] | number | string;
     }
+    interface IonDatetimeButton {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The ID of the `ion-datetime` instance associated with the datetime button.
+         */
+        "datetime"?: string;
+        /**
+          * If `true`, the user cannot interact with the button.
+         */
+        "disabled": boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+    }
     interface IonFab {
         /**
           * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -1554,6 +1580,10 @@ export namespace Components {
           * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
          */
         "handle"?: boolean;
+        /**
+          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
+         */
+        "handleBehavior"?: ModalHandleBehavior;
         "hasController": boolean;
         /**
           * Additional attributes to pass to the modal.
@@ -1567,6 +1597,10 @@ export namespace Components {
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
          */
         "isOpen": boolean;
+        /**
+          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1862,6 +1896,10 @@ export namespace Components {
          */
         "numericInput": boolean;
         "scrollActiveItemIntoView": () => Promise<void>;
+        /**
+          * 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>;
         /**
           * The selected option in the picker.
          */
@@ -1932,6 +1970,10 @@ export namespace Components {
           * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
          */
         "isOpen": boolean;
+        /**
+          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -2056,6 +2098,10 @@ export namespace Components {
         "value"?: any | null;
     }
     interface IonRange {
+        /**
+          * The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
+         */
+        "activeBarStart"?: number;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -2757,7 +2803,7 @@ export namespace Components {
     }
     interface IonTextarea {
         /**
-          * If `true`, the element height will increase based on the value.
+          * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
          */
         "autoGrow": boolean;
         /**
@@ -2963,6 +3009,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the toggle.
          */
         "disabled": boolean;
+        /**
+          * Enables the on/off accessibility switch labels within the toggle.
+         */
+        "enableOnOffLabels": boolean | undefined;
         /**
           * The mode determines which platform styles to use.
          */
@@ -3381,6 +3431,12 @@ declare global {
         prototype: HTMLIonDatetimeElement;
         new (): HTMLIonDatetimeElement;
     };
+    interface HTMLIonDatetimeButtonElement extends Components.IonDatetimeButton, HTMLStencilElement {
+    }
+    var HTMLIonDatetimeButtonElement: {
+        prototype: HTMLIonDatetimeButtonElement;
+        new (): HTMLIonDatetimeButtonElement;
+    };
     interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
     }
     var HTMLIonFabElement: {
@@ -3825,6 +3881,7 @@ declare global {
         "ion-col": HTMLIonColElement;
         "ion-content": HTMLIonContentElement;
         "ion-datetime": HTMLIonDatetimeElement;
+        "ion-datetime-button": HTMLIonDatetimeButtonElement;
         "ion-fab": HTMLIonFabElement;
         "ion-fab-button": HTMLIonFabButtonElement;
         "ion-fab-list": HTMLIonFabListElement;
@@ -4684,6 +4741,10 @@ declare namespace LocalJSX {
           * Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.
          */
         "monthValues"?: number[] | number | string;
+        /**
+          * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -4704,14 +4765,22 @@ declare namespace LocalJSX {
           * Emitted when the datetime has focus.
          */
         "onIonFocus"?: (event: IonDatetimeCustomEvent<void>) => void;
+        /**
+          * Emitted when componentDidRender is fired.
+         */
+        "onIonRender"?: (event: IonDatetimeCustomEvent<void>) => void;
         /**
           * Emitted when the styles change.
          */
         "onIonStyle"?: (event: IonDatetimeCustomEvent<StyleEventDetail>) => void;
+        /**
+          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `'date'`, `'date-time'`, or `'time-date'`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `'time'`, `'month'`, `'month-year'`, or `'year'`.
+         */
+        "preferWheel"?: boolean;
         /**
           * Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.
          */
-        "presentation"?: 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
+        "presentation"?: DatetimePresentation;
         /**
           * If `true`, the datetime appears normal but is not interactive.
          */
@@ -4737,14 +4806,32 @@ declare namespace LocalJSX {
          */
         "size"?: 'cover' | 'fixed';
         /**
-          * The value of the datetime as a valid ISO 8601 datetime string.
+          * The value of the datetime as a valid ISO 8601 datetime string. Should be an array of strings if `multiple="true"`.
          */
-        "value"?: string | null;
+        "value"?: string | string[] | null;
         /**
           * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
          */
         "yearValues"?: number[] | number | string;
     }
+    interface IonDatetimeButton {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The ID of the `ion-datetime` instance associated with the datetime button.
+         */
+        "datetime"?: string;
+        /**
+          * If `true`, the user cannot interact with the button.
+         */
+        "disabled"?: boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+    }
     interface IonFab {
         /**
           * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -5463,6 +5550,10 @@ declare namespace LocalJSX {
           * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
          */
         "handle"?: boolean;
+        /**
+          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
+         */
+        "handleBehavior"?: ModalHandleBehavior;
         "hasController"?: boolean;
         /**
           * Additional attributes to pass to the modal.
@@ -5476,6 +5567,10 @@ declare namespace LocalJSX {
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
          */
         "isOpen"?: boolean;
+        /**
+          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5767,6 +5862,10 @@ declare namespace LocalJSX {
           * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
          */
         "isOpen"?: boolean;
+        /**
+          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5921,6 +6020,10 @@ declare namespace LocalJSX {
         "value"?: any | null;
     }
     interface IonRange {
+        /**
+          * The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
+         */
+        "activeBarStart"?: number;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -6683,7 +6786,7 @@ declare namespace LocalJSX {
     }
     interface IonTextarea {
         /**
-          * If `true`, the element height will increase based on the value.
+          * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
          */
         "autoGrow"?: boolean;
         /**
@@ -6899,6 +7002,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the toggle.
          */
         "disabled"?: boolean;
+        /**
+          * Enables the on/off accessibility switch labels within the toggle.
+         */
+        "enableOnOffLabels"?: boolean | undefined;
         /**
           * The mode determines which platform styles to use.
          */
@@ -7017,6 +7124,7 @@ declare namespace LocalJSX {
         "ion-col": IonCol;
         "ion-content": IonContent;
         "ion-datetime": IonDatetime;
+        "ion-datetime-button": IonDatetimeButton;
         "ion-fab": IonFab;
         "ion-fab-button": IonFabButton;
         "ion-fab-list": IonFabList;
@@ -7116,6 +7224,7 @@ declare module "@stencil/core" {
             "ion-col": LocalJSX.IonCol & JSXBase.HTMLAttributes<HTMLIonColElement>;
             "ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
             "ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
+            "ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
             "ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
             "ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
             "ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;

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

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: a11y', () => {
+  test('accordions should be keyboard navigable', async ({ page, browserName }) => {
+    // TODO(FW-1764): remove skip once issue is resolved
+    test.skip(browserName === 'firefox', 'https://github.com/ionic-team/ionic-framework/issues/25529');
+
+    await page.goto(`/src/components/accordion/test/a11y`);
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+    const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
+    const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
+    const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
+    const addressInput = page.locator('#address1 input');
+
+    await page.keyboard.press(tabKey);
+    await expect(personalInfoHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(billingAddressHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(shippingAddressHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(personalInfoHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowUp');
+    await expect(shippingAddressHeader).toBeFocused();
+
+    // open Shipping Address accordion and move focus to the input inside it
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    await page.keyboard.press(tabKey);
+    await expect(addressInput).toBeFocused();
+
+    // ensure keyboard interaction doesn't move focus from body
+    await page.keyboard.press('ArrowDown');
+    await expect(addressInput).toBeFocused();
+  });
+});

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

@@ -1,63 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-const getActiveElementText = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.innerText, activeElement);
-};
-
-const getActiveInputID = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.closest('ion-input')?.id, activeElement);
-};
-
-test('accordion: a11y', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('accordion:rtl: a11y', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('accordion: keyboard navigation', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true',
-  });
-
-  await page.keyboard.press('Tab');
-  expect(await getActiveElementText(page)).toEqual('Personal Information');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Billing Address');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Personal Information');
-
-  await page.keyboard.press('ArrowUp');
-  expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  // open Shipping Address accordion and move focus to the input inside it
-  await page.keyboard.press('Enter');
-  await page.waitForChanges();
-  await page.keyboard.press('Tab');
-
-  const activeID = await getActiveInputID(page);
-  expect(activeID).toEqual('address1');
-
-  // ensure keyboard interaction doesn't move focus from body
-  await page.keyboard.press('ArrowDown');
-  const activeIDAgain = await getActiveInputID(page);
-  expect(activeIDAgain).toEqual('address1');
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -42,12 +42,12 @@
 
         <div class="grid ion-padding">
           <div class="grid-item">
-            <h2>Inset, Color - iOS</h2>
-            <ion-accordion-group mode="ios" expand="inset">
+            <h2>Inset, Color</h2>
+            <ion-accordion-group 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>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -118,12 +118,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset - iOS</h2>
-            <ion-accordion-group mode="ios" expand="inset">
+            <h2>Inset</h2>
+            <ion-accordion-group expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -194,12 +194,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset, Color - MD</h2>
-            <ion-accordion-group mode="md" expand="inset">
+            <h2>Compact, Color</h2>
+            <ion-accordion-group 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>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -270,394 +270,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset - MD</h2>
-            <ion-accordion-group mode="md" expand="inset">
+            <h2>Compact</h2>
+            <ion-accordion-group value="attractions">
               <ion-accordion value="attractions">
                 <ion-item slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Compact, Color - iOS</h2>
-            <ion-accordion-group mode="ios">
-              <ion-accordion value="attractions">
-                <ion-item color="primary" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item color="warning" slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item color="danger" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item color="success" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact - iOS</h2>
-            <ion-accordion-group mode="ios">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact, Color - MD</h2>
-            <ion-accordion-group mode="md">
-              <ion-accordion value="attractions">
-                <ion-item color="primary" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item color="warning" slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item color="danger" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item color="success" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact - MD</h2>
-            <ion-accordion-group mode="md">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Multiple</h2>
-            <ion-accordion-group expand="inset" mode="md" multiple="true">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -729,10 +347,5 @@
         </div>
       </ion-content>
     </ion-app>
-
-    <script>
-      const multipleAccordion = document.querySelector('ion-accordion-group[multiple="true"]');
-      multipleAccordion.value = ['dining', 'exercise'];
-    </script>
   </body>
 </html>

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

@@ -0,0 +1,30 @@
+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 }) => {
+    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"]');
+    const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
+
+    await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
+
+    await diningHeader.click();
+    await page.waitForChanges();
+
+    await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
+
+    await diningHeader.click();
+    await attractionsHeader.click();
+    await page.waitForChanges();
+
+    await expect(accordionGroup).toHaveJSProperty('value', []);
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,54 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: multiple - open', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/multiple?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const accordionGroup = await page.find('ion-accordion-group');
-  const diningAccordion = await page.find('ion-accordion[value="dining"] ion-item[slot="header"]');
-
-  const groupValue = await accordionGroup.getProperty('value');
-  expect(groupValue).toEqual('attractions');
-
-  await diningAccordion.click();
-  await page.waitForChanges();
-
-  const groupValueAgain = await accordionGroup.getProperty('value');
-  expect(groupValueAgain).toEqual(['attractions', 'dining']);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('accordion: multiple - close', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/multiple?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const accordionGroup = await page.find('ion-accordion-group');
-  const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]');
-
-  await attractionsAccordion.click();
-  await page.waitForChanges();
-
-  const groupValue = await accordionGroup.getProperty('value');
-  expect(groupValue).toEqual([]);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: nested', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/nested`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`accordion-nested-${page.getSnapshotSettings()}.png`);
+  });
+});