merge release-8.2.9 (#29878)

v8.2.9

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
         with:
-          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
           numOfAssignee: 1
           allowSelfAssign: false

CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.2.9](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.2.9) (2024-09-17)
+
+
+### Bug Fixes
+
+* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([6fb087f](https://github.com/ionic-team/ionic-framework/commit/6fb087f768d6cfe8857f3ac7bd27ac9415a63d0d)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
+
+
+
+
+
+## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
+
+
+### Bug Fixes
+
+* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
+* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
+* **test:** fix Stencil Nightly build ([#29780](https://github.com/ionic-team/ionic-framework/issues/29780)) ([bf7f6f6](https://github.com/ionic-team/ionic-framework/commit/bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7)), closes [#5926](https://github.com/ionic-team/ionic-framework/issues/5926)
+
+
+
+
+
+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
+* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
+* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
+* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+
+
+
+
+
 ## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
 
 

core/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.2.9](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.2.9) (2024-09-17)
+
+
+### Bug Fixes
+
+* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([6fb087f](https://github.com/ionic-team/ionic-framework/commit/6fb087f768d6cfe8857f3ac7bd27ac9415a63d0d)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
+
+
+
+
+
+## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
+
+
+### Bug Fixes
+
+* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
+* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
+* **test:** fix Stencil Nightly build ([#29780](https://github.com/ionic-team/ionic-framework/issues/29780)) ([bf7f6f6](https://github.com/ionic-team/ionic-framework/commit/bf7f6f6acf63ac4d7d536c8a297ff14f704b13c7)), closes [#5926](https://github.com/ionic-team/ionic-framework/issues/5926)
+
+
+
+
+
+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
+* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+
+
+
+
+
 ## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
 
 **Note:** Version bump only for package @ionic/core

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.45.0
+FROM mcr.microsoft.com/playwright:v1.46.1
 
 # Set the working directory
 WORKDIR /ionic

core/custom-rules/await-playwright-promise-assertion.js

@@ -67,4 +67,5 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
   'toHaveTitle',
   'toHaveURL',
   'toBeOK',
+  'click'
 ];

core/package-lock.json

@@ -1,20 +1,20 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.5",
+  "version": "8.2.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.2.5",
+      "version": "8.2.9",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.19.2",
+        "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.9.1",
+        "@axe-core/playwright": "^4.10.0",
         "@capacitor/core": "^6.0.0",
         "@capacitor/haptics": "^6.0.0",
         "@capacitor/keyboard": "^6.0.0",
@@ -22,13 +22,13 @@
         "@clack/prompts": "^0.7.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.45.0",
+        "@playwright/test": "^1.46.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.4",
-        "@stencil/react-output-target": "^0.5.3",
+        "@stencil/react-output-target": "0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.8.7",
+        "@stencil/vue-output-target": "^0.8.9",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -57,12 +57,12 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz",
-      "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz",
+      "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==",
       "dev": true,
       "dependencies": {
-        "axe-core": "~4.9.1"
+        "axe-core": "~4.10.0"
       },
       "peerDependencies": {
         "playwright-core": ">= 1.0.0"
@@ -661,36 +661,36 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.0.tgz",
-      "integrity": "sha512-Kt4ONm0X9xxJXn9Q73oBaKdzep5B/VJw3VjXa2eGul4cD2k37mJwgjpXSMRnLH0Aju5bCiRL8J/hMAfTlokO6A==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz",
-      "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
+      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.1.tgz",
-      "integrity": "sha512-fBjqQaMc5uhFj6ycLnLa2hzQsR77pj/iuLLATkWihMUze3dD+IkwqFnEyOLsyk+52uoOYM7WkziSpNTquU1sZA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
+      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz",
-      "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
+      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
@@ -723,6 +723,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1728,12 +1729,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
-      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
+      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.45.0"
+        "playwright": "1.46.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1823,9 +1824,10 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
-      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz",
+      "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==",
+      "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1839,6 +1841,7 @@
       "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
       "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
@@ -1857,9 +1860,9 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
+      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -2740,9 +2743,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
-      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -4790,9 +4793,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -5416,6 +5419,19 @@
         "@stencil/core": "^4.0.3"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.21.0.tgz",
+      "integrity": "sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw==",
+      "license": "MIT",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -8259,12 +8275,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
-      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
+      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.45.0"
+        "playwright-core": "1.46.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8277,9 +8293,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
-      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
+      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -10293,12 +10309,12 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz",
-      "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz",
+      "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==",
       "dev": true,
       "requires": {
-        "axe-core": "~4.9.1"
+        "axe-core": "~4.10.0"
       }
     },
     "@babel/code-frame": {
@@ -10740,32 +10756,32 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.0.tgz",
-      "integrity": "sha512-Kt4ONm0X9xxJXn9Q73oBaKdzep5B/VJw3VjXa2eGul4cD2k37mJwgjpXSMRnLH0Aju5bCiRL8J/hMAfTlokO6A==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
       }
     },
     "@capacitor/haptics": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz",
-      "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
+      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.1.tgz",
-      "integrity": "sha512-fBjqQaMc5uhFj6ycLnLa2hzQsR77pj/iuLLATkWihMUze3dD+IkwqFnEyOLsyk+52uoOYM7WkziSpNTquU1sZA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
+      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz",
-      "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
+      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
       "dev": true,
       "requires": {}
     },
@@ -10793,7 +10809,8 @@
       "dependencies": {
         "is-unicode-supported": {
           "version": "1.3.0",
-          "bundled": true
+          "bundled": true,
+          "dev": true
         }
       }
     },
@@ -11508,12 +11525,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
-      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
+      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
       "dev": true,
       "requires": {
-        "playwright": "1.45.0"
+        "playwright": "1.46.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11581,9 +11598,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
-      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz",
+      "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -11600,9 +11617,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
+      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
       "dev": true,
       "requires": {}
     },
@@ -12215,9 +12232,9 @@
       }
     },
     "axe-core": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
-      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
       "dev": true
     },
     "babel-jest": {
@@ -13710,9 +13727,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -14187,6 +14204,13 @@
       "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "4.21.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.21.0.tgz",
+          "integrity": "sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw=="
+        }
       }
     },
     "is-alphabetical": {
@@ -16232,19 +16256,19 @@
       }
     },
     "playwright": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
-      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
+      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.45.0"
+        "playwright-core": "1.46.1"
       }
     },
     "playwright-core": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
-      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
+      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.5",
+  "version": "8.2.9",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,12 +31,12 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.19.2",
+    "@stencil/core": "4.20.0",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.9.1",
+    "@axe-core/playwright": "^4.10.0",
     "@capacitor/core": "^6.0.0",
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
@@ -44,13 +44,13 @@
     "@clack/prompts": "^0.7.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.45.0",
+    "@playwright/test": "^1.46.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.8.9",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

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

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

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

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      accordion.click();
+      await accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

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

@@ -310,7 +310,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
   }
 
   componentDidLoad() {

core/src/components/action-sheet/test/action-sheet-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { ActionSheet } from '../action-sheet';
-
-it('action sheet should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [ActionSheet],
-    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
-  });
-  let actionSheet: HTMLIonActionSheetElement;
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet).not.toBe(null);
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the action sheet from the DOM
-  actionSheet.remove();
-  await page.waitForChanges();
-
-  // Create a new action sheet to verify the id is incremented
-  actionSheet = document.createElement('ion-action-sheet');
-  actionSheet.isOpen = true;
-  page.body.appendChild(actionSheet);
-  await page.waitForChanges();
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same action sheet again should reuse the existing id
-
-  actionSheet.isOpen = false;
-  await page.waitForChanges();
-  actionSheet.isOpen = true;
-  await page.waitForChanges();
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/action-sheet/test/action-sheet-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../action-sheet';
+import { h } from '@stencil/core';
+
+describe('action-sheet: id', () => {
+  it('action sheet should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+    });
+    let actionSheet: HTMLIonActionSheetElement;
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet).not.toBe(null);
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the action sheet from the DOM
+    actionSheet.remove();
+    await page.waitForChanges();
+
+    // Create a new action sheet to verify the id is incremented
+    actionSheet = document.createElement('ion-action-sheet');
+    actionSheet.isOpen = true;
+    page.body.appendChild(actionSheet);
+    await page.waitForChanges();
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same action sheet again should reuse the existing id
+
+    actionSheet.isOpen = false;
+    await page.waitForChanges();
+    actionSheet.isOpen = true;
+    await page.waitForChanges();
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
+    });
+
+    const alert = page.body.querySelector('ion-action-sheet')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/alert/test/alert-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Alert } from '../alert';
-
-it('alert should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Alert],
-    html: `<ion-alert is-open="true"></ion-alert>`,
-  });
-  let alert: HTMLIonAlertElement;
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert).not.toBe(null);
-  expect(alert.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the alert from the DOM
-  alert.remove();
-  await page.waitForChanges();
-
-  // Create a new alert to verify the id is incremented
-  alert = document.createElement('ion-alert');
-  alert.isOpen = true;
-  page.body.appendChild(alert);
-  await page.waitForChanges();
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same alert again should reuse the existing id
-
-  alert.isOpen = false;
-  await page.waitForChanges();
-  alert.isOpen = true;
-  await page.waitForChanges();
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/alert/test/alert-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Alert } from '../alert';
+import { h } from '@stencil/core';
+
+describe('alert: id', () => {
+  it('alert should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert is-open="true"></ion-alert>`,
+    });
+    let alert: HTMLIonAlertElement;
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert).not.toBe(null);
+    expect(alert.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the alert from the DOM
+    alert.remove();
+    await page.waitForChanges();
+
+    // Create a new alert to verify the id is incremented
+    alert = document.createElement('ion-alert');
+    alert.isOpen = true;
+    page.body.appendChild(alert);
+    await page.waitForChanges();
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same alert again should reuse the existing id
+
+    alert.isOpen = false;
+    await page.waitForChanges();
+    alert.isOpen = true;
+    await page.waitForChanges();
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Alert],
+      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
+    });
+
+    const alert = page.body.querySelector('ion-alert')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/alert/test/alert.spec.ts

@@ -2,7 +2,6 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { config } from '../../../global/config';
 import { Alert } from '../alert';
-import { h } from '@stencil/core';
 
 describe('alert: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -39,15 +38,4 @@ describe('alert: custom html', () => {
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [Alert],
-      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
-    });
-
-    const alert = page.body.querySelector('ion-alert')!;
-    expect(alert.id).toBe(id);
-  });
 });

core/src/components/content/content.tsx

@@ -1,6 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
-import { componentOnReady, hasLazyBuild } from '@utils/helpers';
+import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -33,6 +34,7 @@ export class Content implements ComponentInterface {
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
   private tabsLoadCallback?: () => void;
@@ -125,6 +127,10 @@ export class Content implements ComponentInterface {
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+
   connectedCallback() {
     this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
 
@@ -432,7 +438,7 @@ export class Content implements ComponentInterface {
   }
 
   render() {
-    const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
+    const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
@@ -453,6 +459,7 @@ export class Content implements ComponentInterface {
           '--offset-top': `${this.cTop}px`,
           '--offset-bottom': `${this.cBottom}px`,
         }}
+        {...inheritedAttributes}
       >
         <div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
 

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

@@ -0,0 +1,67 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Content does not have mode-specific styling
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('content: a11y'), () => {
+    test('should have the main role', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-content></ion-content>
+      `,
+        config
+      );
+      const content = page.locator('ion-content');
+
+      await expect(content).toHaveAttribute('role', 'main');
+    });
+
+    test('should have no role in popover', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-popover>
+          <ion-content></ion-content>
+        </ion-popover>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+
+      /**
+       * Playwright can't do .not.toHaveAttribute() because a value is expected,
+       * and toHaveAttribute can't accept a value of type null.
+       */
+      const role = await content.getAttribute('role');
+      expect(role).toBeNull();
+    });
+
+    test('should allow for custom role', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-content role="complementary"></ion-content>
+      `,
+        config
+      );
+      const content = page.locator('ion-content');
+
+      await expect(content).toHaveAttribute('role', 'complementary');
+    });
+
+    test('should allow for custom role in popover', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-popover>
+          <ion-content role="complementary"></ion-content>
+        </ion-popover>
+      `,
+        config
+      );
+      const content = page.locator('ion-content');
+
+      await expect(content).toHaveAttribute('role', 'complementary');
+    });
+  });
+});

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

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Footer does not have mode-specific styling
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('footer: a11y'), () => {
+    test('should have the contentinfo role', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-footer></ion-footer>
+      `,
+        config
+      );
+      const footer = page.locator('ion-footer');
+
+      await expect(footer).toHaveAttribute('role', 'contentinfo');
+    });
+
+    test('should allow for custom role', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-footer role="complementary"></ion-footer>
+      `,
+        config
+      );
+      const footer = page.locator('ion-footer');
+
+      await expect(footer).toHaveAttribute('role', 'complementary');
+    });
+  });
+});

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

@@ -15,20 +15,56 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       expect(results.violations).toEqual([]);
     });
 
-    test('should allow for custom role', async ({ page }) => {
-      /**
-       * Note: This example should not be used in production.
-       * This only serves to check that `role` can be customized.
-       */
+    test('should have the banner role', async ({ page }) => {
       await page.setContent(
         `
-        <ion-header role="heading"></ion-header>
+        <ion-header></ion-header>
       `,
         config
       );
       const header = page.locator('ion-header');
 
-      await expect(header).toHaveAttribute('role', 'heading');
+      await expect(header).toHaveAttribute('role', 'banner');
+    });
+
+    test('should have no role in menu', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-menu>
+          <ion-header></ion-header>
+        </ion-menu>
+      `,
+        config
+      );
+      const header = page.locator('ion-header');
+
+      await expect(header).toHaveAttribute('role', 'none');
+    });
+
+    test('should allow for custom role', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-header role="complementary"></ion-header>
+      `,
+        config
+      );
+      const header = page.locator('ion-header');
+
+      await expect(header).toHaveAttribute('role', 'complementary');
+    });
+
+    test('should allow for custom role in menu', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-menu>
+          <ion-header role="complementary"></ion-header>
+        </ion-menu>
+      `,
+        config
+      );
+      const header = page.locator('ion-header');
+
+      await expect(header).toHaveAttribute('role', 'complementary');
     });
   });
 });

core/src/components/item/item.tsx

@@ -191,7 +191,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     );
 
     // The following elements should also stay clickable when an input with cover is present
-    const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
+    const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
 
     // Check for multiple inputs to change the position of the input cover to relative
     // for all of the covered inputs above

core/src/components/loading/loading.tsx

@@ -214,7 +214,9 @@ export class Loading implements ComponentInterface, OverlayInterface {
       const mode = getIonMode(this);
       this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
     }
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
   }
 
   componentDidLoad() {

core/src/components/loading/test/loading-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Loading } from '../loading';
-
-it('loading should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Loading],
-    html: `<ion-loading is-open="true"></ion-loading>`,
-  });
-  let loading: HTMLIonLoadingElement;
-
-  loading = page.body.querySelector('ion-loading')!;
-
-  expect(loading).not.toBe(null);
-  expect(loading.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the loading from the DOM
-  loading.remove();
-  await page.waitForChanges();
-
-  // Create a new loading to verify the id is incremented
-  loading = document.createElement('ion-loading');
-  loading.isOpen = true;
-  page.body.appendChild(loading);
-  await page.waitForChanges();
-
-  loading = page.body.querySelector('ion-loading')!;
-
-  expect(loading.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same loading again should reuse the existing id
-
-  loading.isOpen = false;
-  await page.waitForChanges();
-  loading.isOpen = true;
-  await page.waitForChanges();
-
-  loading = page.body.querySelector('ion-loading')!;
-
-  expect(loading.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/loading/test/loading-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Loading } from '../loading';
+import { h } from '@stencil/core';
+
+describe('loading: id', () => {
+  it('loading should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading is-open="true"></ion-loading>`,
+    });
+    let loading: HTMLIonLoadingElement;
+
+    loading = page.body.querySelector('ion-loading')!;
+
+    expect(loading).not.toBe(null);
+    expect(loading.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the loading from the DOM
+    loading.remove();
+    await page.waitForChanges();
+
+    // Create a new loading to verify the id is incremented
+    loading = document.createElement('ion-loading');
+    loading.isOpen = true;
+    page.body.appendChild(loading);
+    await page.waitForChanges();
+
+    loading = page.body.querySelector('ion-loading')!;
+
+    expect(loading.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same loading again should reuse the existing id
+
+    loading.isOpen = false;
+    await page.waitForChanges();
+    loading.isOpen = true;
+    await page.waitForChanges();
+
+    loading = page.body.querySelector('ion-loading')!;
+
+    expect(loading.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Loading],
+      template: () => <ion-loading htmlAttributes={{ id }} overlayIndex={-1}></ion-loading>,
+    });
+
+    const alert = page.body.querySelector('ion-loading')!;
+    expect(alert.id).toBe(id);
+  });
+});

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

@@ -14,13 +14,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const style = document.querySelector('style');
-          style!.innerHTML = `
+          const overwrittenStyle = document.createElement('style');
+          overwrittenStyle.innerHTML = `
             :root {
               --ion-safe-area-left: 50px !important;
               --ion-safe-area-right: 10px !important;
             }
           `;
+          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-start');
@@ -28,20 +29,20 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
 
         const startMenu = page.locator('[menu-id="start-menu"]');
         await expect(startMenu).toHaveClass(/show-menu/);
-
         await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
       });
       test('should render with safe area when notch is on the right', async ({ page }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const style = document.querySelector('style');
-          style!.innerHTML = `
+          const overwrittenStyle = document.createElement('style');
+          overwrittenStyle.innerHTML = `
             :root {
               --ion-safe-area-left: 10px !important;
               --ion-safe-area-right: 50px !important;
             }
           `;
+          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-start');
@@ -58,13 +59,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const style = document.querySelector('style');
-          style!.innerHTML = `
+          const overwrittenStyle = document.createElement('style');
+          overwrittenStyle.innerHTML = `
             :root {
               --ion-safe-area-left: 50px !important;
               --ion-safe-area-right: 10px !important;
             }
           `;
+          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-end');
@@ -79,13 +81,14 @@ configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
         const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 
         await page.evaluate(() => {
-          const style = document.querySelector('style');
-          style!.innerHTML = `
+          const overwrittenStyle = document.createElement('style');
+          overwrittenStyle.innerHTML = `
             :root {
               --ion-safe-area-left: 10px !important;
               --ion-safe-area-right: 50px !important;
             }
           `;
+          document.head.appendChild(overwrittenStyle);
         });
 
         await page.click('#open-end');

core/src/components/modal/modal.tsx

@@ -415,7 +415,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
       printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
     }
 
-    setOverlayId(el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
   }
 
   componentDidLoad() {

core/src/components/modal/test/modal-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Modal } from '../modal';
-
-it('modal should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Modal],
-    html: `<ion-modal is-open="true"></ion-modal>`,
-  });
-  let modal: HTMLIonModalElement;
-
-  modal = page.body.querySelector('ion-modal')!;
-
-  expect(modal).not.toBe(null);
-  expect(modal.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the modal from the DOM
-  modal.remove();
-  await page.waitForChanges();
-
-  // Create a new modal to verify the id is incremented
-  modal = document.createElement('ion-modal');
-  modal.isOpen = true;
-  page.body.appendChild(modal);
-  await page.waitForChanges();
-
-  modal = page.body.querySelector('ion-modal')!;
-
-  expect(modal.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same modal again should reuse the existing id
-
-  modal.isOpen = false;
-  await page.waitForChanges();
-  modal.isOpen = true;
-  await page.waitForChanges();
-
-  modal = page.body.querySelector('ion-modal')!;
-
-  expect(modal.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/modal/test/modal-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Modal } from '../modal';
+import { h } from '@stencil/core';
+
+describe('modal: id', () => {
+  it('modal should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `<ion-modal is-open="true"></ion-modal>`,
+    });
+    let modal: HTMLIonModalElement;
+
+    modal = page.body.querySelector('ion-modal')!;
+
+    expect(modal).not.toBe(null);
+    expect(modal.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the modal from the DOM
+    modal.remove();
+    await page.waitForChanges();
+
+    // Create a new modal to verify the id is incremented
+    modal = document.createElement('ion-modal');
+    modal.isOpen = true;
+    page.body.appendChild(modal);
+    await page.waitForChanges();
+
+    modal = page.body.querySelector('ion-modal')!;
+
+    expect(modal.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same modal again should reuse the existing id
+
+    modal.isOpen = false;
+    await page.waitForChanges();
+    modal.isOpen = true;
+    await page.waitForChanges();
+
+    modal = page.body.querySelector('ion-modal')!;
+
+    expect(modal.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Modal],
+      template: () => <ion-modal htmlAttributes={{ id }} overlayIndex={-1}></ion-modal>,
+    });
+
+    const alert = page.body.querySelector('ion-modal')!;
+    expect(alert.id).toBe(id);
+  });
+});

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

@@ -265,7 +265,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const backdrop = page.locator('ion-modal ion-backdrop');
 
       await handle.click();
-      backdrop.click();
+      await backdrop.click();
 
       await ionBreakpointDidChange.next();
 

core/src/components/picker-legacy/picker.tsx

@@ -199,7 +199,9 @@ export class Picker implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
   }
 
   componentDidLoad() {

core/src/components/picker-legacy/test/picker-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Picker } from '../picker';
-
-it('picker should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Picker],
-    html: `<ion-picker-legacy is-open="true"></ion-picker-legacy>`,
-  });
-  let picker: HTMLIonPickerLegacyElement;
-
-  picker = page.body.querySelector('ion-picker-legacy')!;
-
-  expect(picker).not.toBe(null);
-  expect(picker.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the picker from the DOM
-  picker.remove();
-  await page.waitForChanges();
-
-  // Create a new picker to verify the id is incremented
-  picker = document.createElement('ion-picker-legacy');
-  picker.isOpen = true;
-  page.body.appendChild(picker);
-  await page.waitForChanges();
-
-  picker = page.body.querySelector('ion-picker-legacy')!;
-
-  expect(picker.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same picker again should reuse the existing id
-
-  picker.isOpen = false;
-  await page.waitForChanges();
-  picker.isOpen = true;
-  await page.waitForChanges();
-
-  picker = page.body.querySelector('ion-picker-legacy')!;
-
-  expect(picker.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/picker-legacy/test/picker-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Picker } from '../picker';
+import { h } from '@stencil/core';
+
+describe('picker: id', () => {
+  it('picker should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Picker],
+      html: `<ion-picker-legacy is-open="true"></ion-picker-legacy>`,
+    });
+    let picker: HTMLIonPickerLegacyElement;
+
+    picker = page.body.querySelector('ion-picker-legacy')!;
+
+    expect(picker).not.toBe(null);
+    expect(picker.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the picker from the DOM
+    picker.remove();
+    await page.waitForChanges();
+
+    // Create a new picker to verify the id is incremented
+    picker = document.createElement('ion-picker-legacy');
+    picker.isOpen = true;
+    page.body.appendChild(picker);
+    await page.waitForChanges();
+
+    picker = page.body.querySelector('ion-picker-legacy')!;
+
+    expect(picker.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same picker again should reuse the existing id
+
+    picker.isOpen = false;
+    await page.waitForChanges();
+    picker.isOpen = true;
+    await page.waitForChanges();
+
+    picker = page.body.querySelector('ion-picker-legacy')!;
+
+    expect(picker.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Picker],
+      template: () => <ion-picker-legacy htmlAttributes={{ id }} overlayIndex={-1}></ion-picker-legacy>,
+    });
+
+    const alert = page.body.querySelector('ion-picker-legacy')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/popover/popover.tsx

@@ -365,7 +365,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
   componentWillLoad() {
     const { el } = this;
-    const popoverId = setOverlayId(el);
+    const popoverId = this.htmlAttributes?.id ?? setOverlayId(el);
 
     this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`) as HTMLIonPopoverElement | null;
 

core/src/components/popover/test/popover-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Popover } from '../popover';
-
-it('popover should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Popover],
-    html: `<ion-popover is-open="true"></ion-popover>`,
-  });
-  let popover: HTMLIonPopoverElement;
-
-  popover = page.body.querySelector('ion-popover')!;
-
-  expect(popover).not.toBe(null);
-  expect(popover.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the popover from the DOM
-  popover.remove();
-  await page.waitForChanges();
-
-  // Create a new popover to verify the id is incremented
-  popover = document.createElement('ion-popover');
-  popover.isOpen = true;
-  page.body.appendChild(popover);
-  await page.waitForChanges();
-
-  popover = page.body.querySelector('ion-popover')!;
-
-  expect(popover.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same popover again should reuse the existing id
-
-  popover.isOpen = false;
-  await page.waitForChanges();
-  popover.isOpen = true;
-  await page.waitForChanges();
-
-  popover = page.body.querySelector('ion-popover')!;
-
-  expect(popover.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/popover/test/popover-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Popover } from '../popover';
+import { h } from '@stencil/core';
+
+describe('popover: id', () => {
+  it('popover should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Popover],
+      html: `<ion-popover is-open="true"></ion-popover>`,
+    });
+    let popover: HTMLIonPopoverElement;
+
+    popover = page.body.querySelector('ion-popover')!;
+
+    expect(popover).not.toBe(null);
+    expect(popover.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the popover from the DOM
+    popover.remove();
+    await page.waitForChanges();
+
+    // Create a new popover to verify the id is incremented
+    popover = document.createElement('ion-popover');
+    popover.isOpen = true;
+    page.body.appendChild(popover);
+    await page.waitForChanges();
+
+    popover = page.body.querySelector('ion-popover')!;
+
+    expect(popover.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same popover again should reuse the existing id
+
+    popover.isOpen = false;
+    await page.waitForChanges();
+    popover.isOpen = true;
+    await page.waitForChanges();
+
+    popover = page.body.querySelector('ion-popover')!;
+
+    expect(popover.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Popover],
+      template: () => <ion-popover htmlAttributes={{ id }} overlayIndex={-1}></ion-popover>,
+    });
+
+    const alert = page.body.querySelector('ion-popover')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/range/range.tsx

@@ -449,7 +449,7 @@ export class Range implements ComponentInterface {
    */
   private onEnd(detail: GestureDetail | MouseEvent) {
     const { contentEl, initialContentScrollY } = this;
-    const currentX = (detail as GestureDetail).currentX || (detail as MouseEvent).clientX;
+    const currentX = (detail as GestureDetail).currentX ?? (detail as MouseEvent).clientX;
 
     /**
      * The `pressedKnob` can be undefined if the user never

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

@@ -80,9 +80,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
          * is already visible. We manually click() the element instead
          * to avoid flaky tests.
          */
+        /* eslint-disable custom-rules/await-playwright-promise-assertion */
         el.click();
         el.click();
         el.click();
+        /* eslint-enable custom-rules/await-playwright-promise-assertion */
       });
 
       const alerts = await page.$$('ion-alert');