fix(react): clean-up ionic lifecycle hooks

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

- There are no tests for menu when safe area is applied.
- The safe area variables on menu weren't being reset properly to allow
easy local customization.

Currently, some of the variables are being set to `env()`. This is the
same structure that is being used in core. However, this doesn't
prevents users from mocking the safe area when using
`--ion-safe-area-left: 50px` on `html`. It makes it hard to create tests
to validate that padding is being applied to the safe area.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Tests have been added.
- The safe area variables on menu are now being reset to use the values
from `:root`.

The variables are being `unset` in order for the variables to [default
to parent styles](https://stackoverflow.com/a/69491310/5374225). Since
core styles has already declared the variables, then developers can use
`--ion-safe-area-left: 50px` on `html`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A

---------

Co-authored-by: ionitron <hi@ionicframework.com>

.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,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.3.3",
+      "version": "7.4.0",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.2.0",
+        "@stencil/core": "^4.2.1",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.3.0",
+        "@capacitor/core": "^5.4.0",
         "@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.0",
         "@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",
@@ -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.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
       "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.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
+      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
       "dev": true,
       "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.37.1"
+        "playwright": "1.38.0"
       },
       "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.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8193,10 +8189,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
+      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.38.0"
+      },
+      "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.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
+      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.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.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
       "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.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
+      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
       "dev": true,
       "requires": {
-        "@types/node": "*",
-        "fsevents": "2.3.2",
-        "playwright-core": "1.37.1"
+        "playwright": "1.38.0"
       }
     },
     "@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.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -16331,10 +16343,20 @@
         "find-up": "^4.0.0"
       }
     },
+    "playwright": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
+      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
+      "dev": true,
+      "requires": {
+        "fsevents": "2.3.2",
+        "playwright-core": "1.38.0"
+      }
+    },
     "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.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
+      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.3",
+  "version": "7.4.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,23 +31,23 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.2.0",
+    "@stencil/core": "^4.2.1",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.3.0",
+    "@capacitor/core": "^5.4.0",
     "@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.0",
     "@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",

core/src/components/checkbox/checkbox.scss

@@ -278,12 +278,28 @@ input {
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  @include transform(scale(#{$form-control-label-stacked-scale}));
+
   /**
    * The margin between the label and
    * the checkbox should be on the bottom
    * when the label sits at the top.
    */
   @include margin(null, 0, $form-control-label-margin, 0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the checkbox.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {
+  @include transform-origin(start, top);
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {
+  @include transform-origin(center, top);
 }
 
 // Checked / Indeterminate Checkbox

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

@@ -166,3 +166,19 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('checkbox: stacked long label'), () => {
+    test('long label should truncate', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
+        `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-long-label`));
+    });
+  });
+});

core/src/components/input/input.md.outline.scss

@@ -90,14 +90,14 @@
 :host(.has-focus.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(#{$input-floating-label-scale}));
+  @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
 
   /**
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$input-floating-label-scale});
+  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale});
 }
 
 /**
@@ -166,7 +166,7 @@
    */
   @include padding(null, #{$input-md-floating-label-padding * 2}, null, null);
 
-  font-size: calc(1em * #{$input-floating-label-scale});
+  font-size: calc(1em * #{$form-control-label-stacked-scale});
 
   opacity: 0;
   pointer-events: none;

core/src/components/input/input.md.solid.scss

@@ -72,5 +72,5 @@
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc(100% / #{$input-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/input/input.scss

@@ -627,11 +627,11 @@
 :host(.input-label-placement-stacked) .label-text-wrapper,
 :host(.has-focus.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-label-placement-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$input-floating-label-scale}));
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
 
   /**
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc(100% / #{$input-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/input/input.vars.scss

@@ -1,5 +1 @@
 @import "../../themes/ionic.globals";
-
-/// @prop - How much to scale the floating label by
-$input-floating-label-scale: 0.75 !default;
-

core/src/components/menu/menu.scss

@@ -83,12 +83,14 @@
       * Otherwise, the content will have less space on both sides.
       *
       * RTL:
-      * The right side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu touches the screen edge.
+      * The right side needs to revert back to the default value that was set in the core styles, so we unset it here.
+      * This would keep the variable consistent with the core styles.
+      * Additionally, it would continue to allow users to override the variable if they choose to.
       * The left side of the menu is not touching the screen edge. Padding is not
       * applied to the left side of the menu. A value of 0 is set.
       */
-    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-right: unset;
     --ion-safe-area-left: 0px;
   }
 }
@@ -118,12 +120,14 @@
       * Otherwise, the content will have less space on both sides.
       *
       * RTL:
-      * The left side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu touches the screen edge.
+      * The left side needs to revert back to the default value that was set in the core styles, so we unset it here.
+      * This would keep the variable consistent with the core styles.
+      * Additionally, it would continue to allow users to override the variable if they choose to.
       * The right side of the menu is not touching the screen edge. Padding is not
       * applied to the right side of the menu. A value of 0 is set.
       */
-    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-left: unset;
     --ion-safe-area-right: 0px;
   }
 }

core/src/components/menu/test/safe-area/index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Menu - Safe Area Padding</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <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>
+    <script type="module">
+      import { menuController } from '../../../../dist/ionic/index.esm.js';
+      window.menuController = menuController;
+    </script>
+    <style>
+      :root {
+        --ion-safe-area-left: 60px;
+        --ion-safe-area-right: 20px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-menu side="start" menu-id="start-menu" content-id="main">
+        <ion-header>
+          <ion-toolbar color="primary">
+            <ion-title>This is the title for a start menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>
+
+      <ion-menu side="end" menu-id="end-menu" content-id="main">
+        <ion-header>
+          <ion-toolbar color="danger">
+            <ion-title>This is the title for an end menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>
+
+      <div class="ion-page" id="main">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Menu - Safe Area Padding</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <ion-button expand="block" id="open-start" onclick="openStart()">Open Start Menu</ion-button>
+          <ion-button expand="block" id="open-end" onclick="openEnd()">Open End Menu</ion-button>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      async function openStart() {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'start-menu');
+        await menuController.open('start-menu');
+      }
+
+      async function openEnd() {
+        // Open the menu by side
+        await menuController.open('end');
+      }
+    </script>
+  </body>
+</html>

core/src/components/menu/test/safe-area/menu.e2e.ts

@@ -0,0 +1,101 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes.
+ */
+configs({ modes: ['md'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('menu: safe area'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/menu/test/safe-area`, config);
+    });
+    test.describe('side: start', () => {
+      test('should render with safe area when notch is on the left', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style!.innerHTML = `
+            :root {
+              --ion-safe-area-left: 50px !important;
+              --ion-safe-area-right: 10px !important;
+            }
+          `;
+        });
+
+        await page.click('#open-start');
+        await ionDidOpen.next();
+
+        const startMenu = page.locator('[menu-id="start-menu"]');
+        await expect(startMenu).toHaveClass(/show-menu/);
+
+        await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-left-notch`));
+      });
+      test('should render with safe area when notch is on the right', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style!.innerHTML = `
+            :root {
+              --ion-safe-area-left: 10px !important;
+              --ion-safe-area-right: 50px !important;
+            }
+          `;
+        });
+
+        await page.click('#open-start');
+        await ionDidOpen.next();
+
+        const startMenu = page.locator('[menu-id="start-menu"]');
+        await expect(startMenu).toHaveClass(/show-menu/);
+
+        await expect(page).toHaveScreenshot(screenshot(`menu-start-safe-area-right-notch`));
+      });
+    });
+    test.describe('side: end', () => {
+      test('should render with safe area when notch is on the left', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style!.innerHTML = `
+            :root {
+              --ion-safe-area-left: 50px !important;
+              --ion-safe-area-right: 10px !important;
+            }
+          `;
+        });
+
+        await page.click('#open-end');
+        await ionDidOpen.next();
+
+        const endMenu = page.locator('[menu-id="end-menu"]');
+        await expect(endMenu).toHaveClass(/show-menu/);
+
+        await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-left-notch`));
+      });
+      test('should render with safe area when notch is on the right', async ({ page }) => {
+        const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+
+        await page.evaluate(() => {
+          const style = document.querySelector('style');
+          style!.innerHTML = `
+            :root {
+              --ion-safe-area-left: 10px !important;
+              --ion-safe-area-right: 50px !important;
+            }
+          `;
+        });
+
+        await page.click('#open-end');
+        await ionDidOpen.next();
+
+        const endMenu = page.locator('[menu-id="end-menu"]');
+        await expect(endMenu).toHaveClass(/show-menu/);
+
+        await expect(page).toHaveScreenshot(screenshot(`menu-end-safe-area-right-notch`));
+      });
+    });
+  });
+});