Merge pull request #27583 from ionic-team/sp/sync-feature-7.1-with-main

chore: sync with main

.github/CODEOWNERS

@@ -11,9 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
-# Global owners
-* @ionic-team/framework
-
 # Frameworks
 
 ## Angular
@@ -56,9 +53,6 @@
 /core/src/components/refresher/ @liamdebeasi
 /core/src/components/refresher-content/ @liamdebeasi
 
-# Codeowner should own the source, but everyone should own the tests
-/core/src/components/**/test/ @ionic-team/framework
-
 # Utilities
 
 /core/src/utils/animation/ @liamdebeasi

.github/dependabot.yml

@@ -13,3 +13,4 @@ updates:
       - dependency-name: "@stencil/react-output-target"
       - dependency-name: "@stencil/sass"
       - dependency-name: "@stencil/vue-output-target"
+      - dependency-name: "ionicons"

.github/workflows/actions/build-core/action.yml

@@ -4,9 +4,6 @@ runs:
   using: 'composite'
   steps:
     - uses: actions/checkout@v3
-      with:
-        # Checkout the latest commit in this branch
-        ref: ${{ github.event.pull_request.head.sha }}
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x

.github/workflows/build.yml

@@ -17,9 +17,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-        with:
-          # Checkout the latest commit in this branch
-          ref: ${{ github.event.pull_request.head.sha }}
       - uses: ./.github/workflows/actions/build-core
 
   test-core-clean-build:

CHANGELOG.md

@@ -3,6 +3,69 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+
+### Bug Fixes
+
+* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
+* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470)
+* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
+
+
+
+
+
+## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
+
+
+### Bug Fixes
+
+* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184)
+* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205)
+* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176)
+
+
+
+
+
+## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
+
+
+### Bug Fixes
+
+* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
+* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
+* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
+* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
+* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
+* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763)
+* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
+* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
+* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
+* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
+* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
+
+
+
+
+
 ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
 
 

angular/README.md

@@ -7,10 +7,10 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 * [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
 * [Ionic Documentation](https://ionicframework.com/docs/)
+* [Ionic Discord](https://ionic.link/discord)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)
-* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com/)
 * [Capacitor](https://capacitor.ionicframework.com/)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.6",
+  "version": "7.0.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.6",
+      "version": "7.0.10",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.6",
+        "@ionic/core": "^7.0.10",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1227,9 +1227,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz",
-      "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
+      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
       "dependencies": {
         "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
@@ -8104,9 +8104,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz",
-      "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==",
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
+      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
       "requires": {
         "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.6",
+  "version": "7.0.10",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.0.6",
+    "@ionic/core": "^7.0.10",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

angular/src/directives/navigation/ion-tabs.ts

@@ -8,7 +8,7 @@ import { StackEvent } from './stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  template: ` <ng-content select="[slot=top]"></ng-content>
+  template: `<ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner">
       <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
@@ -29,7 +29,6 @@ import { StackEvent } from './stack-utils';
         height: 100%;
 
         contain: layout size style;
-        z-index: $z-index-page-container;
       }
       .tabs-inner {
         position: relative;

angular/src/providers/angular-delegate.ts

@@ -83,7 +83,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           container,
           component,
           componentProps,
-          cssClasses
+          cssClasses,
+          this.elementReferenceKey
         );
         resolve(el);
       });
@@ -119,7 +120,8 @@ export const attachView = (
   container: any,
   component: any,
   params: any,
-  cssClasses: string[] | undefined
+  cssClasses: string[] | undefined,
+  elementReferenceKey: string | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -145,7 +147,23 @@ export const attachView = (
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;
+
   if (params) {
+    /**
+     * For modals and popovers, a reference to the component is
+     * added to `params` during the call to attachViewToDom. If
+     * a reference using this name is already set, this means
+     * the app is trying to use the name as a component prop,
+     * which will cause collisions.
+     */
+    if (elementReferenceKey && instance[elementReferenceKey] !== undefined) {
+      console.error(
+        `[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${
+          component.name
+        }.`
+      );
+    }
+
     Object.assign(instance, params);
   }
   if (cssClasses) {

core/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+
+### Bug Fixes
+
+* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
+* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
+
+
+
+
+
+## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
+
+
+### Bug Fixes
+
+* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184)
+* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205)
+* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176)
+
+
+
+
+
+## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
+
+
+### Bug Fixes
+
+* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
+* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
+* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
+* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
+* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
+* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763)
+* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
+* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
+* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
+* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
+* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
+
+
+
+
+
 ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
 
 

core/README.md

@@ -101,10 +101,10 @@ const showModal = async () => {
 ## Related
 
 * [Ionic Documentation](https://ionicframework.com/docs/)
+* [Ionic Discord](https://ionic.link/discord)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)
-* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com/)
 * [Capacitor](https://capacitor.ionicframework.com/)
 
 

core/package-lock.json

@@ -1,30 +1,30 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.6",
+  "version": "7.0.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.6",
+      "version": "7.0.10",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.0",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.6.1",
+        "@axe-core/playwright": "^4.7.1",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.33.0",
+        "@playwright/test": "^1.34.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.6.0",
+        "@stencil/angular-output-target": "^0.7.0",
         "@stencil/react-output-target": "^0.5.0",
-        "@stencil/sass": "^3.0.2",
-        "@stencil/vue-output-target": "^0.8.4",
+        "@stencil/sass": "^3.0.3",
+        "@stencil/vue-output-target": "^0.8.5",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -53,12 +53,12 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
-      "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
+      "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
       "dev": true,
       "dependencies": {
-        "axe-core": "^4.6.3"
+        "axe-core": "^4.7.0"
       },
       "peerDependencies": {
         "playwright": ">= 1.0.0"
@@ -1501,13 +1501,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.34.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.1.tgz",
+      "integrity": "sha512-hKBpxD79vGkmeqLkJwPBjd4DMUahf1W7ra+83lDNL4JPmLhjITMiy0HoR0WM/PGU6nqnl1cisHc3yKQQgKMxOQ==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1585,18 +1585,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz",
-      "integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
+      "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": "^2.9.0 || ^3.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz",
+      "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1615,18 +1615,18 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz",
-      "integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
+      "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.4.tgz",
-      "integrity": "sha512-3iESCce7D/2lNVYGM+ukwW/NLFAfeAOcaMFXaK0R1Ub0mZ2YwL9N1rxr9Y8UGfdUzkpi66XIo0jNm3V9YlZ+Ig==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
+      "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": "^2.9.0 || ^3.0.0"
@@ -2571,9 +2571,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
-      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
+      "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -8150,14 +8150,14 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
-      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
+      "version": "1.34.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.34.1.tgz",
+      "integrity": "sha512-RonTwQifzkCZHsjZKYUKsOJkQAVe1HArnyLcSRrkyDxN46Ytpwki5XzQFdpuv0XD8WtAjs4gI3oMYJiEj5Qo6g==",
       "dev": true,
       "hasInstallScript": true,
       "peer": true,
       "dependencies": {
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8167,9 +8167,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.34.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.1.tgz",
+      "integrity": "sha512-4Y5hGLoSrnB/BXj2NFKBNWP/bI9uVejTVbso1ZBtkKZ+O2KiVIeCJ3R4c7Cf2PbP7htjLolHXY+mImt2IWOlEg==",
       "dev": true,
       "bin": {
         "playwright": "cli.js"
@@ -10352,12 +10352,12 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
-      "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
+      "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
       "dev": true,
       "requires": {
-        "axe-core": "^4.6.3"
+        "axe-core": "^4.7.0"
       }
     },
     "@babel/code-frame": {
@@ -11398,14 +11398,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.34.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.1.tgz",
+      "integrity": "sha512-hKBpxD79vGkmeqLkJwPBjd4DMUahf1W7ra+83lDNL4JPmLhjITMiy0HoR0WM/PGU6nqnl1cisHc3yKQQgKMxOQ==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11460,16 +11460,16 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz",
-      "integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
+      "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz",
+      "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.0",
@@ -11479,16 +11479,16 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz",
-      "integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
+      "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
       "dev": true,
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.4.tgz",
-      "integrity": "sha512-3iESCce7D/2lNVYGM+ukwW/NLFAfeAOcaMFXaK0R1Ub0mZ2YwL9N1rxr9Y8UGfdUzkpi66XIo0jNm3V9YlZ+Ig==",
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
+      "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
       "dev": true,
       "requires": {}
     },
@@ -12144,9 +12144,9 @@
       }
     },
     "axe-core": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
-      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
+      "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
       "dev": true
     },
     "babel-jest": {
@@ -16275,19 +16275,19 @@
       }
     },
     "playwright": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
-      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
+      "version": "1.34.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.34.1.tgz",
+      "integrity": "sha512-RonTwQifzkCZHsjZKYUKsOJkQAVe1HArnyLcSRrkyDxN46Ytpwki5XzQFdpuv0XD8WtAjs4gI3oMYJiEj5Qo6g==",
       "dev": true,
       "peer": true,
       "requires": {
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.1"
       }
     },
     "playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.34.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.1.tgz",
+      "integrity": "sha512-4Y5hGLoSrnB/BXj2NFKBNWP/bI9uVejTVbso1ZBtkKZ+O2KiVIeCJ3R4c7Cf2PbP7htjLolHXY+mImt2IWOlEg==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.6",
+  "version": "7.0.10",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,22 +31,22 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.2.2",
+    "@stencil/core": "^3.3.0",
     "ionicons": "^7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.6.1",
+    "@axe-core/playwright": "^4.7.1",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.34.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.6.0",
+    "@stencil/angular-output-target": "^0.7.0",
     "@stencil/react-output-target": "^0.5.0",
-    "@stencil/sass": "^3.0.2",
-    "@stencil/vue-output-target": "^0.8.4",
+    "@stencil/sass": "^3.0.3",
+    "@stencil/vue-output-target": "^0.8.5",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",

core/src/components/accordion-group/accordion-group.md.scss

@@ -21,7 +21,7 @@
 :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next) {
   @include border-radius($accordion-md-border-radius, $accordion-md-border-radius, null, null);
 }
-:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type,
+
 :host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type {
   @include margin(0, 0, 0, 0);
 }

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

@@ -40,7 +40,8 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await didPresent.next();
 
-      const results = await new AxeBuilder({ page }).analyze();
+      // TODO FW-4375
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
       expect(results.violations).toEqual([]);
     });
 

core/src/components/checkbox/checkbox.ios.scss

@@ -21,6 +21,9 @@
 
 // iOS Checkbox: Disabled
 // -----------------------------------------
+// The checkbox and label should use the
+// same opacity and match the other form
+// controls
 
 :host(.checkbox-disabled) {
   opacity: $checkbox-ios-disabled-opacity;

core/src/components/checkbox/checkbox.ios.vars.scss

@@ -54,7 +54,7 @@ $checkbox-ios-checkmark-width:            math.div($checkbox-ios-icon-size, 6) +
 $checkbox-ios-checkmark-height:           $checkbox-ios-icon-size * 0.5 !default;
 
 /// @prop - Opacity of the disabled checkbox
-$checkbox-ios-disabled-opacity:           .3 !default;
+$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;

core/src/components/checkbox/checkbox.md.scss

@@ -40,11 +40,19 @@
 
 // Material Design Checkbox: Disabled
 // --------------------------------------------------------
+// The checkbox itself should use the disabled
+// opacity set by its spec, while the label
+// should match the other form controls
 
-:host(.checkbox-disabled) {
+:host(.legacy-checkbox.checkbox-disabled),
+:host(.checkbox-disabled) .label-text-wrapper {
   opacity: $checkbox-md-disabled-opacity;
 }
 
+:host(.checkbox-disabled) .native-wrapper {
+  opacity: $checkbox-md-icon-disabled-opacity;
+}
+
 
 // Material Design Checkbox Within An Item
 // TODO(FW-3100): remove this

core/src/components/checkbox/checkbox.md.vars.scss

@@ -4,8 +4,8 @@
 // Material Design Checkbox
 // --------------------------------------------------
 
-/// @prop - Opacity of the disabled checkbox
-$checkbox-md-disabled-opacity:           .3 !default;
+/// @prop - Opacity of the disabled checkbox label
+$checkbox-md-disabled-opacity:           $form-control-md-disabled-opacity !default;
 
 /// @prop - Background color of the checkbox icon when off
 $checkbox-md-icon-background-color-off:  $item-md-background !default;
@@ -72,3 +72,12 @@ $checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !defau
 
 /// @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
+/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
+/// opacity is applied on top of the transparent color so
+/// this opacity gets us the equivalent of applying `0.38`
+/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)`
+$checkbox-md-icon-disabled-opacity:      0.63 !default;

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

@@ -3,42 +3,6 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
-    test('should render unchecked checkbox correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox>Unchecked</ion-checkbox>
-      `,
-        config
-      );
-
-      const checkbox = page.locator('ion-checkbox');
-      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-unchecked`));
-    });
-
-    test('should render checked checkbox correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox checked>Checked</ion-checkbox>
-      `,
-        config
-      );
-
-      const checkbox = page.locator('ion-checkbox');
-      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-checked`));
-    });
-
-    test('should render disabled checkbox correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox checked disabled>Disabled</ion-checkbox>
-      `,
-        config
-      );
-
-      const checkbox = page.locator('ion-checkbox');
-      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-disabled`));
-    });
-
     test('should render custom checkmark-width correctly', async ({ page }) => {
       await page.setContent(
         `

core/src/components/checkbox/test/states/checkbox.e2e.ts

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: states'), () => {
+    test('should render disabled checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox disabled>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-disabled`));
+    });
+
+    test('should render disabled checked checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox checked disabled>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked-disabled`));
+    });
+
+    test('should render checked checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox checked>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked`));
+    });
+
+    test('should render unchecked checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-unchecked`));
+    });
+  });
+});