merge release-6.6.2

Release 6.6.2

.github/COMPONENT-GUIDE.md

@@ -141,7 +141,7 @@ Style the `ion-activated` class based on the spec for that element:
 }
 ```
 
-> Order is important! Activated should be before the focused & hover states.
+> Order is important! Activated should be after the focused & hover states.
 
 
 #### User Customization
@@ -307,7 +307,7 @@ Style the `:hover` based on the spec for that element:
 }
 ```
 
-> Order is important! Hover should be after the activated and focused states.
+> Order is important! Hover should be before the activated state.
 
 
 #### User Customization

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/dependabot.yml

@@ -6,4 +6,5 @@ updates:
       interval: "daily"
     allow:
       - dependency-name: "@playwright/test"
-        dependency-name: "@axe-core/playwright"
+      - dependency-name: "@axe-core/playwright"
+      - dependency-name: "@stencil/core"

CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.6.2](https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2) (2023-03-15)
+
+
+### Bug Fixes
+
+* **accordion:** include margins during expand animation ([#26390](https://github.com/ionic-team/ionic-framework/issues/26390)) ([f809918](https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic-framework/issues/26381)
+* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic-framework/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500))
+* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic-framework/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee))
+* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic-framework/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic-framework/issues/26207)
+* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic-framework/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic-framework/issues/26944)
+
+
+
+
+
+## [6.6.1](https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic-framework/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic-framework/issues/26916)
+* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic-framework/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic-framework/issues/22468)
+* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic-framework/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic-framework/issues/26851)
+* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic-framework/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic-framework/issues/26908)
+* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic-framework/issues/26854)) ([451d220](https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic-framework/issues/24714)
+* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic-framework/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd))
+* **react:** inline overlays dismiss when parent component unmounts ([#26245](https://github.com/ionic-team/ionic-framework/issues/26245)) ([c0e1bf9](https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8)), closes [#25775](https://github.com/ionic-team/ionic-framework/issues/25775) [#26185](https://github.com/ionic-team/ionic-framework/issues/26185)
+
+
+
+
+
 # [6.6.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.7...v6.6.0) (2023-03-01)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic/issues/26916)
+
+
+
+
+
 # [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.6.0",
+      "version": "6.6.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.6.0",
+        "@ionic/core": "^6.6.2",
         "ionicons": "^6.1.3",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
@@ -1006,9 +1006,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.6.0.tgz",
-      "integrity": "sha512-1X0b2/ziKhCwSO665tSpG32FOuMyjhyGDLFTJUKoDfQB0j/gIBv1d2okUzAk6GKHdnAPUZQHZFhUHcSIclW9cg==",
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.6.2.tgz",
+      "integrity": "sha512-C3XblxE4OcGs+QWy2meWqNGB8sDZV8w0nUVwLy3AmWovi0CA0xPs2UthUSicUxpCism33pzQp6DiDVsq+G5VTQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.3",
@@ -7335,9 +7335,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.6.0.tgz",
-      "integrity": "sha512-1X0b2/ziKhCwSO665tSpG32FOuMyjhyGDLFTJUKoDfQB0j/gIBv1d2okUzAk6GKHdnAPUZQHZFhUHcSIclW9cg==",
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.6.2.tgz",
+      "integrity": "sha512-C3XblxE4OcGs+QWy2meWqNGB8sDZV8w0nUVwLy3AmWovi0CA0xPs2UthUSicUxpCism33pzQp6DiDVsq+G5VTQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.3",

angular/package.json

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

angular/src/directives/overlays/modal.ts

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

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

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

core/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.6.2](https://github.com/ionic-team/ionic/compare/v6.6.1...v6.6.2) (2023-03-15)
+
+
+### Bug Fixes
+
+* **accordion:** include margins during expand animation ([#26390](https://github.com/ionic-team/ionic/issues/26390)) ([f809918](https://github.com/ionic-team/ionic/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic/issues/26381)
+* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic/commit/b8f893731471052df198824b7ece47606ffcc500))
+* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic/commit/27a5356fa2b72073d565e9d6f527107869faa3ee))
+* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic/issues/26207)
+* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic/issues/26944)
+
+
+
+
+
+## [6.6.1](https://github.com/ionic-team/ionic/compare/v6.6.0...v6.6.1) (2023-03-08)
+
+
+### Bug Fixes
+
+* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic/issues/22468)
+* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic/issues/26851)
+* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic/issues/26908)
+* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic/issues/26854)) ([451d220](https://github.com/ionic-team/ionic/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic/issues/24714)
+* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd))
+
+
+
+
+
 # [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.6.0",
+      "version": "6.6.2",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",
@@ -18,7 +18,7 @@
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.29.0",
+        "@playwright/test": "^1.31.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.4.0",
@@ -50,6 +50,7 @@
       }
     },
     "custom-rules": {
+      "name": "eslint-plugin-custom-rules",
       "version": "1.0.0",
       "dev": true
     },
@@ -963,15 +964,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -1511,19 +1503,22 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.29.2.tgz",
-      "integrity": "sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==",
+      "version": "1.31.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.2.tgz",
+      "integrity": "sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.31.2"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
         "node": ">=14"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -2583,36 +2578,6 @@
         "url": "https://tidelift.com/funding/github/npm/autoprefixer"
       }
     },
-    "node_modules/autoprefixer/node_modules/postcss": {
-      "version": "7.0.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/postcss"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/axe-core": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz",
@@ -3665,15 +3630,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dir-glob/node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -8199,14 +8155,14 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.29.2.tgz",
-      "integrity": "sha512-hKBYJUtdmYzcjdhYDkP9WGtORwwZBBKAW8+Lz7sr0ZMxtJr04ASXVzH5eBWtDkdb0c3LLFsehfPBTRfvlfKJOA==",
+      "version": "1.31.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.31.2.tgz",
+      "integrity": "sha512-jpC47n2PKQNtzB7clmBuWh6ftBRS/Bt5EGLigJ9k2QAKcNeYXZkEaDH5gmvb6+AbcE0DO6GnXdbl9ogG6Eh+og==",
       "dev": true,
       "hasInstallScript": true,
       "peer": true,
       "dependencies": {
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.31.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8216,9 +8172,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.29.2.tgz",
-      "integrity": "sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==",
+      "version": "1.31.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.2.tgz",
+      "integrity": "sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ==",
       "dev": true,
       "bin": {
         "playwright": "cli.js"
@@ -8357,77 +8313,6 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
-    "node_modules/postcss/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/postcss/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
-    },
-    "node_modules/postcss/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/postcss/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss/node_modules/supports-color": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -11127,14 +11012,6 @@
         "get-package-type": "^0.1.0",
         "js-yaml": "^3.13.1",
         "resolve-from": "^5.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-          "dev": true
-        }
       }
     },
     "@istanbuljs/schema": {
@@ -11550,13 +11427,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.29.2.tgz",
-      "integrity": "sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==",
+      "version": "1.31.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.2.tgz",
+      "integrity": "sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==",
       "dev": true,
       "requires": {
         "@types/node": "*",
-        "playwright-core": "1.29.2"
+        "fsevents": "2.3.2",
+        "playwright-core": "1.31.2"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -12298,28 +12176,6 @@
         "num2fraction": "^1.2.2",
         "postcss": "^7.0.32",
         "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "axe-core": {
@@ -13088,14 +12944,6 @@
       "dev": true,
       "requires": {
         "path-type": "^4.0.0"
-      },
-      "dependencies": {
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-          "dev": true
-        }
       }
     },
     "dom-serializer": {
@@ -16464,19 +16312,19 @@
       }
     },
     "playwright": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.29.2.tgz",
-      "integrity": "sha512-hKBYJUtdmYzcjdhYDkP9WGtORwwZBBKAW8+Lz7sr0ZMxtJr04ASXVzH5eBWtDkdb0c3LLFsehfPBTRfvlfKJOA==",
+      "version": "1.31.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.31.2.tgz",
+      "integrity": "sha512-jpC47n2PKQNtzB7clmBuWh6ftBRS/Bt5EGLigJ9k2QAKcNeYXZkEaDH5gmvb6+AbcE0DO6GnXdbl9ogG6Eh+og==",
       "dev": true,
       "peer": true,
       "requires": {
-        "playwright-core": "1.29.2"
+        "playwright-core": "1.31.2"
       }
     },
     "playwright-core": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.29.2.tgz",
-      "integrity": "sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==",
+      "version": "1.31.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.2.tgz",
+      "integrity": "sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ==",
       "dev": true
     },
     "postcss": {
@@ -16490,64 +16338,6 @@
         "supports-color": "^6.1.0"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.29.0",
+    "@playwright/test": "^1.31.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.4.0",

core/src/components.d.ts

@@ -5623,7 +5623,7 @@ declare namespace LocalJSX {
          */
         "onDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
         /**
-          * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
+          * Emitted after the modal has presented. Shorthand for ionModalDidPresent.
          */
         "onDidPresent"?: (event: IonModalCustomEvent<void>) => void;
         /**

core/src/components/accordion/accordion.scss

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

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

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

core/src/components/alert/alert-interface.ts

@@ -31,6 +31,9 @@ export interface AlertInput {
   name?: string;
   placeholder?: string;
   value?: any; // TODO(FW-2832): type
+  /**
+   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+   */
   label?: string;
   checked?: boolean;
   disabled?: boolean;

core/src/components/button/button.ios.scss

@@ -72,6 +72,7 @@
 
 :host(.button-clear) {
   --background-activated: transparent;
+  --background-activated-opacity: 0;
   --background-focused: #{ion-color(primary, base)};
   --background-hover: transparent;
   --background-focused-opacity: .1;
@@ -131,25 +132,6 @@
 }
 
 
-// iOS Button Activated
-// --------------------------------------------------
-
-:host(.button-clear.ion-activated) {
-  opacity: #{$button-ios-clear-opacity-activated};
-}
-
-:host(.button-outline.ion-activated.ion-color) .button-native {
-  color: current-color(contrast);
-
-  &::after {
-    background: current-color(base);
-  }
-}
-
-:host(.button-solid.ion-color.ion-activated) .button-native::after {
-  background: #{current-color(shade)};
-}
-
 // iOS Button Focused
 // --------------------------------------------------
 
@@ -166,14 +148,16 @@
   background: #{current-color(shade)};
 }
 
+
 // iOS Button Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
   // Clear and outline buttons use opacity so set
-  // background to transparent
-  :host(.button-clear:hover),
-  :host(.button-outline:hover) {
+  // background to transparent, but this shouldn't
+  // apply on top of activated
+  :host(.button-clear:not(.ion-activated):hover),
+  :host(.button-outline:not(.ion-activated):hover) {
     opacity: #{$button-ios-clear-opacity-hover};
   }
 
@@ -192,10 +176,31 @@
   }
 
   // Solid buttons inside of a toolbar should use a tint of the current
-  // background so use white to tint it
-  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
+  // background so use white to tint it, but this should not apply
+  // when activated
+  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after {
     background: #fff;
 
     opacity: 0.10;
   }
 }
+
+
+// iOS Button Activated
+// --------------------------------------------------
+
+:host(.button-clear.ion-activated) {
+  opacity: #{$button-ios-clear-opacity-activated};
+}
+
+:host(.button-outline.ion-activated.ion-color) .button-native {
+  color: current-color(contrast);
+
+  &::after {
+    background: current-color(base);
+  }
+}
+
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}

core/src/components/button/button.scss

@@ -246,17 +246,6 @@ ion-ripple-effect {
   @include button-state();
 }
 
-// Button Activated
-:host(.ion-activated) {
-  color: var(--color-activated);
-}
-
-:host(.ion-activated) .button-native::after {
-  background: var(--background-activated);
-
-  opacity: var(--background-activated-opacity);
-}
-
 // Button Focused
 :host(.ion-focused) {
   color: var(--color-focused);
@@ -281,6 +270,17 @@ ion-ripple-effect {
   }
 }
 
+// Button Activated
+:host(.ion-activated) {
+  color: var(--color-activated);
+}
+
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+
+  opacity: var(--background-activated-opacity);
+}
+
 
 // Button Colors
 // --------------------------------------------------
@@ -305,6 +305,7 @@ ion-ripple-effect {
   color: current-color(base);
 }
 
+
 // Button in Toolbar
 // --------------------------------------------------
 
@@ -320,3 +321,11 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}

core/src/components/buttons/buttons.ios.scss

@@ -48,6 +48,7 @@
 :host-context(.ion-color)::slotted(*) .button-outline {
   --color-activated: #{current-color(base)};
   --color-focused: #{current-color(contrast)};
+  --background-activated: #{current-color(contrast)};
 }