v8.2.8

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@stencil/core](https://stenciljs.com/)
([source](https://togithub.com/ionic-team/stencil)) | [`4.20.0` ->
`4.21.0`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.20.0/4.21.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@stencil%2fcore/4.21.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@stencil%2fcore/4.21.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@stencil%2fcore/4.20.0/4.21.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@stencil%2fcore/4.20.0/4.21.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>ionic-team/stencil (@&#8203;stencil/core)</summary>

###
[`v4.21.0`](https://togithub.com/ionic-team/stencil/blob/HEAD/CHANGELOG.md#-4210-2024-08-26)

[Compare
Source](https://togithub.com/ionic-team/stencil/compare/v4.20.0...v4.21.0)

##### Bug Fixes

- **compiler:** default `asyncLoading` build conditional to `true`
([#&#8203;5941](https://togithub.com/ionic-team/stencil/issues/5941))
([0e261d6](0e261d653b)),
closes
[#&#8203;3580](https://togithub.com/ionic-team/stencil/issues/3580)
- **compiler:** prefer `localName` over `originalName` by running an
empty check on `originalName`
([#&#8203;5943](https://togithub.com/ionic-team/stencil/issues/5943))
([0f42656](0f42656f00)),
closes
[#&#8203;5882](https://togithub.com/ionic-team/stencil/issues/5882)
- **compiler:** verify parent node when validating component members
([#&#8203;5942](https://togithub.com/ionic-team/stencil/issues/5942))
([37a0aaf](37a0aaf176)),
closes
[#&#8203;5940](https://togithub.com/ionic-team/stencil/issues/5940)
- **runtime:** have fallback for style setting
([#&#8203;5948](https://togithub.com/ionic-team/stencil/issues/5948))
([ae19d7a](ae19d7ad73))
- **runtime:** only use setter if existing
([#&#8203;5947](https://togithub.com/ionic-team/stencil/issues/5947))
([7e9fa60](7e9fa60d76)),
closes
[#&#8203;2703](https://togithub.com/ionic-team/stencil/issues/2703)
- **runtime:** place scoped component styles after preconnect links but
before custom styles
([#&#8203;5938](https://togithub.com/ionic-team/stencil/issues/5938))
([8f92b11](8f92b11c19))
- **runtime:** provide second arg to `insertBefore`
([#&#8203;5933](https://togithub.com/ionic-team/stencil/issues/5933))
([afcc9a5](afcc9a5ee7))
- **runtime:** render component styles at the end of the head tag
([#&#8203;5926](https://togithub.com/ionic-team/stencil/issues/5926))
([90da726](90da726789)),
closes
[#&#8203;5915](https://togithub.com/ionic-team/stencil/issues/5915)
- **runtime:** update call to `prepend` to remove `null` node
([#&#8203;5946](https://togithub.com/ionic-team/stencil/issues/5946))
([970c5d2](970c5d25fb))
- **typescript:** fix documentation on 'serializeShadowRoot' flag
([#&#8203;5927](https://togithub.com/ionic-team/stencil/issues/5927))
([277e3e3](277e3e3573)),
closes
[#&#8203;5914](https://togithub.com/ionic-team/stencil/issues/5914)

##### Features

- **compiler:** allow ignore pattern for copy task
([#&#8203;5899](https://togithub.com/ionic-team/stencil/issues/5899))
([f89c6a3](f89c6a356b)),
closes
[#&#8203;5781](https://togithub.com/ionic-team/stencil/issues/5781)

#### 🚐
[4.20.0](https://togithub.com/ionic-team/stencil/compare/v4.19.2...v4.20.0)
(2024-08-02)

##### Bug Fixes

- **core:** add @&#8203;stencil/core/testing/jest-preset to export map
([#&#8203;5900](https://togithub.com/ionic-team/stencil/issues/5900))
([3def2b7](3def2b7e16)),
fixes
[#&#8203;5896](https://togithub.com/ionic-team/stencil/issues/5896)
- **compiler:** don't allow shadowRoot getter to avoid hydration issues
([#&#8203;5912](https://togithub.com/ionic-team/stencil/issues/5912))
([5dd4f7f](5dd4f7fb05))
- **compiler:** no need for commenting selectors anymore
([#&#8203;5892](https://togithub.com/ionic-team/stencil/issues/5892))
([d571bbb](d571bbbb68)),
fixes
[#&#8203;5880](https://togithub.com/ionic-team/stencil/issues/5880)
- **compiler:** respect project tsconfig watch options
([#&#8203;5916](https://togithub.com/ionic-team/stencil/issues/5916))
([74adeee](74adeee75a)),
closes
[#&#8203;5709](https://togithub.com/ionic-team/stencil/issues/5709),
fixes
[#&#8203;5709](https://togithub.com/ionic-team/stencil/issues/5709),
fixes
[#&#8203;5592](https://togithub.com/ionic-team/stencil/issues/5592)
- **compiler:** run copy task after other output targets
([#&#8203;5902](https://togithub.com/ionic-team/stencil/issues/5902))
([c3d4e8b](c3d4e8b170)),
fixes
[#&#8203;5592](https://togithub.com/ionic-team/stencil/issues/5592)
- **core:** add missing screenshot export
([#&#8203;5909](https://togithub.com/ionic-team/stencil/issues/5909))
([764a8ba](764a8bafde)),
fixes
[#&#8203;5906](https://togithub.com/ionic-team/stencil/issues/5906)
- **hydrate:** ensure beforeHydrateFn and afterHydrateFn always return a
function
([#&#8203;5890](https://togithub.com/ionic-team/stencil/issues/5890))
([a7c212c](a7c212c2a9)),
fixes
[#&#8203;5884](https://togithub.com/ionic-team/stencil/issues/5884)
- **runtime:** hydrate shadow dom first
([#&#8203;5911](https://togithub.com/ionic-team/stencil/issues/5911))
([ccf1a89](ccf1a8941f))
- **runtime:** make isSameVnode return false on initial render in a
hydration case
([#&#8203;5891](https://togithub.com/ionic-team/stencil/issues/5891))
([82a7bb9](82a7bb9ead))
- **testing:** update Jest types
([#&#8203;5910](https://togithub.com/ionic-team/stencil/issues/5910))
([5f8c969](5f8c9692d4)),
fixes
[#&#8203;5908](https://togithub.com/ionic-team/stencil/issues/5908)
- **core:** update TypeScript to v5.5
([#&#8203;5898](https://togithub.com/ionic-team/stencil/issues/5898))
([5e74837](5e748378fd))

##### Note

As we’ve made further enhancements to support declarative Shadow DOM,
the Stencil team has determined that it’s not feasible to allow users to
render a shadow component as a scoped component after compilation, such
as by calling `renderToString` with `serializeShadowRoot: false`. This
is because Stencil compiles styles for either shadow or scoped mode
during the compilation process, embedding these styles into the hydrate
module. Once this compilation is complete, the styles cannot be
transformed to support the other mode. Recognizing that this change
would impact the current functionality, the Stencil team has decided to
proceed with this update. Moving forward, we recommend serializing all
components marked with shadow: true as declarative Shadow DOM.

#### 🏉
[4.19.2](https://togithub.com/ionic-team/stencil/compare/v4.19.1...v4.19.2)
(2024-07-02)

##### Bug Fixes

- **hydrate:** partially revert
[#&#8203;5838](https://togithub.com/ionic-team/stencil/issues/5838)
([#&#8203;5876](https://togithub.com/ionic-team/stencil/issues/5876))
([dfbc340](dfbc34007a))
- **hydrate:** support server side rendering of components with listener
([#&#8203;5877](https://togithub.com/ionic-team/stencil/issues/5877))
([2c5b7f8](2c5b7f8ecb)),
fixes
[#&#8203;5869](https://togithub.com/ionic-team/stencil/issues/5869)
- **testing:** add testing sub module to export map
([#&#8203;5873](https://togithub.com/ionic-team/stencil/issues/5873))
([bb2e04f](bb2e04f488)),
fixes
[#&#8203;5871](https://togithub.com/ionic-team/stencil/issues/5871) and
[#&#8203;5868](https://togithub.com/ionic-team/stencil/issues/5868)

#### 🍈
[4.19.1](https://togithub.com/ionic-team/stencil/compare/v4.19.0...v4.19.1)
(2024-06-27)

##### Bug Fixes

- **compiler:** account for package imports in aliasing
([#&#8203;5862](https://togithub.com/ionic-team/stencil/issues/5862))
([02b41d3](02b41d3e64)),
fixes
[#&#8203;5859](https://togithub.com/ionic-team/stencil/issues/5859)
- **compiler:** try to create web worker with the workerPath before
falling back to blob
([#&#8203;3513](https://togithub.com/ionic-team/stencil/issues/3513))
([c84dd32](c84dd32499)),
fixes
[#&#8203;3512](https://togithub.com/ionic-team/stencil/issues/3512)
- **hydrate:** change type resolve order
([#&#8203;5863](https://togithub.com/ionic-team/stencil/issues/5863))
([42b1ff2](42b1ff2340))
- **internal:** add cli sub package to export map
([ad95222](ad95222bbd))
- **internal:** add mock-doc export in client runtime package.json
([ad95222](4ff9011b9d))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/ionic-team/ionic-framework).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC41Ni4wIiwidXBkYXRlZEluVmVyIjoiMzguNTYuMCIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.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

.github/workflows/assign-issues.yml

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

CHANGELOG.md

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

core/CHANGELOG.md

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

core/Dockerfile

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

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

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

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

core/package-lock.json

@@ -1,20 +1,20 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.2",
+  "version": "8.2.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.2.2",
+      "version": "8.2.8",
       "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.10.0",
         "@capacitor/core": "^6.0.0",
         "@capacitor/haptics": "^6.0.0",
         "@capacitor/keyboard": "^6.0.0",
@@ -22,13 +22,13 @@
         "@clack/prompts": "^0.7.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.39.0",
+        "@playwright/test": "^1.46.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.4",
-        "@stencil/react-output-target": "^0.5.3",
+        "@stencil/react-output-target": "^0.6.0",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.8.7",
+        "@stencil/vue-output-target": "^0.8.9",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -57,12 +57,12 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz",
-      "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz",
+      "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==",
       "dev": true,
       "dependencies": {
-        "axe-core": "~4.9.1"
+        "axe-core": "~4.10.0"
       },
       "peerDependencies": {
         "playwright-core": ">= 1.0.0"
@@ -661,36 +661,36 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz",
-      "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz",
-      "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
+      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz",
-      "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
+      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz",
-      "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
+      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
@@ -1693,6 +1693,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lit/react": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.5.tgz",
+      "integrity": "sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "17 || 18"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -1729,18 +1738,18 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
-      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
+      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.44.1"
+        "playwright": "1.46.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1824,9 +1833,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.18.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
-      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.21.0.tgz",
+      "integrity": "sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1836,12 +1845,16 @@
       }
     },
     "node_modules/@stencil/react-output-target": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
-      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.6.0.tgz",
+      "integrity": "sha512-DV2Y1sbsRMY5z57Pdu6OedKTC76sjhXQZMiRJTh7PMRezSu2cj86VlntQ20FrR39Ms79UkxTbF/a/0+huwZB9Q==",
       "dev": true,
+      "dependencies": {
+        "@lit/react": "^1.0.4",
+        "ts-morph": "^22.0.0"
+      },
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@stencil/core": ">=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/sass": {
@@ -1858,9 +1871,9 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
+      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -1879,6 +1892,42 @@
         "postcss-syntax": ">=0.36.2"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.23.0.tgz",
+      "integrity": "sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.3.2",
+        "minimatch": "^9.0.3",
+        "mkdirp": "^3.0.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.3",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
@@ -2014,6 +2063,24 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -2741,9 +2808,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
-      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -3589,6 +3656,12 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.2.tgz",
+      "integrity": "sha512-XfXzAGiStXSmCIwrkdfvc7FS5Dtj8yelCtyOf2p2skCAfvLd6zu0rGzuS9NSCO3bq1JKpFZ7tbKdKlcd5occQA==",
+      "dev": true
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -3775,6 +3848,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4791,9 +4871,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -7894,6 +7974,21 @@
         "node": ">= 6"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -8166,6 +8261,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "node_modules/path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
@@ -8260,33 +8361,33 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
-      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
+      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.44.1"
+        "playwright-core": "1.46.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
-      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
+      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/postcss": {
@@ -9720,6 +9821,16 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-morph": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-22.0.0.tgz",
+      "integrity": "sha512-M9MqFGZREyeb5fTl6gNHKZLqBQA0TjA1lea+CR48R8EBTDuWrNqW6ccC5QvjNR4s6wDumD3LTCjOFSp9iwlzaw==",
+      "dev": true,
+      "dependencies": {
+        "@ts-morph/common": "~0.23.0",
+        "code-block-writer": "^13.0.1"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -9810,9 +9921,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true,
       "peer": true,
       "bin": {
@@ -10294,12 +10405,12 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.1.tgz",
-      "integrity": "sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz",
+      "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==",
       "dev": true,
       "requires": {
-        "axe-core": "~4.9.1"
+        "axe-core": "~4.10.0"
       }
     },
     "@babel/code-frame": {
@@ -10741,32 +10852,32 @@
       "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.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
       }
     },
     "@capacitor/haptics": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz",
-      "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
+      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz",
-      "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
+      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz",
-      "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
+      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
       "dev": true,
       "requires": {}
     },
@@ -11483,6 +11594,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@lit/react": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.5.tgz",
+      "integrity": "sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==",
+      "dev": true,
+      "requires": {}
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -11510,12 +11628,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
-      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
+      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
       "dev": true,
       "requires": {
-        "playwright": "1.44.1"
+        "playwright": "1.46.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11583,16 +11701,19 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.18.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
-      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ=="
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.21.0.tgz",
+      "integrity": "sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw=="
     },
     "@stencil/react-output-target": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
-      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.6.0.tgz",
+      "integrity": "sha512-DV2Y1sbsRMY5z57Pdu6OedKTC76sjhXQZMiRJTh7PMRezSu2cj86VlntQ20FrR39Ms79UkxTbF/a/0+huwZB9Q==",
       "dev": true,
-      "requires": {}
+      "requires": {
+        "@lit/react": "^1.0.4",
+        "ts-morph": "^22.0.0"
+      }
     },
     "@stencil/sass": {
       "version": "3.0.9",
@@ -11602,9 +11723,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
+      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
       "dev": true,
       "requires": {}
     },
@@ -11617,6 +11738,38 @@
         "@babel/core": ">=7.9.0"
       }
     },
+    "@ts-morph/common": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.23.0.tgz",
+      "integrity": "sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.3.2",
+        "minimatch": "^9.0.3",
+        "mkdirp": "^3.0.1",
+        "path-browserify": "^1.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "@types/babel__core": {
       "version": "7.20.3",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
@@ -11752,6 +11905,24 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "dev": true,
+      "peer": true
+    },
+    "@types/react": {
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -12217,9 +12388,9 @@
       }
     },
     "axe-core": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
-      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
       "dev": true
     },
     "babel-jest": {
@@ -12792,6 +12963,12 @@
       "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
       "dev": true
     },
+    "code-block-writer": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.2.tgz",
+      "integrity": "sha512-XfXzAGiStXSmCIwrkdfvc7FS5Dtj8yelCtyOf2p2skCAfvLd6zu0rGzuS9NSCO3bq1JKpFZ7tbKdKlcd5occQA==",
+      "dev": true
+    },
     "collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -12938,6 +13115,13 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "peer": true
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -13712,9 +13896,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -15963,6 +16147,12 @@
         "kind-of": "^6.0.3"
       }
     },
+    "mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -16164,6 +16354,12 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
@@ -16234,19 +16430,19 @@
       }
     },
     "playwright": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
-      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
+      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.44.1"
+        "playwright-core": "1.46.1"
       }
     },
     "playwright-core": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
-      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
+      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
       "dev": true
     },
     "postcss": {
@@ -17317,6 +17513,16 @@
       "dev": true,
       "requires": {}
     },
+    "ts-morph": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-22.0.0.tgz",
+      "integrity": "sha512-M9MqFGZREyeb5fTl6gNHKZLqBQA0TjA1lea+CR48R8EBTDuWrNqW6ccC5QvjNR4s6wDumD3LTCjOFSp9iwlzaw==",
+      "dev": true,
+      "requires": {
+        "@ts-morph/common": "~0.23.0",
+        "code-block-writer": "^13.0.1"
+      }
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -17390,9 +17596,9 @@
       }
     },
     "typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true,
       "peer": true
     },

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.2.2",
+  "version": "8.2.8",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,12 +31,12 @@
     "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.10.0",
     "@capacitor/core": "^6.0.0",
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
@@ -44,13 +44,13 @@
     "@clack/prompts": "^0.7.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.46.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "^0.6.0",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.8.9",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

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

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

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

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

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

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

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

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

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

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

core/src/components/alert/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();
   }

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

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

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

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

core/src/components/content/content.tsx

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

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

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

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

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

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

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

core/src/components/item/item.tsx

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

core/src/components/loading/loading.tsx

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

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

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

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

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

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

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

core/src/components/modal/modal.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

core/src/components/popover/popover.tsx

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

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

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

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

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

core/src/components/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;

core/src/components/range/range.tsx

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

core/src/components/refresher/test/fullscreen/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Refresher - Basic</title>
+    <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"