v6.1.11-nightly.20220616

resolves #25418

.github/CONTRIBUTING.md

@@ -231,6 +231,12 @@ Before creating a pull request, please read our requirements that explains the m
 2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
 
+### Review Process for Feature PRs
+
+The team has an internal design process for new Ionic features, which must be completed before the PR can be reviewed or merged. As a result of the design process, community feature PRs are subject to large changes. In some cases, the team may instead create a separate PR using pieces of the community PR. Either way, you will always receive co-author commit credit when the feature is merged.
+
+To expedite the process, please ensure that all feature PRs have an associated issue created, with a clear use case for why the feature should be added to Ionic.
+
 
 ## Commit Message Guidelines
 

CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.11-nightly.20220616](https://github.com/ionic-team/ionic-framework/compare/v6.1.10...v6.1.11-nightly.20220616) (2022-06-16)
+
+
+### Bug Fixes
+
+* **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)
+
+
+
+
+
+## [6.1.10](https://github.com/ionic-team/ionic-framework/compare/v6.1.9...v6.1.10) (2022-06-15)
+
+
+### Bug Fixes
+
+* **angular:** router compatibility with Angular 12/13 ([#25456](https://github.com/ionic-team/ionic-framework/issues/25456)) ([7b105a3](https://github.com/ionic-team/ionic-framework/commit/7b105a3471e5bc588ba63f820b707e131c878b6f)), closes [#25448](https://github.com/ionic-team/ionic-framework/issues/25448)
+* **fab-button:** improve ripple effect behavior on click ([#25413](https://github.com/ionic-team/ionic-framework/issues/25413)) ([efdaf90](https://github.com/ionic-team/ionic-framework/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0)), closes [#21772](https://github.com/ionic-team/ionic-framework/issues/21772)
+* **modal:** backdrop animation when backdropBreakpoint is 1 ([#25430](https://github.com/ionic-team/ionic-framework/issues/25430)) ([c10df52](https://github.com/ionic-team/ionic-framework/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f)), closes [#25402](https://github.com/ionic-team/ionic-framework/issues/25402)
+* **modal:** status bar color now correct with sheet modal ([#25424](https://github.com/ionic-team/ionic-framework/issues/25424)) ([377c4f5](https://github.com/ionic-team/ionic-framework/commit/377c4f597b972818d90132017d50c33074ddadab)), closes [#20501](https://github.com/ionic-team/ionic-framework/issues/20501)
+* **picker-column-internal:** switching off an input mode column preserves scroll ([#25467](https://github.com/ionic-team/ionic-framework/issues/25467)) ([989429d](https://github.com/ionic-team/ionic-framework/commit/989429d65cf57ef8fb69854639f8eac1a12369bc))
+* **popover:** ensure popover does not go offscreen when adjusting top position ([#25350](https://github.com/ionic-team/ionic-framework/issues/25350)) ([6926538](https://github.com/ionic-team/ionic-framework/commit/692653842b43b5e36c51163f8261fde3b5bea40d)), closes [#25349](https://github.com/ionic-team/ionic-framework/issues/25349)
+
+
+
+
+
+## [6.1.9](https://github.com/ionic-team/ionic-framework/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+
+### Bug Fixes
+
+* **all:** ripple effect is no longer added when scrolling ([#25352](https://github.com/ionic-team/ionic-framework/issues/25352)) ([0b275af](https://github.com/ionic-team/ionic-framework/commit/0b275af5ac06f470b4d908b889f513956bf5d868)), closes [#22030](https://github.com/ionic-team/ionic-framework/issues/22030)
+* **angular:** add support for Angular 14 ([#25403](https://github.com/ionic-team/ionic-framework/issues/25403)) ([122cdcc](https://github.com/ionic-team/ionic-framework/commit/122cdcc8253e46d9537105b11045fd7d9ccd8917)), closes [#25353](https://github.com/ionic-team/ionic-framework/issues/25353)
+* **datetime:** emit ionChange for non-calendar picker presentation ([#25380](https://github.com/ionic-team/ionic-framework/issues/25380)) ([4e6a60b](https://github.com/ionic-team/ionic-framework/commit/4e6a60b6a42287e5091728aecb61f6097e131b83)), closes [#25375](https://github.com/ionic-team/ionic-framework/issues/25375)
+* **datetime:** ensure that default month shown is always in bounds ([#25351](https://github.com/ionic-team/ionic-framework/issues/25351)) ([866d452](https://github.com/ionic-team/ionic-framework/commit/866d4528ad1b8ffa65258595d553ea934daa4add)), closes [#25320](https://github.com/ionic-team/ionic-framework/issues/25320)
+* **label:** text contents will repaint on change ([#25395](https://github.com/ionic-team/ionic-framework/issues/25395)) ([52ec741](https://github.com/ionic-team/ionic-framework/commit/52ec74193b4e2478cb84a6dfea261cb2113dcbff))
+
+
+
+
+
+## [6.1.8](https://github.com/ionic-team/ionic-framework/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+
+### Bug Fixes
+
+* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic-framework/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic-framework/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic-framework/issues/23823)
+* **item-sliding:** swiping inside of virtual scroller now prevents scrolling ([#25345](https://github.com/ionic-team/ionic-framework/issues/25345)) ([5a1a5f6](https://github.com/ionic-team/ionic-framework/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753))
+* **range:** dragging knob no longer scrolls page ([#25343](https://github.com/ionic-team/ionic-framework/issues/25343)) ([0b92dff](https://github.com/ionic-team/ionic-framework/commit/0b92dffa92c05705ff83518c10608e3dc3651d51)), closes [#19004](https://github.com/ionic-team/ionic-framework/issues/19004)
+* **react:** present controller overlays in React 18 ([#25361](https://github.com/ionic-team/ionic-framework/issues/25361)) ([01c40ea](https://github.com/ionic-team/ionic-framework/commit/01c40eae5509f1c150d79269a7a75c05112fa343)), closes [#25247](https://github.com/ionic-team/ionic-framework/issues/25247)
+
+
+
+
+
+## [6.1.7](https://github.com/ionic-team/ionic-framework/compare/v6.1.6...v6.1.7) (2022-05-26)
+
+
+### Bug Fixes
+
+* **accordion:** accordions expand when using binding ([#25322](https://github.com/ionic-team/ionic-framework/issues/25322)) ([61e571e](https://github.com/ionic-team/ionic-framework/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6)), closes [#25307](https://github.com/ionic-team/ionic-framework/issues/25307)
+* **datetime:** don't update value on confirm call if no date was selected ([#25338](https://github.com/ionic-team/ionic-framework/issues/25338)) ([9e5b10a](https://github.com/ionic-team/ionic-framework/commit/9e5b10a2155c6b9de565931da384e0e49aeca7b7))
+* **item, list:** list aria roles are added ([#25336](https://github.com/ionic-team/ionic-framework/issues/25336)) ([311c634](https://github.com/ionic-team/ionic-framework/commit/311c634d20e9e597db676d6f54e4b79cfe742a61)), closes [#19939](https://github.com/ionic-team/ionic-framework/issues/19939)
+* **menu:** rtl menu no longer disappears on ios 15 ([#25309](https://github.com/ionic-team/ionic-framework/issues/25309)) ([6005431](https://github.com/ionic-team/ionic-framework/commit/60054310afbab6151f6c29ff6e74666acd181a41)), closes [#25192](https://github.com/ionic-team/ionic-framework/issues/25192)
+* **modal:** swipe to close on content blocks scroll in ion-nav ([#25300](https://github.com/ionic-team/ionic-framework/issues/25300)) ([fdc55c0](https://github.com/ionic-team/ionic-framework/commit/fdc55c072765c87ad7c783e6d8a238b007f5f3ff)), closes [#25298](https://github.com/ionic-team/ionic-framework/issues/25298)
+* **nav:** swipe to go back works inside card modal ([#25333](https://github.com/ionic-team/ionic-framework/issues/25333)) ([0156be6](https://github.com/ionic-team/ionic-framework/commit/0156be61cbf73b25cb3c2cba1bd20adebbb3db4f)), closes [#25327](https://github.com/ionic-team/ionic-framework/issues/25327)
+* **range:** interfaces are now correctly exported ([#25342](https://github.com/ionic-team/ionic-framework/issues/25342)) ([15f0c06](https://github.com/ionic-team/ionic-framework/commit/15f0c0669f7598386edf487f408462b90ed91a08)), closes [#25341](https://github.com/ionic-team/ionic-framework/issues/25341)
+* **react:** add param types to useIonPopover dismiss function ([#25311](https://github.com/ionic-team/ionic-framework/issues/25311)) ([7111370](https://github.com/ionic-team/ionic-framework/commit/7111370dd787fdec78a1e3368679bc4c73570b98))
+* **react:** IonTabButton will call custom onClick handlers ([#25313](https://github.com/ionic-team/ionic-framework/issues/25313)) ([6034418](https://github.com/ionic-team/ionic-framework/commit/6034418b33c32fdd682c470eaf61b9fcbe86c4bb)), closes [#22511](https://github.com/ionic-team/ionic-framework/issues/22511)
+* **refresher:** attach scroll listener to custom scroll target ([#25335](https://github.com/ionic-team/ionic-framework/issues/25335)) ([8f5e4cd](https://github.com/ionic-team/ionic-framework/commit/8f5e4cd9350b10a98afb7c98353c6719eee918bb)), closes [#25318](https://github.com/ionic-team/ionic-framework/issues/25318)
+* **types:** improve intellisense with colors ([#25347](https://github.com/ionic-team/ionic-framework/issues/25347)) ([97cfbbb](https://github.com/ionic-team/ionic-framework/commit/97cfbbb65d3e63c32d720e01c7368c68616bb531))
+* **vue:** correct views are now unmounted in tabs ([#25270](https://github.com/ionic-team/ionic-framework/issues/25270)) ([5e23fb1](https://github.com/ionic-team/ionic-framework/commit/5e23fb1ce4e5b6e53828bde59268170f604167ba)), closes [#25255](https://github.com/ionic-team/ionic-framework/issues/25255)
+
+
+
+
+
 ## [6.1.6](https://github.com/ionic-team/ionic-framework/compare/v6.1.5...v6.1.6) (2022-05-18)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.11-nightly.20220616](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11-nightly.20220616) (2022-06-16)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.10](https://github.com/ionic-team/ionic/compare/v6.1.9...v6.1.10) (2022-06-15)
+
+
+### Bug Fixes
+
+* **angular:** router compatibility with Angular 12/13 ([#25456](https://github.com/ionic-team/ionic/issues/25456)) ([7b105a3](https://github.com/ionic-team/ionic/commit/7b105a3471e5bc588ba63f820b707e131c878b6f)), closes [#25448](https://github.com/ionic-team/ionic/issues/25448)
+
+
+
+
+
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+
+### Bug Fixes
+
+* **angular:** add support for Angular 14 ([#25403](https://github.com/ionic-team/ionic/issues/25403)) ([122cdcc](https://github.com/ionic-team/ionic/commit/122cdcc8253e46d9537105b11045fd7d9ccd8917)), closes [#25353](https://github.com/ionic-team/ionic/issues/25353)
+
+
+
+
+
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
+
+
+### Bug Fixes
+
+* **accordion:** accordions expand when using binding ([#25322](https://github.com/ionic-team/ionic/issues/25322)) ([61e571e](https://github.com/ionic-team/ionic/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6)), closes [#25307](https://github.com/ionic-team/ionic/issues/25307)
+* **range:** interfaces are now correctly exported ([#25342](https://github.com/ionic-team/ionic/issues/25342)) ([15f0c06](https://github.com/ionic-team/ionic/commit/15f0c0669f7598386edf487f408462b90ed91a08)), closes [#25341](https://github.com/ionic-team/ionic/issues/25341)
+
+
+
+
+
 ## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.6",
+  "version": "6.1.11-nightly.20220616",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.5",
+      "version": "6.1.10",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.10",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,12 +1023,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
+      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1222,9 +1222,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3557,23 +3557,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.10.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/is-bigint": {
@@ -7951,12 +7939,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
+      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -8104,9 +8092,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g=="
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
     },
     "@types/estree": {
       "version": "0.0.39",
@@ -9811,18 +9799,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.10.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.10.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-          "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A=="
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "is-bigint": {

angular/package.json

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

angular/src/di/r3_injector.ts

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

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

@@ -20,9 +20,11 @@ import { componentOnReady } from '@ionic/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
 
+import { EnvironmentInjector } from '../../di/r3_injector';
 import { AnimationBuilder } from '../../ionic-core';
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
+import { isComponentFactoryResolver } from '../../util/util';
 
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
@@ -82,11 +84,12 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   constructor(
     private parentContexts: ChildrenOutletContexts,
     private location: ViewContainerRef,
-    private resolver: ComponentFactoryResolver,
     @Attribute('name') name: string,
     @Optional() @Attribute('tabs') tabs: string,
     private config: Config,
     private navCtrl: NavController,
+    @Optional() private environmentInjector: EnvironmentInjector,
+    @Optional() private componentFactoryResolver: ComponentFactoryResolver,
     commonLocation: Location,
     elementRef: ElementRef,
     router: Router,
@@ -206,7 +209,10 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
   }
 
-  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void {
+  activateWith(
+    activatedRoute: ActivatedRoute,
+    resolverOrInjector?: ComponentFactoryResolver | EnvironmentInjector | null
+  ): void {
     if (this.isActivated) {
       throw new Error('Cannot activate an already activated outlet');
     }
@@ -229,9 +235,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       const snapshot = (activatedRoute as any)._futureSnapshot;
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const component = snapshot.routeConfig!.component as any;
-      resolver = resolver || this.resolver;
-
-      const factory = resolver.resolveComponentFactory(component);
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       // We create an activated route proxy object that will maintain future updates for this component
@@ -240,8 +243,41 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       const activatedRouteProxy = this.createActivatedRouteProxy(component$, activatedRoute);
 
       const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
-      cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
 
+      /**
+       * The resolver is not always provided and is required in Angular 12.
+       * Fallback to the class-level provider when the resolver is not set.
+       */
+      resolverOrInjector = resolverOrInjector || this.componentFactoryResolver;
+
+      if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
+        // Backwards compatibility for Angular 13 and lower
+        const factory = resolverOrInjector.resolveComponentFactory(component);
+        cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
+      } else {
+        /**
+         * Angular 14 and higher.
+         *
+         * TODO: FW-1641: Migrate once Angular 13 support is dropped.
+         *
+         * When we drop < Angular 14, we can replace the following code with:
+         * ```ts
+          const environmentInjector = resolverOrInjector ?? this.environmentInjector;
+            cmpRef = this.activated = location.createComponent(component, {
+              index: location.length,
+              injector,
+              environmentInjector,
+            });
+         * ```
+         * where `this.environmentInjector` is a provider of `EnvironmentInjector` from @angular/core.
+         */
+        const environmentInjector = resolverOrInjector ?? this.environmentInjector;
+        cmpRef = this.activated = this.location.createComponent(component, {
+          index: this.location.length,
+          injector,
+          environmentInjector,
+        } as any);
+      }
       // Once the component is created we can push it to our local subject supplied to the proxy
       component$.next(cmpRef.instance);
 

angular/src/directives/proxies.ts

@@ -464,16 +464,18 @@ import type { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
 import type { ScrollDetail as IContentScrollDetail } from '@ionic/core';
 export declare interface IonContent extends Components.IonContent {
   /**
-   * Emitted when the scroll has started. 
+   * Emitted when the scroll has started. This event is disabled by default.
+Set `scrollEvents` to `true` to enable. 
    */
   ionScrollStart: EventEmitter<CustomEvent<IContentScrollBaseDetail>>;
   /**
    * Emitted while scrolling. This event is disabled by default.
-Look at the property: `scrollEvents` 
+Set `scrollEvents` to `true` to enable. 
    */
   ionScroll: EventEmitter<CustomEvent<IContentScrollDetail>>;
   /**
-   * Emitted when the scroll has ended. 
+   * Emitted when the scroll has ended. This event is disabled by default.
+Set `scrollEvents` to `true` to enable. 
    */
   ionScrollEnd: EventEmitter<CustomEvent<IContentScrollBaseDetail>>;
 

angular/src/index.ts

@@ -107,6 +107,10 @@ export {
   PopoverOptions,
   RadioGroupCustomEvent,
   RadioGroupChangeEventDetail,
+  RangeCustomEvent,
+  RangeChangeEventDetail,
+  RangeKnobMoveStartEventDetail,
+  RangeKnobMoveEndEventDetail,
   RefresherCustomEvent,
   RefresherEventDetail,
   RouterEventDetail,

angular/src/providers/angular-delegate.ts

@@ -6,6 +6,7 @@ import {
   Injectable,
   InjectionToken,
   Injector,
+  ComponentRef,
 } from '@angular/core';
 import {
   FrameworkDelegate,
@@ -16,18 +17,20 @@ import {
   LIFECYCLE_WILL_UNLOAD,
 } from '@ionic/core';
 
+import { EnvironmentInjector } from '../di/r3_injector';
 import { NavParams } from '../directives/navigation/nav-params';
+import { isComponentFactoryResolver } from '../util/util';
 
 @Injectable()
 export class AngularDelegate {
   constructor(private zone: NgZone, private appRef: ApplicationRef) {}
 
   create(
-    resolver: ComponentFactoryResolver,
+    resolverOrInjector: ComponentFactoryResolver,
     injector: Injector,
     location?: ViewContainerRef
   ): AngularFrameworkDelegate {
-    return new AngularFrameworkDelegate(resolver, injector, location, this.appRef, this.zone);
+    return new AngularFrameworkDelegate(resolverOrInjector, injector, location, this.appRef, this.zone);
   }
 }
 
@@ -36,7 +39,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   private elEventsMap = new WeakMap<HTMLElement, () => void>();
 
   constructor(
-    private resolver: ComponentFactoryResolver,
+    private resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
     private injector: Injector,
     private location: ViewContainerRef | undefined,
     private appRef: ApplicationRef,
@@ -48,7 +51,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
       return new Promise((resolve) => {
         const el = attachView(
           this.zone,
-          this.resolver,
+          this.resolverOrInjector,
           this.injector,
           this.location,
           this.appRef,
@@ -85,7 +88,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
 
 export const attachView = (
   zone: NgZone,
-  resolver: ComponentFactoryResolver,
+  resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
   injector: Injector,
   location: ViewContainerRef | undefined,
   appRef: ApplicationRef,
@@ -96,14 +99,29 @@ export const attachView = (
   params: any,
   cssClasses: string[] | undefined
 ): any => {
-  const factory = resolver.resolveComponentFactory(component);
+  let componentRef: ComponentRef<any>;
   const childInjector = Injector.create({
     providers: getProviders(params),
     parent: injector,
   });
-  const componentRef = location
-    ? location.createComponent(factory, location.length, childInjector)
-    : factory.create(childInjector);
+
+  if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
+    // Angular 13 and lower
+    const factory = resolverOrInjector.resolveComponentFactory(component);
+    componentRef = location
+      ? location.createComponent(factory, location.length, childInjector)
+      : factory.create(childInjector);
+  } else if (location) {
+    // Angular 14
+    const environmentInjector = resolverOrInjector;
+    componentRef = location.createComponent(component, {
+      index: location.indexOf,
+      injector: childInjector,
+      environmentInjector,
+    } as any);
+  } else {
+    return null;
+  }
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;

angular/src/providers/modal-controller.ts

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

angular/src/providers/popover-controller.ts

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

angular/src/util/util.ts

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

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

@@ -0,0 +1,19 @@
+describe('Accordion', () => {
+  beforeEach(() => {
+    cy.visit('/accordions');
+  });
+
+  it('should correctly expand on multiple modal opens', () => {
+    cy.get('#open-modal').click();
+
+    cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
+    cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
+
+    cy.get('#dismiss').click();
+
+    cy.get('#open-modal').click();
+
+    cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
+    cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
+  });
+});

angular/test/test-app/package.json

@@ -31,7 +31,7 @@
     "@angular/router": "^13.1.3",
     "@ionic/angular": "^6.0.12",
     "@ionic/angular-server": "^6.0.12",
-    "@nguniversal/express-engine": "^12.1.1",
+    "@nguniversal/express-engine": "^13.1.1",
     "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
@@ -60,9 +60,9 @@
     "eslint": "^7.26.0",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",
-    "typescript": "^4.5.5",
+    "typescript": "~4.6.0",
     "wait-on": "^5.2.1",
     "webpack": "^5.61.0",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^4.9.2"
   }
 }

angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.html

@@ -0,0 +1,17 @@
+<ion-content>
+  <ion-button id="dismiss" (click)="modal.dismiss()">Dismiss Modal</ion-button>
+  <ion-accordion-group [value]="'a'">
+    <ion-accordion value="a">
+      <ion-item slot="header">
+        <ion-label>A</ion-label>
+      </ion-item>
+      <div slot="content">A content</div>
+    </ion-accordion>
+    <ion-accordion value="b">
+      <ion-item slot="header">
+        <ion-label>B</ion-label>
+      </ion-item>
+      <div slot="content">B content</div>
+    </ion-accordion>
+  </ion-accordion-group>
+</ion-content>

angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-accordion-modal',
+  templateUrl: './accordion-modal.component.html',
+})
+export class AccordionModalComponent {
+  modal: HTMLIonModalElement;
+
+  constructor() {}
+}

angular/test/test-app/src/app/accordion/accordion.component.html

@@ -0,0 +1,13 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons>
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      Accordion test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-button id="open-modal" (click)="open()">Open Modal</ion-button>
+</ion-content>

angular/test/test-app/src/app/accordion/accordion.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AccordionModalComponent } from './accordion-modal/accordion-modal.component';
+
+@Component({
+  selector: 'app-accordion',
+  templateUrl: './accordion.component.html',
+})
+export class AccordionComponent {
+
+  constructor(
+    private modalCtrl: ModalController
+  ) { }
+
+  async open() {
+    const modal = await this.modalCtrl.create({
+      component: AccordionModalComponent,
+      animated: false,
+    });
+    await modal.present();
+  }
+}

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

@@ -20,9 +20,11 @@ import { NavigationPage1Component } from './navigation-page1/navigation-page1.co
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
 import { AlertComponent } from './alert/alert.component';
+import { AccordionComponent } from './accordion/accordion.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
+  { path: 'accordions', component: AccordionComponent },
   { path: 'alerts', component: AlertComponent },
   { path: 'inputs', component: InputsComponent },
   { path: 'form', component: FormComponent },

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

@@ -30,6 +30,8 @@ import { NavigationPage1Component } from './navigation-page1/navigation-page1.co
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
 import { AlertComponent } from './alert/alert.component';
+import { AccordionComponent } from './accordion/accordion.component';
+import { AccordionModalComponent } from './accordion/accordion-modal/accordion-modal.component';
 
 @NgModule({
   declarations: [
@@ -56,7 +58,9 @@ import { AlertComponent } from './alert/alert.component';
     NavigationPage1Component,
     NavigationPage2Component,
     NavigationPage3Component,
-    AlertComponent
+    AlertComponent,
+    AccordionComponent,
+    AccordionModalComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -62,5 +62,10 @@
           Providers
         </ion-label>
       </ion-item>
+      <ion-item routerLink="/accordions">
+        <ion-label>
+          Accordions Test
+        </ion-label>
+      </ion-item>
     </ion-list>
   </ion-content>

commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional']
-}

core/.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  ...require('@ionic/prettier-config'),
+  overrides: [
+    {
+      files: ['**/*.scss'],
+      options: {
+        singleQuote: false,
+      },
+    },
+  ],
+};

core/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.11-nightly.20220616](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11-nightly.20220616) (2022-06-16)
+
+
+### Bug Fixes
+
+* **refresher:** quickly swiping down no longer causes duplicate refresh ([#25476](https://github.com/ionic-team/ionic/issues/25476)) ([3abfa78](https://github.com/ionic-team/ionic/commit/3abfa780ccb32484b4d9f1b509e7ab910dfb901a)), closes [#25418](https://github.com/ionic-team/ionic/issues/25418)
+
+
+
+
+
+## [6.1.10](https://github.com/ionic-team/ionic/compare/v6.1.9...v6.1.10) (2022-06-15)
+
+
+### Bug Fixes
+
+* **fab-button:** improve ripple effect behavior on click ([#25413](https://github.com/ionic-team/ionic/issues/25413)) ([efdaf90](https://github.com/ionic-team/ionic/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0)), closes [#21772](https://github.com/ionic-team/ionic/issues/21772)
+* **modal:** backdrop animation when backdropBreakpoint is 1 ([#25430](https://github.com/ionic-team/ionic/issues/25430)) ([c10df52](https://github.com/ionic-team/ionic/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f)), closes [#25402](https://github.com/ionic-team/ionic/issues/25402)
+* **modal:** status bar color now correct with sheet modal ([#25424](https://github.com/ionic-team/ionic/issues/25424)) ([377c4f5](https://github.com/ionic-team/ionic/commit/377c4f597b972818d90132017d50c33074ddadab)), closes [#20501](https://github.com/ionic-team/ionic/issues/20501)
+* **picker-column-internal:** switching off an input mode column preserves scroll ([#25467](https://github.com/ionic-team/ionic/issues/25467)) ([989429d](https://github.com/ionic-team/ionic/commit/989429d65cf57ef8fb69854639f8eac1a12369bc))
+* **popover:** ensure popover does not go offscreen when adjusting top position ([#25350](https://github.com/ionic-team/ionic/issues/25350)) ([6926538](https://github.com/ionic-team/ionic/commit/692653842b43b5e36c51163f8261fde3b5bea40d)), closes [#25349](https://github.com/ionic-team/ionic/issues/25349)
+
+
+
+
+
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+
+### Bug Fixes
+
+* **all:** ripple effect is no longer added when scrolling ([#25352](https://github.com/ionic-team/ionic/issues/25352)) ([0b275af](https://github.com/ionic-team/ionic/commit/0b275af5ac06f470b4d908b889f513956bf5d868)), closes [#22030](https://github.com/ionic-team/ionic/issues/22030)
+* **datetime:** emit ionChange for non-calendar picker presentation ([#25380](https://github.com/ionic-team/ionic/issues/25380)) ([4e6a60b](https://github.com/ionic-team/ionic/commit/4e6a60b6a42287e5091728aecb61f6097e131b83)), closes [#25375](https://github.com/ionic-team/ionic/issues/25375)
+* **datetime:** ensure that default month shown is always in bounds ([#25351](https://github.com/ionic-team/ionic/issues/25351)) ([866d452](https://github.com/ionic-team/ionic/commit/866d4528ad1b8ffa65258595d553ea934daa4add)), closes [#25320](https://github.com/ionic-team/ionic/issues/25320)
+* **label:** text contents will repaint on change ([#25395](https://github.com/ionic-team/ionic/issues/25395)) ([52ec741](https://github.com/ionic-team/ionic/commit/52ec74193b4e2478cb84a6dfea261cb2113dcbff))
+
+
+
+
+
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+
+### Bug Fixes
+
+* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic/issues/23823)
+* **item-sliding:** swiping inside of virtual scroller now prevents scrolling ([#25345](https://github.com/ionic-team/ionic/issues/25345)) ([5a1a5f6](https://github.com/ionic-team/ionic/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753))
+* **range:** dragging knob no longer scrolls page ([#25343](https://github.com/ionic-team/ionic/issues/25343)) ([0b92dff](https://github.com/ionic-team/ionic/commit/0b92dffa92c05705ff83518c10608e3dc3651d51)), closes [#19004](https://github.com/ionic-team/ionic/issues/19004)
+
+
+
+
+
+## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
+
+
+### Bug Fixes
+
+* **accordion:** accordions expand when using binding ([#25322](https://github.com/ionic-team/ionic/issues/25322)) ([61e571e](https://github.com/ionic-team/ionic/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6)), closes [#25307](https://github.com/ionic-team/ionic/issues/25307)
+* **datetime:** don't update value on confirm call if no date was selected ([#25338](https://github.com/ionic-team/ionic/issues/25338)) ([9e5b10a](https://github.com/ionic-team/ionic/commit/9e5b10a2155c6b9de565931da384e0e49aeca7b7))
+* **item, list:** list aria roles are added ([#25336](https://github.com/ionic-team/ionic/issues/25336)) ([311c634](https://github.com/ionic-team/ionic/commit/311c634d20e9e597db676d6f54e4b79cfe742a61)), closes [#19939](https://github.com/ionic-team/ionic/issues/19939)
+* **menu:** rtl menu no longer disappears on ios 15 ([#25309](https://github.com/ionic-team/ionic/issues/25309)) ([6005431](https://github.com/ionic-team/ionic/commit/60054310afbab6151f6c29ff6e74666acd181a41)), closes [#25192](https://github.com/ionic-team/ionic/issues/25192)
+* **modal:** swipe to close on content blocks scroll in ion-nav ([#25300](https://github.com/ionic-team/ionic/issues/25300)) ([fdc55c0](https://github.com/ionic-team/ionic/commit/fdc55c072765c87ad7c783e6d8a238b007f5f3ff)), closes [#25298](https://github.com/ionic-team/ionic/issues/25298)
+* **nav:** swipe to go back works inside card modal ([#25333](https://github.com/ionic-team/ionic/issues/25333)) ([0156be6](https://github.com/ionic-team/ionic/commit/0156be61cbf73b25cb3c2cba1bd20adebbb3db4f)), closes [#25327](https://github.com/ionic-team/ionic/issues/25327)
+* **refresher:** attach scroll listener to custom scroll target ([#25335](https://github.com/ionic-team/ionic/issues/25335)) ([8f5e4cd](https://github.com/ionic-team/ionic/commit/8f5e4cd9350b10a98afb7c98353c6719eee918bb)), closes [#25318](https://github.com/ionic-team/ionic/issues/25318)
+* **types:** improve intellisense with colors ([#25347](https://github.com/ionic-team/ionic/issues/25347)) ([97cfbbb](https://github.com/ionic-team/ionic/commit/97cfbbb65d3e63c32d720e01c7368c68616bb531))
+
+
+
+
+
 ## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
 
 

core/api.txt

@@ -103,7 +103,7 @@ ion-avatar,shadow
 ion-avatar,css-prop,--border-radius
 
 ion-back-button,shadow
-ion-back-button,prop,color,string | undefined,undefined,false,true
+ion-back-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true
 ion-back-button,prop,icon,null | string | undefined,undefined,false,false
@@ -154,7 +154,7 @@ ion-backdrop,prop,visible,boolean,true,false,false
 ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
-ion-badge,prop,color,string | undefined,undefined,false,true
+ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,css-prop,--background
 ion-badge,css-prop,--color
@@ -165,7 +165,7 @@ ion-badge,css-prop,--padding-top
 
 ion-breadcrumb,shadow
 ion-breadcrumb,prop,active,boolean,false,false,false
-ion-breadcrumb,prop,color,string | undefined,undefined,false,false
+ion-breadcrumb,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,false
 ion-breadcrumb,prop,disabled,boolean,false,false,false
 ion-breadcrumb,prop,download,string | undefined,undefined,false,false
 ion-breadcrumb,prop,href,string | undefined,undefined,false,false
@@ -187,7 +187,7 @@ ion-breadcrumb,part,native
 ion-breadcrumb,part,separator
 
 ion-breadcrumbs,shadow
-ion-breadcrumbs,prop,color,string | undefined,undefined,false,false
+ion-breadcrumbs,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,false
 ion-breadcrumbs,prop,itemsAfterCollapse,number,1,false,false
 ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false
@@ -198,7 +198,7 @@ ion-breadcrumbs,css-prop,--color
 
 ion-button,shadow
 ion-button,prop,buttonType,string,'button',false,false
-ion-button,prop,color,string | undefined,undefined,false,true
+ion-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-button,prop,disabled,boolean,false,false,true
 ion-button,prop,download,string | undefined,undefined,false,false
 ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true
@@ -245,7 +245,7 @@ ion-buttons,prop,collapse,boolean,false,false,false
 
 ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
-ion-card,prop,color,string | undefined,undefined,false,true
+ion-card,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card,prop,disabled,boolean,false,false,false
 ion-card,prop,download,string | undefined,undefined,false,false
 ion-card,prop,href,string | undefined,undefined,false,false
@@ -263,23 +263,23 @@ ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 
 ion-card-header,shadow
-ion-card-header,prop,color,string | undefined,undefined,false,true
+ion-card-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-header,prop,mode,"ios" | "md",undefined,false,false
 ion-card-header,prop,translucent,boolean,false,false,false
 
 ion-card-subtitle,shadow
-ion-card-subtitle,prop,color,string | undefined,undefined,false,true
+ion-card-subtitle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false,false
 ion-card-subtitle,css-prop,--color
 
 ion-card-title,shadow
-ion-card-title,prop,color,string | undefined,undefined,false,true
+ion-card-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color
 
 ion-checkbox,shadow
 ion-checkbox,prop,checked,boolean,false,false,false
-ion-checkbox,prop,color,string | undefined,undefined,false,true
+ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
@@ -303,7 +303,7 @@ ion-checkbox,part,container
 ion-checkbox,part,mark
 
 ion-chip,shadow
-ion-chip,prop,color,string | undefined,undefined,false,true
+ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
@@ -344,7 +344,7 @@ ion-col,css-prop,--ion-grid-column-padding-xs
 ion-col,css-prop,--ion-grid-columns
 
 ion-content,shadow
-ion-content,prop,color,string | undefined,undefined,false,true
+ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
@@ -373,7 +373,7 @@ ion-content,part,scroll
 ion-datetime,shadow
 ion-datetime,prop,cancelText,string,'Cancel',false,false
 ion-datetime,prop,clearText,string,'Clear',false,false
-ion-datetime,prop,color,string | undefined,'primary',false,false
+ion-datetime,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,false
 ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
@@ -418,7 +418,7 @@ ion-fab,method,close,close() => Promise<void>
 ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
 ion-fab-button,prop,closeIcon,string,close,false,false
-ion-fab-button,prop,color,string | undefined,undefined,false,true
+ion-fab-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
@@ -515,7 +515,7 @@ ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
-ion-input,prop,color,string | undefined,undefined,false,true
+ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input,prop,debounce,number,0,false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
@@ -555,7 +555,7 @@ ion-input,css-prop,--placeholder-opacity
 
 ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
-ion-item,prop,color,string | undefined,undefined,false,true
+ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,counter,boolean,false,false,false
 ion-item,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-item,prop,detail,boolean | undefined,undefined,false,false
@@ -611,7 +611,7 @@ ion-item,part,detail-icon
 ion-item,part,native
 
 ion-item-divider,shadow
-ion-item-divider,prop,color,string | undefined,undefined,false,true
+ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
 ion-item-divider,css-prop,--background
@@ -628,7 +628,7 @@ ion-item-divider,css-prop,--padding-top
 ion-item-group,none
 
 ion-item-option,shadow
-ion-item-option,prop,color,string | undefined,undefined,false,true
+ion-item-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item-option,prop,disabled,boolean,false,false,false
 ion-item-option,prop,download,string | undefined,undefined,false,false
 ion-item-option,prop,expandable,boolean,false,false,false
@@ -655,7 +655,7 @@ ion-item-sliding,method,open,open(side: Side | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,any,true
 
 ion-label,scoped
-ion-label,prop,color,string | undefined,undefined,false,true
+ion-label,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
 ion-label,css-prop,--color
@@ -667,7 +667,7 @@ ion-list,prop,mode,"ios" | "md",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>
 
 ion-list-header,shadow
-ion-list-header,prop,color,string | undefined,undefined,false,true
+ion-list-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false,false
 ion-list-header,css-prop,--background
@@ -739,7 +739,7 @@ ion-menu,part,container
 
 ion-menu-button,shadow
 ion-menu-button,prop,autoHide,boolean,true,false,false
-ion-menu-button,prop,color,string | undefined,undefined,false,true
+ion-menu-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-menu-button,prop,disabled,boolean,false,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
@@ -842,7 +842,7 @@ ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | und
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 
 ion-note,shadow
-ion-note,prop,color,string | undefined,undefined,false,true
+ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color
 
@@ -933,7 +933,7 @@ ion-popover,part,content
 
 ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
-ion-progress-bar,prop,color,string | undefined,undefined,false,true
+ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
@@ -946,7 +946,7 @@ ion-progress-bar,part,stream
 ion-progress-bar,part,track
 
 ion-radio,shadow
-ion-radio,prop,color,string | undefined,undefined,false,true
+ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
@@ -967,7 +967,7 @@ ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 
 ion-range,shadow
-ion-range,prop,color,string | undefined,undefined,false,true
+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
 ion-range,prop,dualKnobs,boolean,false,false,false
@@ -1058,7 +1058,7 @@ ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true
 
 ion-router-link,shadow
-ion-router-link,prop,color,string | undefined,undefined,false,true
+ion-router-link,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-router-link,prop,href,string | undefined,undefined,false,false
 ion-router-link,prop,rel,string | undefined,undefined,false,false
 ion-router-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -1081,7 +1081,7 @@ ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
-ion-searchbar,prop,color,string | undefined,undefined,false,true
+ion-searchbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-searchbar,prop,debounce,number,250,false,false
 ion-searchbar,prop,disabled,boolean,false,false,false
 ion-searchbar,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
@@ -1115,7 +1115,7 @@ ion-searchbar,css-prop,--placeholder-font-weight
 ion-searchbar,css-prop,--placeholder-opacity
 
 ion-segment,shadow
-ion-segment,prop,color,string | undefined,undefined,false,true
+ion-segment,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
@@ -1249,7 +1249,7 @@ ion-slides,css-prop,--scroll-bar-background
 ion-slides,css-prop,--scroll-bar-background-active
 
 ion-spinner,shadow
-ion-spinner,prop,color,string | undefined,undefined,false,true
+ion-spinner,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
@@ -1271,7 +1271,7 @@ ion-tab,prop,tab,string,undefined,true,false
 ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tab-bar,shadow
-ion-tab-bar,prop,color,string | undefined,undefined,false,true
+ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
@@ -1310,7 +1310,7 @@ ion-tabs,event,ionTabsDidChange,{ tab: string; },false
 ion-tabs,event,ionTabsWillChange,{ tab: string; },false
 
 ion-text,shadow
-ion-text,prop,color,string | undefined,undefined,false,true
+ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 
 ion-textarea,scoped
@@ -1318,7 +1318,7 @@ ion-textarea,prop,autoGrow,boolean,false,false,false
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
-ion-textarea,prop,color,string | undefined,undefined,false,true
+ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-textarea,prop,cols,number | undefined,undefined,false,false
 ion-textarea,prop,debounce,number,0,false,false
 ion-textarea,prop,disabled,boolean,false,false,false
@@ -1358,14 +1358,14 @@ ion-thumbnail,css-prop,--border-radius
 ion-thumbnail,css-prop,--size
 
 ion-title,shadow
-ion-title,prop,color,string | undefined,undefined,false,true
+ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast,shadow
 ion-toast,prop,animated,boolean,true,false,false
 ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
-ion-toast,prop,color,string | undefined,undefined,false,true
+ion-toast,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-toast,prop,duration,number,0,false,false
 ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -1411,7 +1411,7 @@ ion-toast,part,message
 
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
-ion-toggle,prop,color,string | undefined,undefined,false,true
+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,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
@@ -1435,7 +1435,7 @@ ion-toggle,part,handle
 ion-toggle,part,track
 
 ion-toolbar,shadow
-ion-toolbar,prop,color,string | undefined,undefined,false,true
+ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
 ion-toolbar,css-prop,--background
 ion-toolbar,css-prop,--border-color

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.6",
+  "version": "6.1.11-nightly.20220616",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,8 +31,8 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^2.14.2",
-    "ionicons": "^6.0.0",
+    "@stencil/core": "^2.16.0",
+    "ionicons": "^6.0.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
@@ -46,7 +46,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/react-output-target": "^0.2.1",
-    "@stencil/sass": "1.3.2",
+    "@stencil/sass": "^1.5.2",
     "@stencil/vue-output-target": "^0.6.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
@@ -62,7 +62,6 @@
     "fs-extra": "^9.0.1",
     "jest": "^26.4.1",
     "jest-cli": "^26.4.1",
-    "np": "^6.4.0",
     "pixelmatch": "4.0.2",
     "prettier": "^2.6.1",
     "puppeteer": "^10.4.0",
@@ -117,6 +116,5 @@
   "homepage": "https://ionicframework.com/",
   "jest": {
     "preset": "@stencil/core/testing"
-  },
-  "prettier": "@ionic/prettier-config"
+  }
 }

core/src/components/accordion/accordion.tsx

@@ -211,7 +211,8 @@ export class Accordion implements ComponentInterface {
   };
 
   private expandAccordion = (initialUpdate = false) => {
-    if (initialUpdate) {
+    const { contentEl, contentElWrapper } = this;
+    if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
       this.state = AccordionState.Expanded;
       return;
     }
@@ -220,11 +221,6 @@ export class Accordion implements ComponentInterface {
       return;
     }
 
-    const { contentEl, contentElWrapper } = this;
-    if (contentEl === undefined || contentElWrapper === undefined) {
-      return;
-    }
-
     if (this.currentRaf !== undefined) {
       cancelAnimationFrame(this.currentRaf);
     }
@@ -250,7 +246,8 @@ export class Accordion implements ComponentInterface {
   };
 
   private collapseAccordion = (initialUpdate = false) => {
-    if (initialUpdate) {
+    const { contentEl } = this;
+    if (initialUpdate || contentEl === undefined) {
       this.state = AccordionState.Collapsed;
       return;
     }
@@ -259,11 +256,6 @@ export class Accordion implements ComponentInterface {
       return;
     }
 
-    const { contentEl } = this;
-    if (contentEl === undefined) {
-      return;
-    }
-
     if (this.currentRaf !== undefined) {
       cancelAnimationFrame(this.currentRaf);
     }

core/src/components/alert/alert.ios.vars.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "../../themes/ionic.globals.ios";
 @import "../item/item.ios.vars";
 
@@ -275,16 +276,16 @@ $alert-ios-checkbox-background-color-off:               $item-ios-background !de
 $alert-ios-checkbox-background-color-on:                ion-color(primary, base) !default;
 
 /// @prop - Top of the icon in the checkbox alert
-$alert-ios-checkbox-icon-top:                           $alert-ios-checkbox-size / 6 !default;
+$alert-ios-checkbox-icon-top:                           math.div($alert-ios-checkbox-size, 6) !default;
 
 /// @prop - Start of the icon in the checkbox alert
-$alert-ios-checkbox-icon-start:                         ($alert-ios-checkbox-size / 3) + 1px !default;
+$alert-ios-checkbox-icon-start:                         math.div($alert-ios-checkbox-size, 3) + 1px !default;
 
 /// @prop - Width of the icon in the checkbox alert
-$alert-ios-checkbox-icon-width:                         ($alert-ios-checkbox-size / 6) + 1px !default;
+$alert-ios-checkbox-icon-width:                         math.div($alert-ios-checkbox-size, 6) + 1px !default;
 
 /// @prop - Height of the icon in the checkbox alert
-$alert-ios-checkbox-icon-height:                        $alert-ios-checkbox-size / 2 !default;
+$alert-ios-checkbox-icon-height:                        $alert-ios-checkbox-size * 0.5 !default;
 
 /// @prop - Border width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-border-width:                  $alert-ios-checkbox-border-width !default;

core/src/components/alert/alert.md.vars.scss

@@ -203,13 +203,13 @@ $alert-md-radio-border-color-off:             $text-color-step-450 !default;
 $alert-md-radio-border-color-on:              $alert-md-button-text-color !default;
 
 /// @prop - Width of the icon in the alert radio
-$alert-md-radio-icon-width:                   $alert-md-radio-width / 2 !default;
+$alert-md-radio-icon-width:                   $alert-md-radio-width * 0.5 !default;
 
 /// @prop - Height of the icon in the alert radio
 $alert-md-radio-icon-height:                  $alert-md-radio-icon-width !default;
 
 /// @prop - Top of the icon in the alert radio
-$alert-md-radio-icon-top:                     ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) / 2 !default;
+$alert-md-radio-icon-top:                     ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default;
 
 /// @prop - Start of the icon in the radio alert
 $alert-md-radio-icon-start:                   $alert-md-radio-icon-top !default;

core/src/components/app/test/safe-area/app.e2e.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('app: safe-area', () => {
+  const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => {
+    const presentEvent = await page.spyOnEvent(event);
+
+    await page.click(trigger);
+    await presentEvent.next();
+
+    // Sometimes the inner content takes a frame or two to render
+    await page.waitForChanges();
+
+    expect(await page.screenshot()).toMatchSnapshot(`app-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`);
+  };
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(
+      testInfo.project.metadata.rtl === true,
+      'Safe area tests only check top and bottom edges. RTL checks are not required here.'
+    );
+
+    await page.goto(`/src/components/app/test/safe-area`);
+  });
+  test('should not have visual regressions with action sheet', async ({ page }) => {
+    await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+  });
+  test('should not have visual regressions with menu', async ({ page }) => {
+    await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
+  });
+  test('should not have visual regressions with picker', async ({ page }) => {
+    await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+  });
+  test('should not have visual regressions with toast', async ({ page }) => {
+    await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+  });
+});

core/src/components/app/test/safe-area/e2e.ts

@@ -1,37 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('app: safe-area', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/app/test/safe-area?ionic:_testing=true',
-  });
-
-  expect(await page.compareScreenshot()).toMatchScreenshot();
-
-  // Action Sheet
-  await page.click('#show-action-sheet');
-  await page.waitForChanges();
-  const actionSheet = await page.find('ion-action-sheet');
-  expect(await page.compareScreenshot('action-sheet')).toMatchScreenshot();
-  await actionSheet.callMethod('dismiss');
-
-  // Menu
-  await page.click('#show-menu');
-  await page.waitForChanges();
-  const menu = await page.find('ion-menu');
-  expect(await page.compareScreenshot('menu')).toMatchScreenshot();
-  await menu.callMethod('close');
-
-  // Picker
-  await page.click('#show-picker');
-  await page.waitForChanges();
-  const picker = await page.find('ion-picker');
-  expect(await page.compareScreenshot('picker')).toMatchScreenshot();
-  await picker.callMethod('dismiss');
-
-  // Toast
-  await page.click('#show-toast');
-  await page.waitForChanges();
-  const toast = await page.find('ion-toast');
-  expect(await page.compareScreenshot('toast')).toMatchScreenshot();
-  await toast.callMethod('dismiss');
-});

core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -38,13 +38,15 @@ export class Breadcrumbs implements ComponentInterface {
 
   /**
    * The number of breadcrumbs to show before the collapsed indicator.
-   * If this property exists `maxItems` will be ignored.
+   * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+   * the breadcrumbs will not be collapsed.
    */
   @Prop() itemsBeforeCollapse = 1;
 
   /**
    * The number of breadcrumbs to show after the collapsed indicator.
-   * If this property exists `maxItems` will be ignored.
+   * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+   * the breadcrumbs will not be collapsed.
    */
   @Prop() itemsAfterCollapse = 1;
 

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

@@ -10,3 +10,28 @@ test.describe('button: basic', () => {
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
 });
+
+test.describe('button: ripple effect', () => {
+  test('should not have visual regressions', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.mode !== 'md', 'Ripple effect is only available in MD mode.');
+
+    await page.goto(`/src/components/button/test/basic?ionic:_testing=false`);
+
+    const button = page.locator('#default');
+
+    await button.scrollIntoViewIfNeeded();
+
+    const boundingBox = await button.boundingBox();
+
+    if (boundingBox) {
+      await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+      await page.mouse.down();
+    }
+
+    await page.waitForSelector('#default.ion-activated');
+
+    expect(await button.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `button-ripple-effect-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

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

@@ -24,7 +24,7 @@
 
       <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
         <p>
-          <ion-button>Default</ion-button>
+          <ion-button id="default">Default</ion-button>
           <ion-button class="ion-focused">Default.focused</ion-button>
           <ion-button class="ion-activated">Default.activated</ion-button>
         </p>

core/src/components/checkbox/checkbox.ios.vars.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "../../themes/ionic.globals.ios";
 @import "../item/item.ios.vars";
 
@@ -41,16 +42,16 @@ $checkbox-ios-checkmark-border-style:     solid !default;
 $checkbox-ios-checkmark-border-color:     ion-color(primary, contrast) !default;
 
 /// @prop - Top of the checkmark in the checkbox
-$checkbox-ios-checkmark-top:              $checkbox-ios-icon-size / 6 !default;
+$checkbox-ios-checkmark-top:              math.div($checkbox-ios-icon-size, 6) !default;
 
 /// @prop - Start of the checkmark in the checkbox
-$checkbox-ios-checkmark-start:            ($checkbox-ios-icon-size / 3) + 1px !default;
+$checkbox-ios-checkmark-start:            math.div($checkbox-ios-icon-size, 3) + 1px !default;
 
 /// @prop - Width of the checkmark in the checkbox
-$checkbox-ios-checkmark-width:            ($checkbox-ios-icon-size / 6) + 1px !default;
+$checkbox-ios-checkmark-width:            math.div($checkbox-ios-icon-size, 6) + 1px !default;
 
 /// @prop - Height of the checkmark in the checkbox
-$checkbox-ios-checkmark-height:           $checkbox-ios-icon-size / 2 !default;
+$checkbox-ios-checkmark-height:           $checkbox-ios-icon-size * 0.5 !default;
 
 /// @prop - Opacity of the disabled checkbox
 $checkbox-ios-disabled-opacity:           .3 !default;

core/src/components/content/content.scss

@@ -79,7 +79,14 @@
 
   overflow: hidden;
 
-  touch-action: manipulation;
+  /**
+   * touch-action: manipulation is an alias
+   * for this, but WebKit has an issue
+   * where pointercancel events are not fired
+   * when scrolling: https://bugs.webkit.org/show_bug.cgi?id=240917
+   * Using the long form below avoids the issue.
+   */
+  touch-action: pan-x pan-y pinch-zoom;
 }
 
 .scroll-y,

core/src/components/content/content.tsx

@@ -92,18 +92,20 @@ export class Content implements ComponentInterface {
   @Prop() scrollEvents = false;
 
   /**
-   * Emitted when the scroll has started.
+   * Emitted when the scroll has started. This event is disabled by default.
+   * Set `scrollEvents` to `true` to enable.
    */
   @Event() ionScrollStart!: EventEmitter<ScrollBaseDetail>;
 
   /**
    * Emitted while scrolling. This event is disabled by default.
-   * Look at the property: `scrollEvents`
+   * Set `scrollEvents` to `true` to enable.
    */
   @Event() ionScroll!: EventEmitter<ScrollDetail>;
 
   /**
-   * Emitted when the scroll has ended.
+   * Emitted when the scroll has ended. This event is disabled by default.
+   * Set `scrollEvents` to `true` to enable.
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 

core/src/components/datetime/datetime.ios.scss

@@ -45,7 +45,7 @@
 }
 
 :host .calendar-action-buttons ion-buttons {
-  @include padding($datetime-ios-padding / 2, 0, 0, 0);
+  @include padding($datetime-ios-padding * 0.5, 0, 0, 0);
 }
 
 :host .calendar-action-buttons ion-buttons ion-button {
@@ -55,7 +55,7 @@
 // Calendar / Header / Days of Week
 // -----------------------------------
 :host .calendar-days-of-week {
-  @include padding(0, $datetime-ios-padding / 2, 0, $datetime-ios-padding / 2);
+  @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5);
 
   color: $text-color-step-700;
 
@@ -79,7 +79,7 @@
    * this padding a snapping point if applied
    * on .calendar-month
    */
-  @include padding($datetime-ios-padding / 2, $datetime-ios-padding / 2, $datetime-ios-padding / 2, $datetime-ios-padding / 2);
+  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
 
   height: calc(100% - #{$datetime-ios-padding});
 }
@@ -136,7 +136,7 @@
 // Time / Header
 // -----------------------------------
 :host .datetime-time {
-  @include padding($datetime-ios-padding / 2, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
+  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
   font-size: 16px;
 }
@@ -148,7 +148,7 @@
 // Footer
 // -----------------------------------
 :host .datetime-buttons {
-  @include padding($datetime-ios-padding / 2, $datetime-ios-padding / 2, $datetime-ios-padding / 2, $datetime-ios-padding / 2);
+  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
 
   border-top: $datetime-ios-border-color;
 }

core/src/components/datetime/datetime.md.scss

@@ -115,7 +115,7 @@
 // Time / Header
 // -----------------------------------
 :host .datetime-time {
-  @include padding($datetime-md-padding / 2, $datetime-md-padding, $datetime-md-padding / 2, $datetime-md-padding);
+  @include padding($datetime-md-padding * 0.5, $datetime-md-padding, $datetime-md-padding * 0.5, $datetime-md-padding);
 }
 
 :host .time-header {

core/src/components/datetime/datetime.tsx

@@ -37,7 +37,7 @@ import {
   getPreviousYear,
   getStartOfWeek,
 } from './utils/manipulation';
-import { convertToArrayOfNumbers, getPartsFromCalendarDay, parseDate } from './utils/parse';
+import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseDate } from './utils/parse';
 import {
   getCalendarDayState,
   isDayDisabled,
@@ -442,18 +442,27 @@ export class Datetime implements ComponentInterface {
   @Method()
   async confirm(closeOverlay = false) {
     /**
-     * Prevent convertDataToISO from doing any
-     * kind of transformation based on timezone
-     * This cancels out any change it attempts to make
+     * We only update the value if the presentation is not a calendar picker,
+     * or if `highlightActiveParts` is true; indicating that the user
+     * has selected a date from the calendar picker.
      *
-     * Important: Take the timezone offset based on
-     * the date that is currently selected, otherwise
-     * there can be 1 hr difference when dealing w/ DST
+     * Otherwise "today" would accidentally be set as the value.
      */
-    const date = new Date(convertDataToISO(this.activeParts));
-    this.activeParts.tzOffset = date.getTimezoneOffset() * -1;
+    if (this.highlightActiveParts || !this.isCalendarPicker) {
+      /**
+       * Prevent convertDataToISO from doing any
+       * kind of transformation based on timezone
+       * This cancels out any change it attempts to make
+       *
+       * Important: Take the timezone offset based on
+       * the date that is currently selected, otherwise
+       * there can be 1 hr difference when dealing w/ DST
+       */
+      const date = new Date(convertDataToISO(this.activeParts));
+      this.activeParts.tzOffset = date.getTimezoneOffset() * -1;
 
-    this.value = convertDataToISO(this.activeParts);
+      this.value = convertDataToISO(this.activeParts);
+    }
 
     if (closeOverlay) {
       this.closeParentOverlay();
@@ -463,7 +472,7 @@ export class Datetime implements ComponentInterface {
   /**
    * Resets the internal state of the datetime but does not update the value.
    * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
-   * If no value is provided, the internal state will be reset to today.
+   * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
    */
   @Method()
   async reset(startDate?: string) {
@@ -514,6 +523,11 @@ export class Datetime implements ComponentInterface {
     this.confirm();
   };
 
+  private get isCalendarPicker() {
+    const { presentation } = this;
+    return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+  }
+
   /**
    * Stencil sometimes sets calendarBodyRef to null on rerender, even though
    * the element is present. Query for it manually as a fallback.
@@ -1069,8 +1083,8 @@ export class Datetime implements ComponentInterface {
 
   private processValue = (value?: string | null) => {
     this.highlightActiveParts = !!value;
-    const valueToProcess = value || getToday();
-    const { month, day, year, hour, minute, tzOffset } = parseDate(valueToProcess);
+    const valueToProcess = parseDate(value || getToday());
+    const { month, day, year, hour, minute, tzOffset } = clampDate(valueToProcess, this.minParts, this.maxParts);
 
     this.setWorkingParts({
       month,
@@ -1079,7 +1093,7 @@ export class Datetime implements ComponentInterface {
       hour,
       minute,
       tzOffset,
-      ampm: hour >= 12 ? 'pm' : 'am',
+      ampm: hour! >= 12 ? 'pm' : 'am',
     });
 
     this.activeParts = {
@@ -1089,7 +1103,7 @@ export class Datetime implements ComponentInterface {
       hour,
       minute,
       tzOffset,
-      ampm: hour >= 12 ? 'pm' : 'am',
+      ampm: hour! >= 12 ? 'pm' : 'am',
     };
   };
 
@@ -1662,8 +1676,8 @@ export class Datetime implements ComponentInterface {
     const { hours, minutes, am, pm } = generateTime(
       workingParts,
       use24Hour ? 'h23' : 'h12',
-      this.minParts,
-      this.maxParts,
+      this.value ? this.minParts : undefined,
+      this.value ? this.maxParts : undefined,
       this.parsedHourValues,
       this.parsedMinuteValues
     );

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

@@ -28,4 +28,129 @@ test.describe('datetime: selecting a day', () => {
   test('should not highlight a day until one is selected, with default-buttons', async ({ page }) => {
     await testHighlight(page, 'custom-datetime');
   });
+  test('should update the active day', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime show-default-buttons="true" value="2021-12-25T12:40:00.000Z"></ion-datetime>
+    `);
+
+    const activeDay = page.locator('ion-datetime .calendar-day-active');
+
+    expect(activeDay).toHaveText('25');
+
+    const dayBtn = page.locator('ion-datetime .calendar-day[data-day="13"][data-month="12"]');
+    await dayBtn.click();
+    await page.waitForChanges();
+
+    expect(activeDay).toHaveText('13');
+  });
+});
+
+test.describe('datetime: confirm date', () => {
+  test('should not update value if Done was clicked without selecting a day first', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/basic');
+
+    const datetime = page.locator('#custom-datetime');
+
+    const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+    expect(value).toBeUndefined();
+
+    await datetime.evaluate(async (el: HTMLIonDatetimeElement) => {
+      await el.confirm();
+    });
+    const valueAgain = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+    expect(valueAgain).toBeUndefined();
+  });
+  test('should set the date value based on the selected date', async ({ page }) => {
+    await page.setContent(`
+      <button id="bind">Bind datetimeMonthDidChange event</button>
+      <ion-datetime value="2021-12-25T12:40:00.000Z"></ion-datetime>
+      <script type="module">
+        import { InitMonthDidChangeEvent } from '/src/components/datetime/test/utils/month-did-change-event.js';
+        document.querySelector('button').addEventListener('click', function() {
+          InitMonthDidChangeEvent();
+        });
+      </script>
+    `);
+
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+    const eventButton = page.locator('button#bind');
+    await eventButton.click();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+    await buttons.nth(1).click();
+
+    await datetimeMonthDidChange.next();
+
+    const datetime = page.locator('ion-datetime');
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm());
+
+    // Value may include timezone information so we need to check
+    // that the value at least includes the correct date/time info.
+    const value = (await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value))!;
+    expect(value.includes('2021-12-25T12:40:00')).toBe(true);
+  });
+});
+
+test.describe('datetime: footer', () => {
+  test('should render default buttons', async ({ page }) => {
+    await page.setContent('<ion-datetime value="2022-05-03" show-default-buttons="true"></ion-datetime>');
+
+    const cancelButton = page.locator('ion-datetime #cancel-button');
+    expect(cancelButton).toHaveText('Cancel');
+
+    const confirmButton = page.locator('ion-datetime #confirm-button');
+    expect(confirmButton).toHaveText('Done');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-default-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render clear button', async ({ page }) => {
+    await page.setContent('<ion-datetime value="2022-05-03" show-clear-button="true"></ion-datetime>');
+
+    const clearButton = page.locator('ion-datetime #clear-button');
+    expect(clearButton).toHaveText('Clear');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-clear-button-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render default and clear buttons', async ({ page }) => {
+    await page.setContent(
+      '<ion-datetime value="2022-05-03" show-default-buttons="true" show-clear-button="true"></ion-datetime>'
+    );
+
+    const cancelButton = page.locator('ion-datetime #cancel-button');
+    expect(cancelButton).toHaveText('Cancel');
+
+    const confirmButton = page.locator('ion-datetime #confirm-button');
+    expect(confirmButton).toHaveText('Done');
+
+    const clearButton = page.locator('ion-datetime #clear-button');
+    expect(clearButton).toHaveText('Clear');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-default-clear-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render custom buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime value="2022-05-03">
+        <ion-buttons slot="buttons">
+          <ion-button id="custom-button" color="primary">Hello!</ion-button>
+        </ion-buttons>
+      </ion-datetime>
+    `);
+
+    const customButton = page.locator('ion-datetime #custom-button');
+    expect(customButton).toBeVisible();
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-custom-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
 });