v8.2.2

Issue number: N/A

---------

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

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

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

Devs would have to manually generate the ground truths from their
desired base branch. This causes a dev to checkout the base branch and
pull the latest screenshots. They would then return to their working
branch and start the E2E tests.

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

A script has been created to automate this process using Docker as
mentioned in the design doc:

- It will ask the user a set a questions like if which component they
want to test


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

How to test:
1. Make a change to a desired component
2. Run `npm run test.e2e.script`
3. Answer the questions
4. Verify that the tests fail due to visual changes
5. Re-run the command as many times as necessary in order to try
different routes based on different answers

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,7 +9,7 @@ body:
       label: Prerequisites
       description: Please ensure you have completed all of the following.
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
+        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
           required: true
         - label: I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
           required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -9,7 +9,7 @@ body:
       label: Prerequisites
       description: Please ensure you have completed all of the following.
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
+        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
           required: true
         - label: I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
           required: true

.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

.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

.github/workflows/conventional-commit.yml

@@ -24,3 +24,9 @@ jobs:
           # within the message.
           subjectPatternError: |
             The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.
+          # If the PR contains one of these newline-delimited labels, the
+          # validation is skipped. If you want to rerun the validation when
+          # labels change, you might want to use the `labeled` and `unlabeled`
+          # event triggers in your workflow.
+          ignoreLabels: |
+            release

CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* **many:** do not grow slotted checkboxes, radios, selects and toggles ([#29501](https://github.com/ionic-team/ionic-framework/issues/29501)) ([c63d07b](https://github.com/ionic-team/ionic-framework/commit/c63d07bdd0c4d9939474c52b03a3f2535511933f)), closes [#29423](https://github.com/ionic-team/ionic-framework/issues/29423)
+* **picker:** update keyboard navigation ([#29497](https://github.com/ionic-team/ionic-framework/issues/29497)) ([32bc681](https://github.com/ionic-team/ionic-framework/commit/32bc681192b1833f1c897e692d2d36ba90c6af53))
+
+
+
+
+
 ## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08)
 
 

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
 

core/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* **many:** do not grow slotted checkboxes, radios, selects and toggles ([#29501](https://github.com/ionic-team/ionic-framework/issues/29501)) ([c63d07b](https://github.com/ionic-team/ionic-framework/commit/c63d07bdd0c4d9939474c52b03a3f2535511933f)), closes [#29423](https://github.com/ionic-team/ionic-framework/issues/29423)
+* **picker:** update keyboard navigation ([#29497](https://github.com/ionic-team/ionic-framework/issues/29497)) ([32bc681](https://github.com/ionic-team/ionic-framework/commit/32bc681192b1833f1c897e692d2d36ba90c6af53))
+
+
+
+
+
 ## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08)
 
 

core/Dockerfile

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

core/README.md

@@ -96,7 +96,7 @@ const showModal = async () => {
 
 ## How to contribute
 
-[Check out the CONTRIBUTE guide](/.github/CONTRIBUTING.md)
+[Check out the CONTRIBUTE guide](/docs/CONTRIBUTING.md)
 
 ## Related
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.1.1",
+  "version": "8.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.1.1",
+      "version": "8.2.2",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.17.2",
@@ -19,6 +19,7 @@
         "@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",
@@ -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"
@@ -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,12 +1729,12 @@
       }
     },
     "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.44.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.43.1"
+        "playwright": "1.44.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1786,9 +1824,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.18.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
+      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ==",
       "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,12 +8260,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.44.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.44.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8240,9 +8278,9 @@
       }
     },
     "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.44.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -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.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "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": {
@@ -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.44.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
       "dev": true,
       "requires": {
-        "playwright": "1.43.1"
+        "playwright": "1.44.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11516,9 +11583,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz",
-      "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg=="
+      "version": "4.18.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
+      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ=="
     },
     "@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.44.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.44.1"
       }
     },
     "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.44.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
       "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.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
       "peer": true
     },
@@ -17678,4 +17745,4 @@
       "dev": true
     }
   }
-}
+}

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.1.1",
+  "version": "8.2.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -41,6 +41,7 @@
     "@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",
@@ -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": {

core/scripts/api-spec-generator.js

@@ -33,7 +33,7 @@ function generateComponent(component, content) {
     content.push(`${component.tag},event,${prop.event},${prop.detail},${prop.bubbles}`);
   });
   component.styles.forEach(prop => {
-    content.push(`${component.tag},css-prop,${prop.name}`);
+    content.push(`${component.tag},css-prop,${prop.name}${prop.mode ? ',' + prop.mode : ''}`);
   });
   component.parts.forEach(part => {
     content.push(`${component.tag},part,${part.name}`);

core/scripts/docker.mjs

@@ -53,4 +53,7 @@ if (requestHeaded && !hasHeadedConfigFiles) {
   console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
 }
 
-execa('docker', args, { shell: true, stdio: 'inherit' });
+const res = await execa('docker', args, { shell: true, stdio: 'inherit' });
+
+// If underlying scripts failed this whole process should fail too
+process.exit(res.exitCode);

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);

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

@@ -3,10 +3,11 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ config, title }) => {
   test.describe(title('accordion: a11y'), () => {
-    test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
-      // TODO(FW-1764): remove skip once issue is resolved
+    // TODO(ROU-8157): remove skip once the keyboard navigation is working again
+    test.skip('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
+      // TODO(ROU-5358): remove skip once issue is resolved
       skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
-      // TODO (FW-2979)
+      // TODO (ROU-5437)
       skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
 
       await page.goto(`/src/components/accordion/test/a11y`, config);

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

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Accordion - Basic</title>
+    <title>Accordion - Standalone</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
@@ -119,6 +119,7 @@
       outline: none;
       text-align: left;
       padding: 20px 16px;
+      color: black;
     }
 
     .custom-accordion-content {

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

@@ -180,7 +180,10 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('alert: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
+    test('should scale text on larger font sizes', async ({ page, skip }) => {
+      // TODO(ROU-8158): unskip this test when a solution is found
+      skip.browser('chromium', 'Rendering is flaky in Chrome.');
+
       await page.setContent(
         `
         <style>

core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts

@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, screenshot, t
       test('should update the active item', async ({ page }) => {
         const breadcrumbItems = page.locator('ion-breadcrumb');
 
-        const addItemButton = page.locator('ion-button#add-btn');
+        const addItemButton = page.locator('#add-btn');
 
         await expect(breadcrumbItems).toHaveCount(4);
 

core/src/components/checkbox/checkbox.scss

@@ -52,6 +52,11 @@
  */
 :host([slot="start"]),
 :host([slot="end"]) {
+  // Reset the flex property when the checkbox
+  // is slotted to avoid growing the element larger
+  // than its content.
+  flex: initial;
+
   width: auto;
 }
 

core/src/components/datetime/test/position/datetime.e2e.ts

@@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.goto('/src/components/datetime/test/position', config);
       const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
 
-      const openDateTimeBtn = page.locator('ion-button#open-datetime');
+      const openDateTimeBtn = page.locator('#open-datetime');
       await openDateTimeBtn.click();
 
       await ionPopoverDidPresent.next();

core/src/components/item/test/inputs/item.e2e.ts

@@ -200,3 +200,57 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('item: inputs'), () => {
+    test('should not shrink the width of a div next to a checkbox, radio, select or toggle', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29319',
+      });
+      await page.setContent(
+        `
+        <style>
+          .box {
+            background: lightgreen;
+
+            width: 60px;
+            height: 60px;
+          }
+        </style>
+
+        <ion-list lines="none">
+          <ion-item>
+            <div class="box"></div>
+            <ion-checkbox>Checkbox</ion-checkbox>
+          </ion-item>
+          <ion-item>
+            <div class="box"></div>
+            <ion-radio>Radio</ion-radio>
+          </ion-item>
+          <ion-item>
+            <div class="box"></div>
+            <ion-select label="Select">
+              <ion-select-option>Option</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <div class="box"></div>
+            <ion-toggle>Toggle</ion-toggle>
+          </ion-item>
+        </ion-list>
+      `,
+        config
+      );
+
+      const list = page.locator('ion-list');
+
+      await expect(list).toHaveScreenshot(screenshot(`item-inputs-div-with-inputs`));
+    });
+  });
+});

core/src/components/item/test/slotted-inputs/item.e2e.ts

@@ -12,3 +12,163 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('item: slotted inputs'), () => {
+    test.describe('checkbox', () => {
+      test('should not expand the slotted checkbox width larger than its content', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+        });
+
+        await page.setContent(
+          `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox slot="start"></ion-checkbox>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-checkbox slot="end"></ion-checkbox>
+            </ion-item>
+            <ion-item>
+              <ion-checkbox slot="start">Start</ion-checkbox>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-checkbox slot="end">End</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+          config
+        );
+
+        const list = page.locator('ion-list');
+
+        await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-checkbox`));
+      });
+    });
+    test.describe('radio', () => {
+      test('should not expand the slotted radio width larger than its content', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+        });
+
+        await page.setContent(
+          `
+          <ion-list>
+            <ion-item>
+              <ion-radio slot="start"></ion-radio>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-radio slot="end"></ion-radio>
+            </ion-item>
+            <ion-item>
+              <ion-radio slot="start">Start</ion-radio>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-radio slot="end">End</ion-radio>
+            </ion-item>
+          </ion-list>
+        `,
+          config
+        );
+
+        const list = page.locator('ion-list');
+
+        await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-radio`));
+      });
+    });
+    test.describe('select', () => {
+      test('should not expand the slotted select width larger than its content', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+        });
+
+        await page.setContent(
+          `
+          <ion-list>
+            <ion-item>
+              <ion-select slot="start">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-select slot="end">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select slot="start" label="Start">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-select slot="end" label="End">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        `,
+          config
+        );
+
+        const list = page.locator('ion-list');
+
+        await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-select`));
+      });
+    });
+    test.describe('toggle', () => {
+      test('should not expand the slotted toggle width larger than its content', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+        });
+
+        await page.setContent(
+          `
+          <ion-list>
+            <ion-item>
+              <ion-toggle slot="start"></ion-toggle>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-toggle slot="end"></ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle slot="start">Start</ion-toggle>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-toggle slot="end">End</ion-toggle>
+            </ion-item>
+          </ion-list>
+        `,
+          config
+        );
+
+        const list = page.locator('ion-list');
+
+        await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-toggle`));
+      });
+    });
+  });
+});

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

@@ -74,7 +74,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
 
       await ionLoadingDidPresent.next();
 
-      const button = page.locator('ion-loading ion-button');
+      const button = page.locator('ion-loading button');
 
       if (browserName === 'webkit') {
         await page.keyboard.down('Alt');

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

@@ -29,7 +29,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
     test('should trap focus', async ({ page, skip, browserName }) => {
       skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
-      // TODO (FW-2979)
+      // TODO (ROU-5437)
       skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
       const ionDidOpen = await page.spyOnEvent('ionDidOpen');
 

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

@@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await modal.evaluate((modal: HTMLIonModalElement) => {
         modal.remove();
-        document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal);
+        document.querySelector('button')?.insertAdjacentElement('afterend', modal);
       });
       await page.waitForChanges();
 

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

@@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
     test.describe('pushing a new page', () => {
       test('should render the pushed component', async ({ page }) => {
-        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
         const pageOne = page.locator('page-one');
         const pageTwo = page.locator('page-two');
 
@@ -32,7 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
 
       test('should render the back button', async ({ page }) => {
-        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
         const pageTwoBackButton = page.locator('page-two ion-back-button');
 
         await pageTwoButton.click();
@@ -45,7 +45,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test('back button should pop to the previous page', async ({ page }) => {
       const pageOne = page.locator('page-one');
       const pageTwo = page.locator('page-two');
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+      const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
       const pageTwoBackButton = page.locator('page-two ion-back-button');
 
       await pageTwoButton.click();
@@ -65,8 +65,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const pageTwo = page.locator('page-two');
         const pageThree = page.locator('page-three');
 
-        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-        const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+        const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
+        const pageThreeButton = page.locator('button:has-text("Go to Page Three")');
 
         await pageTwoButton.click();
         await page.waitForChanges();

core/src/components/nav/test/nested/nav.e2e.ts

@@ -16,8 +16,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const pageOne = page.locator('page-one');
       const pageTwo = page.locator('page-two');
 
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
-      const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+      const pageTwoButton = page.locator('button:has-text("Go to Page 2")');
+      const pageTwoTwoButton = page.locator('button:has-text("Go to Page 2.2")');
 
       await pageTwoButton.click();
       await page.waitForChanges();
@@ -35,7 +35,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(pageTwoOne).toHaveCount(1);
       await expect(pageTwoTwo).toBeVisible();
 
-      const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+      const pageThreeButton = page.locator('button:has-text("Go to Page 3")');
 
       await pageThreeButton.click();
       await page.waitForChanges();
@@ -49,8 +49,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
     test.describe('back button', () => {
       test('should work with nested ion-nav', async ({ page }) => {
-        const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
-        const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+        const pageTwoButton = page.locator('button:has-text("Go to Page 2")');
+        const pageTwoTwoButton = page.locator('button:has-text("Go to Page 2.2")');
 
         await pageTwoButton.click();
         await page.waitForChanges();
@@ -61,7 +61,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await pageTwoTwoButton.click();
         await page.waitForChanges();
 
-        const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+        const pageThreeButton = page.locator('button:has-text("Go to Page 3")');
         const pageThreeBackButton = page.locator('page-three ion-back-button');
 
         await pageThreeButton.click();

core/src/components/nav/test/routing/nav.e2e.ts

@@ -24,8 +24,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const pageOne = page.locator('page-one');
         const pageTwo = page.locator('page-two');
 
-        const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageOneButton = page.locator('button:has-text("Go to Page One")');
+        const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
 
         await pageOneButton.click();
         await page.waitForChanges();
@@ -45,7 +45,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
 
       test('should render the back button', async ({ page }) => {
-        const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+        const pageOneButton = page.locator('button:has-text("Go to Page One")');
         const pageOneBackButton = page.locator('page-one ion-back-button');
 
         await pageOneButton.click();
@@ -59,7 +59,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const pageRoot = page.locator('page-root');
       const pageOne = page.locator('page-one');
 
-      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+      const pageOneButton = page.locator('button:has-text("Go to Page One")');
       const pageOneBackButton = page.locator('page-one ion-back-button');
 
       await pageOneButton.click();
@@ -80,9 +80,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const pageTwo = page.locator('page-two');
         const pageThree = page.locator('page-three');
 
-        const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-        const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+        const pageOneButton = page.locator('button:has-text("Go to Page One")');
+        const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
+        const pageThreeButton = page.locator('button:has-text("Go to Page Three")');
 
         await pageOneButton.click();
         await page.waitForChanges();

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

@@ -212,8 +212,8 @@ export class PickerColumn implements ComponentInterface {
    */
   @Method()
   async setFocus() {
-    if (this.scrollEl) {
-      this.scrollEl.focus();
+    if (this.assistiveFocusable) {
+      this.assistiveFocusable.focus();
     }
   }
 
@@ -619,7 +619,7 @@ export class PickerColumn implements ComponentInterface {
     }
 
     if (newOption !== null) {
-      this.value = newOption.value;
+      this.setValue(newOption.value);
 
       // This stops any default browser behavior such as scrolling
       ev.preventDefault();
@@ -687,6 +687,25 @@ export class PickerColumn implements ComponentInterface {
           ref={(el) => {
             this.scrollEl = el;
           }}
+          /**
+           * When an element has an overlay scroll style and
+           * a fixed height, Firefox will focus the scrollable
+           * container if the content exceeds the container's
+           * dimensions.
+           *
+           * This causes keyboard navigation to focus to this
+           * element instead of going to the next element in
+           * the tab order.
+           *
+           * The desired behavior is for the user to be able to
+           * focus the assistive focusable element and tab to
+           * the next element in the tab order. Instead of tabbing
+           * to this element.
+           *
+           * To prevent this, we set the tabIndex to -1. This
+           * will match the behavior of the other browsers.
+           */
+          tabIndex={-1}
         >
           <div class="picker-item-empty" aria-hidden="true">
             &nbsp;

core/src/components/popover/test/trigger/popover.e2e.ts

@@ -40,7 +40,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await popover.evaluate((popover: HTMLIonPopoverElement) => {
         popover.remove();
-        document.querySelector('ion-button')?.insertAdjacentElement('afterend', popover);
+        document.querySelector('button')?.insertAdjacentElement('afterend', popover);
       });
       await page.waitForChanges();