add poc

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Team members are running into unexpected errors running spec tests:

```
TypeError: Cannot read properties of undefined (reading '$instanceValues$')
```

This line is the culprit:
f885a5526a/core/src/components/toast/test/toast.spec.tsx (L108)
We set the Ionic config for toastDuration to 5000. This means that on
present a setTimeout callback will fire after 5000ms and dismiss the
toast. For this test, this is fine because we never present the toast
therefore the setTimeout is never created.

The problem is that this config is not automatically reset between
tests. As a result, when we have tests that only present the toast (and
never dismiss it) the duration is also 5000 there:
f885a5526a/core/src/components/toast/test/toast.spec.tsx (L179-L184)

This results in a bunch of setTimeouts being created. The timeout
callback runs dismiss, and the body of that function tries to access
data on the host toast. Since the toast instance has already been torn
down (since the tests are done), the undefined error occurs.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reset the Ionic config after the test that sets `toastDuration` to
`5000`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

.github/workflows/stencil-nightly.yml

@@ -150,7 +150,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng12, ng13, ng14, ng15]
+        apps: [ng16, ng17]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
+* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
+* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
+* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
+
+
+
+
+
+# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
+
+
+### Features
+
+* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
+
+
+
+
+
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
 
 

core/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
+* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
+* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
+
+
+
+
+
+# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
+
+
+### Features
+
+* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
+
+
+
+
+
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
 
 

core/package-lock.json

@@ -1,32 +1,32 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.7.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.6.6",
+      "version": "7.7.1",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.10.0",
+        "@stencil/core": "^4.12.1",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.8.4",
         "@capacitor/core": "^5.6.0",
-        "@capacitor/haptics": "^5.0.6",
-        "@capacitor/keyboard": "^5.0.7",
-        "@capacitor/status-bar": "^5.0.6",
+        "@capacitor/haptics": "^5.0.7",
+        "@capacitor/keyboard": "^5.0.8",
+        "@capacitor/status-bar": "^5.0.7",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@playwright/test": "^1.39.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.8.3",
+        "@stencil/angular-output-target": "^0.8.4",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.8",
+        "@stencil/sass": "^3.0.9",
         "@stencil/vue-output-target": "^0.8.7",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
@@ -643,27 +643,27 @@
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
-      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
+      "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
+      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
-      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
+      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
@@ -1816,18 +1816,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
-      "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
+      "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
-      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz",
+      "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
+      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -11333,23 +11333,23 @@
       }
     },
     "@capacitor/haptics": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
-      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
+      "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
+      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
-      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
+      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
       "dev": true,
       "requires": {}
     },
@@ -12177,16 +12177,16 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
-      "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
+      "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
-      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz",
+      "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -12196,9 +12196,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
+      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
       "dev": true,
       "requires": {}
     },

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.7.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,24 +31,24 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.10.0",
+    "@stencil/core": "^4.12.1",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.8.4",
     "@capacitor/core": "^5.6.0",
-    "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.7",
-    "@capacitor/status-bar": "^5.0.6",
+    "@capacitor/haptics": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.8",
+    "@capacitor/status-bar": "^5.0.7",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.3",
+    "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.8",
+    "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",

core/src/components.d.ts

@@ -160,7 +160,7 @@ export namespace Components {
         /**
           * Dismiss the action sheet overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -239,7 +239,7 @@ export namespace Components {
         /**
           * Dismiss the alert overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1527,7 +1527,7 @@ export namespace Components {
         /**
           * Dismiss the loading overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1720,7 +1720,7 @@ export namespace Components {
         /**
           * Dismiss the modal overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
+          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1948,6 +1948,9 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
     }
+    interface IonPasswordStrength {
+        "strength"?: 'weak' | 'medium' | 'strong';
+    }
     interface IonPicker {
         /**
           * If `true`, the picker will animate.
@@ -1973,7 +1976,7 @@ export namespace Components {
         /**
           * Dismiss the picker overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -2110,7 +2113,7 @@ export namespace Components {
           * Dismiss the popover overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
-          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
         /**
@@ -3111,7 +3114,7 @@ export namespace Components {
         /**
           * Dismiss the toast overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -4035,6 +4038,12 @@ declare global {
         prototype: HTMLIonNoteElement;
         new (): HTMLIonNoteElement;
     };
+    interface HTMLIonPasswordStrengthElement extends Components.IonPasswordStrength, HTMLStencilElement {
+    }
+    var HTMLIonPasswordStrengthElement: {
+        prototype: HTMLIonPasswordStrengthElement;
+        new (): HTMLIonPasswordStrengthElement;
+    };
     interface HTMLIonPickerElementEventMap {
         "ionPickerDidPresent": void;
         "ionPickerWillPresent": void;
@@ -4672,6 +4681,7 @@ declare global {
         "ion-nav": HTMLIonNavElement;
         "ion-nav-link": HTMLIonNavLinkElement;
         "ion-note": HTMLIonNoteElement;
+        "ion-password-strength": HTMLIonPasswordStrengthElement;
         "ion-picker": HTMLIonPickerElement;
         "ion-picker-column": HTMLIonPickerColumnElement;
         "ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
@@ -6606,6 +6616,9 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
     }
+    interface IonPasswordStrength {
+        "strength"?: 'weak' | 'medium' | 'strong';
+    }
     interface IonPicker {
         /**
           * If `true`, the picker will animate.
@@ -8127,6 +8140,7 @@ declare namespace LocalJSX {
         "ion-nav": IonNav;
         "ion-nav-link": IonNavLink;
         "ion-note": IonNote;
+        "ion-password-strength": IonPasswordStrength;
         "ion-picker": IonPicker;
         "ion-picker-column": IonPickerColumn;
         "ion-picker-column-internal": IonPickerColumnInternal;
@@ -8224,6 +8238,7 @@ declare module "@stencil/core" {
             "ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
             "ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
             "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
+            "ion-password-strength": LocalJSX.IonPasswordStrength & JSXBase.HTMLAttributes<HTMLIonPasswordStrengthElement>;
             "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
             "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
             "ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;

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

@@ -23,28 +23,22 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Name</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Name" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Email</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Email" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Phone</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="Phone" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Extension</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Extension" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Country</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Country" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City/Province</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="City/Province" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -56,24 +50,19 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Address 1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -85,24 +74,19 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input id="address1" type="text"></ion-input>
+                <ion-input label="Address 1" id="address1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input lable="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>

core/src/components/action-sheet/action-sheet-interface.ts

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
   header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
   id?: string;

core/src/components/action-sheet/action-sheet.ios.scss

@@ -26,7 +26,24 @@
 // ---------------------------------------------------
 
 .action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
+  @include margin(var(--ion-safe-area-top, 0), auto, null, auto);
+  /**
+   * Bottom safe area is applied as padding so that it impacts the bounding box.
+   * When the action sheet is shown/hidden, this element is transformed by translating
+   * 100% of its height. This translation needs to include the bottom safe area
+   * otherwise part of the action sheet will still be visible at the end of
+   * the show transition.
+   *
+   * If this code is changed, reviewers should verify that the action
+   * sheet still translates out of the viewport completely when the bottom
+   * safe area is a positive value.
+   */
+  @include padding(null, null, var(--ion-safe-area-bottom, 0), null);
+
+  // Using content-box to increase the height of the action sheet
+  // wrapper by the bottom padding (safe area) to animate the
+  // action sheet completely off the screen when safe area is set.
+  box-sizing: content-box;
 }
 
 // iOS Action Sheet Container

core/src/components/action-sheet/action-sheet.tsx

@@ -216,6 +216,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the action sheet.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

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

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
 
 export interface AlertButton {
   text: string;
-  role?: 'cancel' | 'destructive' | string;
+  role?: LiteralUnion<'cancel' | 'destructive', string>;
   cssClass?: string | string[];
   id?: string;
   htmlAttributes?: { [key: string]: any };

core/src/components/alert/alert.tsx

@@ -411,6 +411,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the alert.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/app/app.tsx

@@ -1,6 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
 import type { FocusVisibleUtility } from '@utils/focus-visible';
+import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
+import { printIonWarning } from '@utils/logging';
 import { isPlatform } from '@utils/platform';
 
 import { config } from '../../global/config';
@@ -34,9 +36,20 @@ export class App implements ComponentInterface {
           import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
         }
         const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-        if (config.getBoolean('hardwareBackButton', isHybrid)) {
+        const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+        if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
           hardwareBackButtonModule.startHardwareBackButton();
         } else {
+          /**
+           * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+           * then the close watcher will not be used.
+           */
+          if (shoudUseCloseWatcher()) {
+            printIonWarning(
+              'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
+            );
+          }
+
           hardwareBackButtonModule.blockHardwareBackButton();
         }
         if (typeof (window as any) !== 'undefined') {

core/src/components/datetime-button/test/buttons/index.html

@@ -18,7 +18,7 @@
       </ion-header>
       <ion-content>
         <ion-item>
-          <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
           <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
             <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
             <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>

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

@@ -214,8 +214,7 @@
           <ion-popover class="options-popover" trigger="popover-trigger">
             <ion-list lines="none">
               <ion-item>
-                <ion-label>Dark Mode</ion-label>
-                <ion-checkbox slot="end"></ion-checkbox>
+                <ion-checkbox>Dark Mode</ion-checkbox>
               </ion-item>
               <ion-item detail="true" href="?ionic:mode=ios">
                 <ion-label>iOS Mode</ion-label>
@@ -225,23 +224,19 @@
               </ion-item>
 
               <ion-item>
-                <ion-label>Show Default Title</ion-label>
-                <ion-toggle id="titleToggle"></ion-toggle>
+                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-label>Show Default Buttons</ion-label>
-                <ion-toggle id="buttonsToggle"></ion-toggle>
+                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-label>Locale</ion-label>
-                <ion-input placeholder="default" id="locale"></ion-input>
+                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
               </ion-item>
 
               <ion-item>
-                <ion-label>Color</ion-label>
-                <ion-select id="color" value="primary">
+                <ion-select label="Color" id="color" value="primary">
                   <ion-select-option value="primary">Primary</ion-select-option>
                   <ion-select-option value="secondary">Secondary</ion-select-option>
                   <ion-select-option value="tertiary">Tertiary</ion-select-option>

core/src/components/item/test/a11y/index.html

@@ -16,23 +16,19 @@
       <h1>Item</h1>
 
       <ion-item>
-        <ion-label>Item with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Input disabled</ion-label>
-        <ion-input placeholder="Placeholder" disabled></ion-input>
+        <ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label position="floating">Item with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item with Select" label-placement="floating">
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -44,8 +40,7 @@
       </ion-item>
 
       <ion-item disabled>
-        <ion-label position="floating">Item disabled with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item disabled with Select" label-placement="floating">
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -57,8 +52,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-label position="floating">Item with Select disabled</ion-label>
-        <ion-select disabled>
+        <ion-select label="Item with Select disabled" label-placement="floating" disabled>
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -70,33 +64,27 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item with Toggle</ion-toggle>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item disabled with Toggle</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Toggle disabled</ion-label>
-        <ion-toggle slot="end" disabled></ion-toggle>
+        <ion-toggle disabled>Item with Toggle disabled</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item with Radio</ion-radio>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item disabled with Radio</ion-radio>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Radio disabled</ion-label>
-        <ion-radio slot="start" value="biff" disabled></ion-radio>
+        <ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
       </ion-item>
     </main>
   </body>

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

@@ -98,8 +98,9 @@
         </ion-item>
 
         <ion-item class="overflow-visible">
-          <ion-label position="fixed">PIN:</ion-label>
           <ion-input
+            label="PIN:"
+            label-placement="fixed"
             type="number"
             pattern="[0-9]*"
             inputmode="numeric"

core/src/components/item/test/bottom/index.html

@@ -31,32 +31,27 @@
       <ion-content class="ion-padding-vertical">
         <ion-list class="basic">
           <ion-item>
-            <ion-label>No Helper/Error</ion-label>
-            <ion-input name="input" id="text"></ion-input>
+            <ion-input label="No Helper/Error" name="input" id="text"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-label>Helper and Error</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Helper and Error"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Helper Only</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Helper Only"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Error Only</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Error Only"></ion-input>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item class="custom">
-            <ion-label>Both w/ Custom CSS</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Both w/ Custom CSS"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
@@ -66,16 +61,14 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid">
-                <ion-label>Helper and Error (Fill Solid)</ion-label>
-                <ion-input></ion-input>
+                <ion-input label="Helper and Error (Fill Solid)"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline">
-                <ion-label>Helper and Error (Fill Outline)</ion-label>
-                <ion-input></ion-input>
+                <ion-input label="Helper and Error (Fill Outline)"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -84,8 +77,7 @@
           <ion-row>
             <ion-col>
               <ion-item>
-                <ion-label>Toggle Error</ion-label>
-                <ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
+                <ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
               </ion-item>
             </ion-col>
           </ion-row>

core/src/components/item/test/inputs/index.html

@@ -39,18 +39,6 @@
               <ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
                 <ion-label>Set "undefined" values</ion-label>
               </ion-item>
-              <ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
-                <ion-label>Labels: Default</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
-                <ion-label>Labels: Floating</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
-                <ion-label>Labels: Stacked</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
-                <ion-label>Labels: Fixed</ion-label>
-              </ion-item>
             </ion-list>
           </ion-popover>
         </ion-toolbar>
@@ -60,28 +48,23 @@
         <form onsubmit="return onSubmit(event)">
           <ion-list>
             <ion-item>
-              <ion-label>Input</ion-label>
-              <ion-input name="input" id="input" placeholder="Input"></ion-input>
+              <ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
             </ion-item>
 
             <ion-item>
-              <ion-label>Textarea</ion-label>
-              <ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
+              <ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
             </ion-item>
 
             <ion-item>
-              <ion-label>Toggle</ion-label>
-              <ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
+              <ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
             </ion-item>
 
             <ion-item>
-              <ion-label>Checkbox</ion-label>
-              <ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
+              <ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
             </ion-item>
 
             <ion-item>
-              <ion-label>Select</ion-label>
-              <ion-select name="select" id="select" placeholder="Select">
+              <ion-select label="Select" name="select" id="select" placeholder="Select">
                 <ion-select-option value="1">1</ion-select-option>
                 <ion-select-option value="2">2</ion-select-option>
                 <ion-select-option value="3">3</ion-select-option>
@@ -93,8 +76,7 @@
             </ion-item>
 
             <ion-item>
-              <ion-label>Range</ion-label>
-              <ion-range name="range" id="range" value="10"></ion-range>
+              <ion-range label="Range" name="range" id="range" value="10"></ion-range>
             </ion-item>
           </ion-list>
 
@@ -147,28 +129,6 @@
         toggle.checked = checkbox.checked = false;
       }
 
-      function setLabelDefault() {
-        setLabelPosition(undefined);
-      }
-
-      function setLabelFixed() {
-        setLabelPosition('fixed');
-      }
-
-      function setLabelFloating() {
-        setLabelPosition('floating');
-      }
-
-      function setLabelStacked() {
-        setLabelPosition('stacked');
-      }
-
-      function setLabelPosition(position) {
-        Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
-          (label) => (label.position = position)
-        );
-      }
-
       function getFormControls() {
         return formControlIds.reduce((acc, id) => {
           acc[id] = document.querySelector(`#${id}`);

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

@@ -41,58 +41,45 @@
         <ion-list>
           <ion-item>
             <ion-label>Default</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label color="tertiary">Tertiary</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="custom">Custom</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="fixed">Fixed</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="floating">Floating</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color">
             <ion-label position="floating" color="success">Floating: Success</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Stacked</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color">
             <ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
-            <ion-input></ion-input>
           </ion-item>
         </ion-list>
 
         <ion-list>
           <ion-item color="tertiary">
             <ion-label position="floating">(Item: Tertiary) Floating</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item color="primary">
             <ion-label position="stacked">(Item: Primary) Stacked</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color" color="tertiary">
             <ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color" color="primary">
             <ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
-            <ion-input></ion-input>
           </ion-item>
         </ion-list>
       </ion-content>

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

@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="stacked">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `,
         config
@@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="floating">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `,
         config

core/src/components/loading/loading.tsx

@@ -268,6 +268,10 @@ export class Loading implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the loading.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/menu/menu.tsx

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import { GESTURE_CONTROLLER } from '@utils/gesture';
+import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
 import { menuController } from '@utils/menu-controller';
@@ -321,7 +322,6 @@ export class Menu implements ComponentInterface, MenuI {
     }
   }
 
-  @Listen('keydown')
   onKeydown(ev: KeyboardEvent) {
     if (ev.key === 'Escape') {
       this.close();
@@ -781,8 +781,14 @@ export class Menu implements ComponentInterface, MenuI {
     const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
     const mode = getIonMode(this);
 
+    /**
+     * If the Close Watcher is enabled then
+     * the ionBackButton listener in the menu controller
+     * will handle closing the menu when Escape is pressed.
+     */
     return (
       <Host
+        onKeyDown={shoudUseCloseWatcher() ? null : this.onKeydown}
         role="navigation"
         aria-label={inheritedAttributes['aria-label'] || 'menu'}
         class={{

core/src/components/modal/modal.tsx

@@ -10,7 +10,6 @@ import { Style as StatusBarStyle, StatusBar } from '@utils/native/status-bar';
 import {
   GESTURE,
   BACKDROP,
-  activeAnimations,
   dismiss,
   eventMethod,
   prepareOverlay,
@@ -663,6 +662,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
    *
    * @param data Any data to emit in the dismiss events.
    * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {
@@ -705,8 +708,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       this.keyboardOpenCallback = undefined;
     }
 
-    const enteringAnimation = activeAnimations.get(this) || [];
-
     const dismissed = await dismiss<ModalDismissOptions>(
       this,
       data,
@@ -733,8 +734,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       if (this.gesture) {
         this.gesture.destroy();
       }
-
-      enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;

core/src/components/modal/test/animations/modal.e2e.ts

@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('modal: animations'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-modal is-open="true" trigger="open-modal"></ion-modal>
+      `,
+        config
+      );
+    });
+    test('card modal should clean up animations on dismiss', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28352',
+      });
+
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      const modal = page.locator('ion-modal');
+
+      const initialAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.shadowRoot!.getAnimations();
+      });
+
+      // While the modal is open, it should have animations
+      expect(initialAnimations.length).toBeGreaterThan(0);
+
+      await modal.evaluate((el: HTMLIonModalElement) => {
+        el.dismiss();
+      });
+
+      await ionModalDidDismiss.next();
+
+      const currentAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.shadowRoot!.getAnimations();
+      });
+
+      // Once the modal has finished closing, there should be no animations
+      expect(currentAnimations.length).toBe(0);
+    });
+  });
+});

core/src/components/modal/test/sheet/index.html

@@ -85,10 +85,7 @@
         </ion-header>
 
         <ion-content class="ion-padding">
-          <ion-item>
-            <ion-label>Input outside modal</ion-label>
-            <ion-input id="root-input" legacy="true"></ion-input>
-          </ion-item>
+          <input id="root-input" />
 
           <ion-button id="sheet-modal" onclick="presentModal()">Present Sheet Modal</ion-button>
           <ion-button

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionModalDidPresent.next();
 
-      const input = page.locator('#root-input input').first();
+      const input = page.locator('#root-input').first();
       await input.click();
       await expect(input).toBeFocused();
     });

core/src/components/modal/test/spec/index.html

@@ -60,8 +60,7 @@
 
         <ion-content>
           <ion-item>
-            <ion-label>Use Custom Animation</ion-label>
-            <ion-toggle></ion-toggle>
+            <ion-toggle>Use Custom Animation</ion-toggle>
           </ion-item>
 
           <ion-list id="list"></ion-list>

core/src/components/password-strength/password-strength.tsx

@@ -0,0 +1,34 @@
+import type { ComponentInterface } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
+
+const progressBarValue: any = {
+  'weak': {
+    value: 0.2,
+  },
+  'medium': {
+    value: 0.6,
+  },
+  'strong': {
+    value: 1,
+  }
+}
+
+@Component({
+  tag: 'ion-password-strength',
+  shadow: true
+})
+export class PasswordStrength implements ComponentInterface {
+  @Prop() strength?: 'weak' | 'medium' | 'strong';
+
+  render() {
+    // TODO need a mode virtual prop
+    // TODO need to add colors
+    const data = this.strength !== undefined ? progressBarValue[this.strength] : undefined;
+    return (
+      <Host>
+        <ion-progress-bar value={data?.value || 0}></ion-progress-bar>
+        { this.strength !== undefined && <slot name={this.strength}></slot> }
+      </Host>
+    );
+  }
+}

core/src/components/password-strength/test/basic/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Password Strength - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body class="ion-padding">
+    <ion-input label="Password" type="password" fill="outline"></ion-input>
+
+    <br />
+
+    <ion-password-strength>
+      <div slot="weak">Your password is weak</div>
+      <div slot="medium">Your password is medium</div>
+      <div slot="strong">Your password is strong</div>
+    </ion-password-strength>
+
+    <script>
+      const input = document.querySelector('ion-input');
+      const ps = document.querySelector('ion-password-strength');
+      input.addEventListener('ionInput', () => {
+        const val = input.value;
+
+        if (val.length === 0) {
+          ps.strength = undefined;
+        } else if (val.length < 4) {
+          ps.strength = 'weak';
+        } else if (val.length < 8) {
+          ps.strength = 'medium';
+        } else {
+          ps.strength = 'strong';
+        }
+      });
+    </script>
+  </body>
+</html>

core/src/components/picker/picker.tsx

@@ -248,6 +248,10 @@ export class Picker implements ComponentInterface, OverlayInterface {
    * This can be useful in a button handler for determining which button was
    * clicked to dismiss the picker.
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/popover/popover.ios.scss

@@ -35,6 +35,13 @@
   height: 10px;
 
   overflow: hidden;
+  /*
+   * Required for the arrow to render above the backdrop.
+   * Otherwise, the arrow will appear slightly transparent.
+   * The value is set to 11 since it's the minimum value that
+   * will allow the arrow to render above the backdrop.
+   */
+  z-index: 11;
 }
 
 .popover-arrow::after {

core/src/components/popover/popover.tsx

@@ -525,6 +525,10 @@ export class Popover implements ComponentInterface, PopoverInterface {
    * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
    * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
    * a parent popover if this popover is nested. Defaults to `true`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    */
   @Method()
   async dismiss(data?: any, role?: string, dismissParentPopover = true): Promise<boolean> {