merge release-6.2.8

Release 6.2.8

CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.8](https://github.com/ionic-team/ionic-framework/compare/v6.2.7...v6.2.8) (2022-09-21)
+
+
+### Bug Fixes
+
+* **datetime:** account for 12AM with min times and 12 hour format ([#25952](https://github.com/ionic-team/ionic-framework/issues/25952)) ([55ebd6c](https://github.com/ionic-team/ionic-framework/commit/55ebd6cdf39c01b401e876b76e755bfa04db8f65)), closes [#25183](https://github.com/ionic-team/ionic-framework/issues/25183)
+* **item:** show the highlight on iOS when --highlight-height is set ([#25905](https://github.com/ionic-team/ionic-framework/issues/25905)) ([d7db133](https://github.com/ionic-team/ionic-framework/commit/d7db1333f13834ecb447b4b1da62cfffed9fb333))
+* **overlays:** focus trapping no longer includes disabled elements ([#25949](https://github.com/ionic-team/ionic-framework/issues/25949)) ([6cb5827](https://github.com/ionic-team/ionic-framework/commit/6cb5827d069c255ab0a9a8c319aba9994a4c5196))
+* **overlays:** focus trapping no longer includes hidden elements ([#25948](https://github.com/ionic-team/ionic-framework/issues/25948)) ([5c10f98](https://github.com/ionic-team/ionic-framework/commit/5c10f98ceb3ae42d3363b38ba786b9122676a59c))
+
+
+### Performance Improvements
+
+* **card:** avoid force compositing on ios ([#25942](https://github.com/ionic-team/ionic-framework/issues/25942)) ([174c3b3](https://github.com/ionic-team/ionic-framework/commit/174c3b30a0bce7e7ab13e5605348ec107af69dd6))
+
+
+
+
+
 ## [6.2.7](https://github.com/ionic-team/ionic-framework/compare/v6.2.6...v6.2.7) (2022-09-14)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.8](https://github.com/ionic-team/ionic/compare/v6.2.7...v6.2.8) (2022-09-21)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.7",
+  "version": "6.2.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.2.7",
+      "version": "6.2.8",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.2.7",
+        "@ionic/core": "^6.2.8",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
-      "integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.8.tgz",
+      "integrity": "sha512-tUUdvCPo9Z4RQXjvxNXBXQsVTFDAH2ju/HAhzZiAvdfwpHfpA39DWkXwAQeoV9gfFFblaOmCmeSq/8JP/FRn4A==",
       "dependencies": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.2.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
-      "integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.8.tgz",
+      "integrity": "sha512-tUUdvCPo9Z4RQXjvxNXBXQsVTFDAH2ju/HAhzZiAvdfwpHfpA39DWkXwAQeoV9gfFFblaOmCmeSq/8JP/FRn4A==",
       "requires": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.7",
+  "version": "6.2.8",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.2.7",
+    "@ionic/core": "^6.2.8",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

core/.eslintrc.js

@@ -16,7 +16,8 @@ module.exports = {
     "sourceType": "module"
   },
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "custom-rules"
   ],
   "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -29,6 +30,7 @@ module.exports = {
     ],
     "no-useless-catch": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "no-case-declarations": "off"
+    "no-case-declarations": "off",
+    "custom-rules/no-component-on-ready-method": "error"
   }
 };

core/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.8](https://github.com/ionic-team/ionic/compare/v6.2.7...v6.2.8) (2022-09-21)
+
+
+### Bug Fixes
+
+* **datetime:** account for 12AM with min times and 12 hour format ([#25952](https://github.com/ionic-team/ionic/issues/25952)) ([55ebd6c](https://github.com/ionic-team/ionic/commit/55ebd6cdf39c01b401e876b76e755bfa04db8f65)), closes [#25183](https://github.com/ionic-team/ionic/issues/25183)
+* **item:** show the highlight on iOS when --highlight-height is set ([#25905](https://github.com/ionic-team/ionic/issues/25905)) ([d7db133](https://github.com/ionic-team/ionic/commit/d7db1333f13834ecb447b4b1da62cfffed9fb333))
+* **overlays:** focus trapping no longer includes disabled elements ([#25949](https://github.com/ionic-team/ionic/issues/25949)) ([6cb5827](https://github.com/ionic-team/ionic/commit/6cb5827d069c255ab0a9a8c319aba9994a4c5196))
+* **overlays:** focus trapping no longer includes hidden elements ([#25948](https://github.com/ionic-team/ionic/issues/25948)) ([5c10f98](https://github.com/ionic-team/ionic/commit/5c10f98ceb3ae42d3363b38ba786b9122676a59c))
+
+
+### Performance Improvements
+
+* **card:** avoid force compositing on ios ([#25942](https://github.com/ionic-team/ionic/issues/25942)) ([174c3b3](https://github.com/ionic-team/ionic/commit/174c3b30a0bce7e7ab13e5605348ec107af69dd6))
+
+
+
+
+
 ## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
 
 

core/custom-rules/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'no-component-on-ready-method': require('./no-component-on-ready-method.js')
+  }
+}

core/custom-rules/no-component-on-ready-method.js

@@ -0,0 +1,23 @@
+module.exports = {
+    meta: {
+      messages: {
+        noComponentOnReadyMethod: 'Using the componentOnReady method is not allowed. Use the componentOnReady helper utility in src/utils/helpers.ts instead.',
+      },
+    },
+    create(context) {
+      return {
+        CallExpression(node) {
+          /**
+           * We only want to exclude usages of componentOnReady().
+           * Checking for the existence of the componentOnReady method
+           * is a way of determining if we are in a lazy loaded build
+           * or custom elements build, so we want to allow that.
+           */
+          const callee = node.callee;
+          if (callee.type === 'MemberExpression' && callee.property.name === 'componentOnReady') {
+            context.report({ node: node, messageId: 'noComponentOnReadyMethod' });
+          }
+      }
+    }
+  }
+};

core/custom-rules/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "eslint-plugin-custom-rules",
+  "version": "1.0.0",
+  "main": "index.js"
+}

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.7",
+  "version": "6.2.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.2.7",
+      "version": "6.2.8",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.17.4",
@@ -36,6 +36,7 @@
         "domino": "^2.1.6",
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-custom-rules": "file:custom-rules",
         "execa": "^5.0.0",
         "fs-extra": "^9.0.1",
         "jest": "^26.4.1",
@@ -52,6 +53,11 @@
         "typescript": "^4.0.5"
       }
     },
+    "custom-rules": {
+      "name": "eslint-plugin-custom-rules",
+      "version": "1.0.0",
+      "dev": true
+    },
     "node_modules/@axe-core/playwright": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.4.2.tgz",
@@ -969,27 +975,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@ionic/eslint-config/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/@ionic/eslint-config/node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
     "node_modules/@ionic/prettier-config": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz",
@@ -3980,6 +3965,30 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.17.0.tgz",
+      "integrity": "sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.17.0",
+        "@typescript-eslint/types": "5.17.0",
+        "@typescript-eslint/typescript-estree": "5.17.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4012,27 +4021,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
     "node_modules/@typescript-eslint/experimental-utils": {
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz",
@@ -4172,27 +4160,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/experimental-utils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/experimental-utils/node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.17.0.tgz",
@@ -4280,6 +4247,30 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.17.0.tgz",
+      "integrity": "sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.17.0",
+        "@typescript-eslint/types": "5.17.0",
+        "@typescript-eslint/typescript-estree": "5.17.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/type-utils/node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4297,27 +4288,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
     "node_modules/@typescript-eslint/types": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.17.0.tgz",
@@ -4390,51 +4360,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.17.0.tgz",
-      "integrity": "sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.17.0",
-        "@typescript-eslint/types": "5.17.0",
-        "@typescript-eslint/typescript-estree": "5.17.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.17.0.tgz",
@@ -6852,6 +6777,10 @@
         "node": ">=4"
       }
     },
+    "node_modules/eslint-plugin-custom-rules": {
+      "resolved": "custom-rules",
+      "link": true
+    },
     "node_modules/eslint-plugin-import": {
       "version": "2.25.4",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz",
@@ -16620,6 +16549,27 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
       "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
     },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
@@ -18057,21 +18007,6 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
         }
       }
     },
@@ -20442,6 +20377,20 @@
         "tsutils": "^3.21.0"
       },
       "dependencies": {
+        "@typescript-eslint/utils": {
+          "version": "5.17.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.17.0.tgz",
+          "integrity": "sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "@typescript-eslint/scope-manager": "5.17.0",
+            "@typescript-eslint/types": "5.17.0",
+            "@typescript-eslint/typescript-estree": "5.17.0",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^3.0.0"
+          }
+        },
         "debug": {
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -20459,21 +20408,6 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
         }
       }
     },
@@ -20555,21 +20489,6 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
         }
       }
     },
@@ -20617,6 +20536,20 @@
         "tsutils": "^3.21.0"
       },
       "dependencies": {
+        "@typescript-eslint/utils": {
+          "version": "5.17.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.17.0.tgz",
+          "integrity": "sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "@typescript-eslint/scope-manager": "5.17.0",
+            "@typescript-eslint/types": "5.17.0",
+            "@typescript-eslint/typescript-estree": "5.17.0",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^3.0.0"
+          }
+        },
         "debug": {
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -20625,21 +20558,6 @@
           "requires": {
             "ms": "2.1.2"
           }
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
         }
       }
     },
@@ -20681,37 +20599,8 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
         }
       }
-      }
-    },
-    "@typescript-eslint/utils": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.17.0.tgz",
-      "integrity": "sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==",
-      "dev": true,
-      "requires": {
-        "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.17.0",
-        "@typescript-eslint/types": "5.17.0",
-        "@typescript-eslint/typescript-estree": "5.17.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      }
     },
     "@typescript-eslint/visitor-keys": {
       "version": "5.17.0",
@@ -22713,6 +22602,9 @@
         }
       }
     },
+    "eslint-plugin-custom-rules": {
+      "version": "file:custom-rules"
+    },
     "eslint-plugin-import": {
       "version": "2.25.4",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz",
@@ -30016,6 +29908,23 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
       "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
     },
+    "tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.7",
+  "version": "6.2.8",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -58,6 +58,7 @@
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-custom-rules": "file:custom-rules",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "jest": "^26.4.1",

core/src/components.d.ts

@@ -372,11 +372,11 @@ export namespace Components {
          */
         "download": string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -400,11 +400,11 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**
@@ -4332,11 +4332,11 @@ declare namespace LocalJSX {
          */
         "download"?: string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -4368,11 +4368,11 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**

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

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('avatar: basic', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('Avatar does not test RTL behaviors. Usages of Avatar in slots are tested in components that use Avatar.');
+
+    await page.goto(`/src/components/avatar/test/basic`);
+
+    const avatar = page.locator('#avatar');
+    const avatarChip = page.locator('#avatar-chip');
+    const avatarItemStart = page.locator('#avatar-item-start');
+    const avatarItemEnd = page.locator('#avatar-item-end');
+
+    expect(await avatar.screenshot()).toMatchSnapshot(`avatar-diff-${page.getSnapshotSettings()}.png`);
+    expect(await avatarChip.screenshot()).toMatchSnapshot(`avatar-chip-diff-${page.getSnapshotSettings()}.png`);
+    expect(await avatarItemStart.screenshot()).toMatchSnapshot(
+      `avatar-item-start-diff-${page.getSnapshotSettings()}.png`
+    );
+    expect(await avatarItemEnd.screenshot()).toMatchSnapshot(`avatar-item-end-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/avatar/test/basic/index.html

@@ -23,25 +23,25 @@
       </ion-header>
 
       <ion-content>
-        <ion-avatar>
+        <ion-avatar id="avatar">
           <img src="/src/components/avatar/test/avatar.svg" />
         </ion-avatar>
 
-        <ion-chip>
+        <ion-chip id="avatar-chip">
           <ion-avatar>
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>
           <ion-label>Chip Avatar</ion-label>
         </ion-chip>
 
-        <ion-item>
+        <ion-item id="avatar-item-start">
           <ion-avatar slot="start">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>
           <ion-label>Item Avatar</ion-label>
         </ion-item>
 
-        <ion-item>
+        <ion-item id="avatar-item-end">
           <ion-avatar slot="end">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>

core/src/components/avatar/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('avatar: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/avatar/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/button.tsx

@@ -53,14 +53,14 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   /**
    * Set to `"block"` for a full-width button or to `"full"` for a full-width button
-   * without left and right borders.
+   * with square corners and no left or right borders.
    */
   @Prop({ reflect: true }) expand?: 'full' | 'block';
 
   /**
-   * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
-   * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
-   * a toolbar, where the default is `"clear"`.
+   * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
+   * for a transparent button with a border, or to `"solid"` for a button with a filled background.
+   * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
    */
   @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
@@ -97,12 +97,16 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   @Prop() rel: string | undefined;
 
   /**
-   * The button shape.
+   * Set to `"round"` for a button with more rounded corners.
    */
   @Prop({ reflect: true }) shape?: 'round';
 
   /**
-   * The button size.
+   * Set to `"small"` for a button with less height and padding, to `"default"`
+   * for a button with the default height and padding, or to `"large"` for a button
+   * with more height and padding. By default the size is unset, unless the button
+   * is inside of an item, where the size is `"small"` by default. Set the size to
+   * `"default"` inside of an item to make it a standard size button.
    */
   @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
 

core/src/components/button/test/anchor/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: anchor', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/anchor?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -7,7 +7,7 @@ test.describe('button: basic', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
+    expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
 });
 

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/basic/index.html

@@ -88,9 +88,7 @@
         </p>
 
         <p>
-          <ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)"
-            >Button Disabled</ion-button
-          >
+          <ion-button expand="block" id="disabledButton" disabled>Button Disabled</ion-button>
           <ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
           <ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
         </p>
@@ -125,13 +123,8 @@
 
       function toggleDisabled() {
         var buttonEl = document.getElementById('disabledButton');
-        console.log(buttonEl);
         buttonEl.disabled = !buttonEl.disabled;
       }
-
-      function clickedButton(ev) {
-        console.log('Clicked button', ev);
-      }
     </script>
   </body>
 </html>

core/src/components/button/test/clear/button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: clear', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/clear`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-clear-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/clear/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: clear', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/clear?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/dynamic/e2e.ts

@@ -1,31 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: dynamic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/dynamic?ionic:_testing=true',
-  });
-
-  const compares = [];
-
-  compares.push(await page.compareScreenshot());
-
-  await page.click('#add-item-button');
-
-  compares.push(await page.compareScreenshot('add item button'));
-
-  await page.click('#add-item-divider-button');
-
-  compares.push(await page.compareScreenshot('add item divider button'));
-
-  await page.click('#change-item-button');
-
-  compares.push(await page.compareScreenshot('change item button size'));
-
-  await page.click('#change-item-divider-button');
-
-  compares.push(await page.compareScreenshot('change item divider button size'));
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});

core/src/components/button/test/dynamic/index.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Dynamic</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>Button - Dynamic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding" id="content" no-bounce>
-        <ion-item id="dynamicItem">
-          <ion-button slot="start">Default</ion-button>
-          <ion-label>Dynamic Button</ion-label>
-          <ion-button id="dynamicItemLarge" slot="end" size="large">Large</ion-button>
-        </ion-item>
-        <ion-button id="add-item-button" color="success" onClick="addButton('dynamicItem')"> Add a Button </ion-button>
-        <ion-button id="change-item-button" color="tertiary" onClick="changeButtonSize('dynamicItemLarge')">
-          Change Button Size
-        </ion-button>
-
-        <ion-item-divider id="dynamicItemDivider">
-          <ion-button slot="start">Default</ion-button>
-          <ion-label>Dynamic Button</ion-label>
-          <ion-button id="dynamicItemDividerLarge" slot="end" size="large">Large</ion-button>
-        </ion-item-divider>
-        <ion-button id="add-item-divider-button" color="success" onClick="addButton('dynamicItemDivider')">
-          Add a Button
-        </ion-button>
-        <ion-button
-          id="change-item-divider-button"
-          color="tertiary"
-          onClick="changeButtonSize('dynamicItemDividerLarge')"
-        >
-          Change Button Size
-        </ion-button>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      function addButton(dynamicId) {
-        var item = document.querySelector('#' + dynamicId);
-        var button = document.createElement('ion-button');
-        button.textContent = 'Button';
-        button.slot = 'start';
-        item.appendChild(button);
-      }
-
-      function changeButtonSize(dynamicId) {
-        var button = document.querySelector('#' + dynamicId);
-        var size = button.size === 'large' ? undefined : 'large';
-        button.size = size;
-      }
-    </script>
-  </body>
-</html>

core/src/components/button/test/expand/button.e2e.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: expand', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('All content takes up the full width, so RTL has no effect.');
+    await page.goto(`/src/components/button/test/expand`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-expand-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/expand/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: expand', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/expand?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/icon/button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: icon', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/icon`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-icon-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/icon/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: icon', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/icon?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/outline/button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: outline', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/outline`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-outline-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/outline/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: outline', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/outline?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/round/button.e2e.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: round', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('All content takes up the full width, so RTL has no effect.');
+    await page.goto(`/src/components/button/test/round`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-round-${page.getSnapshotSettings()}.png`);
+  });
+});