test

add poc
2026-03-13 10:22:08 +08:00 · 2024-02-07 09:05:05 -05:00 · 2024-02-06 18:29:47 -05:00
1020 changed files with 14331 additions and 3371 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -0,0 +1,20 @@
+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-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -8,7 +8,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      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 --debug --verbose
+      run: npm run build -- --ci
      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,7 +8,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18.x
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -7,8 +7,6 @@ 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'
@@ -25,29 +23,9 @@ 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 ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
      shell: bash
      working-directory: ./core
    - name: Test and Update
@@ -69,7 +47,7 @@ runs:
      # which is why we not using the upload-archive
      # composite step here.
      run: |
-        npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e -- --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
--- 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@v4
+      - uses: actions/checkout@v3
      - 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@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-clean-build

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

  test-core-spec:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - 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@v4
+      - uses: actions/checkout@v3
      - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-vue

  build-vue-router:
    needs: [build-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-angular

  build-angular-server:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-react

  build-react-router:
    needs: [build-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-react-e2e
      with:
        app: ${{ matrix.apps }}
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -14,7 +14,7 @@ jobs:
    permissions:
      security-events: write
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: github/codeql-action/init@v2
        with:
          languages: javascript
--- 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@v4
+      - uses: actions/checkout@v3
      # 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@v4
+      - uses: actions/checkout@v3
      # 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
      with:
        token: ${{ secrets.IONITRON_TOKEN }}
        fetch-depth: 0
@@ -78,7 +78,7 @@ jobs:
    needs: [finalize-release]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
        # 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@v4
+      - uses: actions/checkout@v3
      - 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@v4
+      - uses: actions/checkout@v3
      - 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@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-lint

  test-core-spec:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - 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@v4
+      - uses: actions/checkout@v3
      - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-vue

  build-vue-router:
    needs: [build-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-angular

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

  test-angular-e2e:
    strategy:
      fail-fast: false
      matrix:
-        apps: [ng16, ng17]
+        apps: [ng12, ng13, ng14, ng15]
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-react

  build-react-router:
    needs: [build-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - 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@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-react-e2e
      with:
        app: ${{ matrix.apps }}
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -2,17 +2,12 @@ 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@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/build-core

  test-core-screenshot:
@@ -33,19 +28,18 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - 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@v4
+      - uses: actions/checkout@v3
        # Normally, we could just push with the
        # default GITHUB_TOKEN, but that will
        # not cause the build workflow
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -18,21 +18,12 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Global Styles](#version-8x-global-styles)
 - [Components](#version-8x-components)
  - [Button](#version-8x-button)
-  - [Checkbox](#version-8x-checkbox)
  - [Content](#version-8x-content)
  - [Datetime](#version-8x-datetime)
  - [Input](#version-8x-input)
-  - [Modal](#version-8x-modal)
  - [Nav](#version-8x-nav)
  - [Picker](#version-8x-picker)
  - [Progress bar](#version-8x-progress-bar)
-  - [Radio](#version-8x-radio)
-  - [Range](#version-8x-range)
-  - [Select](#version-8x-select)
-  - [Textarea](#version-8x-textarea)
-  - [Toggle](#version-8x-toggle)
- [Framework Specific](#version-8x-framework-specific)
-  - [Angular](#version-8x-angular)

 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>

@@ -142,10 +133,6 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc

 - Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).

-<h4 id="version-8x-checkbox">Checkbox</h4>
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
-
 <h4 id="version-8x-content">Content</h4>

 - Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
@@ -166,11 +153,6 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc

 - `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
 - `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).
-
-<h4 id="version-8x-modal">Modal</h4>
-
- Detection for Capacitor <= 2 with applying status bar styles has been removed. Developers should ensure they are using Capacitor 3 or later when using the card modal presentation.

 <h4 id="version-8x-nav">Nav</h4>

@@ -180,7 +162,7 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc

 - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
  - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
-  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
+  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. 

 <h4 id="version-8x-progress-bar">Progress bar</h4>

@@ -190,35 +172,4 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc

 - `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons.

-For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
-
-<h4 id="version-8x-radio">Radio</h4>
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
-
-<h4 id="version-8x-range">Range</h4>
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
-
-<h4 id="version-8x-select">Select</h4>
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
-
-<h4 id="version-8x-textarea">Textarea</h4>
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).
-
-<h4 id="version-8x-toggle">Toggle</h4>
-
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).
-
-<h2 id="version-8x-framework-specific">Framework Specific</h2>
-
-<h4 id="version-8x-angular">Angular</h4>
-
- The `IonBackButtonDelegate` class has been removed in favor of `IonBackButton`.
-
-  ```diff
-  - import { IonBackButtonDelegate } from '@ionic/angular';
-  + import { IonBackButton } from '@ionic/angular';
-  ```
+For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,138 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-# [8.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v8.0.0-beta.0) (2024-02-28)
-
-
-### Bug Fixes
-
-* **angular:** transition plays when using browser buttons ([#28530](https://github.com/ionic-team/ionic-framework/issues/28530)) ([9883eac](https://github.com/ionic-team/ionic-framework/commit/9883eac0f74b4ebce6de02d88941cf1ce3efecb3)), closes [#16569](https://github.com/ionic-team/ionic-framework/issues/16569)
-* **button:** wrap text by default ([#28682](https://github.com/ionic-team/ionic-framework/issues/28682)) ([666a01d](https://github.com/ionic-team/ionic-framework/commit/666a01dd6e9c236755adeb289fbc63e835acd9e8)), closes [#8700](https://github.com/ionic-team/ionic-framework/issues/8700)
-* **datetime:** set default background color correctly ([#28809](https://github.com/ionic-team/ionic-framework/issues/28809)) ([3929b01](https://github.com/ionic-team/ionic-framework/commit/3929b0188a6b3a019e4e3ef64a42f59f77fe3769))
-* **menu:** menu can be encapsulated in a component ([#28801](https://github.com/ionic-team/ionic-framework/issues/28801)) ([76f6362](https://github.com/ionic-team/ionic-framework/commit/76f6362410fc98d588373025c992dcdede5a107c)), closes [#16304](https://github.com/ionic-team/ionic-framework/issues/16304) [#20681](https://github.com/ionic-team/ionic-framework/issues/20681)
-* **nav:** getLength is part of the public API ([#28832](https://github.com/ionic-team/ionic-framework/issues/28832)) ([4fd05b6](https://github.com/ionic-team/ionic-framework/commit/4fd05b6416d6d108a24737ecd348445999c65c17)), closes [#28826](https://github.com/ionic-team/ionic-framework/issues/28826)
-* **overlays:** prevent scroll gestures when the overlay is presented ([#28415](https://github.com/ionic-team/ionic-framework/issues/28415)) ([7ba939f](https://github.com/ionic-team/ionic-framework/commit/7ba939fb9401c9a2d807ee5aa7c15c97dd904140)), closes [#23942](https://github.com/ionic-team/ionic-framework/issues/23942)
-* **themes:** modify the dark themes to use :root for mode-specific styles ([#28833](https://github.com/ionic-team/ionic-framework/issues/28833)) ([a8e1e16](https://github.com/ionic-team/ionic-framework/commit/a8e1e168ee739ac70305d6d2bf097e56b5844f05))
-* **toggle:** set switch icon color correctly ([#28812](https://github.com/ionic-team/ionic-framework/issues/28812)) ([749df5b](https://github.com/ionic-team/ionic-framework/commit/749df5bdcec95e718199c4915c2a762ee29cdefb))
-
-
-### Code Refactoring
-
-* **checkbox:** remove legacy property and support for legacy syntax ([#29043](https://github.com/ionic-team/ionic-framework/issues/29043)) ([fb5ae5b](https://github.com/ionic-team/ionic-framework/commit/fb5ae5b07f98a3b62a35ab07192a0fc7898ecbea))
-* **input:** remove accept property ([#28946](https://github.com/ionic-team/ionic-framework/issues/28946)) ([2816b87](https://github.com/ionic-team/ionic-framework/commit/2816b87ba6b3a7b6bc13e802a0076ad7fb696b81))
-* **radio:** remove legacy property and support for legacy syntax ([#29038](https://github.com/ionic-team/ionic-framework/issues/29038)) ([58d7315](https://github.com/ionic-team/ionic-framework/commit/58d731580237363be039d9b08ed5268cdae94629))
-* **range:** remove legacy property and support for legacy syntax ([#29040](https://github.com/ionic-team/ionic-framework/issues/29040)) ([58c795f](https://github.com/ionic-team/ionic-framework/commit/58c795f31583800c86253fb11bd4dc19370883b0))
-* **toast:** remove cssClass from ToastButton ([#28977](https://github.com/ionic-team/ionic-framework/issues/28977)) ([9856295](https://github.com/ionic-team/ionic-framework/commit/9856295915f1460ba1cd4b6f8c8d420627a533e6))
-* **toggle:** remove legacy property and support for legacy syntax ([#29037](https://github.com/ionic-team/ionic-framework/issues/29037)) ([c72eced](https://github.com/ionic-team/ionic-framework/commit/c72ecedc09fff0af9af8e077fc816110549fca57))
-
-
-### Features
-
-* **action-sheet:** add disabled button ([#28723](https://github.com/ionic-team/ionic-framework/issues/28723)) ([e76d729](https://github.com/ionic-team/ionic-framework/commit/e76d72989a9f18a52d9a6a8d1dd64e84a9c1e668))
-* add high contrast themes ([#29010](https://github.com/ionic-team/ionic-framework/issues/29010)) ([ca61e50](https://github.com/ionic-team/ionic-framework/commit/ca61e5061babead06b2cf3a3c38736e1c0101135))
-* **alert:** update styles to iOS 17 specs ([#28726](https://github.com/ionic-team/ionic-framework/issues/28726)) ([979b2f6](https://github.com/ionic-team/ionic-framework/commit/979b2f68f00c585d99aacc65dd47f2bc954d3271))
-* **angular:** remove IonBackButtonDelegate ([#29030](https://github.com/ionic-team/ionic-framework/issues/29030)) ([6baf005](https://github.com/ionic-team/ionic-framework/commit/6baf005da5be8c244a781bbffbcffca1a2ff90dc))
-* **checkbox:** update styles to iOS 17 specs ([#28729](https://github.com/ionic-team/ionic-framework/issues/28729)) ([45907aa](https://github.com/ionic-team/ionic-framework/commit/45907aa907958933c55346a0eb1253a08df32d3a))
-* **datetime-button:** update design to match iOS 17 spec ([#28730](https://github.com/ionic-team/ionic-framework/issues/28730)) ([4649637](https://github.com/ionic-team/ionic-framework/commit/4649637ad9b3b3f5a1cf12dea737a43f9e3aa2f1))
-* **datetime:** align active datetime font size with ios 17 ([#28738](https://github.com/ionic-team/ionic-framework/issues/28738)) ([a3b8254](https://github.com/ionic-team/ionic-framework/commit/a3b825475e95118b8fd599ed2266b64d1d551926))
-* **input:** remove size property in favor of CSS styling ([#28903](https://github.com/ionic-team/ionic-framework/issues/28903)) ([a393d2a](https://github.com/ionic-team/ionic-framework/commit/a393d2a86c37165f35eb556a6150170b5338c40d))
-* **modal:** remove capacitor 2 support for status bar styles ([#29028](https://github.com/ionic-team/ionic-framework/issues/29028)) ([1fb8ff7](https://github.com/ionic-team/ionic-framework/commit/1fb8ff78618aacbe7d67df295f2bb157d54a93d0))
-* **modal:** update styles to iOS 17 specs ([#28748](https://github.com/ionic-team/ionic-framework/issues/28748)) ([ff80155](https://github.com/ionic-team/ionic-framework/commit/ff8015511a352ed8adbd59bcea07a00da9834875))
-* **picker:** add inline picker ([#28689](https://github.com/ionic-team/ionic-framework/issues/28689)) ([cd5c099](https://github.com/ionic-team/ionic-framework/commit/cd5c099dd32ac1283de26a27ef572d05952538b2)), closes [#24905](https://github.com/ionic-team/ionic-framework/issues/24905) [#26840](https://github.com/ionic-team/ionic-framework/issues/26840) [#15710](https://github.com/ionic-team/ionic-framework/issues/15710)
-* **progress-bar:** update styles to iOS 17 specs ([#28759](https://github.com/ionic-team/ionic-framework/issues/28759)) ([f65235a](https://github.com/ionic-team/ionic-framework/commit/f65235ac473e0c1a110613fc9c95cdc0783a8738))
-* **searchbar:** update styles to iOS 17 specs ([#28728](https://github.com/ionic-team/ionic-framework/issues/28728)) ([48c0d2c](https://github.com/ionic-team/ionic-framework/commit/48c0d2c0dd995581b70eaed62def00ebf7a834ff))
-* **tab-button:** update styles to iOS 17 specs ([#28754](https://github.com/ionic-team/ionic-framework/issues/28754)) ([63ea967](https://github.com/ionic-team/ionic-framework/commit/63ea967d0230c471a3870e58062cb9cfd16dee3e))
-* **theme:** export light theme tokens ([#28802](https://github.com/ionic-team/ionic-framework/issues/28802)) ([e1f9850](https://github.com/ionic-team/ionic-framework/commit/e1f98509fa7e5472240a7a09b41029bef2414028))
-* **theme:** improved color contrast with color palette ([#28791](https://github.com/ionic-team/ionic-framework/issues/28791)) ([15e368c](https://github.com/ionic-team/ionic-framework/commit/15e368c37829b14a5e138914d834bcad5033cf13))
-* **toggle:** update styles to iOS 17 specs ([#28722](https://github.com/ionic-team/ionic-framework/issues/28722)) ([0ce0693](https://github.com/ionic-team/ionic-framework/commit/0ce0693af1cd468192ea58a08106c704da04640c))
-
-
-### Performance Improvements
-
-* **angular:** views are not moved on mount ([#28544](https://github.com/ionic-team/ionic-framework/issues/28544)) ([77a0640](https://github.com/ionic-team/ionic-framework/commit/77a0640e92dc4300b9e89221ef03e96206eca9ae)), closes [#28534](https://github.com/ionic-team/ionic-framework/issues/28534)
-
-
-### BREAKING CHANGES
-
-* **range:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed from range. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
-* **checkbox:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
-* **radio:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed from radio. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
-* **toggle:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed from toggle. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).
-* **toast:** The `cssClass` property has been removed from `ToastButton`
-* **input:** The `accept` property has been removed from `ion-input`.
-* **nav:** `getLength` returns `Promise<number>` instead of `<number>`. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value.
-* **button:** Button text now wraps by default.
-* Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
-* **breaking:** The supported JS Framework and Browser/Platform versions have been revised for Ionic 8
-
-
-
-
-
-## [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/.stylelintrc.yml
+++ b/core/.stylelintrc.yml
@@ -11,8 +11,6 @@ ignoreFiles:
  - src/themes/ionic.mixins.scss
  - src/themes/ionic.functions.color.scss
  - src/themes/ionic.functions.string.scss
-  - src/themes/ionic.theme.default.scss
-  - src/css/themes/*.scss

 indentation: 2

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

-# [8.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v8.0.0-beta.0) (2024-02-28)
-
-
-### Bug Fixes
-
-* **button:** wrap text by default ([#28682](https://github.com/ionic-team/ionic-framework/issues/28682)) ([666a01d](https://github.com/ionic-team/ionic-framework/commit/666a01dd6e9c236755adeb289fbc63e835acd9e8)), closes [#8700](https://github.com/ionic-team/ionic-framework/issues/8700)
-* **datetime:** set default background color correctly ([#28809](https://github.com/ionic-team/ionic-framework/issues/28809)) ([3929b01](https://github.com/ionic-team/ionic-framework/commit/3929b0188a6b3a019e4e3ef64a42f59f77fe3769))
-* **menu:** menu can be encapsulated in a component ([#28801](https://github.com/ionic-team/ionic-framework/issues/28801)) ([76f6362](https://github.com/ionic-team/ionic-framework/commit/76f6362410fc98d588373025c992dcdede5a107c)), closes [#16304](https://github.com/ionic-team/ionic-framework/issues/16304) [#20681](https://github.com/ionic-team/ionic-framework/issues/20681)
-* **nav:** getLength is part of the public API ([#28832](https://github.com/ionic-team/ionic-framework/issues/28832)) ([4fd05b6](https://github.com/ionic-team/ionic-framework/commit/4fd05b6416d6d108a24737ecd348445999c65c17)), closes [#28826](https://github.com/ionic-team/ionic-framework/issues/28826)
-* **overlays:** prevent scroll gestures when the overlay is presented ([#28415](https://github.com/ionic-team/ionic-framework/issues/28415)) ([7ba939f](https://github.com/ionic-team/ionic-framework/commit/7ba939fb9401c9a2d807ee5aa7c15c97dd904140)), closes [#23942](https://github.com/ionic-team/ionic-framework/issues/23942)
-* **themes:** modify the dark themes to use :root for mode-specific styles ([#28833](https://github.com/ionic-team/ionic-framework/issues/28833)) ([a8e1e16](https://github.com/ionic-team/ionic-framework/commit/a8e1e168ee739ac70305d6d2bf097e56b5844f05))
-* **toggle:** set switch icon color correctly ([#28812](https://github.com/ionic-team/ionic-framework/issues/28812)) ([749df5b](https://github.com/ionic-team/ionic-framework/commit/749df5bdcec95e718199c4915c2a762ee29cdefb))
-
-
-### chore
-
-* remove unused code ([#28503](https://github.com/ionic-team/ionic-framework/issues/28503)) ([5aafd68](https://github.com/ionic-team/ionic-framework/commit/5aafd68f03bb6daefa9bfe58ce68459c3068fc5d))
-
-
-### Code Refactoring
-
-* **checkbox:** remove legacy property and support for legacy syntax ([#29043](https://github.com/ionic-team/ionic-framework/issues/29043)) ([fb5ae5b](https://github.com/ionic-team/ionic-framework/commit/fb5ae5b07f98a3b62a35ab07192a0fc7898ecbea))
-* **input:** remove accept property ([#28946](https://github.com/ionic-team/ionic-framework/issues/28946)) ([2816b87](https://github.com/ionic-team/ionic-framework/commit/2816b87ba6b3a7b6bc13e802a0076ad7fb696b81))
-* **radio:** remove legacy property and support for legacy syntax ([#29038](https://github.com/ionic-team/ionic-framework/issues/29038)) ([58d7315](https://github.com/ionic-team/ionic-framework/commit/58d731580237363be039d9b08ed5268cdae94629))
-* **range:** remove legacy property and support for legacy syntax ([#29040](https://github.com/ionic-team/ionic-framework/issues/29040)) ([58c795f](https://github.com/ionic-team/ionic-framework/commit/58c795f31583800c86253fb11bd4dc19370883b0))
-* **toast:** remove cssClass from ToastButton ([#28977](https://github.com/ionic-team/ionic-framework/issues/28977)) ([9856295](https://github.com/ionic-team/ionic-framework/commit/9856295915f1460ba1cd4b6f8c8d420627a533e6))
-* **toggle:** remove legacy property and support for legacy syntax ([#29037](https://github.com/ionic-team/ionic-framework/issues/29037)) ([c72eced](https://github.com/ionic-team/ionic-framework/commit/c72ecedc09fff0af9af8e077fc816110549fca57))
-
-
-### Features
-
-* **action-sheet:** add disabled button ([#28723](https://github.com/ionic-team/ionic-framework/issues/28723)) ([e76d729](https://github.com/ionic-team/ionic-framework/commit/e76d72989a9f18a52d9a6a8d1dd64e84a9c1e668))
-* add high contrast themes ([#29010](https://github.com/ionic-team/ionic-framework/issues/29010)) ([ca61e50](https://github.com/ionic-team/ionic-framework/commit/ca61e5061babead06b2cf3a3c38736e1c0101135))
-* **alert:** update styles to iOS 17 specs ([#28726](https://github.com/ionic-team/ionic-framework/issues/28726)) ([979b2f6](https://github.com/ionic-team/ionic-framework/commit/979b2f68f00c585d99aacc65dd47f2bc954d3271))
-* **checkbox:** update styles to iOS 17 specs ([#28729](https://github.com/ionic-team/ionic-framework/issues/28729)) ([45907aa](https://github.com/ionic-team/ionic-framework/commit/45907aa907958933c55346a0eb1253a08df32d3a))
-* **datetime-button:** update design to match iOS 17 spec ([#28730](https://github.com/ionic-team/ionic-framework/issues/28730)) ([4649637](https://github.com/ionic-team/ionic-framework/commit/4649637ad9b3b3f5a1cf12dea737a43f9e3aa2f1))
-* **datetime:** align active datetime font size with ios 17 ([#28738](https://github.com/ionic-team/ionic-framework/issues/28738)) ([a3b8254](https://github.com/ionic-team/ionic-framework/commit/a3b825475e95118b8fd599ed2266b64d1d551926))
-* **input:** remove size property in favor of CSS styling ([#28903](https://github.com/ionic-team/ionic-framework/issues/28903)) ([a393d2a](https://github.com/ionic-team/ionic-framework/commit/a393d2a86c37165f35eb556a6150170b5338c40d))
-* **modal:** remove capacitor 2 support for status bar styles ([#29028](https://github.com/ionic-team/ionic-framework/issues/29028)) ([1fb8ff7](https://github.com/ionic-team/ionic-framework/commit/1fb8ff78618aacbe7d67df295f2bb157d54a93d0))
-* **modal:** update styles to iOS 17 specs ([#28748](https://github.com/ionic-team/ionic-framework/issues/28748)) ([ff80155](https://github.com/ionic-team/ionic-framework/commit/ff8015511a352ed8adbd59bcea07a00da9834875))
-* **picker:** add inline picker ([#28689](https://github.com/ionic-team/ionic-framework/issues/28689)) ([cd5c099](https://github.com/ionic-team/ionic-framework/commit/cd5c099dd32ac1283de26a27ef572d05952538b2)), closes [#24905](https://github.com/ionic-team/ionic-framework/issues/24905) [#26840](https://github.com/ionic-team/ionic-framework/issues/26840) [#15710](https://github.com/ionic-team/ionic-framework/issues/15710)
-* **progress-bar:** update styles to iOS 17 specs ([#28759](https://github.com/ionic-team/ionic-framework/issues/28759)) ([f65235a](https://github.com/ionic-team/ionic-framework/commit/f65235ac473e0c1a110613fc9c95cdc0783a8738))
-* **searchbar:** update styles to iOS 17 specs ([#28728](https://github.com/ionic-team/ionic-framework/issues/28728)) ([48c0d2c](https://github.com/ionic-team/ionic-framework/commit/48c0d2c0dd995581b70eaed62def00ebf7a834ff))
-* **tab-button:** update styles to iOS 17 specs ([#28754](https://github.com/ionic-team/ionic-framework/issues/28754)) ([63ea967](https://github.com/ionic-team/ionic-framework/commit/63ea967d0230c471a3870e58062cb9cfd16dee3e))
-* **theme:** export light theme tokens ([#28802](https://github.com/ionic-team/ionic-framework/issues/28802)) ([e1f9850](https://github.com/ionic-team/ionic-framework/commit/e1f98509fa7e5472240a7a09b41029bef2414028))
-* **theme:** improved color contrast with color palette ([#28791](https://github.com/ionic-team/ionic-framework/issues/28791)) ([15e368c](https://github.com/ionic-team/ionic-framework/commit/15e368c37829b14a5e138914d834bcad5033cf13))
-* **toggle:** update styles to iOS 17 specs ([#28722](https://github.com/ionic-team/ionic-framework/issues/28722)) ([0ce0693](https://github.com/ionic-team/ionic-framework/commit/0ce0693af1cd468192ea58a08106c704da04640c))
-
-
-### Reverts
-
-* Revert "chore(): add updated snapshots" ([613bd54](https://github.com/ionic-team/ionic-framework/commit/613bd54adf519cef74e30066d549bd2ccc011b6a))
-
-
-### BREAKING CHANGES
-
-* **range:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed from range. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
-* **checkbox:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
-* **radio:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed from radio. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
-* **toggle:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed from toggle. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).
-* **toast:** The `cssClass` property has been removed from `ToastButton`
-* **input:** The `accept` property has been removed from `ion-input`.
-* **nav:** `getLength` returns `Promise<number>` instead of `<number>`. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value.
-* **button:** Button text now wraps by default.
-* Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
-
-
-
-
-
-## [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/api.txt
+++ b/core/api.txt
@@ -297,6 +297,7 @@ ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
 ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
+ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
 ion-checkbox,prop,value,any,'on',false,false
@@ -565,6 +566,7 @@ ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,label,string | undefined,undefined,false,false
 ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
+ion-input,prop,legacy,boolean | undefined,undefined,false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,number | string | undefined,undefined,false,false
@@ -1036,6 +1038,7 @@ ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
+ion-radio,prop,legacy,boolean | undefined,undefined,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
 ion-radio,prop,value,any,undefined,false,false
@@ -1064,6 +1067,7 @@ ion-range,prop,disabled,boolean,false,false,false
 ion-range,prop,dualKnobs,boolean,false,false,false
 ion-range,prop,label,string | undefined,undefined,false,false
 ion-range,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
+ion-range,prop,legacy,boolean | undefined,undefined,false,false
 ion-range,prop,max,number,100,false,false
 ion-range,prop,min,number,0,false,false
 ion-range,prop,mode,"ios" | "md",undefined,false,false
@@ -1272,6 +1276,7 @@ ion-select,prop,interfaceOptions,any,{},false,false
 ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-select,prop,label,string | undefined,undefined,false,false
 ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
+ion-select,prop,legacy,boolean | undefined,undefined,false,false
 ion-select,prop,mode,"ios" | "md",undefined,false,false
 ion-select,prop,multiple,boolean,false,false,false
 ion-select,prop,name,string,this.inputId,false,false
@@ -1401,6 +1406,7 @@ ion-textarea,prop,helperText,string | undefined,undefined,false,false
 ion-textarea,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-textarea,prop,label,string | undefined,undefined,false,false
 ion-textarea,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
+ion-textarea,prop,legacy,boolean | undefined,undefined,false,false
 ion-textarea,prop,maxlength,number | undefined,undefined,false,false
 ion-textarea,prop,minlength,number | undefined,undefined,false,false
 ion-textarea,prop,mode,"ios" | "md",undefined,false,false
@@ -1511,6 +1517,7 @@ ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
 ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
+ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
--- 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": "8.0.0-beta.0",
+  "version": "7.6.6",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,24 +31,24 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.12.2",
+    "@stencil/core": "^4.10.0",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@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",
+    "@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",
    "@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.4",
+    "@stencil/angular-output-target": "^0.8.3",
    "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.9",
+    "@stencil/sass": "^3.0.8",
    "@stencil/vue-output-target": "^0.8.7",
    "@types/jest": "^29.5.6",
    "@types/node": "^14.6.0",
@@ -64,6 +64,7 @@
    "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"`.  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.
+          * @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"`.
         */
        "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"`.  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.
+          * @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"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -630,6 +630,10 @@ export namespace Components {
          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -1216,6 +1220,10 @@ export namespace Components {
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
         */
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The maximum value, which must not be less than its minimum (min attribute) value.
         */
@@ -1513,7 +1521,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"`.  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.
+          * @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"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -1706,7 +1714,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'.  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.
+          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -2114,7 +2122,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`.  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.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
         */
        "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
        /**
@@ -2249,6 +2257,10 @@ export namespace Components {
          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -2311,6 +2323,10 @@ export namespace Components {
          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * Maximum integer value of the range.
         */
@@ -2727,6 +2743,10 @@ export namespace Components {
          * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -3014,6 +3034,10 @@ export namespace Components {
          * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
         */
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * This attribute specifies the maximum number of characters that the user can enter.
         */
@@ -3100,7 +3124,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"`.  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.
+          * @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"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
@@ -3211,6 +3235,10 @@ export namespace Components {
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -3631,6 +3659,7 @@ declare global {
        "ionChange": CheckboxChangeEventDetail;
        "ionFocus": void;
        "ionBlur": void;
+        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonCheckboxElementEventMap>(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent<HTMLIonCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4038,6 +4067,7 @@ declare global {
    };
    interface HTMLIonPickerColumnElementEventMap {
        "ionChange": PickerColumnChangeEventDetail;
+        "ionValueChange": void;
    }
    interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4132,6 +4162,7 @@ declare global {
        new (): HTMLIonProgressBarElement;
    };
    interface HTMLIonRadioElementEventMap {
+        "ionStyle": StyleEventDetail;
        "ionFocus": void;
        "ionBlur": void;
    }
@@ -4170,6 +4201,7 @@ declare global {
    interface HTMLIonRangeElementEventMap {
        "ionChange": RangeChangeEventDetail;
        "ionInput": RangeChangeEventDetail;
+        "ionStyle": StyleEventDetail;
        "ionFocus": void;
        "ionBlur": void;
        "ionKnobMoveStart": RangeKnobMoveStartEventDetail;
@@ -4586,6 +4618,7 @@ declare global {
        "ionChange": ToggleChangeEventDetail;
        "ionFocus": void;
        "ionBlur": void;
+        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonToggleElementEventMap>(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent<HTMLIonToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5313,6 +5346,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -5333,6 +5370,10 @@ declare namespace LocalJSX {
          * Emitted when the checkbox has focus.
         */
        "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonCheckboxCustomEvent<StyleEventDetail>) => void;
        /**
          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
         */
@@ -5915,6 +5956,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The maximum value, which must not be less than its minimum (min attribute) value.
         */
@@ -6604,6 +6649,7 @@ declare namespace LocalJSX {
          * Emitted when the value has changed.
         */
        "onIonChange"?: (event: IonPickerColumnCustomEvent<PickerColumnChangeEventDetail>) => void;
+        "onIonValueChange"?: (event: IonPickerColumnCustomEvent<void>) => void;
        /**
          * The selected option in the picker.
         */
@@ -6907,6 +6953,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -6923,6 +6973,10 @@ declare namespace LocalJSX {
          * Emitted when the radio button has focus.
         */
        "onIonFocus"?: (event: IonRadioCustomEvent<void>) => void;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonRadioCustomEvent<StyleEventDetail>) => void;
        /**
          * the value of the radio.
         */
@@ -6983,6 +7037,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * Maximum integer value of the range.
         */
@@ -7023,6 +7081,10 @@ declare namespace LocalJSX {
          * Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
         */
        "onIonKnobMoveStart"?: (event: IonRangeCustomEvent<RangeKnobMoveStartEventDetail>) => void;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonRangeCustomEvent<StyleEventDetail>) => void;
        /**
          * If `true`, a pin with integer value is shown when the knob is pressed.
         */
@@ -7450,6 +7512,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -7757,6 +7823,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * This attribute specifies the maximum number of characters that the user can enter.
         */
@@ -7988,6 +8058,10 @@ declare namespace LocalJSX {
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
+        /**
+          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
+         */
+        "legacy"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
@@ -8008,6 +8082,10 @@ declare namespace LocalJSX {
          * Emitted when the toggle has focus.
         */
        "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonToggleCustomEvent<StyleEventDetail>) => void;
        /**
          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
         */
--- a/core/src/components/accordion/test/a11y/index.html
+++ b/core/src/components/accordion/test/a11y/index.html
@@ -23,22 +23,28 @@

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

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

            <ion-list slot="content">
              <ion-item>
-                <ion-input label="Address 1" id="address1" type="text"></ion-input>
+                <ion-label>Address 1</ion-label>
+                <ion-input id="address1" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Address 2" type="email"></ion-input>
+                <ion-label>Address 2</ion-label>
+                <ion-input type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="City" type="tel"></ion-input>
+                <ion-label>City</ion-label>
+                <ion-input type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input lable="State" type="text"></ion-input>
+                <ion-label>State</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Zip Code" type="text"></ion-input>
+                <ion-label>Zip Code</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
--- 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, LiteralUnion, Mode } from '../../interface';
+import type { AnimationBuilder, Mode } from '../../interface';

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

 export interface ActionSheetButton<T = any> {
  text?: string;
-  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
+  role?: '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
@@ -27,24 +27,7 @@
 // ---------------------------------------------------

 .action-sheet-wrapper {
-  @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;
+  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
 }

 // iOS Action Sheet Container
--- a/core/src/components/action-sheet/action-sheet.ios.vars.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss
@@ -111,7 +111,7 @@ $action-sheet-ios-button-background:                              linear-gradien
 $action-sheet-ios-button-background-activated:                    $text-color !default;

 /// @prop - Background color of the selected action sheet button
-$action-sheet-ios-button-background-selected:                     var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default;
+$action-sheet-ios-button-background-selected:                     var(--ion-color-step-150, $background-color) !default;

 /// @prop - Destructive text color of the action sheet button
 $action-sheet-ios-button-destructive-text-color:                  ion-color(danger, base) !default;
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -216,10 +216,6 @@ 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, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, 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?: LiteralUnion<'cancel' | 'destructive', string>;
+  role?: 'cancel' | 'destructive' | string;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
--- a/core/src/components/alert/alert.md.vars.scss
+++ b/core/src/components/alert/alert.md.vars.scss
@@ -208,7 +208,7 @@ $alert-md-radio-border-style:                 solid !default;
 $alert-md-radio-border-radius:                50% !default;

 /// @prop - Border color of the alert radio when off
-$alert-md-radio-border-color-off:             $background-color-step-550 !default;
+$alert-md-radio-border-color-off:             $text-color-step-450 !default;

 /// @prop - Border color of the alert radio when on
 $alert-md-radio-border-color-on:              $alert-md-button-text-color !default;
@@ -280,7 +280,7 @@ $alert-md-checkbox-border-style:              solid !default;
 $alert-md-checkbox-border-radius:             2px !default;

 /// @prop - Border color of the checkbox in the alert when off
-$alert-md-checkbox-border-color-off:          $background-color-step-550 !default;
+$alert-md-checkbox-border-color-off:          $text-color-step-450 !default;

 /// @prop - Border color of the checkbox in the alert when on
 $alert-md-checkbox-border-color-on:           $alert-md-button-text-color !default;
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -411,10 +411,6 @@ 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/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,8 +1,6 @@
 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';
@@ -36,20 +34,9 @@ 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');
-        const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
-        if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+        if (config.getBoolean('hardwareBackButton', isHybrid)) {
          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/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss
+++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss
@@ -4,22 +4,22 @@
 // --------------------------------------------------

 /// @prop - Color of the breadcrumb
-$breadcrumb-ios-color:                             var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default;
+$breadcrumb-ios-color:                             var(--ion-color-step-850, #2d4665) !default;

 /// @prop - Color of the active breadcrumb
 $breadcrumb-ios-color-active:                      var(--ion-text-color, #03060b) !default;

 /// @prop - Background color of the focused breadcrumb
-$breadcrumb-ios-background-focused:                var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default;
+$breadcrumb-ios-background-focused:                var(--ion-color-step-50, rgba(233, 237, 243, 0.7)) !default;

 /// @prop - Color of the breadcrumb icon
-$breadcrumb-ios-icon-color:                        var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default;
+$breadcrumb-ios-icon-color:                        var(--ion-color-step-400, #92a0b3) !default;

 /// @prop - Color of the breadcrumb icon when active
-$breadcrumb-ios-icon-color-active:                 var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default;
+$breadcrumb-ios-icon-color-active:                 var(--ion-color-step-850, #242d39) !default;

 /// @prop - Color of the breadcrumb icon when focused
-$breadcrumb-ios-icon-color-focused:                var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default;
+$breadcrumb-ios-icon-color-focused:                var(--ion-color-step-750, #445b78) !default;

 /// @prop - Color of the breadcrumb separator
 $breadcrumb-ios-separator-color:                   $breadcrumb-separator-color !default;
@@ -28,7 +28,7 @@ $breadcrumb-ios-separator-color:                   $breadcrumb-separator-color !
 $breadcrumb-ios-indicator-color:                   $breadcrumb-ios-separator-color !default;

 /// @prop - Background color of the breadcrumb indicator
-$breadcrumb-ios-indicator-background:              var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default;
+$breadcrumb-ios-indicator-background:              var(--ion-color-step-100, #e9edf3) !default;

 /// @prop - Background color of the breadcrumb indicator when focused
-$breadcrumb-ios-indicator-background-focused:      var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default;
+$breadcrumb-ios-indicator-background-focused:      var(--ion-color-step-150, #d9e0ea) !default;
--- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss
+++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss
@@ -4,22 +4,22 @@
 // --------------------------------------------------

 /// @prop - Color of the breadcrumb
-$breadcrumb-md-color:                               var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default;
+$breadcrumb-md-color:                               var(--ion-color-step-600, #677483) !default;

 /// @prop - Color of the active breadcrumb
 $breadcrumb-md-color-active:                        var(--ion-text-color, #03060b) !default;

 /// @prop - Color of the focused breadcrumb
-$breadcrumb-md-color-focused:                        var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default;
+$breadcrumb-md-color-focused:                        var(--ion-color-step-800, #35404e) !default;

 /// @prop - Background color of the focused breadcrumb
-$breadcrumb-md-background-focused:                  var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default;
+$breadcrumb-md-background-focused:                  var(--ion-color-step-50, #fff) !default;

 /// @prop - Color of the breadcrumb icon
-$breadcrumb-md-icon-color:                          var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default;
+$breadcrumb-md-icon-color:                          var(--ion-color-step-550, #7d8894) !default;

 /// @prop - Color of the breadcrumb icon when active
-$breadcrumb-md-icon-color-active:                   var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default;
+$breadcrumb-md-icon-color-active:                   var(--ion-color-step-850, #222d3a) !default;

 /// @prop - Margin top of the breadcrumb separator
 $breadcrumb-md-separator-margin-top:                -1px !default;
@@ -40,7 +40,7 @@ $breadcrumb-md-separator-color:                     $breadcrumb-separator-color
 $breadcrumb-md-indicator-color:                     $breadcrumb-md-separator-color !default;

 /// @prop - Background color of the breadcrumb indicator
-$breadcrumb-md-indicator-background:                var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default;
+$breadcrumb-md-indicator-background:                var(--ion-color-step-100, #eef1f3) !default;

 /// @prop - Background color of the breadcrumb indicator when focused
-$breadcrumb-md-indicator-background-focused:        var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default;
+$breadcrumb-md-indicator-background-focused:        var(--ion-color-step-150, #dfe5e8) !default;
--- a/core/src/components/breadcrumb/breadcrumb.vars.scss
+++ b/core/src/components/breadcrumb/breadcrumb.vars.scss
@@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px !default;
 $breadcrumb-font-size:           dynamic-font($breadcrumb-baseline-font-size) !default;

 /// @prop - Color of the breadcrumb separator
-$breadcrumb-separator-color:     var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default;
+$breadcrumb-separator-color:     var(--ion-color-step-550, #73849a) !default;
--- 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.locator('#default.ion-activated').waitFor();
+      await page.waitForSelector('#default.ion-activated');

      await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
    });
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Safari-linux.png
--- 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/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/checkbox.ios.scss
+++ b/core/src/components/checkbox/checkbox.ios.scss
@@ -31,3 +31,21 @@
 :host(.checkbox-disabled) {
  opacity: $checkbox-ios-disabled-opacity;
 }
+
+
+// iOS Checkbox Within An Item
+// TODO(FW-3100): remove this
+// -----------------------------------------
+
+:host(.in-item.legacy-checkbox) {
+  // end position by default
+  @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
+
+  display: block;
+
+  position: static;
+}
+
+:host(.in-item.legacy-checkbox[slot="start"]) {
+  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
+}
--- a/core/src/components/checkbox/checkbox.ios.vars.scss
+++ b/core/src/components/checkbox/checkbox.ios.vars.scss
@@ -26,5 +26,29 @@ $checkbox-ios-icon-border-radius:         50% !default;
 /// @prop - Opacity of the disabled checkbox
 $checkbox-ios-disabled-opacity:           $form-control-ios-disabled-opacity !default;

+/// @prop - Margin top of the left checkbox item
+$checkbox-ios-item-start-margin-top:      8px !default;
+
+/// @prop - Margin end of the left checkbox item
+$checkbox-ios-item-start-margin-end:      $item-ios-padding-end !default;
+
+/// @prop - Margin bottom of the left checkbox item
+$checkbox-ios-item-start-margin-bottom:   $checkbox-ios-item-start-margin-top !default;
+
+/// @prop - Margin start of the left checkbox item
+$checkbox-ios-item-start-margin-start:    2px !default;
+
+/// @prop - Margin top of the right checkbox item
+$checkbox-ios-item-end-margin-top:        10px !default;
+
+/// @prop - Margin end of the right checkbox item
+$checkbox-ios-item-end-margin-end:        8px !default;
+
+/// @prop - Margin bottom of the right checkbox item
+$checkbox-ios-item-end-margin-bottom:     9px !default;
+
+/// @prop - Margin start of the right checkbox item
+$checkbox-ios-item-end-margin-start:      0 !default;
+
 /// @prop - Checkmark width of the checkbox icon
 $checkbox-ios-icon-checkmark-width:       1.5px !default;
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -44,6 +44,7 @@
 // opacity set by its spec, while the label
 // should match the other form controls

+:host(.legacy-checkbox.checkbox-disabled),
 :host(.checkbox-disabled) .label-text-wrapper {
  opacity: $checkbox-md-disabled-opacity;
 }
@@ -51,3 +52,21 @@
 :host(.checkbox-disabled) .native-wrapper {
  opacity: $checkbox-md-icon-disabled-opacity;
 }
+
+
+// Material Design Checkbox Within An Item
+// TODO(FW-3100): remove this
+// --------------------------------------------------------
+
+:host(.in-item.legacy-checkbox) {
+  // end position by default
+  @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
+
+  display: block;
+
+  position: static;
+}
+
+:host(.in-item.legacy-checkbox[slot="start"]) {
+  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
+}
--- a/core/src/components/checkbox/checkbox.md.vars.scss
+++ b/core/src/components/checkbox/checkbox.md.vars.scss
@@ -30,6 +30,30 @@ $checkbox-md-transition-duration:        180ms !default;
 /// @prop - Transition easing of the checkbox
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;

+/// @prop - Margin top of the start checkbox item
+$checkbox-md-item-start-margin-top:      18px !default;
+
+/// @prop - Margin end of the start checkbox item
+$checkbox-md-item-start-margin-end:      36px !default;
+
+/// @prop - Margin bottom of the start checkbox item
+$checkbox-md-item-start-margin-bottom:   $checkbox-md-item-start-margin-top !default;
+
+/// @prop - Margin start of the start checkbox item
+$checkbox-md-item-start-margin-start:    4px !default;
+
+/// @prop - Margin top of the end checkbox item
+$checkbox-md-item-end-margin-top:        18px !default;
+
+/// @prop - Margin end of the end checkbox item
+$checkbox-md-item-end-margin-end:        0 !default;
+
+/// @prop - Margin bottom of the end checkbox item
+$checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !default;
+
+/// @prop - Margin start of the end checkbox item
+$checkbox-md-item-end-margin-start:      0 !default;
+
 /// @prop - Opacity of the disabled checkbox
 /// This value is used because the checkbox color is set to
 /// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -48,17 +48,34 @@
 * toolbar which is why we do not
 * limit the below behavior to just ion-item.
 */
-:host([slot="start"]),
-:host([slot="end"]) {
+:host([slot="start"]:not(.legacy-checkbox)),
+:host([slot="end"]:not(.legacy-checkbox)) {
  width: auto;
 }

+// TODO(FW-3100): remove this
+:host(.legacy-checkbox) {
+  width: var(--size);
+  height: var(--size);
+}
+
 :host(.ion-color) {
  --checkbox-background-checked: #{current-color(base)};
  --border-color-checked: #{current-color(base)};
  --checkmark-color: #{current-color(contrast)};
 }

+// TODO(FW-3100): remove this
+:host(.legacy-checkbox) label {
+  @include input-cover();
+
+  display: flex;
+
+  align-items: center;
+
+  opacity: 0;
+}
+
 .checkbox-wrapper {
  display: flex;

@@ -79,7 +96,7 @@
  overflow: hidden;
 }

-:host(.in-item) .label-text-wrapper {
+:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
  @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }

@@ -115,9 +132,6 @@ input {

  position: relative;

-  width: var(--size);
-  height: var(--size);
-
  transition: var(--transition);

  border-width: var(--border-width);
@@ -129,6 +143,20 @@ input {
  box-sizing: border-box;
 }

+// TODO(FW-3100): remove this
+:host(.legacy-checkbox) .checkbox-icon {
+  display: block;
+
+  width: 100%;
+  height: 100%;
+}
+
+// TODO(FW-3100): merge this with other .checkbox-icon styles above
+:host(:not(.legacy-checkbox)) .checkbox-icon {
+  width: var(--size);
+  height: var(--size);
+}
+
 .checkbox-icon path {
  fill: none;
  stroke: var(--checkmark-color);
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,11 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
+import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext } from '@utils/theme';

 import { getIonMode } from '../../global/ionic-global';
-import type { Color, Mode } from '../../interface';
+import type { Color, Mode, StyleEventDetail } from '../../interface';

 import type { CheckboxChangeEventDetail } from './checkbox-interface';

@@ -29,8 +32,13 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 export class Checkbox implements ComponentInterface {
  private inputId = `ion-cb-${checkboxIds++}`;
  private focusEl?: HTMLElement;
+  private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
  private inheritedAttributes: Attributes = {};

+  // TODO(FW-3100): remove this
+  // This flag ensures we log the deprecation warning at most once.
+  private hasLoggedDeprecationWarning = false;
+
  @Element() el!: HTMLIonCheckboxElement;

  /**
@@ -96,6 +104,19 @@ export class Checkbox implements ComponentInterface {
   */
  @Prop() alignment: 'start' | 'center' = 'center';

+  // TODO(FW-3100): remove this
+  /**
+   * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
+   * Ionic will only opt checkboxes in to the modern form markup when they are
+   * using either the `aria-label` attribute or have text in the default slot. As a result,
+   * the `legacy` property should only be used as an escape hatch when you want to
+   * avoid this automatic opt-in behavior.
+   *
+   * Note that this property will be removed in an upcoming major release
+   * of Ionic, and all form components will be opted-in to using the modern form markup.
+   */
+  @Prop() legacy?: boolean;
+
  /**
   * Emitted when the checked property has changed
   * as a result of a user action such as a click.
@@ -114,10 +135,46 @@ export class Checkbox implements ComponentInterface {
   */
  @Event() ionBlur!: EventEmitter<void>;

+  /**
+   * Emitted when the styles change.
+   * @internal
+   */
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
+
+  connectedCallback() {
+    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
+  }
+
  componentWillLoad() {
-    this.inheritedAttributes = {
-      ...inheritAriaAttributes(this.el),
+    this.emitStyle();
+
+    // TODO(FW-3100): remove check
+    if (!this.legacyFormController.hasLegacyControl()) {
+      this.inheritedAttributes = {
+        ...inheritAriaAttributes(this.el),
+      };
+    }
+  }
+
+  @Watch('checked')
+  @Watch('disabled')
+  protected styleChanged() {
+    this.emitStyle();
+  }
+
+  private emitStyle() {
+    const style: StyleEventDetail = {
+      'interactive-disabled': this.disabled,
+      // TODO(FW-3100): remove this
+      legacy: !!this.legacy,
    };
+
+    // TODO(FW-3100): remove this
+    if (this.legacyFormController.hasLegacyControl()) {
+      style['checkbox-checked'] = this.checked;
+    }
+
+    this.ionStyle.emit(style);
  }

  private setFocus() {
@@ -164,7 +221,14 @@ export class Checkbox implements ComponentInterface {
    this.toggleChecked(ev);
  };

+  // TODO(FW-3100): run contents of renderCheckbox directly instead
  render() {
+    const { legacyFormController } = this;
+
+    return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
+  }
+
+  private renderCheckbox() {
    const {
      color,
      checked,
@@ -235,6 +299,72 @@ export class Checkbox implements ComponentInterface {
    );
  }

+  // TODO(FW-3100): remove this
+  private renderLegacyCheckbox() {
+    if (!this.hasLoggedDeprecationWarning) {
+      printIonWarning(
+        `ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
+
+Example: <ion-checkbox>Label</ion-checkbox>
+Example with aria-label: <ion-checkbox aria-label="Label"></ion-checkbox>
+
+Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`,
+        this.el
+      );
+
+      if (this.legacy) {
+        printIonWarning(
+          `ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
+Developers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`,
+          this.el
+        );
+      }
+
+      this.hasLoggedDeprecationWarning = true;
+    }
+
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
+    const mode = getIonMode(this);
+    const { label, labelId, labelText } = getAriaLabel(el, inputId);
+    const path = getSVGPath(mode, indeterminate);
+
+    renderHiddenInput(true, el, name, checked ? value : '', disabled);
+
+    return (
+      <Host
+        aria-labelledby={label ? labelId : null}
+        aria-checked={`${checked}`}
+        aria-hidden={disabled ? 'true' : null}
+        role="checkbox"
+        class={createColorClasses(color, {
+          [mode]: true,
+          'in-item': hostContext('ion-item', el),
+          'checkbox-checked': checked,
+          'checkbox-disabled': disabled,
+          'checkbox-indeterminate': indeterminate,
+          'legacy-checkbox': true,
+          interactive: true,
+        })}
+        onClick={this.onClick}
+      >
+        <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
+          {path}
+        </svg>
+        <label htmlFor={inputId}>{labelText}</label>
+        <input
+          type="checkbox"
+          aria-checked={`${checked}`}
+          disabled={disabled}
+          id={inputId}
+          onChange={this.toggleChecked}
+          onFocus={() => this.onFocus()}
+          onBlur={() => this.onBlur()}
+          ref={(focusEl) => (this.focusEl = focusEl)}
+        />
+      </Host>
+    );
+  }
+
  private getSVGPath(mode: Mode, indeterminate: boolean): HTMLElement {
    let path = indeterminate ? (
      <path d="M6 12L18 12" part="mark" />
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts
@@ -0,0 +1,94 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: basic (legacy)'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/checkbox/test/legacy/basic`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`checkbox-legacy-basic`));
+    });
+  });
+});
+
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('checkbox: ionChange'), () => {
+    test('should fire ionChange when interacting with checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-checkbox value="my-checkbox"></ion-checkbox>
+      `,
+        config
+      );
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const checkbox = page.locator('ion-checkbox');
+
+      await checkbox.click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: true });
+
+      await checkbox.click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: false });
+    });
+
+    test('should fire ionChange when interacting with checkbox in item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const item = page.locator('ion-item');
+
+      await item.click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: true });
+
+      await item.click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: false });
+    });
+
+    test('should not fire when programmatically setting a value', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-checkbox value="my-checkbox"></ion-checkbox>
+      `,
+        config
+      );
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const checkbox = page.locator('ion-checkbox');
+
+      await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
+  });
+});
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-basic-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts-snapshots/checkbox-legacy-basic-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/basic/index.html
+++ b/core/src/components/checkbox/test/legacy/basic/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Checkbox - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+  <style>
+    ion-checkbox.checkbox-part::part(mark) {
+      transform: scale(0.5);
+      transform-origin: center;
+    }
+  </style>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Checkbox - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-item>
+          <ion-label>Unchecked by Default</ion-label>
+          <ion-checkbox></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checked by Default</ion-label>
+          <ion-checkbox checked></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Primary</ion-label>
+          <ion-checkbox checked color="primary" slot="end"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Secondary, disabled</ion-label>
+          <ion-checkbox disabled checked color="secondary"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Tertiary</ion-label>
+          <ion-checkbox checked color="tertiary"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Success</ion-label>
+          <ion-checkbox checked color="success"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Warning</ion-label>
+          <ion-checkbox checked color="warning"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Dark, --size</ion-label>
+          <ion-checkbox checked color="dark" style="--size: 100px"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Danger</ion-label>
+          <ion-checkbox checked color="danger" slot="start"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Light</ion-label>
+          <ion-checkbox checked color="light" slot="start"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Medium</ion-label>
+          <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkmark width</ion-label>
+          <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Checkmark ::part</ion-label>
+          <ion-checkbox checked color="dark" slot="start" class="checkbox-part"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled</ion-label>
+          <ion-checkbox disabled></ion-checkbox>
+        </ion-item>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts
@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: indeterminate (legacy)'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/checkbox/test/legacy/indeterminate`, config);
+
+      const content = page.locator('#checkboxes');
+      await expect(content).toHaveScreenshot(screenshot(`checkbox-legacy-indeterminate`));
+    });
+  });
+});
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts-snapshots/checkbox-legacy-indeterminate-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/legacy/indeterminate/index.html
+++ b/core/src/components/checkbox/test/legacy/indeterminate/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Checkbox - Indeterminate</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Checkbox - Indeterminate</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <div id="checkboxes">
+          <ion-item>
+            <ion-label>Indeterminate</ion-label>
+            <ion-checkbox slot="end" indeterminate></ion-checkbox>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checked / Indeterminate</ion-label>
+            <ion-checkbox slot="end" checked indeterminate></ion-checkbox>
+          </ion-item>
+
+          <ion-list-header>
+            <ion-label> Colors </ion-label>
+          </ion-list-header>
+          <div class="ion-padding-start">
+            <ion-checkbox indeterminate></ion-checkbox>
+            <ion-checkbox indeterminate color="secondary"></ion-checkbox>
+            <ion-checkbox indeterminate color="tertiary"></ion-checkbox>
+            <ion-checkbox indeterminate color="success"></ion-checkbox>
+            <ion-checkbox indeterminate color="warning"></ion-checkbox>
+            <ion-checkbox indeterminate color="danger"></ion-checkbox>
+            <ion-checkbox indeterminate color="dark"></ion-checkbox>
+            <ion-checkbox indeterminate color="medium"></ion-checkbox>
+            <ion-checkbox indeterminate color="light"></ion-checkbox>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      var indeterminateCheckboxes = document.getElementsByClassName('indeterminate');
+
+      for (var i = 0; i < indeterminateCheckboxes.length; i++) {
+        var checkbox = indeterminateCheckboxes[i];
+        checkbox.indeterminate = true;
+      }
+    </script>
+  </body>
+</html>
--- a/core/src/components/datetime-button/datetime-button.scss
+++ b/core/src/components/datetime-button/datetime-button.scss
@@ -23,7 +23,7 @@

  border: none;

-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-color-step-300, #edeef0);

  color: $text-color;

--- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
@@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');
    });
    test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
      const datetime = page.locator('ion-datetime');
@@ -62,7 +62,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
      `,
        config
      );
-      await page.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

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

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

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

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

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

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

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

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

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

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

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

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

      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 aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

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

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

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

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

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -3,7 +3,7 @@
@import "../../themes/ionic.globals.md";

 :host {
-  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --background: var(--ion-color-step-100, #ffffff);
  --title-color: #{current-color(contrast)};
 }

--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -120,11 +120,54 @@
  display: flex;
 }

-:host(.show-month-and-year) .calendar-next-prev,
-:host(.show-month-and-year) .calendar-days-of-week,
-:host(.show-month-and-year) .calendar-body,
-:host(.show-month-and-year) .datetime-time {
-  display: none;
+/**
+ * Safari 14 has an issue where a scroll event
+ * is incorrectly fired when unhiding the calendar content.
+ * To workaround this, we set the opacity
+ * of the content to 0 and hide it offscreen.
+ *
+ * -webkit-named-image is something only WebKit supports
+ * so we use this to detect general WebKit support.
+ * aspect-ratio is only supported in Safari 15+
+ * so by checking lack of aspect-ratio support, we know
+ * that we are in a pre-Safari 15 browser.
+ *
+ * TODO(FW-554): Remove when iOS 14 support is dropped.
+ */
+@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)) {
+  :host(.show-month-and-year) .calendar-next-prev,
+  :host(.show-month-and-year) .calendar-days-of-week,
+  :host(.show-month-and-year) .calendar-body,
+  :host(.show-month-and-year) .datetime-time {
+    @include position(null, null, null, -99999px);
+
+    position: absolute;
+
+    /**
+     * Use visibility instead of
+     * opacity to ensure element
+     * cannot receive focus
+     */
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+/**
+ * This support check two cases:
+ * 1. A WebKit browser that supports aspect-ratio (Safari 15+)
+ * 2. Any non-WebKit browser.
+ * Note that just overriding this display: none is not
+ * sufficient to resolve the issue mentioned above, which
+ * is why we do another set of @supports checks.
+ */
+@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
+  :host(.show-month-and-year) .calendar-next-prev,
+  :host(.show-month-and-year) .calendar-days-of-week,
+  :host(.show-month-and-year) .calendar-body,
+  :host(.show-month-and-year) .datetime-time {
+    display: none;
+  }
 }

 :host(.month-year-picker-open) .datetime-footer {
@@ -401,7 +444,7 @@

  border: none;

-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-color-step-300, #edeef0);

  color: $text-color;

--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1662,6 +1662,14 @@ export class Datetime implements ComponentInterface {
        disabled={disabled}
        value={todayString}
        onIonChange={(ev: CustomEvent) => {
+          // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+          // Due to a Safari 14 issue we need to destroy
+          // the scroll listener before we update state
+          // and trigger a re-render.
+          if (this.destroyCalendarListener) {
+            this.destroyCalendarListener();
+          }
+
          const { value } = ev.detail;
          const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);

@@ -1675,6 +1683,10 @@ export class Datetime implements ComponentInterface {
            ...findPart,
          });

+          // We can re-attach the scroll listener after
+          // the working parts have been updated.
+          this.initializeCalendarListener();
+
          ev.stopPropagation();
        }}
      >
@@ -1781,6 +1793,14 @@ export class Datetime implements ComponentInterface {
        disabled={disabled}
        value={pickerColumnValue}
        onIonChange={(ev: CustomEvent) => {
+          // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+          // Due to a Safari 14 issue we need to destroy
+          // the scroll listener before we update state
+          // and trigger a re-render.
+          if (this.destroyCalendarListener) {
+            this.destroyCalendarListener();
+          }
+
          this.setWorkingParts({
            ...workingParts,
            day: ev.detail.value,
@@ -1791,6 +1811,10 @@ export class Datetime implements ComponentInterface {
            day: ev.detail.value,
          });

+          // We can re-attach the scroll listener after
+          // the working parts have been updated.
+          this.initializeCalendarListener();
+
          ev.stopPropagation();
        }}
      >
@@ -1824,6 +1848,14 @@ export class Datetime implements ComponentInterface {
        disabled={disabled}
        value={workingParts.month}
        onIonChange={(ev: CustomEvent) => {
+          // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+          // Due to a Safari 14 issue we need to destroy
+          // the scroll listener before we update state
+          // and trigger a re-render.
+          if (this.destroyCalendarListener) {
+            this.destroyCalendarListener();
+          }
+
          this.setWorkingParts({
            ...workingParts,
            month: ev.detail.value,
@@ -1834,6 +1866,10 @@ export class Datetime implements ComponentInterface {
            month: ev.detail.value,
          });

+          // We can re-attach the scroll listener after
+          // the working parts have been updated.
+          this.initializeCalendarListener();
+
          ev.stopPropagation();
        }}
      >
@@ -1866,6 +1902,14 @@ export class Datetime implements ComponentInterface {
        disabled={disabled}
        value={workingParts.year}
        onIonChange={(ev: CustomEvent) => {
+          // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+          // Due to a Safari 14 issue we need to destroy
+          // the scroll listener before we update state
+          // and trigger a re-render.
+          if (this.destroyCalendarListener) {
+            this.destroyCalendarListener();
+          }
+
          this.setWorkingParts({
            ...workingParts,
            year: ev.detail.value,
@@ -1876,6 +1920,10 @@ export class Datetime implements ComponentInterface {
            year: ev.detail.value,
          });

+          // We can re-attach the scroll listener after
+          // the working parts have been updated.
+          this.initializeCalendarListener();
+
          ev.stopPropagation();
        }}
      >
--- 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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

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

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

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');
      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');
      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      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,7 +214,8 @@
          <ion-popover class="options-popover" trigger="popover-trigger">
            <ion-list lines="none">
              <ion-item>
-                <ion-checkbox>Dark Mode</ion-checkbox>
+                <ion-label>Dark Mode</ion-label>
+                <ion-checkbox slot="end"></ion-checkbox>
              </ion-item>
              <ion-item detail="true" href="?ionic:mode=ios">
                <ion-label>iOS Mode</ion-label>
@@ -224,19 +225,23 @@
              </ion-item>

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

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

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

              <ion-item>
-                <ion-select label="Color" id="color" value="primary">
+                <ion-label>Color</ion-label>
+                <ion-select 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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');
    });

    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.locator('.datetime-ready').first().waitFor();
+        await page.waitForSelector('.datetime-ready');
      });

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');
      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

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

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

-      await page.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');
      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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');
        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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0);
      await expect(datetimeYear).toHaveText('٢٠٢٢');
@@ -146,7 +146,7 @@ class DatetimeLocaleFixture {

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

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

  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.locator('.datetime-ready').waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').first().waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').first().waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').first().waitFor();
+      await page.waitForSelector('.datetime-ready');

      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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');

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

@@ -120,7 +120,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.locator('.datetime-ready').waitFor();
+        await page.waitForSelector('.datetime-ready');

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

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

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

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

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

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

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

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

        // 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.locator('.datetime-ready').first().waitFor();
+      await page.waitForSelector('.datetime-ready');
    });

    test('should hide the footer when picker is open', async ({ page }) => {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Liam DeBeasi	522d279e28	test	2024-02-07 09:05:05 -05:00
Liam DeBeasi	ff3c491680	add poc	2024-02-06 18:29:47 -05:00