v8.2.6

fix(overlays): do not overwrite id set in htmlAttributes (#29722 )
Issue number: resolves #29712 ---------   ## What is the current behavior? In every type of overlay, the auto incremented overlay id is overwriting any id set in htmlAttributes. ## What is the new behavior? The id in htmlAttributes now takes precedence. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information  --------- Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
2026-03-13 10:22:08 +08:00 · 2024-07-24 19:30:27 +00:00 · 2024-07-24 14:17:56 +00:00 · 2024-07-24 14:14:58 +00:00 · 2024-07-23 18:15:37 +00:00 · 2024-07-16 20:11:49 +00:00
118 changed files with 8414 additions and 6073 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -6,11 +6,19 @@ runs:
    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
-
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
    - name: Install Angular Server Dependencies
      run: npm ci
      shell: bash
      working-directory: ./packages/angular-server
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/angular-server
    - name: Build
      run: npm run build.prod
      shell: bash
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -29,7 +29,7 @@ runs:
      shell: bash
      working-directory: ./packages/angular/test
    - name: Install Dependencies
-      run: npm install --legacy-peer-deps # TODO(FW-6227): Remove legacy-peer-deps flag
+      run: npm install
      shell: bash
      working-directory: ./packages/angular/test/build/${{ inputs.app }}
    - name: Sync Built Changes
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -11,8 +11,8 @@ jobs:
      issues: write
    steps:
      - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
+        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
        with:
-          assignees: brandyscarney, thetaPC
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
          numOfAssignee: 1
          allowSelfAssign: false
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,91 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [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)
+
+
+### Bug Fixes
+
+* **dependencies:** use latest @stencil/core to remove DOMException errors ([#29685](https://github.com/ionic-team/ionic-framework/issues/29685)) ([d70ea4](https://github.com/ionic-team/ionic/commit/d70ea400a4713bd091af1393e196e10844a190b6)), closes [#29681](https://github.com/ionic-team/ionic/issues/29681)
+* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659)
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+* **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518)
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+
+### Features
+
+* **angular:** setting props on a signal works ([#29453](https://github.com/ionic-team/ionic-framework/issues/29453)) ([4640e04](https://github.com/ionic-team/ionic-framework/commit/4640e046ebbd35bf92737368c6262f79a8803a59)), closes [#28876](https://github.com/ionic-team/ionic-framework/issues/28876)
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+
+### Bug Fixes
+
+* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)


--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
  <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
  </a>
-  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
  </a>
  <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
    Documentation
  </a>
  <span> · </span>
-  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">Contribute</a>
  <span> · </span>
  <a href="https://blog.ionicframework.com/">Blog</a>
  <br />
@@ -63,14 +63,15 @@ Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v

 ### Getting Started

-Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
+Start a new project by following our [documentation](https://ionicframework.com/docs/).
 We would love to hear from you! If you have any feedback or run into issues using our framework, please file
-an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
+an [issue](https://github.com/ionic-team/ionic-framework/issues/new) on this repository.

 ### Migration Guides

 Already have an Ionic app? These guides will help you migrate to the latest versions.

+* [Migrate from v7 to v8](https://ionicframework.com/docs/updating/8-0)
 * [Migrate from v6 to v7](https://ionicframework.com/docs/updating/7-0)
 * [Migrate from v5 to v6](https://ionicframework.com/docs/updating/6-0)
 * [Migrate from v4 to v5](https://ionicframework.com/docs/updating/5-0)
@@ -82,21 +83,16 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin

 - [Angular Ionic Conference App](https://github.com/ionic-team/ionic-conference-app)
 - [React Ionic Conference App](https://github.com/ionic-team/ionic-react-conference-app)
-<!-- TODO(FW-3811): add this when the vue conference app is updated -->
-<!-- - [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app) -->
+- [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app)

 ### Contributing

 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
-and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[contributing](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md)
+and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic-framework/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.

-Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
-
-### Future Goals
-
-As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

 ### Earlier Versions

--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [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
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+
+### Bug Fixes
+
+* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)


--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.43.1
+FROM mcr.microsoft.com/playwright:v1.45.0

 # Set the working directory
 WORKDIR /ionic
--- a/core/api.txt
+++ b/core/api.txt
@@ -783,7 +783,7 @@ ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string,chevronForward,false,false
-ion-item,prop,disabled,boolean,false,false,false
+ion-item,prop,disabled,boolean,false,false,true
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,27 +1,28 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "8.1.2",
+      "version": "8.2.6",
      "license": "MIT",
      "dependencies": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      },
      "devDependencies": {
-        "@axe-core/playwright": "^4.8.5",
+        "@axe-core/playwright": "^4.9.1",
        "@capacitor/core": "^6.0.0",
        "@capacitor/haptics": "^6.0.0",
        "@capacitor/keyboard": "^6.0.0",
        "@capacitor/status-bar": "^6.0.0",
+        "@clack/prompts": "^0.7.0",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.39.0",
+        "@playwright/test": "^1.45.0",
        "@rollup/plugin-node-resolve": "^8.4.0",
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/angular-output-target": "^0.8.4",
@@ -56,12 +57,12 @@
      "dev": true
    },
    "node_modules/@axe-core/playwright": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
-      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "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==",
      "dev": true,
      "dependencies": {
-        "axe-core": "~4.9.0"
+        "axe-core": "~4.9.1"
      },
      "peerDependencies": {
        "playwright-core": ">= 1.0.0"
@@ -660,9 +661,9 @@
      "dev": true
    },
    "node_modules/@capacitor/core": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz",
-      "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.1.tgz",
+      "integrity": "sha512-b1s4WDMy3Y1/owTG2/XNGCI6G5SDpF2NT1JMAgcShue13fiAuHA+Ans7Wfei6McvR0KdopAE6tMHmDAfL5PM8Q==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
@@ -678,9 +679,9 @@
      }
    },
    "node_modules/@capacitor/keyboard": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz",
-      "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.1.tgz",
+      "integrity": "sha512-fBjqQaMc5uhFj6ycLnLa2hzQsR77pj/iuLLATkWihMUze3dD+IkwqFnEyOLsyk+52uoOYM7WkziSpNTquU1sZA==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^6.0.0"
@@ -695,6 +696,43 @@
        "@capacitor/core": "^6.0.0"
      }
    },
+    "node_modules/@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "bundleDependencies": [
+        "is-unicode-supported"
+      ],
+      "dev": true,
+      "dependencies": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1691,18 +1729,18 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
+      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.43.1"
+        "playwright": "1.45.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=16"
+        "node": ">=18"
      }
    },
    "node_modules/@rollup/plugin-node-resolve": {
@@ -1786,9 +1824,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.0.tgz",
-      "integrity": "sha512-cN+nvjy0L8KyYq7N1bmswN/AcBustFlsAxfyPQ+fd3m98lPo53jNKIxKve1ZQ4ZmzSzYO7alDhZvjIesM0rl7w==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -2703,9 +2741,9 @@
      }
    },
    "node_modules/axe-core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
-      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
      "dev": true,
      "engines": {
        "node": ">=4"
@@ -8222,33 +8260,33 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
+      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.45.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=16"
+        "node": ">=18"
      },
      "optionalDependencies": {
        "fsevents": "2.3.2"
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
+      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
      },
      "engines": {
-        "node": ">=16"
+        "node": ">=18"
      }
    },
    "node_modules/postcss": {
@@ -9772,9 +9810,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
      "dev": true,
      "peer": true,
      "bin": {
@@ -10256,12 +10294,12 @@
  },
  "dependencies": {
    "@axe-core/playwright": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
-      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "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==",
      "dev": true,
      "requires": {
-        "axe-core": "~4.9.0"
+        "axe-core": "~4.9.1"
      }
    },
    "@babel/code-frame": {
@@ -10703,9 +10741,9 @@
      "dev": true
    },
    "@capacitor/core": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz",
-      "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.1.tgz",
+      "integrity": "sha512-b1s4WDMy3Y1/owTG2/XNGCI6G5SDpF2NT1JMAgcShue13fiAuHA+Ans7Wfei6McvR0KdopAE6tMHmDAfL5PM8Q==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
@@ -10719,9 +10757,9 @@
      "requires": {}
    },
    "@capacitor/keyboard": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz",
-      "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.1.tgz",
+      "integrity": "sha512-fBjqQaMc5uhFj6ycLnLa2hzQsR77pj/iuLLATkWihMUze3dD+IkwqFnEyOLsyk+52uoOYM7WkziSpNTquU1sZA==",
      "dev": true,
      "requires": {}
    },
@@ -10732,6 +10770,35 @@
      "dev": true,
      "requires": {}
    },
+    "@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dev": true,
+      "requires": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "dev": true,
+      "requires": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      },
+      "dependencies": {
+        "is-unicode-supported": {
+          "version": "1.3.0",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
    "@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -11443,12 +11510,12 @@
      }
    },
    "@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz",
+      "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==",
      "dev": true,
      "requires": {
-        "playwright": "1.43.1"
+        "playwright": "1.45.0"
      }
    },
    "@rollup/plugin-node-resolve": {
@@ -11516,9 +11583,9 @@
      "requires": {}
    },
    "@stencil/core": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.0.tgz",
-      "integrity": "sha512-cN+nvjy0L8KyYq7N1bmswN/AcBustFlsAxfyPQ+fd3m98lPo53jNKIxKve1ZQ4ZmzSzYO7alDhZvjIesM0rl7w=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@stencil/react-output-target": {
      "version": "0.5.3",
@@ -12150,9 +12217,9 @@
      }
    },
    "axe-core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
-      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
      "dev": true
    },
    "babel-jest": {
@@ -16167,19 +16234,19 @@
      }
    },
    "playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz",
+      "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==",
      "dev": true,
      "requires": {
        "fsevents": "2.3.2",
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.45.0"
      }
    },
    "playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
+      "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
      "dev": true
    },
    "postcss": {
@@ -17323,9 +17390,9 @@
      }
    },
    "typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
      "dev": true,
      "peer": true
    },
@@ -17678,4 +17745,4 @@
      "dev": true
    }
  }
-}
+}
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,19 +31,20 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.17.2",
+    "@stencil/core": "^4.19.2",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
+    "@axe-core/playwright": "^4.9.1",
    "@capacitor/core": "^6.0.0",
    "@capacitor/haptics": "^6.0.0",
    "@capacitor/keyboard": "^6.0.0",
    "@capacitor/status-bar": "^6.0.0",
+    "@clack/prompts": "^0.7.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.45.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.8.4",
@@ -99,7 +100,8 @@
    "docker.build": "docker build -t ionic-playwright .",
    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
    "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
+    "test.e2e.script": "node scripts/testing/e2e-script.mjs"
  },
  "author": "Ionic Team",
  "license": "MIT",
@@ -108,7 +110,7 @@
    "url": "git+https://github.com/ionic-team/ionic-framework.git"
  },
  "bugs": {
-    "url": "https://github.com/ionic-team/ionic/issues"
+    "url": "https://github.com/ionic-team/ionic-framework/issues"
  },
  "homepage": "https://ionicframework.com/",
  "jest": {
--- a/core/scripts/testing/e2e-script.mjs
+++ b/core/scripts/testing/e2e-script.mjs
@@ -0,0 +1,260 @@
+// The purpose of this script is to provide a way run the E2E tests
+// without having the developer to manually run multiple commands based
+// on the desired end result.
+// E.g. update the local ground truths for a specific component or
+// open the Playwright report after running the E2E tests.
+
+import {
+  intro,
+  outro,
+  confirm,
+  spinner,
+  isCancel,
+  cancel,
+  text,
+  log,
+} from '@clack/prompts';
+import { exec, spawn } from 'child_process';
+import fs from 'node:fs';
+import { setTimeout as sleep } from 'node:timers/promises';
+import util from 'node:util';
+import color from 'picocolors';
+
+async function main() {
+  const execAsync = util.promisify(exec);
+  const cleanUpFiles = async () => {
+    // Clean up the local ground truths.
+    const cleanUp = spinner();
+  
+    // Inform the user that the local ground truths are being cleaned up.
+    cleanUp.start('Restoring local ground truths');
+  
+    // Reset the local ground truths.
+    await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
+      cleanUp.stop('Failed to reset local ground truths');
+      console.error(error);
+      return process.exit(0);
+    });
+  
+    // Restore the local ground truths.
+    await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
+      cleanUp.stop('Failed to restore local ground truths');
+      console.error(error);
+      return process.exit(0);
+    });
+  
+    // Inform the user that the local ground truths have been cleaned up.
+    cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
+  };
+
+  intro(color.inverse(' Update Local Ground Truths'));
+
+  // Ask user for the component name they want to test.
+  const componentValue = await text({
+    message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
+    placeholder: 'Empty for all components',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(componentValue)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  // Ask user if they want to update their local ground truths.
+  const shouldUpdateTruths = await confirm({
+    message: 'Do you want to update your local ground truths?',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(shouldUpdateTruths)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  if (shouldUpdateTruths) {
+    const defaultBaseBranch = 'main';
+
+    // Ask user for the base branch.
+    let baseBranch = await text({
+      message: 'Enter the base branch name:',
+      placeholder: `default: ${defaultBaseBranch}`,
+    })
+
+    // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+    if (isCancel(baseBranch)) {
+      cancel('Operation cancelled');
+      return process.exit(0);
+    }
+
+    // User didn't provide a base branch.
+    if (!baseBranch) {
+      baseBranch = defaultBaseBranch;
+    }
+
+    /**
+     * The provided base branch needs to be fetched.
+     * This ensures that the local base branch is up-to-date with the 
+     * remote base branch. Otherwise, there might be errors stating that
+     * certain files don't exist in the local base branch.
+     */
+    const fetchBaseBranch = spinner();
+
+    // Inform the user that the base branch is being fetched.
+    fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
+
+    // Fetch the base branch.
+    await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
+      fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
+      console.error(error);
+      return process.exit(0);
+    });
+
+    // Inform the user that the base branch has been fetched.
+    fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
+
+
+    const updateGroundTruth = spinner();
+
+    // Inform the user that the local ground truths are being updated.
+    updateGroundTruth.start('Updating local ground truths');
+
+    // Check if user provided an existing file or directory.
+    const isValidLocation = fs.existsSync(componentValue);
+
+    // User provided an existing file or directory.
+    if (isValidLocation) {
+      const stats = fs.statSync(componentValue);
+
+      // User provided a file as the component.
+      // ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
+      if (stats.isFile()) {
+        // Update the local ground truths for the provided path.
+        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
+          updateGroundTruth.stop('Failed to update local ground truths');
+          console.error(error);
+          return process.exit(0);
+        });
+      }
+
+      // User provided a directory as the component.
+      // ex: `componentValue` = `src/components/chip`
+      if (stats.isDirectory()) {
+        // Update the local ground truths for the provided directory.
+        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+          updateGroundTruth.stop('Failed to update local ground truths');
+          console.error(error);
+          return process.exit(0);
+        });
+      }
+    }
+    // User provided a component name as the component.
+    // ex: `componentValue` = `chip`
+    else if (componentValue) {
+      // Update the local ground truths for the provided component.
+      await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+        updateGroundTruth.stop('Failed to update local ground truths');
+        console.error(error);
+        return process.exit(0);
+      });
+    }
+    // User provided an empty string.
+    else {
+      // Update the local ground truths for all components.
+      await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+        updateGroundTruth.stop('Failed to update local ground truths');
+        console.error(error);
+        return process.exit(0);
+      });
+    }
+
+    // Inform the user that the local ground truths have been updated.
+    updateGroundTruth.stop('Updated local ground truths');
+  }
+
+  const buildCore = spinner();
+
+  // Inform the user that the core is being built.
+  buildCore.start('Building core');
+
+  /**
+   * Build core
+   * Otherwise, the uncommitted changes will not be reflected in the tests because:
+   * - popping the stash doesn't trigger a re-render even if `npm start` is running
+   * - app is not running the `npm start` command
+   */
+  await execAsync('npm run build').catch((error) => {
+    // Clean up the local ground truths.
+    cleanUpFiles();
+
+    buildCore.stop('Failed to build core');
+    console.error(error);
+    return process.exit(0);
+  });
+
+  buildCore.stop('Built core');
+
+  const runE2ETests = spinner();
+
+  // Inform the user that the E2E tests are being run.
+  runE2ETests.start('Running E2E tests');
+
+  // User provided a component value.
+  if (componentValue) {
+    await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
+      // Clean up the local ground truths.
+      cleanUpFiles();
+
+      runE2ETests.stop('Failed to run E2E tests');
+      console.error(error);
+      return process.exit(0);
+    });
+  } else {
+    await execAsync('npm run test.e2e.docker.ci').catch((error) => {
+      // Clean up the local ground truths.
+      cleanUpFiles();
+
+      runE2ETests.stop('Failed to run E2E tests');
+      console.error(error);
+      return process.exit(0);
+    });
+  }
+
+  runE2ETests.stop('Ran E2E tests');
+
+  // Clean up the local ground truths.
+  await cleanUpFiles();
+
+  // Ask user if they want to open the Playwright report.
+  const shouldOpenReport = await confirm({
+    message: 'Do you want to open the Playwright report?',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(shouldOpenReport)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  // User chose to open the Playwright report.
+  if (shouldOpenReport) {
+    // Use spawn to display the server information and the key to quit the server.
+    spawn('npx', ['playwright', 'show-report'], {
+      stdio: 'inherit',
+    });
+  } else {
+    // Inform the user that the Playwright report can be opened by running the following command.
+    log.info('If you change your mind, you can open the Playwright report by running the following command:');
+    log.info(color.bold('npx playwright show-report'));
+  }
+
+  if (shouldOpenReport) {
+    outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
+  } else {
+    outro("You're all set!");
+  }
+
+  await sleep(1000);
+}
+
+main().catch(console.error);
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/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() {
--- a/core/src/components/action-sheet/test/action-sheet-id.spec.ts
+++ b/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');
-});
--- a/core/src/components/action-sheet/test/action-sheet-id.spec.tsx
+++ b/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);
+  });
+});
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -341,7 +341,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
  }

  componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
    this.inputsChanged();
    this.buttonsChanged();
  }
--- a/core/src/components/alert/test/alert-id.spec.ts
+++ b/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');
-});
--- a/core/src/components/alert/test/alert-id.spec.tsx
+++ b/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);
+  });
+});
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -64,7 +64,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
  /**
   * If `true`, the user cannot interact with the item.
   */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;

  /**
   * This attribute instructs browsers to download a URL instead of navigating to
--- a/core/src/components/loading/loading.tsx
+++ b/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() {
--- a/core/src/components/loading/test/loading-id.spec.ts
+++ b/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');
-});
--- a/core/src/components/loading/test/loading-id.spec.tsx
+++ b/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);
+  });
+});
--- a/core/src/components/modal/modal.tsx
+++ b/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() {
--- a/core/src/components/modal/test/modal-id.spec.ts
+++ b/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');
-});
--- a/core/src/components/modal/test/modal-id.spec.tsx
+++ b/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);
+  });
+});
--- a/core/src/components/picker-legacy/picker.tsx
+++ b/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() {
--- a/core/src/components/picker-legacy/test/picker-id.spec.ts
+++ b/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');
-});
--- a/core/src/components/picker-legacy/test/picker-id.spec.tsx
+++ b/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);
+  });
+});
--- a/core/src/components/popover/popover.tsx
+++ b/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;

--- a/core/src/components/popover/test/popover-id.spec.ts
+++ b/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');
-});
--- a/core/src/components/popover/test/popover-id.spec.tsx
+++ b/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);
+  });
+});
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -72,7 +72,7 @@ input {
 */
 :host([slot="start"]),
 :host([slot="end"]) {
-  // Reset the flex property when the checkbox
+  // Reset the flex property when the radio
  // is slotted to avoid growing the element larger
  // than its content.
  flex: initial;
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -48,6 +48,7 @@ export class Refresher implements ComponentInterface {
  private pointerDown = false;
  private needsCompletion = false;
  private didRefresh = false;
+  private contentFullscreen = false;
  private lastVelocityY = 0;
  private elementToTransform?: HTMLElement;
  private animations: Animation[] = [];
@@ -476,6 +477,12 @@ export class Refresher implements ComponentInterface {
       * Query the background content element from the host ion-content element directly.
       */
      this.backgroundContentEl = await contentEl.getBackgroundElement();
+      /**
+       * Check if the content element is fullscreen to apply the correct styles
+       * when the refresher is refreshing. Otherwise, the refresher will be
+       * hidden because it is positioned behind the background content element.
+       */
+      this.contentFullscreen = contentEl.fullscreen;

      if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
        this.setupNativeRefresher(contentEl);
@@ -578,6 +585,15 @@ export class Refresher implements ComponentInterface {
    this.progress = 0;
    this.state = RefresherState.Inactive;
    this.memoizeOverflowStyle();
+
+    /**
+     * If the content is fullscreen, then we need to
+     * set the offset-top style on the background content
+     * element to ensure that the refresher is shown.
+     */
+    if (this.contentFullscreen && this.backgroundContentEl) {
+      this.backgroundContentEl.style.setProperty('--offset-top', '0px');
+    }
  }

  private onMove(detail: GestureDetail) {
@@ -735,6 +751,18 @@ export class Refresher implements ComponentInterface {
       * user can scroll again.
       */
      this.setCss(0, '0ms', false, '', true);
+
+      /**
+       * Reset the offset-top style on the background content
+       * when the refresher is no longer refreshing and the
+       * content is fullscreen.
+       *
+       * This ensures that the behavior of background content
+       * does not change when refreshing is complete.
+       */
+      if (this.contentFullscreen && this.backgroundContentEl) {
+        this.backgroundContentEl?.style.removeProperty('--offset-top');
+      }
    }, 600);

    // reset the styles on the scroll element
--- a/core/src/components/refresher/test/fullscreen/index.html
+++ b/core/src/components/refresher/test/fullscreen/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Refresher - Fullscreen</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>
+
+    <style>
+      ion-toolbar {
+        --opacity: 0.5;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pull To Refresh</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content fullscreen>
+        <ion-refresher id="refresher" slot="fixed">
+          <ion-refresher-content
+            pulling-icon="arrow-down-outline"
+            pulling-text="Pull to refresh..."
+            refreshing-text="Refreshing..."
+            refreshing-spinner="circles"
+          >
+          </ion-refresher-content>
+        </ion-refresher>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+          fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+          augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+          mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
+          mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
+          pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
+          aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
+          pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
+          malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+        </p>
+        <p>
+          Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+          Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+          odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+          vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+          odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+          Etiam lobortis tristique maximus.
+        </p>
+        <p>
+          Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+          tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+          et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+          faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+          venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+          sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+          molestie sed, pretium vitae turpis.
+        </p>
+        <p>
+          Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+          sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+          amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+          Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
+          condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
+          libero finibus at. Mauris condimentum fermentum rutrum.
+        </p>
+        <p>
+          Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+          mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
+          enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
+          justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
+          libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
+          vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+          neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+        </p>
+      </ion-content>
+    </ion-app>
+    <ion-menu-controller></ion-menu-controller>
+
+    <script>
+      const refresher = document.getElementById('refresher');
+
+      refresher.addEventListener('ionRefresh', () => {
+        setTimeout(() => {
+          refresher.complete();
+          // Custom event consumed by e2e tests
+          window.dispatchEvent(new CustomEvent('ionRefreshComplete'));
+        }, 500);
+      });
+    </script>
+  </body>
+</html>
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts
@@ -0,0 +1,84 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+import { pullToRefresh } from '../test.utils';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('refresher: fullscreen content'), () => {
+    test.beforeEach(async ({ page }) => {
+      /**
+       * Do not call `complete()` from `ion-refresher` in this test.
+       * This will allow the refresher to "pause" while refreshing.
+       * By pausing, the test can verify that the refresher is
+       * completely visible when the content is fullscreen.
+       */
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Pull To Refresh</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content fullscreen>
+            <ion-refresher id="refresher" slot="fixed">
+              <ion-refresher-content
+                pulling-icon="arrow-down-outline"
+                pulling-text="Pull to refresh..."
+                refreshing-text="Refreshing..."
+                refreshing-spinner="circles"
+              >
+              </ion-refresher-content>
+            </ion-refresher>
+
+            <p>Pull this content down to trigger the refresh.</p>
+          </ion-content>
+
+          <script>
+            const refresher = document.getElementById('refresher');
+
+            refresher.addEventListener('ionRefresh', () => {
+              setTimeout(() => {
+                // Custom event consumed by e2e tests
+                window.dispatchEvent(new CustomEvent('ionRefreshComplete'));
+              }, 500);
+            });
+          </script>
+        `,
+        config
+      );
+    });
+
+    // Bug only occurs with the legacy refresher.
+    test.describe('legacy refresher', () => {
+      test('should display when content is fullscreen', async ({ page, browserName }) => {
+        test.info().annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/18714',
+        });
+
+        const refresher = page.locator('ion-refresher');
+
+        await pullToRefresh(page);
+
+        if (browserName === 'firefox') {
+          /**
+           * The drag is highlighting the text in Firefox for
+           * some reason.
+           *
+           * Clicking the mouse will remove the highlight and
+           * be more consistent with other browsers. This
+           * does not happen in Firefox, just when running
+           * in Playwright.
+           */
+          await page.mouse.click(0, 0);
+        }
+
+        await expect(refresher).toHaveScreenshot(screenshot('refresher-legacy-content-fullscreen'));
+      });
+    });
+  });
+});
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/refresher/test/fullscreen/refresher.e2e.ts-snapshots/refresher-legacy-content-fullscreen-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -363,7 +363,7 @@ export class Searchbar implements ComponentInterface {
    this.ionClear.emit();

    return new Promise<void>((resolve) => {
-      // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+      // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
      // wait for 4 frames
      setTimeout(() => {
        const value = this.getValue();
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -100,7 +100,7 @@
 */
 :host([slot="start"]),
 :host([slot="end"]) {
-  // Reset the flex property when the checkbox
+  // Reset the flex property when the select
  // is slotted to avoid growing the element larger
  // than its content.
  flex: initial;
--- a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/toast/test/toast-id.spec.ts
+++ b/core/src/components/toast/test/toast-id.spec.ts
@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Toast } from '../toast';
-
-it('toast should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Toast],
-    html: `<ion-toast is-open="true"></ion-toast>`,
-  });
-  let toast: HTMLIonToastElement;
-
-  toast = page.body.querySelector('ion-toast')!;
-
-  expect(toast).not.toBe(null);
-  expect(toast.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the toast from the DOM
-  toast.remove();
-  await page.waitForChanges();
-
-  // Create a new toast to verify the id is incremented
-  toast = document.createElement('ion-toast');
-  toast.isOpen = true;
-  page.body.appendChild(toast);
-  await page.waitForChanges();
-
-  toast = page.body.querySelector('ion-toast')!;
-
-  expect(toast.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same toast again should reuse the existing id
-
-  toast.isOpen = false;
-  await page.waitForChanges();
-  toast.isOpen = true;
-  await page.waitForChanges();
-
-  toast = page.body.querySelector('ion-toast')!;
-
-  expect(toast.getAttribute('id')).toBe('ion-overlay-2');
-});
--- a/core/src/components/toast/test/toast-id.spec.tsx
+++ b/core/src/components/toast/test/toast-id.spec.tsx
@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Toast } from '../toast';
+import { h } from '@stencil/core';
+
+describe('toast: id', () => {
+  it('toast should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast is-open="true"></ion-toast>`,
+    });
+    let toast: HTMLIonToastElement;
+
+    toast = page.body.querySelector('ion-toast')!;
+
+    expect(toast).not.toBe(null);
+    expect(toast.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the toast from the DOM
+    toast.remove();
+    await page.waitForChanges();
+
+    // Create a new toast to verify the id is incremented
+    toast = document.createElement('ion-toast');
+    toast.isOpen = true;
+    page.body.appendChild(toast);
+    await page.waitForChanges();
+
+    toast = page.body.querySelector('ion-toast')!;
+
+    expect(toast.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same toast again should reuse the existing id
+
+    toast.isOpen = false;
+    await page.waitForChanges();
+    toast.isOpen = true;
+    await page.waitForChanges();
+
+    toast = page.body.querySelector('ion-toast')!;
+
+    expect(toast.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: [Toast],
+      template: () => <ion-toast htmlAttributes={{ id }} overlayIndex={-1}></ion-toast>,
+    });
+
+    const alert = page.body.querySelector('ion-toast')!;
+    expect(alert.id).toBe(id);
+  });
+});
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -321,7 +321,9 @@ export class Toast implements ComponentInterface, OverlayInterface {
  }

  componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
  }

  componentDidLoad() {
--- a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/toggle/toggle.ios.scss
+++ b/core/src/components/toggle/toggle.ios.scss
@@ -46,7 +46,7 @@

 .toggle-icon {
  // Needed to prevent visual glitch in safari/iOS
-  // See https://github.com/ionic-team/ionic/issues/14626
+  // See https://github.com/ionic-team/ionic-framework/issues/14626
  transform: translate3d(0, 0, 0);

  transition: background-color $toggle-ios-transition-duration;
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -53,7 +53,7 @@
 */
 :host([slot="start"]),
 :host([slot="end"]) {
-  // Reset the flex property when the checkbox
+  // Reset the flex property when the toggle
  // is slotted to avoid growing the element larger
  // than its content.
  flex: initial;
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -213,7 +213,7 @@ export const config: Config = {
    {
      type: 'docs-vscode',
      file: 'dist/html.html-data.json',
-      sourceCodeBaseUrl: 'https://github.com/ionic-team/ionic/tree/main/core/',
+      sourceCodeBaseUrl: 'https://github.com/ionic-team/ionic-framework/tree/main/core/',
    },
    {
      type: 'dist',
--- a/docs/component-guide.md
+++ b/docs/component-guide.md
@@ -384,9 +384,9 @@ ion-ripple-effect {

 ### Example Components

- [ion-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/button)
- [ion-back-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/back-button)
- [ion-menu-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/menu-button)
+- [ion-button](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/button)
+- [ion-back-button](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/back-button)
+- [ion-menu-button](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/menu-button)

 ### References

@@ -400,7 +400,7 @@ ion-ripple-effect {

 #### Example Components

- [ion-checkbox](https://github.com/ionic-team/ionic/tree/main/core/src/components/checkbox)
+- [ion-checkbox](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/checkbox)

 #### VoiceOver

@@ -479,7 +479,7 @@ render() {
    <Host>
      <label>
        {this.labelText}
-        <input type="checkbox" {...this.inheritedAttributes} /> 
+        <input type="checkbox" {...this.inheritedAttributes} />
      </label>
    </Host>
  )
@@ -511,7 +511,7 @@ This is a compromise we have to make in order for it to work with the other scre

 #### Example Components

- [ion-toggle](https://github.com/ionic-team/ionic/tree/main/core/src/components/toggle)
+- [ion-toggle](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/toggle)

 #### Voiceover

@@ -592,7 +592,7 @@ render() {
    <Host>
      <label>
        {this.labelText}
-        <input type="checkbox" role="switch" {...this.inheritedAttributes} /> 
+        <input type="checkbox" role="switch" {...this.inheritedAttributes} />
      </label>
    </Host>
  )
@@ -624,8 +624,8 @@ There is a WebKit bug open for this: https://bugs.webkit.org/show_bug.cgi?id=196

 #### Example Components

- [ion-accordion](https://github.com/ionic-team/ionic/tree/master/core/src/components/accordion)
- [ion-accordion-group](https://github.com/ionic-team/ionic/tree/master/core/src/components/accordion-group)
+- [ion-accordion](https://github.com/ionic-team/ionic-framework/tree/master/core/src/components/accordion)
+- [ion-accordion-group](https://github.com/ionic-team/ionic-framework/tree/master/core/src/components/accordion-group)

 #### NVDA

@@ -640,11 +640,11 @@ Certain components can render an `<a>` or a `<button>` depending on the presence

 ### Example Components

- [ion-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/button)
- [ion-card](https://github.com/ionic-team/ionic/tree/main/core/src/components/card)
- [ion-fab-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/fab-button)
- [ion-item-option](https://github.com/ionic-team/ionic/tree/main/core/src/components/item-option)
- [ion-item](https://github.com/ionic-team/ionic/tree/main/core/src/components/item)
+- [ion-button](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/button)
+- [ion-card](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/card)
+- [ion-fab-button](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/fab-button)
+- [ion-item-option](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/item-option)
+- [ion-item](https://github.com/ionic-team/ionic-framework/tree/main/core/src/components/item)

 ### Component Structure

--- a/docs/core/testing/usage-instructions.md
+++ b/docs/core/testing/usage-instructions.md
@@ -198,9 +198,19 @@ Instead, use the [Update Reference Screenshots GitHub Action](https://github.com

 1. Click the **Run workflow** dropdown.
 2. Select your branch.
-3. Click **Run workflow**.
+3. Leave the input field blank.
+4. Click **Run workflow**.

-This workflow will re-run the screenshot tests. Instead of failing any tests with mismatched screenshots, it will take new ground truth screenshots. These ground truth screenshots will be pushed as a single commit to your branch once the workflow is completed.
+This workflow will re-run all of the the screenshot tests. Instead of failing any tests with mismatched screenshots, it will take new ground truth screenshots. These ground truth screenshots will be pushed as a single commit to your branch once the workflow is completed.
+
+If you want to update ground truths for a specific test, you can pass the test file path as an input to the workflow. This is useful when working on a specific component.
+
+1. Click the **Run workflow** dropdown.
+2. Select your branch.
+3. Enter the file path in the input field. Example: `src/components/alert/test/basic/`
+4. Click **Run workflow**.
+
+The input field also accepts component names, such as `alert`. You can enter multiple components by separating them with spaces, for example, `alert button`. For a full list of options, refer to Playwright's [Command Line page](https://playwright.dev/docs/test-cli).

 ### Verifying Screenshot Differences

--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
    "core",
    "packages/*"
  ],
-  "version": "8.1.2"
-}
+  "version": "8.2.6"
+}
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [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/angular-server
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)

 **Note:** Version bump only for package @ionic/angular-server
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular-server",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "description": "Angular SSR Module for Ionic",
  "keywords": [
    "ionic",
@@ -17,7 +17,7 @@
    "url": "git+https://github.com/ionic-team/ionic-framework.git"
  },
  "bugs": {
-    "url": "https://github.com/ionic-team/ionic/issues"
+    "url": "https://github.com/ionic-team/ionic-framework/issues"
  },
  "publishConfig": {
    "directory": "dist"
@@ -32,7 +32,8 @@
    "lint": "eslint . --ext .ts && npm run prettier",
    "lint.fix": "eslint . --ext .ts --fix && npm run prettier.fix",
    "prettier": "prettier \"**/*.ts\" --check",
-    "prettier.fix": "prettier \"**/*.ts\" --write"
+    "prettier.fix": "prettier \"**/*.ts\" --write",
+    "sync": "sh ./scripts/sync.sh"
  },
  "peerDependencies": {
    "@angular/core": ">=16.0.0",
@@ -50,11 +51,10 @@
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/platform-server": "^16.0.0",
-    "@ionic/eslint-config": "^0.3.0",
+    "@ionic/eslint-config": "^0.4.0",
    "@ionic/prettier-config": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.2",
+    "@types/node": "^20.14.9",
+    "eslint": "^8.57.0",
    "ng-packagr": "^16.0.0",
    "prettier": "^2.4.1",
    "rxjs": "^7.8.0",
@@ -62,6 +62,6 @@
  },
  "prettier": "@ionic/prettier-config",
  "dependencies": {
-    "@ionic/core": "^8.1.2"
+    "@ionic/core": "^8.2.6"
  }
 }
--- a/packages/angular-server/scripts/sync.sh
+++ b/packages/angular-server/scripts/sync.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Pack @ionic/core
+npm pack ../../core
+
+# Install Dependencies
+npm install *.tgz --no-save
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,79 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **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)
+
+
+
+
+
+## [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/angular
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+
+### Features
+
+* **angular:** setting props on a signal works ([#29453](https://github.com/ionic-team/ionic-framework/issues/29453)) ([4640e04](https://github.com/ionic-team/ionic-framework/commit/4640e046ebbd35bf92737368c6262f79a8803a59)), closes [#28876](https://github.com/ionic-team/ionic-framework/issues/28876)
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)

 **Note:** Version bump only for package @ionic/angular
--- a/packages/angular/common/src/directives/navigation/nav-params.ts
+++ b/packages/angular/common/src/directives/navigation/nav-params.ts
@@ -19,7 +19,11 @@
 * ```
 */
 export class NavParams {
-  constructor(public data: { [key: string]: any } = {}) {}
+  constructor(public data: { [key: string]: any } = {}) {
+    console.warn(
+      `[Ionic Warning]: NavParams has been deprecated in favor of using Angular's input API. Developers should migrate to either the @Input decorator or the Signals-based input API.`
+    );
+  }

  /**
   * Get the value of a nav-parameter for the current view
--- a/packages/angular/common/src/overlays/modal.ts
+++ b/packages/angular/common/src/overlays/modal.ts
@@ -60,6 +60,7 @@ const MODAL_INPUTS = [
  'cssClass',
  'enterAnimation',
  'event',
+  'focusTrap',
  'handle',
  'handleBehavior',
  'initialBreakpoint',
--- a/packages/angular/common/src/overlays/popover.ts
+++ b/packages/angular/common/src/overlays/popover.ts
@@ -56,6 +56,7 @@ const POPOVER_INPUTS = [
  'dismissOnSelect',
  'enterAnimation',
  'event',
+  'focusTrap',
  'isOpen',
  'keyboardClose',
  'leaveAnimation',
--- a/packages/angular/common/src/providers/angular-delegate.ts
+++ b/packages/angular/common/src/providers/angular-delegate.ts
@@ -20,12 +20,15 @@ import {

 import { NavParams } from '../directives/navigation/nav-params';

+import { ConfigToken } from './config';
+
 // TODO(FW-2827): types

@Injectable()
 export class AngularDelegate {
  private zone = inject(NgZone);
  private applicationRef = inject(ApplicationRef);
+  private config = inject(ConfigToken);

  create(
    environmentInjector: EnvironmentInjector,
@@ -37,7 +40,8 @@ export class AngularDelegate {
      injector,
      this.applicationRef,
      this.zone,
-      elementReferenceKey
+      elementReferenceKey,
+      this.config.useSetInputAPI ?? false
    );
  }
 }
@@ -51,7 +55,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
    private injector: Injector,
    private applicationRef: ApplicationRef,
    private zone: NgZone,
-    private elementReferenceKey?: string
+    private elementReferenceKey?: string,
+    private enableSignalsSupport?: boolean
  ) {}

  attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
@@ -84,7 +89,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
          component,
          componentProps,
          cssClasses,
-          this.elementReferenceKey
+          this.elementReferenceKey,
+          this.enableSignalsSupport
        );
        resolve(el);
      });
@@ -121,7 +127,8 @@ export const attachView = (
  component: any,
  params: any,
  cssClasses: string[] | undefined,
-  elementReferenceKey: string | undefined
+  elementReferenceKey: string | undefined,
+  enableSignalsSupport: boolean | undefined
 ): any => {
  /**
   * Wraps the injector with a custom injector that
@@ -164,7 +171,38 @@ export const attachView = (
      );
    }

-    Object.assign(instance, params);
+    /**
+     * Angular 14.1 added support for setInput
+     * so we need to fall back to Object.assign
+     * for Angular 14.0.
+     */
+    if (enableSignalsSupport === true && componentRef.setInput !== undefined) {
+      const { modal, popover, ...otherParams } = params;
+      /**
+       * Any key/value pairs set in componentProps
+       * must be set as inputs on the component instance.
+       */
+      for (const key in otherParams) {
+        componentRef.setInput(key, otherParams[key]);
+      }
+
+      /**
+       * Using setInput will cause an error when
+       * setting modal/popover on a component that
+       * does not define them as an input. For backwards
+       * compatibility purposes we fall back to using
+       * Object.assign for these properties.
+       */
+      if (modal !== undefined) {
+        Object.assign(instance, { modal });
+      }
+
+      if (popover !== undefined) {
+        Object.assign(instance, { popover });
+      }
+    } else {
+      Object.assign(instance, params);
+    }
  }
  if (cssClasses) {
    for (const cssClass of cssClasses) {
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular",
-      "version": "8.1.2",
+      "version": "8.2.6",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^8.1.2",
+        "@ionic/core": "^8.2.6",
        "ionicons": "^7.0.0",
        "jsonc-parser": "^3.0.0",
        "tslib": "^2.3.0"
@@ -1398,11 +1398,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.1.2.tgz",
-      "integrity": "sha512-8XgkxYeW4xzULpL1MQbGPriCmcBjcfOMXoGdlpVb9i04AEoRO6MRAnBrL45zma+yLeFjCw3ld4NqqwktvmRVGw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "dependencies": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -2203,9 +2203,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz",
-      "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -9820,11 +9820,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.1.2.tgz",
-      "integrity": "sha512-8XgkxYeW4xzULpL1MQbGPriCmcBjcfOMXoGdlpVb9i04AEoRO6MRAnBrL45zma+yLeFjCw3ld4NqqwktvmRVGw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "requires": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -10375,9 +10375,9 @@
      }
    },
    "@stencil/core": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz",
-      "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@tootallnate/once": {
      "version": "2.0.0",
@@ -15020,4 +15020,4 @@
      }
    }
  }
-}
+}
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -20,7 +20,7 @@
    "url": "git+https://github.com/ionic-team/ionic-framework.git"
  },
  "bugs": {
-    "url": "https://github.com/ionic-team/ionic/issues"
+    "url": "https://github.com/ionic-team/ionic-framework/issues"
  },
  "homepage": "https://ionicframework.com/",
  "scripts": {
@@ -47,7 +47,7 @@
    }
  },
  "dependencies": {
-    "@ionic/core": "^8.1.2",
+    "@ionic/core": "^8.2.6",
    "ionicons": "^7.0.0",
    "jsonc-parser": "^3.0.0",
    "tslib": "^2.3.0"
--- a/packages/angular/src/ionic-module.ts
+++ b/packages/angular/src/ionic-module.ts
@@ -52,14 +52,18 @@ const DECLARATIONS = [
  IonMaxValidator,
 ];

+type OptInAngularFeatures = {
+  useSetInputAPI?: boolean;
+};
+
@NgModule({
  declarations: DECLARATIONS,
  exports: DECLARATIONS,
-  providers: [AngularDelegate, ModalController, PopoverController],
+  providers: [ModalController, PopoverController],
  imports: [CommonModule],
 })
 export class IonicModule {
-  static forRoot(config?: IonicConfig): ModuleWithProviders<IonicModule> {
+  static forRoot(config: IonicConfig & OptInAngularFeatures = {}): ModuleWithProviders<IonicModule> {
    return {
      ngModule: IonicModule,
      providers: [
@@ -73,6 +77,7 @@ export class IonicModule {
          multi: true,
          deps: [ConfigToken, DOCUMENT, NgZone],
        },
+        AngularDelegate,
        provideComponentInputBinding(),
      ],
    };
--- a/packages/angular/standalone/src/providers/ionic-angular.ts
+++ b/packages/angular/standalone/src/providers/ionic-angular.ts
@@ -8,7 +8,11 @@ import type { IonicConfig } from '@ionic/core/components';
 import { ModalController } from './modal-controller';
 import { PopoverController } from './popover-controller';

-export const provideIonicAngular = (config?: IonicConfig): EnvironmentProviders => {
+type OptInAngularFeatures = {
+  useSetInputAPI?: boolean;
+};
+
+export const provideIonicAngular = (config: IonicConfig & OptInAngularFeatures = {}): EnvironmentProviders => {
  return makeEnvironmentProviders([
    {
      provide: ConfigToken,
--- a/packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
+++ b/packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
@@ -1,5 +1,5 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";

 import { IonicModule } from "@ionic/angular";

@@ -23,7 +23,7 @@ let rootParamsException = false;
 })
 export class NavRootComponent {

-  params: any;
+  @Input() params: any = {};

  ngOnInit() {
    if (this.params === undefined) {
--- a/packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
+++ b/packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts
@@ -1,5 +1,5 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";

 import { IonicModule } from "@ionic/angular";

@@ -23,7 +23,7 @@ let rootParamsException = false;
 })
 export class NavRootComponent {

-  params: any;
+  @Input() params: any;

  ngOnInit() {
    if (this.params === undefined) {
--- a/packages/angular/test/apps/ng18/package-lock.json
+++ b/packages/angular/test/apps/ng18/package-lock.json
--- a/packages/angular/test/apps/ng18/package.json
+++ b/packages/angular/test/apps/ng18/package.json
@@ -19,16 +19,16 @@
    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
  },
  "dependencies": {
-    "@angular/animations": "^18.0.0-rc.0",
-    "@angular/common": "^18.0.0-rc.0",
-    "@angular/compiler": "^18.0.0-rc.0",
-    "@angular/core": "^18.0.0-rc.0",
-    "@angular/forms": "^18.0.0-rc.0",
-    "@angular/platform-browser": "^18.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "^18.0.0-rc.0",
-    "@angular/platform-server": "^18.0.0-rc.0",
-    "@angular/router": "^18.0.0-rc.0",
-    "@angular/ssr": "^18.0.0-rc.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/platform-server": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@angular/ssr": "^18.0.0",
    "@ionic/angular": "^8.0.0",
    "@ionic/angular-server": "^8.0.0",
    "core-js": "^3.33.2",
@@ -40,22 +40,22 @@
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0-rc.0",
-    "@angular-eslint/builder": "^17.0.0",
-    "@angular-eslint/eslint-plugin": "^17.0.0",
-    "@angular-eslint/eslint-plugin-template": "^17.0.0",
-    "@angular-eslint/schematics": "^17.0.0",
-    "@angular-eslint/template-parser": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^18.0.0-rc.0",
-    "@angular/language-service": "^18.0.0-rc.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular-eslint/builder": "^18.0.0",
+    "@angular-eslint/eslint-plugin": "^18.0.0",
+    "@angular-eslint/eslint-plugin-template": "^18.0.0",
+    "@angular-eslint/schematics": "^18.0.0",
+    "@angular-eslint/template-parser": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
    "@types/express": "^4.17.7",
    "@types/ws": "8.5.3",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "concurrently": "^6.0.0",
    "cypress": "^13.2.0",
-    "eslint": "^7.26.0",
+    "eslint": "^8.57.0",
    "ts-loader": "^6.2.2",
    "ts-node": "^8.3.0",
    "typescript": "^5.4.0",
--- a/packages/angular/test/base/e2e/src/lazy/popover.spec.ts
+++ b/packages/angular/test/base/e2e/src/lazy/popover.spec.ts
@@ -22,4 +22,14 @@ describe('Popovers: Inline', () => {
    cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
    cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
  });
+
+  it('should have an item with a disabled attribute', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
+    cy.wait(1500);
+
+    cy.get('ion-list ion-item:nth-child(3)').should('have.attr', 'disabled');
+  });
 });
--- a/packages/angular/test/base/scripts/sync.sh
+++ b/packages/angular/test/base/scripts/sync.sh
@@ -15,8 +15,7 @@ npm pack ../../../dist
 npm pack ../../../../angular-server/dist

 # Install Dependencies
-# TODO(FW-6227): Remove --legacy-peer-deps once Angular 18 is released
-npm install *.tgz --no-save --legacy-peer-deps
+npm install *.tgz --no-save

 # Delete Angular cache directory
 rm -rf .angular/
--- a/packages/angular/test/base/src/app/lazy/alert/alert.component.ts
+++ b/packages/angular/test/base/src/app/lazy/alert/alert.component.ts
@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { AlertController } from '@ionic/angular';
-import { NavComponent } from '../nav/nav.component';

@Component({
  selector: 'app-alert',
--- a/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
+++ b/packages/angular/test/base/src/app/lazy/home-page/home-page.component.html
@@ -57,5 +57,10 @@
        Accordions Test
      </ion-label>
    </ion-item>
+    <ion-item routerLink="/lazy/popover-inline">
+      <ion-label>
+        Popovers
+      </ion-label>
+    </ion-item>
  </ion-list>
 </ion-content>
--- a/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html
+++ b/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html
@@ -11,7 +11,7 @@
 <ion-content class="ion-padding">
  <h1>Value</h1>
  <h2>{{value}}</h2>
-  <h3>{{valueFromParams}}</h3>
+  <h3>{{prop}}</h3>
  <p>modal is defined: <span id="modalInstance">{{ !!modal }}</span></p>
  <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
  <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
--- a/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.ts
+++ b/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
+import { ModalController, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';

@Component({
  selector: 'app-modal-example',
@@ -9,12 +9,12 @@ import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDi
 export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {

  @Input() value?: string;
+  @Input() prop?: string;

  form = new UntypedFormGroup({
    select: new UntypedFormControl([])
  });

-  valueFromParams: string;
  onInit = 0;
  willEnter = 0;
  didEnter = 0;
@@ -25,11 +25,8 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte

  constructor(
    private modalCtrl: ModalController,
-    @Optional() public nav: IonNav,
-    navParams: NavParams
-  ) {
-    this.valueFromParams = navParams.get('prop');
-  }
+    @Optional() public nav: IonNav
+  ) {}

  ngOnInit() {
    NgZone.assertInAngularZone();
--- a/packages/angular/test/base/src/app/lazy/nav/nav.component.ts
+++ b/packages/angular/test/base/src/app/lazy/nav/nav.component.ts
@@ -1,6 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ModalExampleComponent } from '../modal-example/modal-example.component';
-import { NavParams } from '@ionic/angular';

@Component({
  selector: 'app-nav',
@@ -10,11 +9,13 @@ export class NavComponent {
  rootPage = ModalExampleComponent;
  rootParams: any;

-  constructor(
-    params: NavParams
-  ) {
+  @Input() value?: string;
+  @Input() prop?: string;
+
+  ngOnInit() {
    this.rootParams = {
-      ...params.data
+      value: this.value,
+      prop: this.prop
    };
  }
 }
--- a/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.html
+++ b/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.html
@@ -4,8 +4,8 @@
  <ng-template>
    <ion-content>
      <ion-list>
-        <ion-item *ngFor="let item of items">
-          <ion-label>{{ item }}</ion-label>
+        <ion-item *ngFor="let item of items" [button]="true" [disabled]="item.disabled">
+          <ion-label>{{ item.text }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
--- a/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts
+++ b/packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts
@@ -13,13 +13,13 @@ import { IonPopover } from "@ionic/angular";
 })
 export class PopoverInlineComponent {

-  items: string[] = [];
+  items: {text: string, disabled?: boolean}[] = [];

  openPopover(popover: IonPopover) {
    popover.present();

    setTimeout(() => {
-      this.items = ['A', 'B', 'C', 'D'];
+      this.items = [{text: 'A'}, {text: 'B'}, {text: 'C', disabled: true}, {text: 'D'}];
    }, 1000);
  }

--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [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/docs
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)

 **Note:** Version bump only for package @ionic/docs
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,13 +1,13 @@
 {
  "name": "@ionic/docs",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/docs",
-      "version": "8.1.2",
+      "version": "8.2.6",
      "license": "MIT"
    }
  }
-}
+}
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/docs",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "description": "Pre-packaged API documentation for the Ionic docs.",
  "main": "core.json",
  "types": "core.d.ts",
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [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/react-router
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)

 **Note:** Version bump only for package @ionic/react-router
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/react-router",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/react-router",
-      "version": "8.1.2",
+      "version": "8.2.6",
      "license": "MIT",
      "dependencies": {
-        "@ionic/react": "^8.1.2",
+        "@ionic/react": "^8.2.6",
        "tslib": "*"
      },
      "devDependencies": {
@@ -238,11 +238,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.1.2.tgz",
-      "integrity": "sha512-8XgkxYeW4xzULpL1MQbGPriCmcBjcfOMXoGdlpVb9i04AEoRO6MRAnBrL45zma+yLeFjCw3ld4NqqwktvmRVGw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "dependencies": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -414,11 +414,11 @@
      }
    },
    "node_modules/@ionic/react": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.1.2.tgz",
-      "integrity": "sha512-+sjd/0o1ScZ/jxNiEY8Kz1qp/OU7o/GAgBXbCpMKOjYwWhwfw2QMJz7QNfndUKLmaFv40/3DscATlB1QU/x4ag==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.5.tgz",
+      "integrity": "sha512-Iy5zM3R2InksH6Fh9AcBlgUGhz3YOV/2TDRvIdhT0wQIsDbCreAcGt8ST5x8YeKQPuChoDhmD2HQG9g7Fc9DhQ==",
      "dependencies": {
-        "@ionic/core": "8.1.2",
+        "@ionic/core": "8.2.5",
        "ionicons": "^7.0.0",
        "tslib": "*"
      },
@@ -667,9 +667,9 @@
      ]
    },
    "node_modules/@stencil/core": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.1.tgz",
-      "integrity": "sha512-WoRctLuXqoiLquS4EEvMoyLsbQ5+xuk8wp0+n4mYjoAoXy8NppXmMqKrMlFyYXL/zUI5ODS7U7IcLCpZ3IcKZQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -4057,11 +4057,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.1.2.tgz",
-      "integrity": "sha512-8XgkxYeW4xzULpL1MQbGPriCmcBjcfOMXoGdlpVb9i04AEoRO6MRAnBrL45zma+yLeFjCw3ld4NqqwktvmRVGw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.2.5.tgz",
+      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
      "requires": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "^4.19.2",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      }
@@ -4163,11 +4163,11 @@
      "requires": {}
    },
    "@ionic/react": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.1.2.tgz",
-      "integrity": "sha512-+sjd/0o1ScZ/jxNiEY8Kz1qp/OU7o/GAgBXbCpMKOjYwWhwfw2QMJz7QNfndUKLmaFv40/3DscATlB1QU/x4ag==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.2.5.tgz",
+      "integrity": "sha512-Iy5zM3R2InksH6Fh9AcBlgUGhz3YOV/2TDRvIdhT0wQIsDbCreAcGt8ST5x8YeKQPuChoDhmD2HQG9g7Fc9DhQ==",
      "requires": {
-        "@ionic/core": "8.1.2",
+        "@ionic/core": "8.2.5",
        "ionicons": "^7.0.0",
        "tslib": "*"
      }
@@ -4304,9 +4304,9 @@
      "optional": true
    },
    "@stencil/core": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.1.tgz",
-      "integrity": "sha512-WoRctLuXqoiLquS4EEvMoyLsbQ5+xuk8wp0+n4mYjoAoXy8NppXmMqKrMlFyYXL/zUI5ODS7U7IcLCpZ3IcKZQ=="
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.2.tgz",
+      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g=="
    },
    "@types/estree": {
      "version": "1.0.4",
@@ -6666,4 +6666,4 @@
      "dev": true
    }
  }
-}
+}
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react-router",
-  "version": "8.1.2",
+  "version": "8.2.6",
  "description": "React Router wrapper for @ionic/react",
  "keywords": [
    "ionic",
@@ -36,7 +36,7 @@
    "dist/"
  ],
  "dependencies": {
-    "@ionic/react": "^8.1.2",
+    "@ionic/react": "^8.2.6",
    "tslib": "*"
  },
  "peerDependencies": {
--- a/packages/react-router/test/apps/reactrouter5/package-lock.json
+++ b/packages/react-router/test/apps/reactrouter5/package-lock.json
@@ -16459,7 +16459,7 @@
        "postcss-value-parser": "^4.2.0"
      },
      "peerDependencies": {
-        "postcss": "^8.2.2"
+        "postcss": "^8.2.3"
      }
    },
    "node_modules/postcss-clamp": {
--- a/packages/react-router/test/base/tests/e2e/specs/dynamic-routes.cy.js
+++ b/packages/react-router/test/base/tests/e2e/specs/dynamic-routes.cy.js
@@ -1,7 +1,7 @@
 const port = 3000;
 /*
 This spec covers that routes can be added and navigated to at runtime.
-Fixes bug reported in https://github.com/ionic-team/ionic/issues/21329
+Fixes bug reported in https://github.com/ionic-team/ionic-framework/issues/21329
 */

 describe('Dynamic Routes', () => {
--- a/Show More
+++ b/Show More