add scss test

Issue number: resolves #28762

---------

<!-- 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. -->

Focused inputs have `pointer-events: none`. This code was added in
e27452b789
to address https://github.com/ionic-team/ionic-framework/issues/5536.
However, this causes slotted buttons to not be clickable when the input
is focused because pointer events have been removed.

This also causes the input to blur whenever you tap the label text.

This behavior only exists on `ion-input`. Textarea is not affected.

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

This code was added several years ago for the (now) legacy syntax. I
don't have full confidence that this won't break the legacy input
because there's not a lot of context around why specifically this code
was added. As a result, I scoped these styles only to the legacy input.
- Slotted buttons can now be clicked when the input is focused.
- Tapping the label when an input is focused keeps the input focused.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

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

**Testing:**

1. I manually verified that scroll assist still works with the modern
input.
2. I manually verified that the input remains focused after tapping the
label.

Dev build: `7.6.3-dev.11704229014.12cdc767`

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-Issue number: #
+Issue number: resolves #
 
 ---------
 
@@ -21,7 +21,12 @@ Issue number: #
 - [ ] Yes
 - [ ] No
 
-<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
+<!--
+  If this introduces a breaking change:
+  1. Describe the impact and migration path for existing applications below.
+  2. Update the BREAKING.md file with the breaking change.
+  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information.
+-->
 
 
 ## Other information

.github/ionic-issue-bot.yml

@@ -1,10 +1,15 @@
 triage:
-  label: triage
+  label: "holiday triage"
   removeLabelWhenProjectAssigned: true
   dryRun: false
 
 comment:
   labels:
+    - label: "holiday triage"
+      message: >
+        Thanks for the issue! This issue has been labeled as `holiday triage`. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.
+        In the meantime, please read our [Winter Holiday Triage Guide](https://github.com/ionic-team/ionic-framework/issues/22699) for information on how to ensure that your issue is triaged correctly.
+        Thank you!
     - label: "help wanted"
       message: >
         This issue has been labeled as `help wanted`. This label is added to issues
@@ -40,7 +45,7 @@ comment:
 
 
         If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
-        
+
 
         The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
 

.github/workflows/nightly.yml

@@ -1,11 +1,5 @@
 name: 'Ionic Nightly Build'
 
-on:
-  schedule:
-    # Run every Monday-Friday
-    # at 6:00 UTC (6:00 am UTC)
-    - cron: '00 06 * * 1-5'
-
 jobs:
   create-nightly-hash:
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -69,16 +69,25 @@ jobs:
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       shell: bash
-    # Lerna does not automatically bump versions
-    # of Ionic dependencies that have changed,
-    # so we do that here.
-    - name: Bump Package Lock
-      run: |
-        lerna exec "npm install --package-lock-only"
-        git add .
-        git commit -m "chore(): update package lock files"
-        git push
-      shell: bash
+
+  update-package-lock:
+    # This needs to run after finalize-release
+    # because we also push to the repo in that
+    # job. If these jobs ran in parallel then it is
+    # possible for them to push at the same time.
+    needs: [finalize-release]
+    runs-on: ubuntu-latest
+    steps:
+      # Lerna does not automatically bump versions
+      # of Ionic dependencies that have changed,
+      # so we do that here.
+      - name: Bump Package Lock
+        run: |
+          lerna exec "npm install --package-lock-only"
+          git add .
+          git commit -m "chore(): update package lock files"
+          git push
+        shell: bash
 
   purge-cdn-cache:
     needs: [release-ionic]

CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+
+### Bug Fixes
+
+* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
+* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
+* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
+* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+
+### Bug Fixes
+
+* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353))
+* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774))
+* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **datetime:** prefer wheel sets working value on confirmation ([#28520](https://github.com/ionic-team/ionic-framework/issues/28520)) ([e886e3f](https://github.com/ionic-team/ionic-framework/commit/e886e3ff2fcb8a3586a62881c5fc848f3074235d)), closes [#25839](https://github.com/ionic-team/ionic-framework/issues/25839)
+* **input, textarea:** clearOnInput ignores key modifiers ([#28639](https://github.com/ionic-team/ionic-framework/issues/28639)) ([8f7d87c](https://github.com/ionic-team/ionic-framework/commit/8f7d87c6803b1600a3ca21785df0e9bac49f74a3)), closes [#28633](https://github.com/ionic-team/ionic-framework/issues/28633)
+* **menu:** allow styling of the box shadow and transform when visible inside of a split pane ([#28691](https://github.com/ionic-team/ionic-framework/issues/28691)) ([8ee23d2](https://github.com/ionic-team/ionic-framework/commit/8ee23d20d5cc7419ce15f047b92d2f826d3eb681)), closes [#21530](https://github.com/ionic-team/ionic-framework/issues/21530)
+* **react:** avoid type collision with @types/react@18.2.43 and greater ([#28687](https://github.com/ionic-team/ionic-framework/issues/28687)) ([92f1b86](https://github.com/ionic-team/ionic-framework/commit/92f1b8627a240c93891205f75adcb5ce3d46596d))
+* **react:** replacing route uses new route direction and animation ([#28671](https://github.com/ionic-team/ionic-framework/issues/28671)) ([a17b963](https://github.com/ionic-team/ionic-framework/commit/a17b9631829c36c2daf1d5227f5afa69f99f8743)), closes [#24260](https://github.com/ionic-team/ionic-framework/issues/24260)
+* **react:** use custom animation when going back after a replace ([#28674](https://github.com/ionic-team/ionic-framework/issues/28674)) ([fc88613](https://github.com/ionic-team/ionic-framework/commit/fc88613fefa019a3b695a2c6e10c85cd3ce79ae8)), closes [#28673](https://github.com/ionic-team/ionic-framework/issues/28673)
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 
@@ -28,6 +71,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **toast:** add swipe to dismiss functionality ([#28442](https://github.com/ionic-team/ionic-framework/issues/28442)) ([30c21aa](https://github.com/ionic-team/ionic-framework/commit/30c21aab3ed40d73c28e7d60d0952d8891b0a9d3)), closes [#21769](https://github.com/ionic-team/ionic-framework/issues/21769)
 * **toggle:** expose label wrapper as shadow part ([#28585](https://github.com/ionic-team/ionic-framework/issues/28585)) ([a34188f](https://github.com/ionic-team/ionic-framework/commit/a34188f7dbec4a16e4f2043ed3dc096e337725a7))
 
+Note: Text inside of `ion-item` can now wrap to resolve accessibility issues related to readability. We recommend evaluating your application to account for text wrapping.
+
 
 
 

core/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+
+### Bug Fixes
+
+* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
+* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
+* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
+* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+
+### Bug Fixes
+
+* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353))
+* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774))
+* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **datetime:** prefer wheel sets working value on confirmation ([#28520](https://github.com/ionic-team/ionic-framework/issues/28520)) ([e886e3f](https://github.com/ionic-team/ionic-framework/commit/e886e3ff2fcb8a3586a62881c5fc848f3074235d)), closes [#25839](https://github.com/ionic-team/ionic-framework/issues/25839)
+* **input, textarea:** clearOnInput ignores key modifiers ([#28639](https://github.com/ionic-team/ionic-framework/issues/28639)) ([8f7d87c](https://github.com/ionic-team/ionic-framework/commit/8f7d87c6803b1600a3ca21785df0e9bac49f74a3)), closes [#28633](https://github.com/ionic-team/ionic-framework/issues/28633)
+* **menu:** allow styling of the box shadow and transform when visible inside of a split pane ([#28691](https://github.com/ionic-team/ionic-framework/issues/28691)) ([8ee23d2](https://github.com/ionic-team/ionic-framework/commit/8ee23d20d5cc7419ce15f047b92d2f826d3eb681)), closes [#21530](https://github.com/ionic-team/ionic-framework/issues/21530)
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 

core/api.txt

@@ -1087,6 +1087,7 @@ ion-range,part,tick-active
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
 ion-refresher,prop,disabled,boolean,false,false,false
+ion-refresher,prop,mode,"ios" | "md",undefined,false,false
 ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false

core/package-lock.json

@@ -1,23 +1,23 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.0",
+  "version": "7.6.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.6.0",
+      "version": "7.6.3",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.8.2",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.8.1",
-        "@capacitor/core": "^5.5.1",
+        "@axe-core/playwright": "^4.8.2",
+        "@capacitor/core": "^5.6.0",
         "@capacitor/haptics": "^5.0.6",
-        "@capacitor/keyboard": "^5.0.6",
+        "@capacitor/keyboard": "^5.0.7",
         "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
@@ -26,7 +26,7 @@
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.3",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.7",
+        "@stencil/sass": "^3.0.8",
         "@stencil/vue-output-target": "^0.8.7",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
@@ -56,9 +56,9 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.1.tgz",
-      "integrity": "sha512-KC1X++UdRAwMLRvB+BIKFheyLHUnbJTL0t0Wbv6TJMozn2V2QyEtAcN6jyUiudtGiLUGhHCtj/eWorBnVZ4dAA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
+      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
       "dev": true,
       "dependencies": {
         "axe-core": "~4.8.2"
@@ -634,9 +634,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
-      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
+      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -652,9 +652,9 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
-      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
+      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
+      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
-      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
+      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -5785,9 +5785,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -10899,9 +10899,9 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.1.tgz",
-      "integrity": "sha512-KC1X++UdRAwMLRvB+BIKFheyLHUnbJTL0t0Wbv6TJMozn2V2QyEtAcN6jyUiudtGiLUGhHCtj/eWorBnVZ4dAA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
+      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
       "dev": true,
       "requires": {
         "axe-core": "~4.8.2"
@@ -11324,9 +11324,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
-      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
+      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11340,9 +11340,9 @@
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
-      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
+      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
       "dev": true,
       "requires": {}
     },
@@ -12184,9 +12184,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
+      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -12196,9 +12196,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
-      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
+      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
       "dev": true,
       "requires": {}
     },
@@ -15056,9 +15056,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.0",
+  "version": "7.6.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,15 +31,15 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.8.1",
-    "ionicons": "^7.2.1",
+    "@stencil/core": "^4.8.2",
+    "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.1",
-    "@capacitor/core": "^5.5.1",
+    "@axe-core/playwright": "^4.8.2",
+    "@capacitor/core": "^5.6.0",
     "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.6",
+    "@capacitor/keyboard": "^5.0.7",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
@@ -48,7 +48,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.3",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.7",
+    "@stencil/sass": "^3.0.8",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",

core/src/components.d.ts

@@ -943,7 +943,7 @@ export namespace Components {
          */
         "size": 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -1182,7 +1182,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -1701,7 +1701,7 @@ export namespace Components {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -2336,7 +2336,7 @@ export namespace Components {
          */
         "pin": boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter": PinFormatter;
         /**
@@ -2377,6 +2377,10 @@ export namespace Components {
           * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.
          */
         "getProgress": () => Promise<number>;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
         /**
           * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
@@ -2974,7 +2978,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -5646,7 +5650,7 @@ declare namespace LocalJSX {
          */
         "size"?: 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -5897,7 +5901,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -6428,7 +6432,7 @@ declare namespace LocalJSX {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -7060,7 +7064,7 @@ declare namespace LocalJSX {
          */
         "pin"?: boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter"?: PinFormatter;
         /**
@@ -7089,6 +7093,10 @@ declare namespace LocalJSX {
           * If `true`, the refresher will be hidden.
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted while the user is pulling down the content and exposing the refresher.
          */
@@ -7750,7 +7758,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**

core/src/components/chip/chip.ios.scss

@@ -1,6 +1,8 @@
-@import "./chip";
+@use "./chip" as b;
 @import "./chip.vars";
 
+@include b.base;
+
 :host {
   /**
    * Main content should be prioritized on iOS,

core/src/components/chip/chip.md.scss

@@ -1,6 +1,7 @@
-@import "./chip";
 @import "./chip.vars";
 
-:host {
-  font-size: $chip-base-font-size-rem;
+@mixin md2 {
+  :host {
+    font-size: $chip-base-font-size-rem;
+  }
 }

core/src/components/chip/chip.md2.flag.scss

@@ -0,0 +1,9 @@
+@use 'chip.md.scss' as c;
+@use 'chip.scss' as b;
+
+@use '../../utils/md-controller/index.scss' as controller;
+
+@if controller.$md2 {
+  @include b.base;
+  @include c.md2;
+}

core/src/components/chip/chip.md3.flag.scss

@@ -0,0 +1,9 @@
+@use 'chip.md3.scss' as c;
+@use 'chip.scss' as b;
+
+@use '../../utils/md-controller/index.scss' as controller;
+
+@if controller.$md3 {
+  @include b.base;
+  @include c.md3;
+}

core/src/components/chip/chip.md3.scss

@@ -0,0 +1,7 @@
+@import "./chip.vars";
+
+@mixin md3 {
+  :host {
+    background: green;
+  }
+}

core/src/components/chip/chip.scss

@@ -1,156 +1,158 @@
 @import "../../themes/ionic.globals";
 @import "./chip.vars";
 
-:host {
-  /**
-   * @prop --background: Background of the chip
-   * @prop --color: Color of the chip
-   */
-  --background: #{rgba($text-color-rgb, 0.12)};
-  --color: #{rgba($text-color-rgb, 0.87)};
+@mixin base {
+  :host {
+    /**
+     * @prop --background: Background of the chip
+     * @prop --color: Color of the chip
+     */
+    --background: #{rgba($text-color-rgb, 0.12)};
+    --color: #{rgba($text-color-rgb, 0.87)};
 
-  @include border-radius(16px);
-  @include font-smoothing();
-  @include margin(4px);
-  @include padding(6px, 12px);
+    @include border-radius(16px);
+    @include font-smoothing();
+    @include margin(4px);
+    @include padding(6px, 12px);
 
-  display: inline-flex;
+    display: inline-flex;
 
-  position: relative;
+    position: relative;
 
-  align-items: center;
+    align-items: center;
 
-  min-height: 32px;
+    min-height: 32px;
 
-  background: var(--background);
-  color: var(--color);
+    background: var(--background);
+    color: var(--color);
 
-  font-family: $font-family-base;
+    font-family: $font-family-base;
 
-  cursor: pointer;
+    cursor: pointer;
 
-  overflow: hidden;
+    overflow: hidden;
 
-  vertical-align: middle;
-  box-sizing: border-box;
-}
-
-:host(.chip-disabled) {
-  cursor: default;
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-// Chip Colors
-// ---------------------------------------------
-
-:host(.ion-color) {
-  background: current-color(base, 0.08);
-  color: current-color(shade);
-}
-
-:host(.ion-color:focus) {
-  background: current-color(base, 0.12);
-}
-
-:host(.ion-color.ion-activated) {
-  background: current-color(base, 0.16);
-}
-
-// Outline Chip
-// ---------------------------------------------
-
-:host(.chip-outline) {
-  border-width: 1px;
-  border-style: solid;
-}
-
-:host(.chip-outline) {
-  border-color: rgba($text-color-rgb, 0.32);
-
-  background: transparent;
-}
-
-:host(.chip-outline.ion-color) {
-  border-color: current-color(base, 0.32);
-}
-
-:host(.chip-outline:not(.ion-color):focus) {
-  background: rgba($text-color-rgb, 0.04);
-}
-
-:host(.chip-outline.ion-activated:not(.ion-color)) {
-  background: rgba($text-color-rgb, 0.08);
-}
-
-// Chip Icon
-// ---------------------------------------------
-
-::slotted(ion-icon) {
-  font-size: $chip-icon-size;
-}
-
-:host(:not(.ion-color)) ::slotted(ion-icon) {
-  color: rgba($text-color-rgb, 0.54);
-}
-
-::slotted(ion-icon:first-child) {
-  @include margin(-4px, 8px, -4px, -4px);
-}
-
-::slotted(ion-icon:last-child) {
-  @include margin(-4px, -4px, -4px, 8px);
-}
-
-// Chip Avatar
-// ---------------------------------------------
-
-::slotted(ion-avatar) {
-  flex-shrink: 0;
-
-  width: $chip-avatar-size;
-  height: $chip-avatar-size;
-}
-
-::slotted(ion-avatar:first-child) {
-  @include margin(-4px, 8px, -4px, -8px);
-}
-
-::slotted(ion-avatar:last-child) {
-  @include margin(-4px, -8px, -4px, 8px);
-}
-
-// Chip: Focus
-// ---------------------------------------------
-
-:host(:focus) {
-  outline: none;
-}
-
-:host(:focus) {
-  --background: #{rgba($text-color-rgb, 0.16)};
-}
-
-// Chip: Activated
-// ---------------------------------------------
-
-:host(.ion-activated) {
-  --background: #{rgba($text-color-rgb, 0.2)};
-}
-
-// Chip: Hover
-// ---------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) {
-    --background: #{rgba($text-color-rgb, 0.16)};
+    vertical-align: middle;
+    box-sizing: border-box;
   }
 
-  :host(.ion-color:hover) {
+  :host(.chip-disabled) {
+    cursor: default;
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  // Chip Colors
+  // ---------------------------------------------
+
+  :host(.ion-color) {
+    background: current-color(base, 0.08);
+    color: current-color(shade);
+  }
+
+  :host(.ion-color:focus) {
     background: current-color(base, 0.12);
   }
 
-  :host(.chip-outline:not(.ion-color):hover) {
+  :host(.ion-color.ion-activated) {
+    background: current-color(base, 0.16);
+  }
+
+  // Outline Chip
+  // ---------------------------------------------
+
+  :host(.chip-outline) {
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  :host(.chip-outline) {
+    border-color: rgba($text-color-rgb, 0.32);
+
+    background: transparent;
+  }
+
+  :host(.chip-outline.ion-color) {
+    border-color: current-color(base, 0.32);
+  }
+
+  :host(.chip-outline:not(.ion-color):focus) {
     background: rgba($text-color-rgb, 0.04);
   }
+
+  :host(.chip-outline.ion-activated:not(.ion-color)) {
+    background: rgba($text-color-rgb, 0.08);
+  }
+
+  // Chip Icon
+  // ---------------------------------------------
+
+  ::slotted(ion-icon) {
+    font-size: $chip-icon-size;
+  }
+
+  :host(:not(.ion-color)) ::slotted(ion-icon) {
+    color: rgba($text-color-rgb, 0.54);
+  }
+
+  ::slotted(ion-icon:first-child) {
+    @include margin(-4px, 8px, -4px, -4px);
+  }
+
+  ::slotted(ion-icon:last-child) {
+    @include margin(-4px, -4px, -4px, 8px);
+  }
+
+  // Chip Avatar
+  // ---------------------------------------------
+
+  ::slotted(ion-avatar) {
+    flex-shrink: 0;
+
+    width: $chip-avatar-size;
+    height: $chip-avatar-size;
+  }
+
+  ::slotted(ion-avatar:first-child) {
+    @include margin(-4px, 8px, -4px, -8px);
+  }
+
+  ::slotted(ion-avatar:last-child) {
+    @include margin(-4px, -8px, -4px, 8px);
+  }
+
+  // Chip: Focus
+  // ---------------------------------------------
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus) {
+    --background: #{rgba($text-color-rgb, 0.16)};
+  }
+
+  // Chip: Activated
+  // ---------------------------------------------
+
+  :host(.ion-activated) {
+    --background: #{rgba($text-color-rgb, 0.2)};
+  }
+
+  // Chip: Hover
+  // ---------------------------------------------
+
+  @media (any-hover: hover) {
+    :host(:hover) {
+      --background: #{rgba($text-color-rgb, 0.16)};
+    }
+
+    :host(.ion-color:hover) {
+      background: current-color(base, 0.12);
+    }
+
+    :host(.chip-outline:not(.ion-color):hover) {
+      background: rgba($text-color-rgb, 0.04);
+    }
+  }
 }

core/src/components/chip/chip.tsx

@@ -5,6 +5,14 @@ import { createColorClasses } from '@utils/theme';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 
+/**
+styleUrls: {
+  ios: 'chip.ios.scss',
+  md: 'chip.md2.scss',
+  md3: Build.isDev ? 'chip.md3.scss' : undefined
+},
+*/
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -12,7 +20,8 @@ import type { Color } from '../../interface';
   tag: 'ion-chip',
   styleUrls: {
     ios: 'chip.ios.scss',
-    md: 'chip.md.scss',
+    md: 'chip.md2.flag.scss',
+    md3: 'chip.md3.flag.scss'
   },
   shadow: true,
 })

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

@@ -23,82 +23,19 @@
       </ion-header>
 
       <ion-content class="ion-padding" id="content" style="text-align: center">
-        <h2>Basic Chips</h2>
+        <h2>Default Chip</h2>
         <ion-chip>
           <ion-label>Default</ion-label>
         </ion-chip>
-        <ion-chip style="border-radius: 4px">
-          <ion-label>Border Radius</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>With Icon</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>With Avatar</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>With Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
+
+        <h2>MD2 Chip</h2>
+        <ion-chip mode="md">
+          <ion-label>MD2</ion-label>
         </ion-chip>
 
-        <h2>Color Chips</h2>
-        <ion-chip color="primary">
-          <ion-label>Primary</ion-label>
-        </ion-chip>
-        <ion-chip color="danger">
-          <ion-label>Danger</ion-label>
-        </ion-chip>
-        <ion-chip color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>
-        <ion-chip color="primary">
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-          <ion-label>Primary with Avatar</ion-label>
-        </ion-chip>
-        <ion-chip color="success">
-          <ion-label>Success with Icon</ion-label>
-          <ion-icon name="calendar"></ion-icon>
-        </ion-chip>
-
-        <h2>Outline Chips</h2>
-        <ion-chip outline>
-          <ion-label>Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="danger">
-          <ion-label>Danger Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="secondary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Secondary Outline with Icon</ion-label>
-        </ion-chip>
-        <ion-chip outline color="primary">
-          <ion-label>Primary Outline with Avatar</ion-label>
-          <ion-avatar>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-            />
-          </ion-avatar>
-        </ion-chip>
-        <ion-chip outline>
-          <ion-icon name="git-pull-request"></ion-icon>
-          <ion-label>Outline with Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
+        <h2>MD3 Chip</h2>
+        <ion-chip mode="md3">
+          <ion-label>MD3</ion-label>
         </ion-chip>
       </ion-content>
     </ion-app>

core/src/components/datetime/datetime.ios.scss

@@ -249,9 +249,11 @@
 
 /**
  * Day that is selected and is today
- * should have white color.
+ * should have base background color
+ * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
+  background: current-color(base);
   color: current-color(contrast);
 }
 

core/src/components/datetime/datetime.tsx

@@ -341,6 +341,9 @@ export class Datetime implements ComponentInterface {
    * dates are selected. Only used if there are 0 or more than 1
    * selected (i.e. unused for exactly 1). By default, the header
    * text is set to "numberOfDates days".
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
 
@@ -492,7 +495,7 @@ export class Datetime implements ComponentInterface {
    */
   @Method()
   async confirm(closeOverlay = false) {
-    const { isCalendarPicker, activeParts } = this;
+    const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
 
     /**
      * We only update the value if the presentation is not a calendar picker.
@@ -500,7 +503,16 @@ export class Datetime implements ComponentInterface {
     if (activeParts !== undefined || !isCalendarPicker) {
       const activePartsIsArray = Array.isArray(activeParts);
       if (activePartsIsArray && activeParts.length === 0) {
-        this.setValue(undefined);
+        if (preferWheel) {
+          /**
+           * If the datetime is using a wheel picker, but the
+           * active parts are empty, then the user has confirmed the
+           * initial value (working parts) presented to them.
+           */
+          this.setValue(convertDataToISO(workingParts));
+        } else {
+          this.setValue(undefined);
+        }
       } else {
         this.setValue(convertDataToISO(activeParts));
       }
@@ -1356,11 +1368,21 @@ export class Datetime implements ComponentInterface {
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
 
     const todayParts = (this.todayParts = parseDate(getToday())!);
-    this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
 
     this.processMinParts();
     this.processMaxParts();
 
+    this.defaultParts = getClosestValidDate({
+      refParts: todayParts,
+      monthValues,
+      dayValues,
+      yearValues,
+      hourValues,
+      minuteValues,
+      minParts: this.minParts,
+      maxParts: this.maxParts,
+    });
+
     this.processValue(this.value);
 
     this.emitStyle();

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

@@ -458,6 +458,44 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 });
 
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: today button rendering'), () => {
+    test('should render today button correctly when selected', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'FW-5808',
+      });
+      await page.setContent(
+        `
+        <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
+
+        <script>
+          const mockToday = '2022-01-02T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(
+        screenshot(`datetime-today-calendar-button`)
+      );
+    });
+  });
+});
+
 /**
  * The calendar day highlight does not render
  * on iOS and has the same behavior across directions.

core/src/components/datetime/test/manipulation.spec.ts

@@ -16,6 +16,7 @@ import {
   subtractDays,
   addDays,
   validateParts,
+  getClosestValidDate,
 } from '../utils/manipulation';
 
 describe('addDays()', () => {
@@ -558,3 +559,160 @@ describe('validateParts()', () => {
     ).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
   });
 });
+
+describe('getClosestValidDate()', () => {
+  it('should match a date with only month/day/year', () => {
+    // October 10, 2023
+    const refParts = { month: 10, day: 10, year: 2023 };
+    // April 10, 2021
+    const minParts = { month: 4, day: 10, year: 2021 };
+    // September 14, 2021
+    const maxParts = { month: 9, day: 14, year: 2021 };
+
+    // September 4, 2021
+    const expected = { month: 9, day: 4, year: 2021, dayOfWeek: undefined };
+
+    expect(
+      getClosestValidDate({
+        refParts,
+        monthValues: [2, 3, 7, 9, 10],
+        dayValues: [4, 15, 25],
+        yearValues: [2020, 2021, 2023],
+        maxParts,
+        minParts,
+      })
+    ).toEqual(expected);
+  });
+
+  it('should match a date when the reference date is before the min', () => {
+    // April 2, 2020 3:20 PM
+    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 14, 2021 10:11 AM
+    const maxParts = { month: 9, day: 14, year: 2021, hour: 10, minute: 11 };
+
+    // September 11, 2021 11:15 AM
+    const expected = {
+      year: 2021,
+      day: 11,
+      month: 9,
+      hour: 11,
+      minute: 15,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+
+    expect(
+      getClosestValidDate({
+        refParts,
+        monthValues: [4, 9, 11],
+        dayValues: [11, 12, 13, 14],
+        yearValues: [2020, 2021, 2023],
+        hourValues: [9, 10, 11],
+        minuteValues: [11, 12, 13, 14, 15],
+        maxParts,
+        minParts,
+      })
+    ).toEqual(expected);
+  });
+
+  it('should match a date when the reference date is before the min', () => {
+    // April 2, 2020 3:20 PM
+    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 10, 2021 10:15 AM
+    const maxParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 15 };
+
+    // September 10, 2021 10:15 AM
+    const expected = {
+      month: 9,
+      day: 10,
+      year: 2021,
+      hour: 10,
+      minute: 15,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+
+    expect(
+      getClosestValidDate({
+        refParts,
+        monthValues: [4, 9, 11],
+        dayValues: [10, 12, 13, 14],
+        yearValues: [2020, 2021, 2023],
+        hourValues: [9, 10, 11],
+        minuteValues: [11, 12, 13, 14, 15],
+        minParts,
+        maxParts,
+      })
+    ).toEqual(expected);
+  });
+
+  it('should only clamp minutes if within the same day and hour as min/max', () => {
+    // April 2, 2020 9:16 AM
+    const refParts = { month: 4, day: 2, year: 2020, hour: 9, minute: 16 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 10, 2021 11:15 AM
+    const maxParts = { month: 9, day: 10, year: 2021, hour: 11, minute: 15 };
+
+    // September 10, 2021 10:16 AM
+    const expected = {
+      month: 9,
+      day: 10,
+      year: 2021,
+      hour: 10,
+      minute: 16,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+
+    expect(
+      getClosestValidDate({
+        refParts,
+        monthValues: [4, 9, 11],
+        dayValues: [10, 12, 13, 14],
+        yearValues: [2020, 2021, 2023],
+        hourValues: [9, 10, 11],
+        minuteValues: [10, 15, 16],
+        minParts,
+        maxParts,
+      })
+    ).toEqual(expected);
+  });
+
+  it('should return the closest valid date after adjusting the allowed year', () => {
+    // April 2, 2022 9:16 AM
+    const refParts = { month: 4, day: 2, year: 2022, hour: 9, minute: 16 };
+    // September 10, 2021 10:10 AM
+    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+    // September 10, 2023 11:15 AM
+    const maxParts = { month: 9, day: 10, year: 2023, hour: 11, minute: 15 };
+
+    // April 2, 2022 9:16 AM
+    const expected = {
+      month: 4,
+      day: 2,
+      year: 2022,
+      hour: 9,
+      minute: 16,
+      ampm: 'am',
+      dayOfWeek: undefined,
+    };
+
+    expect(
+      getClosestValidDate({
+        refParts,
+        monthValues: [4, 9, 11],
+        dayValues: [2, 10, 12, 13, 14],
+        yearValues: [2020, 2021, 2022, 2023],
+        hourValues: [9, 10, 11],
+        minuteValues: [10, 15, 16],
+        minParts,
+        maxParts,
+      })
+    ).toEqual(expected);
+  });
+});

core/src/components/datetime/test/prefer-wheel/datetime.spec.ts

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Datetime } from '../../datetime';
+
+describe('datetime: preferWheel', () => {
+  beforeEach(() => {
+    const mockIntersectionObserver = jest.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    global.IntersectionObserver = mockIntersectionObserver;
+  });
+
+  it('should select the working day when clicking the confirm button', async () => {
+    const page = await newSpecPage({
+      components: [Datetime],
+      html: '<ion-datetime prefer-wheel="true" max="2021" show-default-buttons="true"></ion-datetime>',
+    });
+
+    const datetime = page.body.querySelector<HTMLIonDatetimeElement>('ion-datetime')!;
+    const confirmButton = datetime.shadowRoot!.querySelector<HTMLIonButtonElement>('#confirm-button')!;
+
+    confirmButton.click();
+
+    await page.waitForChanges();
+
+    expect(datetime.value).toBe('2021-12-31T23:59:00');
+  });
+});

core/src/components/datetime/utils/manipulation.ts

@@ -1,6 +1,6 @@
 import type { DatetimeParts } from '../datetime-interface';
 
-import { isSameDay } from './comparison';
+import { isAfter, isBefore, isSameDay } from './comparison';
 import { getNumDaysInMonth } from './helpers';
 import { clampDate, parseAmPm } from './parse';
 
@@ -424,44 +424,137 @@ export const validateParts = (
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
- * @param refParts The reference date
- * @param monthValues The allowed month values
- * @param dayValues The allowed day (of the month) values
- * @param yearValues The allowed year values
- * @param hourValues The allowed hour values
- * @param minuteValues The allowed minute values
  */
-export const getClosestValidDate = (
-  refParts: DatetimeParts,
-  monthValues?: number[],
-  dayValues?: number[],
-  yearValues?: number[],
-  hourValues?: number[],
-  minuteValues?: number[]
-) => {
+export const getClosestValidDate = ({
+  refParts,
+  monthValues,
+  dayValues,
+  yearValues,
+  hourValues,
+  minuteValues,
+  minParts,
+  maxParts,
+}: {
+  /**
+   * The reference date
+   */
+  refParts: DatetimeParts;
+  /**
+   * The allowed month values
+   */
+  monthValues?: number[];
+  /**
+   * The allowed day (of the month) values
+   */
+  dayValues?: number[];
+  /**
+   * The allowed year values
+   */
+  yearValues?: number[];
+  /**
+   * The allowed hour values
+   */
+  hourValues?: number[];
+  /**
+   * The allowed minute values
+   */
+  minuteValues?: number[];
+  /**
+   * The minimum date that can be returned
+   */
+  minParts?: DatetimeParts;
+  /**
+   * The maximum date that can be returned
+   */
+  maxParts?: DatetimeParts;
+}) => {
   const { hour, minute, day, month, year } = refParts;
   const copyParts = { ...refParts, dayOfWeek: undefined };
 
+  if (yearValues !== undefined) {
+    // Filters out years that are out of the min/max bounds
+    const filteredYears = yearValues.filter((year) => {
+      if (minParts !== undefined && year < minParts.year) {
+        return false;
+      }
+
+      if (maxParts !== undefined && year > maxParts.year) {
+        return false;
+      }
+
+      return true;
+    });
+    copyParts.year = findClosestValue(year, filteredYears);
+  }
+
   if (monthValues !== undefined) {
-    copyParts.month = findClosestValue(month, monthValues);
+    // Filters out months that are out of the min/max bounds
+    const filteredMonths = monthValues.filter((month) => {
+      if (minParts !== undefined && copyParts.year === minParts.year && month < minParts.month) {
+        return false;
+      }
+
+      if (maxParts !== undefined && copyParts.year === maxParts.year && month > maxParts.month) {
+        return false;
+      }
+
+      return true;
+    });
+    copyParts.month = findClosestValue(month, filteredMonths);
   }
 
   // Day is nullable but cannot be undefined
   if (day !== null && dayValues !== undefined) {
-    copyParts.day = findClosestValue(day, dayValues);
-  }
-
-  if (yearValues !== undefined) {
-    copyParts.year = findClosestValue(year, yearValues);
+    // Filters out days that are out of the min/max bounds
+    const filteredDays = dayValues.filter((day) => {
+      if (minParts !== undefined && isBefore({ ...copyParts, day }, minParts)) {
+        return false;
+      }
+      if (maxParts !== undefined && isAfter({ ...copyParts, day }, maxParts)) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.day = findClosestValue(day, filteredDays);
   }
 
   if (hour !== undefined && hourValues !== undefined) {
-    copyParts.hour = findClosestValue(hour, hourValues);
+    // Filters out hours that are out of the min/max bounds
+    const filteredHours = hourValues.filter((hour) => {
+      if (minParts?.hour !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
+        return false;
+      }
+      if (maxParts?.hour !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.hour = findClosestValue(hour, filteredHours);
     copyParts.ampm = parseAmPm(copyParts.hour);
   }
 
   if (minute !== undefined && minuteValues !== undefined) {
-    copyParts.minute = findClosestValue(minute, minuteValues);
+    // Filters out minutes that are out of the min/max bounds
+    const filteredMinutes = minuteValues.filter((minute) => {
+      if (
+        minParts?.minute !== undefined &&
+        isSameDay(copyParts, minParts) &&
+        copyParts.hour === minParts.hour &&
+        minute < minParts.minute
+      ) {
+        return false;
+      }
+      if (
+        maxParts?.minute !== undefined &&
+        isSameDay(copyParts, maxParts) &&
+        copyParts.hour === maxParts.hour &&
+        minute > maxParts.minute
+      ) {
+        return false;
+      }
+      return true;
+    });
+    copyParts.minute = findClosestValue(minute, filteredMinutes);
   }
 
   return copyParts;

core/src/components/input/input.ios.scss

@@ -37,3 +37,25 @@
 :host(.input-disabled) {
   opacity: #{$input-ios-disabled-opacity};
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}

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

@@ -117,3 +117,27 @@
 :host(.input-shape-round) {
   --border-radius: 16px;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}

core/src/components/input/input.scss

@@ -259,15 +259,16 @@
 
 // Input Has focus
 // --------------------------------------------------
-// When the input has focus, then the input cover should be hidden
 
-:host(.has-focus) {
+// TODO FW-2764 Remove this
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+// TODO FW-2764 Remove this
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 
@@ -659,8 +660,10 @@
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }

core/src/components/input/input.tsx

@@ -121,6 +121,9 @@ export class Input implements ComponentInterface {
   /**
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 
@@ -549,15 +552,37 @@ export class Input implements ComponentInterface {
     if (!this.shouldClearOnEdit()) {
       return;
     }
+
+    /**
+     * The following keys do not modify the
+     * contents of the input. As a result, pressing
+     * them should not edit the input.
+     *
+     * We can't check to see if the value of the input
+     * was changed because we call checkClearOnEdit
+     * in a keydown listener, and the key has not yet
+     * been added to the input.
+     */
+    const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+    const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
+
     /**
      * Clear the input if the control has not been previously cleared during focus.
      * Do not clear if the user hitting enter to submit a form.
      */
-    if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
+    if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
       this.value = '';
       this.emitInputChange(ev);
     }
-    this.didInputClearOnEdit = true;
+
+    /**
+     * Pressing an IGNORED_KEYS first and
+     * then an allowed key will cause the input to not
+     * be cleared.
+     */
+    if (!pressedIgnoredKey) {
+      this.didInputClearOnEdit = true;
+    }
   }
 
   private onCompositionStart = () => {

core/src/components/input/test/clear-on-edit/input.e2e.ts

@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test';
 import { test, configs } from '@utils/test/playwright';
 
+const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('input: clearOnEdit'), () => {
     test('should clear when typed into', async ({ page }) => {
@@ -16,28 +18,57 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(input).toHaveJSProperty('value', 'h');
     });
 
-    test('should not clear when enter is pressed', async ({ page }) => {
-      await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+    test('should not clear the input if it does not have an initial value when typing', async ({ page }) => {
+      await page.setContent(`<ion-input label="input" value="" clear-on-edit="true"></ion-input>`, config);
 
       const input = page.locator('ion-input');
-      await input.locator('input').focus();
 
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
+      await input.click();
+      await input.type('hello world');
 
-      await expect(input).toHaveJSProperty('value', 'abc');
+      await expect(input).toHaveJSProperty('value', 'hello world');
     });
 
-    test('should not clear when tab is pressed', async ({ page }) => {
+    IGNORED_KEYS.forEach((ignoredKey: string) => {
+      test(`should not clear when ${ignoredKey} is pressed`, async ({ page, skip }) => {
+        skip.browser(
+          (browserName: string) => browserName === 'firefox' && ignoredKey === 'Meta',
+          'Firefox incorrectly adds "OS" to the input when pressing the Meta key on Linux'
+        );
+        await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+
+        const input = page.locator('ion-input');
+        await input.locator('input').focus();
+
+        await page.keyboard.press(ignoredKey);
+        await page.waitForChanges();
+
+        await expect(input).toHaveJSProperty('value', 'abc');
+      });
+    });
+
+    test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
+      });
+
       await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
 
       const input = page.locator('ion-input');
       await input.locator('input').focus();
 
-      await page.keyboard.press('Tab');
+      // ignored
+      await page.keyboard.press('Shift');
       await page.waitForChanges();
 
       await expect(input).toHaveJSProperty('value', 'abc');
+
+      // allowed
+      await page.keyboard.press('a');
+      await page.waitForChanges();
+
+      await expect(input).toHaveJSProperty('value', 'a');
     });
   });
 });

core/src/components/input/test/slot/input.e2e.ts

@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `,
         config

core/src/components/item/item.scss

@@ -426,6 +426,13 @@ button, a {
   // shrink and wrap its text instead of moving to its
   // own row if there are slotted elements next to it
   width: min-content;
+
+  /**
+   * We allow labels in the default
+   * slot to grow. However, we do not
+   * want them to grow indefinitely.
+   */
+  max-width: 100%;
 }
 
 // Item Input

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

@@ -82,3 +82,34 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('label: text wrapping in item'), () => {
+    test('long text should not cause label to expand infinitely', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          div {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        </style>
+        <ion-item>
+          <ion-label>
+            <!-- This text should be truncated with ellipses -->
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>
+          </ion-label>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`label-item-wrap`));
+    });
+  });
+});

core/src/components/menu/menu.scss

@@ -190,13 +190,12 @@ ion-backdrop {
 
   width: auto;
 
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
+  transform: none;
 
-  box-shadow: none !important;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }

core/src/components/menu/test/custom/menu.e2e.ts

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('menu: custom'), () => {
+    test('should allow styling the menu box shadow when inside a split pane', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/21530',
+      });
+
+      await page.setContent(
+        `
+        <style>
+          ion-split-pane {
+            --side-width: 200px;
+            --side-min-width: 200px;
+          }
+
+          ion-menu {
+            box-shadow: 10px 5px 5px red;
+            z-index: 1;
+          }
+        </style>
+
+        <ion-app>
+          <ion-split-pane when="xs" id="splitPane" content-id="split-content">
+            <ion-menu side="start" content-id="split-content">
+              <ion-header>
+                <ion-toolbar color="secondary">
+                  <ion-title>Menu</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Menu Content</ion-content>
+            </ion-menu>
+
+            <div class="ion-page" id="split-content">
+              <ion-header>
+                <ion-toolbar>
+                  <ion-buttons slot="start">
+                    <ion-menu-button></ion-menu-button>
+                  </ion-buttons>
+
+                  <ion-title>Content</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Main Content</ion-content>
+            </div>
+          </ion-split-pane>
+        </ion-app>
+      `,
+        config
+      );
+
+      const app = page.locator('ion-app');
+
+      await expect(app).toHaveScreenshot(screenshot(`menu-custom-split-pane`));
+    });
+  });
+});

core/src/components/modal/modal.tsx

@@ -264,6 +264,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
    *
    * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
    * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() canDismiss: boolean | ((data?: any, role?: string) => Promise<boolean>) = true;
 

core/src/components/radio-group/radio-group.tsx

@@ -130,7 +130,15 @@ export class RadioGroup implements ComponentInterface {
      * using the `name` attribute.
      */
     const selectedRadio = ev.target && (ev.target as HTMLElement).closest('ion-radio');
-    if (selectedRadio && selectedRadio.disabled === false) {
+    /**
+     * Our current disabled prop definition causes Stencil to mark it
+     * as optional. While this is not desired, fixing this behavior
+     * in Stencil is a significant breaking change, so this effort is
+     * being de-risked in STENCIL-917. Until then, we compromise
+     * here by checking for falsy `disabled` values instead of strictly
+     * checking `disabled === false`.
+     */
+    if (selectedRadio && !selectedRadio.disabled) {
       const currentValue = this.value;
       const newValue = selectedRadio.value;
       if (newValue !== currentValue) {

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

@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   });
 
   test.describe(title('radio: keyboard navigation'), () => {
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach(async ({ page, browserName }) => {
       await page.setContent(
         `
       <ion-app>
@@ -58,6 +58,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     `,
         config
       );
+
+      if (browserName === 'webkit') {
+        const radio = page.locator('#first-group ion-radio').first();
+        /**
+         * Sometimes Safari does not focus the first radio.
+         * This is a workaround to ensure the first radio is focused.
+         *
+         * Wait for the first radio to be rendered before tabbing.
+         * This is necessary because the first radio may not be rendered
+         * when the page first loads.
+         *
+         * This would cause the first radio to be skipped when tabbing.
+         */
+        await radio.waitFor();
+      }
     });
 
     test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {

core/src/components/radio/test/legacy/a11y/radio.e2e.ts

@@ -6,9 +6,23 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: a11y'), () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.browser('webkit', 'Tabbing is flaky in Safari');
+    test.beforeEach(async ({ page, browserName }) => {
       await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+
+      if (browserName === 'webkit') {
+        const radio = page.locator('#first-group ion-radio').first();
+        /**
+         * Sometimes Safari does not focus the first radio.
+         * This is a workaround to ensure the first radio is focused.
+         *
+         * Wait for the first radio to be rendered before tabbing.
+         * This is necessary because the first radio may not be rendered
+         * when the page first loads.
+         *
+         * This would cause the first radio to be skipped when tabbing.
+         */
+        await radio.waitFor();
+      }
     });
     test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');

core/src/components/range/range.tsx

@@ -141,6 +141,9 @@ export class Range implements ComponentInterface {
   /**
    * A callback used to format the pin text.
    * By default the pin text is set to `Math.round(value)`.
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() pinFormatter: PinFormatter = (value: number): number => Math.round(value);
 

core/src/components/refresher-content/refresher-content.tsx

@@ -1,13 +1,13 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
-import { isPlatform } from '@utils/platform';
 import { sanitizeDOMString } from '@utils/sanitization';
 import { arrowDown, caretBackSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { IonicSafeString } from '../../utils/sanitization';
+import { supportsRubberBandScrolling } from '../refresher/refresher.utils';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 import { SPINNERS } from '../spinner/spinner-configs';
 
@@ -63,11 +63,17 @@ export class RefresherContent implements ComponentInterface {
 
   componentWillLoad() {
     if (this.pullingIcon === undefined) {
+      /**
+       * The native iOS refresher uses a spinner instead of
+       * an icon, so we need to see if this device supports
+       * the native iOS refresher.
+       */
+      const hasRubberBandScrolling = supportsRubberBandScrolling();
       const mode = getIonMode(this);
-      const overflowRefresher = (this.el.style as any).webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
+      const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
       this.pullingIcon = config.get(
         'refreshingIcon',
-        mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular'
+        mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular'
       );
     }
     if (this.refreshingSpinner === undefined) {

core/src/components/refresher/refresher.tsx

@@ -25,6 +25,9 @@ import {
   translateElement,
 } from './refresher.utils';
 
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 @Component({
   tag: 'ion-refresher',
   styleUrls: {

core/src/components/refresher/refresher.utils.ts

@@ -1,7 +1,6 @@
 import { writeTask } from '@stencil/core';
 import { createAnimation } from '@utils/animation/animation';
 import { clamp, componentOnReady, transitionEndAsync } from '@utils/helpers';
-import { isPlatform } from '@utils/platform';
 
 // MD Native Refresher
 // -----------------------------
@@ -195,6 +194,25 @@ export const translateElement = (el?: HTMLElement, value?: string, duration = 20
 // Utils
 // -----------------------------
 
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+export const supportsRubberBandScrolling = () => {
+  return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
+
 export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElement, mode: string) => {
   const refresherContent = referenceEl.querySelector('ion-refresher-content');
   if (!refresherContent) {
@@ -209,15 +227,6 @@ export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElem
   return (
     pullingSpinner !== null &&
     refreshingSpinner !== null &&
-    /**
-     * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-     * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-     * However, it will be the empty string on iOS.
-     * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-     * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-     * set on the element, even if the platform does not support that.
-     */
-    ((mode === 'ios' && isPlatform('mobile') && (referenceEl.style as any).webkitOverflowScrolling !== undefined) ||
-      mode === 'md')
+    ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md')
   );
 };

core/src/components/select/select.ios.scss

@@ -38,3 +38,25 @@
 :host(.select-disabled) {
   opacity: $select-ios-disabled-opacity;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}

core/src/components/select/select.md.scss

@@ -155,3 +155,27 @@
 :host(.select-disabled) {
   opacity: $select-md-disabled-opacity;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}

core/src/components/select/select.scss

@@ -592,8 +592,10 @@ button {
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }

core/src/components/select/test/slot/select.e2e.ts

@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `,
         config