chore: conflicts with dynamic type and stacked labels

chore: sync with main

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -34,7 +34,11 @@ runs:
       run: |
         git config user.name ionitron
         git config user.email hi@ionicframework.com
-        git add src/\*.png --force
+
+        # This adds an empty entry for new
+        # screenshot files so we can track them with
+        # git diff
+        git add src/\*.png --force -N
 
         if git diff --exit-code; then
           echo -e "\033[1;31m⚠️ Error: No new screenshots generated ⚠️\033[0m"
@@ -42,6 +46,9 @@ runs:
           echo -e "\033[1;31mMake sure you have pushed any code changes that would result in visual diffs.\033[0m"
           exit 1
         else
+          # This actually adds the contents
+          # of the screenshots (including new ones)
+          git add src/\*.png --force
           git commit -m "chore(): add updated snapshots"
           git push
         fi

CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
+# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391)
+* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a))
+* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e))
+
+
+### Features
+
+* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56))
+* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355))
+* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340)
+* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137)
+
+
+
+
+
+## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13)
+
+
+### Bug Fixes
+
+* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b))
+
+
+
+
+
 ## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
 
 

core/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
+# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391)
+* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a))
+* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e))
+
+
+### Features
+
+* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56))
+* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355))
+* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340)
+* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137)
+
+
+
+
+
+## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13)
+
+
+### Bug Fixes
+
+* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b))
+
+
+
+
+
 ## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
 
 

core/package-lock.json

@@ -1,31 +1,31 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.3",
+  "version": "7.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.3.3",
+      "version": "7.4.1",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.2.0",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.3.0",
+        "@capacitor/core": "^5.4.1",
         "@capacitor/haptics": "^5.0.6",
         "@capacitor/keyboard": "^5.0.6",
         "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.37.1",
+        "@playwright/test": "^1.38.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.7.1",
+        "@stencil/angular-output-target": "^0.8.2",
         "@stencil/react-output-target": "^0.5.3",
         "@stencil/sass": "^3.0.5",
         "@stencil/vue-output-target": "^0.8.6",
@@ -44,7 +44,7 @@
         "jest-cli": "^27.5.1",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
-        "sass": "^1.26.10",
+        "sass": "^1.33.0",
         "serve": "^14.0.1",
         "stylelint": "^13.13.1",
         "stylelint-order": "^4.1.0",
@@ -607,9 +607,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.3.0.tgz",
-      "integrity": "sha512-mvhh1yJtcUTZ0hUUriBKKpxq47hn75bjxH3tYPRgAFu1z3gowCg+OtG4Rce3W5gr5fSfCjQgOSL0Vp7k9hPUWw==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
+      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1541,22 +1541,18 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz",
-      "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.37.1"
+        "playwright": "1.38.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
         "node": ">=16"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1625,18 +1621,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
-      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.2.tgz",
+      "integrity": "sha512-i2Oxq2VPQTo1OoP3iDN39N2f/CDO9crS8oUfGEtjwzMgMNuYSMB2VprFoVDUTwqaCP6N409M8+/wJK3oApTDuQ==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
-      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8193,10 +8189,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.38.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/playwright-core": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz",
-      "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -8811,12 +8825,12 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
+      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0"
       },
       "bin": {
         "sass": "sass.js"
@@ -10788,9 +10802,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.3.0.tgz",
-      "integrity": "sha512-mvhh1yJtcUTZ0hUUriBKKpxq47hn75bjxH3tYPRgAFu1z3gowCg+OtG4Rce3W5gr5fSfCjQgOSL0Vp7k9hPUWw==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
+      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11455,14 +11469,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz",
-      "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "requires": {
-        "@types/node": "*",
-        "fsevents": "2.3.2",
-        "playwright-core": "1.37.1"
+        "playwright": "1.38.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11517,16 +11529,16 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
-      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.2.tgz",
+      "integrity": "sha512-i2Oxq2VPQTo1OoP3iDN39N2f/CDO9crS8oUfGEtjwzMgMNuYSMB2VprFoVDUTwqaCP6N409M8+/wJK3oApTDuQ==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz",
-      "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -16331,10 +16343,20 @@
         "find-up": "^4.0.0"
       }
     },
+    "playwright": {
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "dev": true,
+      "requires": {
+        "fsevents": "2.3.2",
+        "playwright-core": "1.38.1"
+      }
+    },
     "playwright-core": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz",
-      "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true
     },
     "postcss": {
@@ -16776,12 +16798,12 @@
       "dev": true
     },
     "sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
+      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
       "dev": true,
       "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0"
       }
     },
     "saxes": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.3",
+  "version": "7.4.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,23 +31,23 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.2.0",
+    "@stencil/core": "^4.3.0",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.3.0",
+    "@capacitor/core": "^5.4.1",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.38.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.7.1",
+    "@stencil/angular-output-target": "^0.8.2",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.5",
     "@stencil/vue-output-target": "^0.8.6",
@@ -66,7 +66,7 @@
     "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.26.10",
+    "sass": "^1.33.0",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",

core/playwright.config.ts

@@ -60,7 +60,8 @@ const config: PlaywrightTestConfig = {
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   maxFailures: 0,
-  retries: 2,
+  /* Test retries help catch flaky tests on CI */
+  retries: process.env.CI ? 2 : 0,
   reportSlowTests: null,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,

core/src/components.d.ts

@@ -1336,6 +1336,7 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -5407,6 +5408,7 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**

core/src/components/action-sheet/action-sheet.ios.scss

@@ -131,11 +131,11 @@
 .action-sheet-button {
   @include padding($action-sheet-ios-button-padding);
 
-  height: $action-sheet-ios-button-height;
+  min-height: $action-sheet-ios-button-height;
 
   font-size: $action-sheet-ios-button-font-size;
 
-  contain: strict;
+  contain: content;
 }
 
 .action-sheet-button .action-sheet-icon {

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start:                            $action-sheet-
 $action-sheet-ios-title-color:                                    $text-color-step-600 !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-ios-title-font-size:                                13px !default;
+$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px) !default;
 
 /// @prop - Font weight of the action sheet title
 $action-sheet-ios-title-font-weight:                              400 !default;
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color:                             rgba($text-col
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-ios-sub-title-font-size:                            13px !default;
+$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px) !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-ios-sub-title-padding-top:                          6px !default;
@@ -97,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start:                        $action-sheet-
 $action-sheet-ios-button-height:                                  56px !default;
 
 /// @prop - Padding of the action sheet button
-$action-sheet-ios-button-padding:                                 18px !default;
+$action-sheet-ios-button-padding:                                 14px !default;
 
 /// @prop - Text color of the action sheet button
 $action-sheet-ios-button-text-color:                              ion-color(primary, base) !default;
 
 /// @prop - Font size of the action sheet button icon
-$action-sheet-ios-button-icon-font-size:                          28px !default;
+$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px) !default;
 
 /// @prop - Padding right of the action sheet button icon
 $action-sheet-ios-button-icon-padding-right:                      .3em !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-ios-button-font-size:                               20px !default;
+$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px) !default;
 
 /// @prop - Border color alpha of the action sheet button
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;

core/src/components/action-sheet/action-sheet.md.scss

@@ -67,13 +67,13 @@
 
   position: relative;
 
-  height: $action-sheet-md-button-height;
+  min-height: $action-sheet-md-button-height;
 
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
 
-  contain: strict;
+  contain: content;
   overflow: hidden;
 }
 

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -26,7 +26,7 @@ $action-sheet-md-title-height:                          60px !default;
 $action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-md-title-font-size:                       16px !default;
+$action-sheet-md-title-font-size:                       dynamic-font(16px) !default;
 
 /// @prop - Padding top of the action sheet title
 $action-sheet-md-title-padding-top:                     20px !default;
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start:                   $action-sheet-md-title-p
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-md-sub-title-font-size:                   14px !default;
+$action-sheet-md-sub-title-font-size:                   dynamic-font(14px) !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-md-sub-title-padding-top:                 16px !default;
@@ -70,10 +70,10 @@ $action-sheet-md-button-height:                         52px !default;
 $action-sheet-md-button-text-color:                     $text-color-step-150 !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-md-button-font-size:                      16px !default;
+$action-sheet-md-button-font-size:                      dynamic-font(16px) !default;
 
 /// @prop - Padding top of the action sheet button
-$action-sheet-md-button-padding-top:                    0 !default;
+$action-sheet-md-button-padding-top:                    12px !default;
 
 /// @prop - Padding end of the action sheet button
 $action-sheet-md-button-padding-end:                    16px !default;
@@ -91,7 +91,7 @@ $action-sheet-md-button-background:                     transparent !default;
 // --------------------------------------------------
 
 /// @prop - Font size of the icon in the action sheet button
-$action-sheet-md-icon-font-size:                        24px !default;
+$action-sheet-md-icon-font-size:                        dynamic-font(24px) !default;
 
 /// @prop - Margin top of the icon in the action sheet button
 $action-sheet-md-icon-margin-top:                       0 !default;

core/src/components/action-sheet/action-sheet.scss

@@ -126,7 +126,10 @@
   justify-content: flex-end;
 
   height: 100%;
+
+  /* Fallback for browsers that do not support dvh */
   max-height: 100vh;
+  max-height: 100dvh;
 }
 
 .action-sheet-group {

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -86,3 +86,37 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('action-sheet: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-action-sheet></ion-action-sheet>
+
+        <script>
+          const actionSheet = document.querySelector('ion-action-sheet');
+          actionSheet.header = 'Header';
+          actionSheet.subHeader = 'Sub Header';
+          actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
+        </script>
+      `,
+        config
+      );
+
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      const actionSheet = page.locator('ion-action-sheet');
+
+      await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
+      await ionActionSheetDidPresent.next();
+
+      await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
+    });
+  });
+});

core/src/components/back-button/back-button.ios.scss

@@ -13,10 +13,26 @@
   --color: #{$back-button-ios-color};
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
+  /**
+   * The icon should be sized relative
+   * to the size of the text which is
+   * why we use em here instead of rem.
+   * This allows developers to override
+   * the text font size while ensuring that
+   * the icon is sized relative to that.
+   */
   --icon-font-size: 1.6em;
   --min-height: 32px;
 
-  font-size: 17px;
+  /**
+   * Main content should be prioritized over the back
+   * button which is why a maximum font size is applied.
+   * Also, we want the text to remain readable
+   * so a minimum font size is applied.
+   * Using 1.294 instead of 1.3 aligns the text
+   * with the icon a bit nicer in Firefox.
+   */
+  font-size: dynamic-font-clamp(1, 17px, 1.294);
 }
 
 .button-native {

core/src/components/back-button/back-button.md.scss

@@ -13,14 +13,14 @@
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
-  --icon-font-size: 24px;
+  --icon-font-size: #{dynamic-font(24px)};
   --icon-font-weight: normal;
   --min-height: 32px;
   --min-width: 44px;
   --padding-start: 12px;
   --padding-end: 12px;
 
-  font-size: 14px;
+  font-size: dynamic-font(14px);
   font-weight: 500;
 
   text-transform: uppercase;
@@ -30,7 +30,14 @@
   --border-radius: 50%;
 
   min-width: 48px;
-  height: 48px;
+  min-height: 48px;
+
+  /**
+   * This allows the icon only button to
+   * keep its circular shape even when the
+   * text scales up.
+   */
+  aspect-ratio: 1 / 1;
 }
 
 .button-native {

core/src/components/back-button/test/a11y/back-button.e2e.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('back-button: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="/" text="Back"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const backButton = page.locator('ion-back-button');
+
+      await expect(backButton).toHaveScreenshot(screenshot(`back-button-scale`));
+    });
+  });
+});

core/src/components/badge/badge.ios.scss

@@ -6,4 +6,13 @@
 
 :host {
   @include border-radius($badge-ios-border-radius);
+
+  /**
+   * "-apple-system-body" on iOS never goes smaller than
+   * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications.
+   * However, we still keep the max() usage here for consistency
+   * with other components and in case "-apple-system-body" does
+   * go smaller than 14px in the future.
+   */
+  font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }

core/src/components/badge/badge.vars.scss

@@ -18,8 +18,11 @@ $badge-padding-start:             $badge-padding-end !default;
 /// @prop - Minimum width of the badge
 $badge-min-width:                 10px !default;
 
+/// @prop - Baseline font size of the badge
+$badge-baseline-font-size: 13px !default;
+
 /// @prop - Font size of the badge
-$badge-font-size:                 13px !default;
+$badge-font-size:                 dynamic-font($badge-baseline-font-size) !default;
 
 /// @prop - Font weight of the badge
 $badge-font-weight:               bold !default;

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

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('badge: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-badge>123</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-scale`));
+    });
+  });
+});

core/src/components/breadcrumb/breadcrumb.ios.scss

@@ -10,6 +10,14 @@
   --color-hover: #{$breadcrumb-ios-color-active};
   --color-focused: var(--color-active);
   --background-focused: #{$breadcrumb-ios-background-focused};
+
+  /**
+   * Main content should be prioritized
+   * on iOS, so we set max font size for breadcrumbs.
+   * Breadcrumbs can be placed in the content too, so
+   * we add a min font size to keep the text legible.
+   */
+  font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
 }
 
 :host(.breadcrumb-active) {
@@ -58,7 +66,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-ios-icon-color;
 
-  font-size: 18px;
+  font-size: dynamic-font-max(18px, 1.2);
 }
 
 ::slotted(ion-icon[slot="start"]) {
@@ -92,3 +100,7 @@
 .breadcrumbs-collapsed-indicator:focus {
   background: $breadcrumb-ios-indicator-background-focused;
 }
+
+.breadcrumbs-collapsed-indicator ion-icon {
+  font-size: dynamic-font-max(22px, 1);
+}

core/src/components/breadcrumb/breadcrumb.md.scss

@@ -53,7 +53,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-md-icon-color;
 
-  font-size: 18px;
+  font-size: dynamic-font(18px);
 }
 
 ::slotted(ion-icon[slot="start"]) {

core/src/components/breadcrumb/breadcrumb.scss

@@ -156,5 +156,5 @@
 .breadcrumbs-collapsed-indicator ion-icon {
   margin-top: 1px;
 
-  font-size: 22px;
+  font-size: dynamic-font(22px);
 }

core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -6,8 +6,10 @@
 /// @prop - Font weight of the breadcrumb
 $breadcrumb-font-weight:         400 !default;
 
+$breadcrumb-baseline-font-size: 16px !default;
+
 /// @prop - Font size of the breadcrumb
-$breadcrumb-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, #73849a) !default;

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

@@ -12,3 +12,30 @@ configs().forEach(({ config, title }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('breadcrumbs: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-breadcrumbs max-items="2" items-before-collapse="1">
+          <ion-breadcrumb>Home</ion-breadcrumb>
+          <ion-breadcrumb>Electronics</ion-breadcrumb>
+          <ion-breadcrumb>Photography</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-scale`));
+    });
+  });
+});

core/src/components/button/button.ios.scss

@@ -24,20 +24,6 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
-/**
- * The default buttons in a toolbar
- * have a different font size/weight
- * than buttons outside of a toolbar on iOS.
- * However, we still want the "size"/"strong"
- * properties to be usable in a toolbar, so we add
- * the .in-buttons selector such that we
- * can add the different font size/weight in a toolbar
- * but still let "size"/"strong" override it.
- */
-:host(.in-buttons) {
-  font-size: #{$toolbar-ios-button-font-size};
-  font-weight: 400;
-}
 
 // iOS Solid Button
 // --------------------------------------------------
@@ -82,6 +68,25 @@
 }
 
 
+// iOS Toolbar Buttons
+// --------------------------------------------------
+
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+ :host(.in-buttons) {
+   font-size: #{$toolbar-ios-button-font-size};
+   font-weight: 400;
+ }
+
+
 // iOS Button Sizes
 // --------------------------------------------------
 
@@ -127,7 +132,7 @@
 }
 
 
-// iOS strong Button
+// iOS Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {

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

@@ -34,7 +34,9 @@ $button-ios-min-height:                               3.1em !default;
 $button-ios-border-radius:                            14px !default;
 
 /// @prop - Font size of the button text
-$button-ios-font-size:                                16px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-font-size:                                dynamic-font-max(16px, 3) !default;
 
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
@@ -83,7 +85,9 @@ $button-ios-large-min-height:                         3.1em !default;
 $button-ios-large-border-radius:                      16px !default;
 
 /// @prop - Font size of the large button
-$button-ios-large-font-size:                          20px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-large-font-size:                          dynamic-font-max(20px, 3) !default;
 
 
 // iOS Small Button
@@ -108,7 +112,9 @@ $button-ios-small-min-height:                         2.1em !default;
 $button-ios-small-border-radius:                      6px !default;
 
 /// @prop - Font size of the small button
-$button-ios-small-font-size:                          13px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-small-font-size:                          dynamic-font-max(13px, 3) !default;
 
 
 // iOS Outline Button
@@ -151,13 +157,15 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 // --------------------------------------------------
 
 /// @prop - Font size of the clear button
-$button-ios-clear-font-size:                          17px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-clear-font-size:                          dynamic-font-max(17px, 3) !default;
 
 /// @prop - Font weight of the clear button
 $button-ios-clear-font-weight:                        normal !default;
 
 /// @prop - Letter spacing of the button
-$button-ios-letter-spacing:                     0 !default;
+$button-ios-letter-spacing:                           0 !default;
 
 /// @prop - Border color of the clear button
 $button-ios-clear-border-color:                       transparent !default;

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

@@ -34,7 +34,7 @@ $button-md-min-height:                                  36px !default;
 $button-md-border-radius:                               4px !default;
 
 /// @prop - Font size of the button text
-$button-md-font-size:                                   14px !default;
+$button-md-font-size:                                   dynamic-font(14px) !default;
 
 /// @prop - Font weight of the button text
 $button-md-font-weight:                                 500 !default;
@@ -78,7 +78,7 @@ $button-md-large-padding-start:                         $button-md-large-padding
 $button-md-large-min-height:                            2.8em !default;
 
 /// @prop - Font size of the large button
-$button-md-large-font-size:                             20px !default;
+$button-md-large-font-size:                             dynamic-font(20px) !default;
 
 
 // Material Design Small Button
@@ -100,7 +100,7 @@ $button-md-small-padding-start:                         $button-md-small-padding
 $button-md-small-min-height:                            2.1em !default;
 
 /// @prop - Font size of the small button
-$button-md-small-font-size:                             13px !default;
+$button-md-small-font-size:                             dynamic-font(13px) !default;
 
 
 // Material Design Outline Button

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

@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: font scaling'), () => {
+    test('should scale default button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button>Default</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-default-scale`));
+    });
+
+    test('should scale clear button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button fill="clear">Clear</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-clear-scale`));
+    });
+
+    test('should scale small button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button size="small">Small</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-small-scale`));
+    });
+
+    test('should scale large button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button size="large">Large</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
+    });
+  });
+});