v7.7.4

chore(deps): update dependency @capacitor/core to v5.7.1 (#29112 )
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@capacitor/core](https://capacitorjs.com) ([source](https://togithub.com/ionic-team/capacitor)) | [`5.7.0` -> `5.7.1`](https://renovatebot.com/diffs/npm/@capacitor%2fcore/5.7.0/5.7.1) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fcore/5.7.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@capacitor%2fcore/5.7.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@capacitor%2fcore/5.7.0/5.7.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fcore/5.7.0/5.7.1?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>ionic-team/capacitor (@capacitor/core)</summary> ### [`v5.7.1`](https://togithub.com/ionic-team/capacitor/releases/tag/5.7.1) [Compare Source](https://togithub.com/ionic-team/capacitor/compare/5.7.0...5.7.1) ##### Bug Fixes - **android:** handle http errors on the proxy ([#7297](https://togithub.com/ionic-team/capacitor/issues/7297)) ([279f198](279f1987e2)) - **android:** incorrect http url params encoding ([#7303](https://togithub.com/ionic-team/capacitor/issues/7303)) ([3857dad](3857dadaba)) - **android:** let WebView handle errors ([#7304](https://togithub.com/ionic-team/capacitor/issues/7304)) ([b71635c](b71635c32d)) - **android:** make JSInjector replace first <head> only ([#7249](https://togithub.com/ionic-team/capacitor/issues/7249)) ([1c45b81](1c45b8107b)) - **cli:** correct build path for non flavor builds ([#7281](https://togithub.com/ionic-team/capacitor/issues/7281)) ([#7290](https://togithub.com/ionic-team/capacitor/issues/7290)) ([9b71399](9b7139921e)) - **cli:** remove certificate file extension check on copy ([#7240](https://togithub.com/ionic-team/capacitor/issues/7240)) ([#7243](https://togithub.com/ionic-team/capacitor/issues/7243)) ([4650b4f](4650b4fb25)) - **http:** handle proxy urls with port ([#7298](https://togithub.com/ionic-team/capacitor/issues/7298)) ([00b7abf](00b7abffdb)) - **http:** route get requests through custom handler ([#7295](https://togithub.com/ionic-team/capacitor/issues/7295)) ([30eb6f7](30eb6f7c01)) </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. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2026-03-13 10:22:08 +08:00 · 2024-03-06 18:04:51 +00:00 · 2024-03-05 23:28:01 +00:00 · 2024-03-05 09:49:21 +00:00 · 2024-03-04 15:32:52 +00:00 · 2024-03-01 19:43:28 +00:00
353 changed files with 2605 additions and 2688 deletions
--- a/.github/COMPONENT-GUIDE.md
+++ b/.github/COMPONENT-GUIDE.md
@@ -93,6 +93,11 @@ The following styles should be set for the CSS to work properly. Note that the `

 The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.

+> [!WARNING]
+>`:active` should not be used here as it is not received on mobile Safari unless the element has a `touchstart` listener (which we don't necessarily want to have to add to every element). From [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html):
+>
+>> On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the `:active` pseudo state is triggered only when there is a touch event set on the HTML element
+
 > Make sure the component has the correct [component structure](#component-structure) before continuing.

 #### JavaScript
@@ -109,7 +114,7 @@ render() {
 }
 ```

-Once that is done, the element will get the `ion-activated` class added on press.
+Once that is done, the element will get the `ion-activated` class added on press after a small delay. This delay exists so that the active state does not show up when an activatable element is tapped while scrolling.

 In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:

@@ -212,7 +217,13 @@ TODO

 ### Focused

-The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
+The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element. 
+
+> [!WARNING]
+> Do not use `:focus` because that will cause the focus to apply even when an element is tapped (because the element is now focused). Instead, we only want the focus state to be shown when it makes sense which is what the `.ion-focusable` utility mentioned below does.
+
+> [!NOTE]
+> The [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo-class mostly does the same thing as our JavaScript-driven utility. However, it does not work well with Shadow DOM components as the element that receives focus is typically inside of the Shadow DOM, but we usually want to set the `:focus-visible` state on the host so we can style other parts of the component. Using other combinations such as `:has(:focus-visible)` does not work because `:has` does not pierce the Shadow DOM (as that would leak implementation details about the Shadow DOM contents). `:focus-within` does work with the Shadow DOM, but that has the same problem as `:focus` that was mentioned before. Unfortunately, a [`:focus-visible-within` pseudo-class does not exist yet](https://github.com/WICG/focus-visible/issues/151).

 > Make sure the component has the correct [component structure](#component-structure) before continuing.

@@ -275,7 +286,10 @@ ion-button {

 ### Hover

-The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
+The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover. 
+
+> [!NOTE]
+> Some Android devices [incorrectly report their inputs](https://issues.chromium.org/issues/40855702) which can result in certain devices receiving hover events when they should not.

 > Make sure the component has the correct [component structure](#component-structure) before continuing.

--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,20 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/core"
-    schedule:
-      interval: "daily"
-    versioning-strategy: increase
-    allow:
-      - dependency-name: "@playwright/test"
-      - dependency-name: "@axe-core/playwright"
-      - dependency-name: "@stencil/angular-output-target"
-      - dependency-name: "@stencil/core"
-      - dependency-name: "@stencil/react-output-target"
-      - dependency-name: "@stencil/sass"
-      - dependency-name: "@stencil/vue-output-target"
-      - dependency-name: "ionicons"
-      - dependency-name: "@capacitor/core"
-      - dependency-name: "@capacitor/keyboard"
-      - dependency-name: "@capacitor/haptics"
-      - dependency-name: "@capacitor/status-bar"
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x

--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -8,8 +8,8 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x

@@ -22,7 +22,7 @@ runs:
      run: npm i @stencil/core@${{ inputs.stencil-version }}
      shell: bash
    - name: Build Core
-      run: npm run build -- --ci
+      run: npm run build -- --ci --debug --verbose
      working-directory: ./core
      shell: bash
    - uses: ./.github/workflows/actions/upload-archive
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -8,8 +8,8 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - name: Install Dependencies
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/download-archive/action.yml
+++ b/.github/workflows/actions/download-archive/action.yml
@@ -10,7 +10,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
      with:
        name: ${{ inputs.name }}
        path: ${{ inputs.path }}
--- a/.github/workflows/actions/publish-npm/action.yml
+++ b/.github/workflows/actions/publish-npm/action.yml
@@ -19,7 +19,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    # Provenance requires npm 9.5.0+
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x

--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Lint'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - name: Install Dependencies
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -7,11 +7,13 @@ inputs:
    description: 'Playwright total number of test shards (ex: 4)'
  update:
    description: 'Whether or not to update the reference snapshots'
+  component:
+    description: 'The component to update the reference snapshots'

 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
@@ -23,9 +25,29 @@ runs:
      run: npm install && npx playwright install && npx playwright install-deps
      shell: bash
      working-directory: ./core
+    - id: clean-component-name
+      name: Clean Component Name
+      # Remove `ion-` prefix from the `component` variable if it exists.
+      run: |
+        echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//g')" >> $GITHUB_OUTPUT
+      shell: bash
+    - id: set-test-file
+      name: Set Test File
+      # Screenshots can be updated for all components or specified component(s).
+      # If the `component` variable is set, then the test has the option to
+      # - run all the file paths that are in a component folder.
+      # -- For example: if the `component` value is "item", then the test will run all the file paths that are in the "src/components/item" folder.
+      # -- For example: if the `component` value is "item chip", then the test will run all the file paths that are in the "src/components/item" and "src/components/chip" folders.
+      run: |
+        if [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then
+          echo "testFile=\$(echo '${{ steps.clean-component-name.outputs.component }}' | awk '{for(i=1;i<=NF;i++) \$i=\"src/components/\"\$i}1')" >> $GITHUB_OUTPUT
+        else
+          echo "testFile=$(echo '')" >> $GITHUB_OUTPUT
+        fi
+      shell: bash
    - name: Test
      if: inputs.update != 'true'
-      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
      shell: bash
      working-directory: ./core
    - name: Test and Update
@@ -47,7 +69,7 @@ runs:
      # which is why we not using the upload-archive
      # composite step here.
      run: |
-        npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
        git add src/\*.png --force
        mkdir updated-screenshots
        cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
@@ -60,7 +82,7 @@ runs:
      working-directory: ./core
    - name: Archive Updated Screenshots
      if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
      with:
        name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
        path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - name: Install Dependencies
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -7,10 +7,10 @@ on:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
      with:
        path: ./artifacts
    - name: Extract Archives
--- a/.github/workflows/actions/upload-archive/action.yml
+++ b/.github/workflows/actions/upload-archive/action.yml
@@ -13,7 +13,7 @@ runs:
    - name: Create Archive
      run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
      shell: bash
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
      with:
        name: ${{ inputs.name }}
        path: ${{ inputs.output }}
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -0,0 +1,18 @@
+name: Assign issues to triage
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  auto-assign:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: 'Auto-assign issue'
+        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
+        with:
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          numOfAssignee: 1
+          allowSelfAssign: false
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
  build-core:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/build-core
        with:
          ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-clean-build

  test-core-lint:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-lint

  test-core-spec:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-spec

  test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-screenshot
        with:
          shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-vue

  build-vue-router:
    needs: [build-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-vue-router

  test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
    needs: [build-vue, build-vue-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-vue-e2e
      with:
        app: ${{ matrix.apps }}
@@ -126,14 +126,14 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-angular

  build-angular-server:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-angular-server

  test-angular-e2e:
@@ -144,7 +144,7 @@ jobs:
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-angular-e2e
      with:
        app: ${{ matrix.apps }}
@@ -162,14 +162,14 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-react

  build-react-router:
    needs: [build-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-react-router

  test-react-router-e2e:
@@ -180,7 +180,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-react-router-e2e
      with:
        app: ${{ matrix.apps }}
@@ -202,7 +202,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-react-e2e
      with:
        app: ${{ matrix.apps }}
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -14,8 +14,8 @@ jobs:
    permissions:
      security-events: write
    steps:
-      - uses: actions/checkout@v3
-      - uses: github/codeql-action/init@v2
+      - uses: actions/checkout@v4
+      - uses: github/codeql-action/init@v3
        with:
          languages: javascript
-      - uses: github/codeql-action/analyze@v2
+      - uses: github/codeql-action/analyze@v3
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -9,7 +9,7 @@ jobs:
    outputs:
      dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      # A 1 is required before the timestamp
      # as lerna will fail when there is a leading 0
      # See https://github.com/lerna/lerna/issues/2840
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -12,7 +12,7 @@ jobs:
    outputs:
      nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      # A 1 is required before the timestamp
      # as lerna will fail when there is a leading 0
      # See https://github.com/lerna/lerna/issues/2840
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -22,7 +22,7 @@ jobs:
  release-core:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/publish-npm
      with:
        scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/docs built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -68,7 +68,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -95,7 +95,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -121,7 +121,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -147,7 +147,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -168,7 +168,7 @@ jobs:
    needs: [release-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -194,7 +194,7 @@ jobs:
    needs: [release-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -50,7 +50,7 @@ jobs:
    needs: [release-ionic]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
      with:
        token: ${{ secrets.IONITRON_TOKEN }}
        fetch-depth: 0
@@ -78,7 +78,7 @@ jobs:
    needs: [finalize-release]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        # Pull the latest version of the reference
        # branch instead of the revision that triggered
        # the workflow otherwise we won't get the commit
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -26,7 +26,7 @@ jobs:
  build-core-with-stencil-nightly:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
        with:
          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-clean-build

  test-core-lint:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-lint

  test-core-spec:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-spec
        with:
          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-screenshot
        with:
          shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-vue

  build-vue-router:
    needs: [build-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-vue-router

  test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
    needs: [build-vue, build-vue-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-vue-e2e
      with:
        app: ${{ matrix.apps }}
@@ -136,25 +136,25 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-angular

  build-angular-server:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-angular-server

  test-angular-e2e:
    strategy:
      fail-fast: false
      matrix:
-        apps: [ng12, ng13, ng14, ng15]
+        apps: [ng16, ng17]
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-angular-e2e
      with:
        app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-react

  build-react-router:
    needs: [build-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/build-react-router

  test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-react-router-e2e
      with:
        app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
    - uses: ./.github/workflows/actions/test-react-e2e
      with:
        app: ${{ matrix.apps }}
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -2,12 +2,17 @@ name: 'Update Reference Screenshots'

 on:
  workflow_dispatch:
+    inputs:
+      component:
+        description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)'
+        required: false
+        default: ''

 jobs:
  build-core:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/build-core

  test-core-screenshot:
@@ -28,18 +33,19 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: ./.github/workflows/actions/test-core-screenshot
        with:
          shard: ${{ matrix.shard }}
          totalShards: ${{ matrix.totalShards }}
          update: true
+          component: ${{ inputs.component }}

  update-reference-screenshots:
    runs-on: ubuntu-latest
    needs: [test-core-screenshot]
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        # Normally, we could just push with the
        # default GITHUB_TOKEN, but that will
        # not cause the build workflow
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
+
+
+### Bug Fixes
+
+* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd))
+
+
+
+
+
+## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
+
+
+### Bug Fixes
+
+* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
+* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
+
+
+
+
+
+## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
+
+
+### Bug Fixes
+
+* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
+* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
+* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
+
+
+
+
+
+## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
+* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
+* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
+* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
+
+
+
+
+
+# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
+
+
+### Features
+
+* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
+
+
+
+
+
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)


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

+## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
+
+
+### Bug Fixes
+
+* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd))
+
+
+
+
+
+## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
+
+
+### Bug Fixes
+
+* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
+* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
+
+
+
+
+
+## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
+
+
+### Bug Fixes
+
+* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
+* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
+* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
+
+
+
+
+
+## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
+* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
+* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
+
+
+
+
+
+# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
+
+
+### Features
+
+* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
+
+
+
+
+
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)


--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.7.4",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,24 +31,24 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.10.0",
+    "@stencil/core": "^4.12.2",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.8.3",
-    "@capacitor/core": "^5.6.0",
-    "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.7",
-    "@capacitor/status-bar": "^5.0.6",
+    "@axe-core/playwright": "^4.8.5",
+    "@capacitor/core": "^5.7.0",
+    "@capacitor/haptics": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.8",
+    "@capacitor/status-bar": "^5.0.7",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
    "@playwright/test": "^1.39.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.3",
+    "@stencil/angular-output-target": "^0.8.4",
    "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.8",
+    "@stencil/sass": "^3.0.9",
    "@stencil/vue-output-target": "^0.8.7",
    "@types/jest": "^29.5.6",
    "@types/node": "^14.6.0",
@@ -64,7 +64,6 @@
    "jest": "^29.7.0",
    "jest-cli": "^29.7.0",
    "prettier": "^2.6.1",
-    "puppeteer": "21.1.1",
    "rollup": "^2.26.4",
    "sass": "^1.33.0",
    "serve": "^14.0.1",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -160,7 +160,7 @@ export namespace Components {
        /**
          * Dismiss the action sheet overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -239,7 +239,7 @@ export namespace Components {
        /**
          * Dismiss the alert overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -1527,7 +1527,7 @@ export namespace Components {
        /**
          * Dismiss the loading overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -1720,7 +1720,7 @@ export namespace Components {
        /**
          * Dismiss the modal overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
+          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -1973,7 +1973,7 @@ export namespace Components {
        /**
          * Dismiss the picker overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -2110,7 +2110,7 @@ export namespace Components {
          * Dismiss the popover overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
-          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
        /**
@@ -3111,7 +3111,7 @@ export namespace Components {
        /**
          * Dismiss the toast overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -382,7 +382,10 @@ export class Accordion implements ComponentInterface {
  };

  private toggleExpanded() {
-    const { accordionGroupEl, value, state } = this;
+    const { accordionGroupEl, disabled, readonly, value, state } = this;
+
+    if (disabled || readonly) return;
+
    if (accordionGroupEl) {
      /**
       * Because the accordion group may or may
--- a/core/src/components/accordion/test/a11y/index.html
+++ b/core/src/components/accordion/test/a11y/index.html
@@ -23,28 +23,22 @@

            <ion-list slot="content">
              <ion-item>
-                <ion-label>Name</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Name" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Email</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Email" type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Phone</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="Phone" type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Extension</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Extension" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Country</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Country" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>City/Province</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="City/Province" type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
@@ -56,24 +50,19 @@

            <ion-list slot="content">
              <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Address 1" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="State" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
@@ -85,24 +74,19 @@

            <ion-list slot="content">
              <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input id="address1" type="text"></ion-input>
+                <ion-input label="Address 1" id="address1" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input lable="State" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
--- a/core/src/components/accordion/test/accordion.e2e.ts
+++ b/core/src/components/accordion/test/accordion.e2e.ts
@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: states'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-    });
-    test('should properly set readonly on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('readonly', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.readonly = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('readonly', true);
-    });
-
-    test('should properly set disabled on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('disabled', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.disabled = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('disabled', true);
-    });
-  });
-});
--- a/core/src/components/accordion/test/disabled/accordion.e2e.ts
+++ b/core/src/components/accordion/test/disabled/accordion.e2e.ts
@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: disabled'), () => {
+    test('should properly set disabled on child accordions', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('disabled', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.disabled = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('disabled', true);
+    });
+
+    test('should not open accordion on click when group is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" disabled>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion on click when accordion is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion disabled>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when group is disabled', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" disabled>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when accordion is disabled', async ({
+      page,
+      browserName,
+    }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion disabled>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+  });
+});
--- a/core/src/components/accordion/test/disabled/index.html
+++ b/core/src/components/accordion/test/disabled/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - Disabled</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" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <ion-header collapse="condense">
+          <ion-toolbar color="light">
+            <ion-title size="large">Accordion - Disabled</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <ion-accordion-group>
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second" disabled="true">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion (Disabled)</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion-group disabled="true">
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion value="second" disabled="true">
+              <ion-item slot="header" color="light">
+                <ion-label>Accordion Without Group (Disabled)</ion-label>
+              </ion-item>
+              <div class="ion-padding" slot="content">Second Content</div>
+            </ion-accordion>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/accordion/test/readonly/accordion.e2e.ts
+++ b/core/src/components/accordion/test/readonly/accordion.e2e.ts
@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: readonly'), () => {
+    test('should properly set readonly on child accordions', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('readonly', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.readonly = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('readonly', true);
+    });
+
+    test('should not open accordion on click when group is readonly', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion on click when accordion is readonly', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when group is readonly', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when accordion is readonly', async ({
+      page,
+      browserName,
+    }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+  });
+});
--- a/core/src/components/accordion/test/readonly/index.html
+++ b/core/src/components/accordion/test/readonly/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - Readonly</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" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - Readonly</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <ion-header collapse="condense">
+          <ion-toolbar color="light">
+            <ion-title size="large">Accordion - Readonly</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <ion-accordion-group>
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second" readonly="true">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion (Readonly)</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion-group readonly="true">
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion value="second" readonly="true">
+              <ion-item slot="header" color="light">
+                <ion-label>Accordion Without Group (Readonly)</ion-label>
+              </ion-item>
+              <div class="ion-padding" slot="content">Second Content</div>
+            </ion-accordion>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';

 export interface ActionSheetOptions {
  header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {

 export interface ActionSheetButton<T = any> {
  text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
  icon?: string;
  cssClass?: string | string[];
  id?: string;
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -26,7 +26,24 @@
 // ---------------------------------------------------

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

 // iOS Action Sheet Container
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -216,6 +216,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   * This can be useful in a button handler for determining which button was
   * clicked to dismiss the action sheet.
   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
   */
  @Method()
  async dismiss(data?: any, role?: string): Promise<boolean> {
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';

 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };

 export interface AlertButton {
  text: string;
-  role?: 'cancel' | 'destructive' | string;
+  role?: LiteralUnion<'cancel' | 'destructive', string>;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -411,6 +411,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
   * This can be useful in a button handler for determining which button was
   * clicked to dismiss the alert.
   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
   */
  @Method()
  async dismiss(data?: any, role?: string): Promise<boolean> {
--- a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,6 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
 import type { FocusVisibleUtility } from '@utils/focus-visible';
+import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
+import { printIonWarning } from '@utils/logging';
 import { isPlatform } from '@utils/platform';

 import { config } from '../../global/config';
@@ -34,9 +36,20 @@ export class App implements ComponentInterface {
          import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
        }
        const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-        if (config.getBoolean('hardwareBackButton', isHybrid)) {
+        const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+        if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
          hardwareBackButtonModule.startHardwareBackButton();
        } else {
+          /**
+           * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+           * then the close watcher will not be used.
+           */
+          if (shoudUseCloseWatcher()) {
+            printIonWarning(
+              'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
+            );
+          }
+
          hardwareBackButtonModule.blockHardwareBackButton();
        }
        if (typeof (window as any) !== 'undefined') {
--- a/core/src/components/button/test/basic/button.e2e.ts
+++ b/core/src/components/button/test/basic/button.e2e.ts
@@ -57,7 +57,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
        await page.mouse.down();
      }

-      await page.waitForSelector('#default.ion-activated');
+      await page.locator('#default.ion-activated').waitFor();

      await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
    });
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
@@ -15,7 +15,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
    });
    test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
      const datetime = page.locator('ion-datetime');
@@ -45,7 +45,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
      await expect(page.locator('#time-button')).toContainText('6:30 AM');
@@ -58,7 +58,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('January 2022');
      await expect(page.locator('#time-button')).toBeHidden();
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('2022');
      await expect(page.locator('#time-button')).toBeHidden();
@@ -84,7 +84,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('January');
      await expect(page.locator('#time-button')).toBeHidden();
@@ -97,7 +97,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#time-button')).toContainText('6:30 AM');
      await expect(page.locator('#date-button')).toBeHidden();
@@ -110,7 +110,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      const dateTarget = page.locator('#date-button');
@@ -135,7 +135,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('January 2022');
      await expect(page.locator('#time-button')).toBeHidden();
@@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('2022');
      await expect(page.locator('#time-button')).toBeHidden();
@@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      /**
       * The entire text reads 1 ene 2022, but some browsers will add
@@ -187,7 +187,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#time-button')).toContainText('16:30');
    });
@@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const timeTarget = page.locator('#time-button');
      await expect(timeTarget).toContainText('6:30');
@@ -223,7 +223,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
      await expect(page.locator('#time-button')).not.toBeVisible();
@@ -238,7 +238,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
      await expect(page.locator('#time-button')).not.toBeVisible();
--- a/core/src/components/datetime-button/test/buttons/index.html
+++ b/core/src/components/datetime-button/test/buttons/index.html
@@ -18,7 +18,7 @@
      </ion-header>
      <ion-content>
        <ion-item>
-          <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
          <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
            <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
            <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>
--- a/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts
@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toBeDisabled();
      await expect(page.locator('#time-button')).toBeDisabled();
@@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetimeButton = page.locator('ion-datetime-button');
      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
--- a/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts
@@ -20,7 +20,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toContainText('3 days');
    });
@@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toHaveText('0 days');
    });
@@ -49,7 +49,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
    });
@@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toHaveText('Selected: 3');
    });
@@ -86,7 +86,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      const ionValueChange = await page.spyOnEvent('ionValueChange');
@@ -111,7 +111,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
      await expect(page.locator('#time-button')).toHaveText('4:30 PM');
--- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts
@@ -24,7 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {

      const container = page.locator('#container');

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
    });
@@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const clearButton = page.locator('#clear-button button');
      const selectedDay = page.locator('.calendar-day-active');
@@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
      const calendarBody = page.locator('.calendar-body');
      await expect(calendarMonthYear).toHaveText('February 2022');
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -110,7 +110,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
      const datetime = page.locator('ion-datetime');
      const ionChange = await page.spyOnEvent('ionChange');

@@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const calendarBody = page.locator('ion-datetime .calendar-body');
      const calendarHeader = page.locator('ion-datetime .calendar-month-year');
@@ -275,7 +275,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const calendarBody = page.locator('ion-datetime .calendar-body');
      const calendarHeader = page.locator('ion-datetime .calendar-month-year');
@@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const calendarBody = page.locator('ion-datetime .calendar-body');
      const calendarHeader = page.locator('ion-datetime .calendar-month-year');
@@ -323,7 +323,12 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
  test.describe(title('datetime: visibility'), () => {
-    test('should reset month/year interface when hiding datetime', async ({ page }) => {
+    // TODO FW-6015 re-enable on webkit when bug is fixed
+    test('should reset month/year interface when hiding datetime', async ({ page, skip }) => {
+      skip.browser(
+        'webkit',
+        'This is buggy in a headless Linux environment: https://bugs.webkit.org/show_bug.cgi?id=270358'
+      );
      await page.setContent(
        `
        <ion-datetime></ion-datetime>
@@ -331,7 +336,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const monthYearButton = page.locator('ion-datetime .calendar-month-year');
      const monthYearInterface = page.locator('ion-datetime .datetime-year');
@@ -349,7 +354,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display'));
      await expect(datetime).toBeVisible();

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      // month/year interface should be reset
      await expect(monthYearInterface).toBeHidden();
@@ -399,7 +404,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const selectedDay = page.locator('ion-datetime .calendar-day-active');

@@ -428,7 +433,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const ionChange = await page.spyOnEvent('ionChange');
      const calendarButtons = page.locator('.calendar-day:not([disabled])');
@@ -447,7 +452,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const ionChange = await page.spyOnEvent('ionChange');
      const datetime = page.locator('ion-datetime');
@@ -487,7 +492,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {

      const datetime = page.locator('ion-datetime');

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(
        screenshot(`datetime-today-calendar-button`)
@@ -517,7 +522,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co

      const datetime = page.locator('ion-datetime');

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`));

@@ -543,7 +548,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');

--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -214,8 +214,7 @@
          <ion-popover class="options-popover" trigger="popover-trigger">
            <ion-list lines="none">
              <ion-item>
-                <ion-label>Dark Mode</ion-label>
-                <ion-checkbox slot="end"></ion-checkbox>
+                <ion-checkbox>Dark Mode</ion-checkbox>
              </ion-item>
              <ion-item detail="true" href="?ionic:mode=ios">
                <ion-label>iOS Mode</ion-label>
@@ -225,23 +224,19 @@
              </ion-item>

              <ion-item>
-                <ion-label>Show Default Title</ion-label>
-                <ion-toggle id="titleToggle"></ion-toggle>
+                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
              </ion-item>

              <ion-item>
-                <ion-label>Show Default Buttons</ion-label>
-                <ion-toggle id="buttonsToggle"></ion-toggle>
+                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
              </ion-item>

              <ion-item>
-                <ion-label>Locale</ion-label>
-                <ion-input placeholder="default" id="locale"></ion-input>
+                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
              </ion-item>

              <ion-item>
-                <ion-label>Color</ion-label>
-                <ion-select id="color" value="primary">
+                <ion-select label="Color" id="color" value="primary">
                  <ion-select-option value="primary">Primary</ion-select-option>
                  <ion-select-option value="secondary">Secondary</ion-select-option>
                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
--- a/core/src/components/datetime/test/datetime.e2e.ts
+++ b/core/src/components/datetime/test/datetime.e2e.ts
@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
    });

    test('should switch the calendar header when moving to a month with a different number of days', async ({
--- a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
+++ b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
@@ -113,7 +113,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
    test.describe('check example usages', () => {
      test.beforeEach(async ({ page }) => {
        await page.goto('/src/components/datetime/test/disable-dates', config);
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').first().waitFor();
      });

      test('should disable a specific date', async ({ page }) => {
--- a/core/src/components/datetime/test/disabled/datetime.e2e.ts
+++ b/core/src/components/datetime/test/disabled/datetime.e2e.ts
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);

@@ -42,7 +42,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
      await expect(calendarMonthYear.locator('button')).toBeDisabled();
    });
@@ -71,7 +71,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const clearButton = page.locator('#clear-button button');

@@ -86,7 +86,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
      const calendarBody = page.locator('.calendar-body');
      await expect(calendarMonthYear).toHaveText('February 2022');
--- a/core/src/components/datetime/test/display/datetime.e2e.ts
+++ b/core/src/components/datetime/test/display/datetime.e2e.ts
@@ -15,7 +15,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
      });
@@ -26,7 +26,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
      });
@@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
      });
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
      });
@@ -69,7 +69,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
      });
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
      });
@@ -91,7 +91,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
      });
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');
        await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
      });
@@ -119,7 +119,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
    test('month selection should work after changing presentation', async ({ page }) => {
      await page.goto('/src/components/datetime/test/display', config);
      const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const select = page.locator('select#presentation');

--- a/core/src/components/datetime/test/locale/datetime.e2e.ts
+++ b/core/src/components/datetime/test/locale/datetime.e2e.ts
@@ -95,7 +95,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');

@@ -111,7 +111,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');

@@ -147,7 +147,7 @@ class DatetimeLocaleFixture {

    this.datetime = this.page.locator('ion-datetime');

-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
  }

  async expectLocalizedDatePicker(screenshot: ScreenshotFn) {
--- a/core/src/components/datetime/test/minmax/datetime.e2e.ts
+++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
      const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
@@ -61,7 +61,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
      await page.goto('/src/components/datetime/test/minmax', config);
      const calendarMonths = page.locator('ion-datetime#inside .calendar-month');

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();

      await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
      await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
@@ -70,7 +70,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>

    test('datetime: minmax navigation disabled', async ({ page }) => {
      await page.goto('/src/components/datetime/test/minmax', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();

      const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');

@@ -80,7 +80,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>

    test('datetime: min including day should not disable month', async ({ page }) => {
      await page.goto('/src/components/datetime/test/minmax', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();

      const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');

@@ -102,7 +102,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');

@@ -124,7 +124,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
    test.describe('setting value outside bounds should show in-bounds month', () => {
      const testDisplayedMonth = async (page: E2EPage, content: string, expectedString = /June 2021/) => {
        await page.setContent(content, config);
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
        await expect(calendarMonthYear).toHaveText(expectedString);
@@ -174,7 +174,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
      const eventButton = page.locator('button#bind');
@@ -260,7 +260,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const datetime = page.locator('ion-datetime');
        const ionChange = await page.spyOnEvent('ionChange');
@@ -283,7 +283,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const datetime = page.locator('ion-datetime');
        const ionChange = await page.spyOnEvent('ionChange');
@@ -311,7 +311,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
        const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
        const ionChange = await page.spyOnEvent('ionChange');

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        await monthColumnItems.nth(0).click(); // switch to January
        await ionChange.next();
@@ -346,7 +346,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
        `,
          config
        );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        // Select Jan 10, 2022
        const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
--- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
+++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
@@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
  test.describe(title('datetime: month-year picker'), () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/src/components/datetime/test/month-year-picker', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();
    });

    test('should hide the footer when picker is open', async ({ page }) => {
--- a/core/src/components/datetime/test/multiple/datetime.e2e.ts
+++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts
@@ -62,7 +62,7 @@ class DatetimeMultipleFixture {
    );

    this.datetime = this.page.locator('ion-datetime');
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();

    return this.datetime;
  }
@@ -304,7 +304,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.waitForSelector(`.datetime-ready`);
+      await page.locator(`.datetime-ready`).waitFor();
      const datetime = page.locator('ion-datetime');
      const header = datetime.locator('.datetime-selected-date');

--- a/core/src/components/datetime/test/position/datetime.e2e.ts
+++ b/core/src/components/datetime/test/position/datetime.e2e.ts
@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
      await openDateTimeBtn.click();

      await ionPopoverDidPresent.next();
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));

--- a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -23,7 +23,7 @@ configs().forEach(({ title, screenshot, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`));
    });
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`));
    });
@@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`));
    });
@@ -56,7 +56,7 @@ configs().forEach(({ title, screenshot, config }) => {
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');

@@ -80,7 +80,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
        expect(await dayValues.count()).toEqual(27);
@@ -93,7 +93,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
        expect(await dayValues.count()).toEqual(1);
@@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const disabledMonths = page.locator('.month-column .picker-item[disabled]');
        const disabledYears = page.locator('.year-column .picker-item[disabled]');
@@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
        const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
@@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const ionChange = await page.spyOnEvent('ionChange');
        const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
@@ -209,7 +209,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const ionChange = await page.spyOnEvent('ionChange');
        const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
@@ -230,7 +230,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const ionChange = await page.spyOnEvent('ionChange');
        const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
@@ -253,7 +253,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
        const datetime = page.locator('ion-datetime');

        await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
@@ -285,7 +285,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
            config
          );

-          await page.waitForSelector('.datetime-ready');
+          await page.locator('.datetime-ready').waitFor();

          const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
          const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
@@ -306,7 +306,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
            config
          );

-          await page.waitForSelector('.datetime-ready');
+          await page.locator('.datetime-ready').waitFor();

          const columns = page.locator('ion-picker-column-internal');

@@ -327,7 +327,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
            config
          );

-          await page.waitForSelector('.datetime-ready');
+          await page.locator('.datetime-ready').waitFor();

          const columns = page.locator('ion-picker-column-internal');

@@ -346,7 +346,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
        expect(await dayValues.count()).toEqual(57);
@@ -359,7 +359,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
        expect(await dayValues.count()).toEqual(41);
@@ -382,7 +382,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const disabledDates = page.locator('.date-column .picker-item[disabled]');

@@ -403,7 +403,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -424,7 +424,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -444,7 +444,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dateColumn = page.locator('.date-column');
        const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
@@ -474,7 +474,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -494,7 +494,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -511,7 +511,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const ionChange = await page.spyOnEvent('ionChange');
        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
@@ -531,7 +531,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
        expect(await dayValues.count()).toEqual(57);
@@ -544,7 +544,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
        expect(await dayValues.count()).toEqual(41);
@@ -567,7 +567,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const disabledDates = page.locator('.date-column .picker-item[disabled]');

@@ -588,7 +588,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -609,7 +609,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -629,7 +629,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dateColumn = page.locator('.date-column');
        const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
@@ -659,7 +659,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

@@ -679,7 +679,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          config
        );

-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();

        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');

--- a/core/src/components/datetime/test/presentation/datetime.e2e.ts
+++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts
@@ -117,7 +117,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      const monthYearButton = page.locator('ion-datetime .calendar-month-year');
@@ -189,7 +189,7 @@ class DatetimePresentationFixture {
    `,
      config
    );
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
    this.datetime = this.page.locator('ion-datetime');
  }

@@ -214,7 +214,7 @@ class TimePickerFixture {
    `,
      config
    );
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
    this.timePicker = this.page.locator('ion-datetime');
  }

--- a/core/src/components/datetime/test/readonly/datetime.e2e.ts
+++ b/core/src/components/datetime/test/readonly/datetime.e2e.ts
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);

@@ -43,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
      );

      const ionChange = await page.spyOnEvent('ionChange');
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
      await expect(calendarMonthYear).toHaveText('February 2022');

@@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree

      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
      const monthYearButton = page.locator('.calendar-month-year ion-item');
      await expect(calendarMonthYear).toHaveText('February 2022');
@@ -157,7 +157,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const clearButton = page.locator('#clear-button button');

--- a/core/src/components/datetime/test/set-value/datetime.e2e.ts
+++ b/core/src/components/datetime/test/set-value/datetime.e2e.ts
@@ -5,7 +5,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
  test.describe(title('datetime: set-value'), () => {
    test('should update the active date when value is initially set', async ({ page }) => {
      await page.goto('/src/components/datetime/test/set-value', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
@@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>

    test('should update the active time when value is initially set', async ({ page }) => {
      await page.goto('/src/components/datetime/test/set-value', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
@@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      const activeDayButton = page.locator('.calendar-day-active');
@@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>

    test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
      await page.goto('/src/components/datetime/test/set-value', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const datetime = page.locator('ion-datetime');
      await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
--- a/core/src/components/datetime/test/time-label/datetime.e2e.ts
+++ b/core/src/components/datetime/test/time-label/datetime.e2e.ts
@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const timeLabel = page.locator('ion-datetime .time-header');
      await expect(timeLabel).toHaveText('Time');
@@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const timeLabel = page.locator('ion-datetime .time-header');
      await expect(timeLabel).toHaveText('');
--- a/core/src/components/datetime/test/values/datetime.e2e.ts
+++ b/core/src/components/datetime/test/values/datetime.e2e.ts
@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      `,
        config
      );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const items = page.locator('.calendar-day:not([disabled])');

@@ -91,7 +91,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const minuteItems = page.locator(
        'ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'
@@ -137,7 +137,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
      await expect(monthItems).toHaveText(['January']);
@@ -169,7 +169,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();

      const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');

--- a/core/src/components/header/test/condense/header.e2e.ts
+++ b/core/src/components/header/test/condense/header.e2e.ts
@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToBottom();
      });
-      await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
+      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));

@@ -30,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToTop();
      });
-      await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
+      await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
    });
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -51,15 +51,6 @@
   * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
   * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
   */
-
-  /**
-   * We change the minimum width as the
-   * font size changes. Using a fixed minimum
-   * width means that fewer and fewer characters
-   * can be displayed in the same space as the
-   * text grows.
-   */
-  --inner-min-width: 4rem;
  --border-radius: 0px;
  --border-width: 0px;
  --border-style: solid;
@@ -230,11 +221,6 @@
  display: flex;
  position: relative;

-  // Flex wrap is required here in order to wrap
-  // the start slot + .item-inner content that
-  // doesn't fit on the same line
-  flex-wrap: wrap;
-
  align-items: inherit;
  justify-content: inherit;

@@ -258,11 +244,6 @@
  box-sizing: border-box;
 }

-// TODO(FW-5289): remove
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
-}
-
 .item-native::-moz-focus-inner {
  border: 0;
 }
@@ -307,34 +288,13 @@ button, a {
  // This is required to work with an inset highlight
  position: relative;

-  // This flex property is required in order to make
-  // the elements wrap when there is a slotted start
-  // element and a label
-  flex: 1 0 0;
+  flex: 1;

  flex-direction: inherit;

-  // Flex wrap is required here in order to wrap
-  // .input-wrapper content + the end slot that
-  // doesn't fit on the same line
-  flex-wrap: wrap;
-
  align-items: inherit;
  align-self: stretch;

-  /**
-   * The min-width defines when the
-   * content in the default slot should
-   * stop wrapping/truncating within its own
-   * container. At this point the entire
-   * container will wrap to the next line.
-   */
-  min-width: var(--inner-min-width);
-
-  // Max width must be set to 100%, otherwise the
-  // elements will overflow this container instead
-  // of wrapping
-  max-width: 100%;
  min-height: inherit;

  border-width: var(--inner-border-width);
@@ -346,15 +306,6 @@ button, a {
  box-sizing: border-box;
 }

-// TODO(FW-5289): remove
-:host(.item-legacy) .item-inner {
-  flex: 1;
-
-  flex-wrap: unset;
-
-  max-width: unset;
-}
-
 // Item Bottom
 // --------------------------------------------------

@@ -448,38 +399,19 @@ button, a {
  // This flex property is required in order to keep
  // the label from shrinking when there are wide
  // elements next to it
-  flex: 1 0 auto;
+  flex: 1;

  flex-direction: inherit;

-  // Flex wrap is required here in order to wrap
-  // content in the default slot (such as a label
-  // and a button) that doesn't fit on the same line
-  flex-wrap: wrap;
-
  align-items: inherit;
  align-self: stretch;

-  // Max width must be set to 100%, otherwise the
-  // elements will overflow this container instead
-  // of wrapping
-  max-width: 100%;
-
  text-overflow: ellipsis;

  overflow: inherit;
  box-sizing: border-box;
 }

-// TODO(FW-5289): remove
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-
-  flex-wrap: unset;
-
-  max-width: unset;
-}
-
 :host(.item-label-stacked),
 :host(.item-label-floating) {
  align-items: start;
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes, raf } from '@utils/helpers';
@@ -150,6 +150,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac

  @State() counterString: string | null | undefined;

+  @Watch('button')
+  buttonChanged() {
+    // Update the focusable option when the button option is changed
+    this.focusable = this.isFocusable();
+  }
+
  @Watch('counterFormatter')
  counterFormatterChanged() {
    this.updateCounterOutput(this.getFirstInput());
@@ -352,15 +358,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
  }

  private getFirstInteractive() {
-    if (Build.isTesting) {
-      /**
-       * Pseudo selectors can't be tested in unit tests.
-       * It will cause an error when running the tests.
-       *
-       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
-       */
-      return undefined;
-    }
    const controls = this.el.querySelectorAll<HTMLElement>(
      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])'
    );
--- a/core/src/components/item/test/a11y/index.html
+++ b/core/src/components/item/test/a11y/index.html
@@ -16,23 +16,19 @@
      <h1>Item</h1>

      <ion-item>
-        <ion-label>Item with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
      </ion-item>

      <ion-item disabled>
-        <ion-label>Item disabled with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
      </ion-item>

      <ion-item>
-        <ion-label>Item with Input disabled</ion-label>
-        <ion-input placeholder="Placeholder" disabled></ion-input>
+        <ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
      </ion-item>

      <ion-item>
-        <ion-label position="floating">Item with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item with Select" label-placement="floating">
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -44,8 +40,7 @@
      </ion-item>

      <ion-item disabled>
-        <ion-label position="floating">Item disabled with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item disabled with Select" label-placement="floating">
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -57,8 +52,7 @@
      </ion-item>

      <ion-item>
-        <ion-label position="floating">Item with Select disabled</ion-label>
-        <ion-select disabled>
+        <ion-select label="Item with Select disabled" label-placement="floating" disabled>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -70,33 +64,27 @@
      </ion-item>

      <ion-item>
-        <ion-label>Item with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item with Toggle</ion-toggle>
      </ion-item>

      <ion-item disabled>
-        <ion-label>Item disabled with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item disabled with Toggle</ion-toggle>
      </ion-item>

      <ion-item>
-        <ion-label>Item with Toggle disabled</ion-label>
-        <ion-toggle slot="end" disabled></ion-toggle>
+        <ion-toggle disabled>Item with Toggle disabled</ion-toggle>
      </ion-item>

      <ion-item>
-        <ion-label>Item with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item with Radio</ion-radio>
      </ion-item>

      <ion-item disabled>
-        <ion-label>Item disabled with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item disabled with Radio</ion-radio>
      </ion-item>

      <ion-item>
-        <ion-label>Item with Radio disabled</ion-label>
-        <ion-radio slot="start" value="biff" disabled></ion-radio>
+        <ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
      </ion-item>
    </main>
  </body>
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/index.html
+++ b/core/src/components/item/test/basic/index.html
@@ -98,8 +98,9 @@
        </ion-item>

        <ion-item class="overflow-visible">
-          <ion-label position="fixed">PIN:</ion-label>
          <ion-input
+            label="PIN:"
+            label-placement="fixed"
            type="number"
            pattern="[0-9]*"
            inputmode="numeric"
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png
--- a/Show More
+++ b/Show More