chore: set permissions

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-Issue number: resolves #
+Issue number: #
 
 ---------
 
@@ -21,12 +21,7 @@ Issue number: resolves #
 - [ ] Yes
 - [ ] 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.
--->
+<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
 
 
 ## Other information

.github/labeler.yml

@@ -6,17 +6,16 @@
 # https://github.com/actions/labeler
 
 'package: core':
-- changed-files:
-  - any-glob-to-any-file: ['core/**/*']
+  - core/**/*
 
 'package: angular':
-- changed-files:
-  - any-glob-to-any-file: ['packages/angular/**/*', 'packages/angular-*/**/*']
+  - packages/angular/**/*
+  - packages/angular-*/**/*
 
 'package: react':
-- changed-files:
-  - any-glob-to-any-file: ['packages/react/**/*', 'packages/react-*/**/*']
+  - packages/react/**/*
+  - packages/react-*/**/*
 
 'package: vue':
-- changed-files:
-  - any-glob-to-any-file: ['packages/vue/**/*', 'packages/vue-*/**/*']
+  - packages/vue/**/*
+  - packages/vue-*/**/*

.github/workflows/label.yml

@@ -11,9 +11,13 @@ on:
 
 jobs:
   triage:
+    permissions:
+      contents: read
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v5
+    - uses: actions/checkout@v4
+    - uses: actions/labeler@v4
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true

.github/workflows/release.yml

@@ -69,26 +69,16 @@ jobs:
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       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:
-      - uses: actions/checkout@v3
-      # 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
+    # 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,105 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
-
-
-### Bug Fixes
-
-* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
-
-
-
-
-
-## [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)
-
-
-### Bug Fixes
-
-* **angular,vue:** range form value updates while dragging knob ([#28422](https://github.com/ionic-team/ionic-framework/issues/28422)) ([0854a11](https://github.com/ionic-team/ionic-framework/commit/0854a11a25759d0201eae66c96a62fe138d486f8)), closes [#28256](https://github.com/ionic-team/ionic-framework/issues/28256)
-* **animation:** add stronger types to Animation interface ([#28334](https://github.com/ionic-team/ionic-framework/issues/28334)) ([4a088d5](https://github.com/ionic-team/ionic-framework/commit/4a088d5d612ab0387064d388b37d46cdf15cf1ff))
-* **animation:** progressEnd coercion is reset before onFinish ([#28394](https://github.com/ionic-team/ionic-framework/issues/28394)) ([eae8162](https://github.com/ionic-team/ionic-framework/commit/eae8162d0dc2e0bd7a9d56a3662a8e5f5d142b72)), closes [#28393](https://github.com/ionic-team/ionic-framework/issues/28393)
-* **infinite-scroll:** remaining in threshold after ionInfinite can trigger event again on scroll ([#28569](https://github.com/ionic-team/ionic-framework/issues/28569)) ([8c235fd](https://github.com/ionic-team/ionic-framework/commit/8c235fd30c50f317de1f37f69068507aa0979068)), closes [#18071](https://github.com/ionic-team/ionic-framework/issues/18071)
-* **item:** allow item to grow when it is used in a flex container ([#28594](https://github.com/ionic-team/ionic-framework/issues/28594)) ([1c1b567](https://github.com/ionic-team/ionic-framework/commit/1c1b567279dee44da70bb9b90c129946c9043987))
-* **item:** wrap elements and label contents when the font size increases or the elements do not fit ([#28146](https://github.com/ionic-team/ionic-framework/issues/28146)) ([6438e3e](https://github.com/ionic-team/ionic-framework/commit/6438e3e919c665569b731a2d74fe1547b4f3c1cc))
-* **select:** do not collapse to width: 0 when placed in flex container ([#28631](https://github.com/ionic-team/ionic-framework/issues/28631)) ([e71e7a0](https://github.com/ionic-team/ionic-framework/commit/e71e7a069000db8738abc304758de64286817442))
-* **toast:** add swipeGesture to ToastOptions ([#28518](https://github.com/ionic-team/ionic-framework/issues/28518)) ([4ad6df6](https://github.com/ionic-team/ionic-framework/commit/4ad6df67f01cebce30d4da46c7541c4b14c5d4a4))
-
-
-### Features
-
-* **checkbox:** add shadow part for label ([#28604](https://github.com/ionic-team/ionic-framework/issues/28604)) ([f9f5654](https://github.com/ionic-team/ionic-framework/commit/f9f5654ab0e920bf97089fbabfb9eedbcf6fe8ae)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300)
-* **input, textarea, select:** add start and end slots ([#28583](https://github.com/ionic-team/ionic-framework/issues/28583)) ([357b8b2](https://github.com/ionic-team/ionic-framework/commit/357b8b2beb29b95d53ef043af349067be1d32658)), closes [#26297](https://github.com/ionic-team/ionic-framework/issues/26297)
-* **radio-group:** add compareWith property ([#28452](https://github.com/ionic-team/ionic-framework/issues/28452)) ([0ae327f](https://github.com/ionic-team/ionic-framework/commit/0ae327f0e09cd97d705f2d3051c215034381e226))
-* **radio:** add shadow part for label ([#28607](https://github.com/ionic-team/ionic-framework/issues/28607)) ([b757970](https://github.com/ionic-team/ionic-framework/commit/b757970d23e87c59aa883ecb1bfa9b66bcae8de2)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300)
-* **range:** expose label wrapper as shadow part ([#28601](https://github.com/ionic-team/ionic-framework/issues/28601)) ([52ed2bf](https://github.com/ionic-team/ionic-framework/commit/52ed2bf63777c764f57bb4c3a5d4a127bff46c50))
-* **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.
-
-
-
-
-
-## [7.5.8](https://github.com/ionic-team/ionic-framework/compare/v7.5.7...v7.5.8) (2023-12-06)
-
-
-### Bug Fixes
-
-* **angular:** add missing menu controller methods ([#28618](https://github.com/ionic-team/ionic-framework/issues/28618)) ([7871b56](https://github.com/ionic-team/ionic-framework/commit/7871b56eccfe63326b6dd4b56ade3b3afd444fce)), closes [#20053](https://github.com/ionic-team/ionic-framework/issues/20053)
-* **overlays:** trigger is configured on load ([#28526](https://github.com/ionic-team/ionic-framework/issues/28526)) ([a3cd204](https://github.com/ionic-team/ionic-framework/commit/a3cd204f616606ccffc35082655e55fdfb19fe28)), closes [#28524](https://github.com/ionic-team/ionic-framework/issues/28524)
-* **react:** router creates new view instances of parameterized routes ([#28616](https://github.com/ionic-team/ionic-framework/issues/28616)) ([1705d06](https://github.com/ionic-team/ionic-framework/commit/1705d064cc041e99f432a27207f3aab7fa62c778)), closes [#26524](https://github.com/ionic-team/ionic-framework/issues/26524)
-* **vue:** nav component accepts kebab-case component properties ([#28615](https://github.com/ionic-team/ionic-framework/issues/28615)) ([60303aa](https://github.com/ionic-team/ionic-framework/commit/60303aad23f823488afc8f8824e9c72e3ab86acc)), closes [#28611](https://github.com/ionic-team/ionic-framework/issues/28611)
-
-
-
-
-
 ## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
 
 

core/CHANGELOG.md

@@ -3,97 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
-
-
-### Bug Fixes
-
-* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
-
-
-
-
-
-## [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)
-
-
-### Bug Fixes
-
-* **angular,vue:** range form value updates while dragging knob ([#28422](https://github.com/ionic-team/ionic-framework/issues/28422)) ([0854a11](https://github.com/ionic-team/ionic-framework/commit/0854a11a25759d0201eae66c96a62fe138d486f8)), closes [#28256](https://github.com/ionic-team/ionic-framework/issues/28256)
-* **animation:** add stronger types to Animation interface ([#28334](https://github.com/ionic-team/ionic-framework/issues/28334)) ([4a088d5](https://github.com/ionic-team/ionic-framework/commit/4a088d5d612ab0387064d388b37d46cdf15cf1ff))
-* **animation:** progressEnd coercion is reset before onFinish ([#28394](https://github.com/ionic-team/ionic-framework/issues/28394)) ([eae8162](https://github.com/ionic-team/ionic-framework/commit/eae8162d0dc2e0bd7a9d56a3662a8e5f5d142b72)), closes [#28393](https://github.com/ionic-team/ionic-framework/issues/28393)
-* **infinite-scroll:** remaining in threshold after ionInfinite can trigger event again on scroll ([#28569](https://github.com/ionic-team/ionic-framework/issues/28569)) ([8c235fd](https://github.com/ionic-team/ionic-framework/commit/8c235fd30c50f317de1f37f69068507aa0979068)), closes [#18071](https://github.com/ionic-team/ionic-framework/issues/18071)
-* **item:** allow item to grow when it is used in a flex container ([#28594](https://github.com/ionic-team/ionic-framework/issues/28594)) ([1c1b567](https://github.com/ionic-team/ionic-framework/commit/1c1b567279dee44da70bb9b90c129946c9043987))
-* **item:** wrap elements and label contents when the font size increases or the elements do not fit ([#28146](https://github.com/ionic-team/ionic-framework/issues/28146)) ([6438e3e](https://github.com/ionic-team/ionic-framework/commit/6438e3e919c665569b731a2d74fe1547b4f3c1cc))
-* **select:** do not collapse to width: 0 when placed in flex container ([#28631](https://github.com/ionic-team/ionic-framework/issues/28631)) ([e71e7a0](https://github.com/ionic-team/ionic-framework/commit/e71e7a069000db8738abc304758de64286817442))
-* **toast:** add swipeGesture to ToastOptions ([#28518](https://github.com/ionic-team/ionic-framework/issues/28518)) ([4ad6df6](https://github.com/ionic-team/ionic-framework/commit/4ad6df67f01cebce30d4da46c7541c4b14c5d4a4))
-
-
-### Features
-
-* **checkbox:** add shadow part for label ([#28604](https://github.com/ionic-team/ionic-framework/issues/28604)) ([f9f5654](https://github.com/ionic-team/ionic-framework/commit/f9f5654ab0e920bf97089fbabfb9eedbcf6fe8ae)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300)
-* **input, textarea, select:** add start and end slots ([#28583](https://github.com/ionic-team/ionic-framework/issues/28583)) ([357b8b2](https://github.com/ionic-team/ionic-framework/commit/357b8b2beb29b95d53ef043af349067be1d32658)), closes [#26297](https://github.com/ionic-team/ionic-framework/issues/26297)
-* **radio-group:** add compareWith property ([#28452](https://github.com/ionic-team/ionic-framework/issues/28452)) ([0ae327f](https://github.com/ionic-team/ionic-framework/commit/0ae327f0e09cd97d705f2d3051c215034381e226))
-* **radio:** add shadow part for label ([#28607](https://github.com/ionic-team/ionic-framework/issues/28607)) ([b757970](https://github.com/ionic-team/ionic-framework/commit/b757970d23e87c59aa883ecb1bfa9b66bcae8de2)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300)
-* **range:** expose label wrapper as shadow part ([#28601](https://github.com/ionic-team/ionic-framework/issues/28601)) ([52ed2bf](https://github.com/ionic-team/ionic-framework/commit/52ed2bf63777c764f57bb4c3a5d4a127bff46c50))
-* **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))
-
-
-
-
-
-## [7.5.8](https://github.com/ionic-team/ionic-framework/compare/v7.5.7...v7.5.8) (2023-12-06)
-
-
-### Bug Fixes
-
-* **overlays:** trigger is configured on load ([#28526](https://github.com/ionic-team/ionic-framework/issues/28526)) ([a3cd204](https://github.com/ionic-team/ionic-framework/commit/a3cd204f616606ccffc35082655e55fdfb19fe28)), closes [#28524](https://github.com/ionic-team/ionic-framework/issues/28524)
-
-
-
-
-
 ## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
 
 

core/api.txt

@@ -315,7 +315,6 @@ ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 ion-checkbox,part,container
-ion-checkbox,part,label
 ion-checkbox,part,mark
 
 ion-chip,shadow
@@ -1030,12 +1029,10 @@ ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 ion-radio,css-prop,--inner-border-radius
 ion-radio,part,container
-ion-radio,part,label
 ion-radio,part,mark
 
 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
-ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
 ion-radio-group,prop,name,string,this.inputId,false,false
 ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
@@ -1079,7 +1076,6 @@ ion-range,css-prop,--pin-color
 ion-range,part,bar
 ion-range,part,bar-active
 ion-range,part,knob
-ion-range,part,label
 ion-range,part,pin
 ion-range,part,tick
 ion-range,part,tick-active
@@ -1087,7 +1083,6 @@ 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
@@ -1451,7 +1446,6 @@ ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,fals
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
-ion-toast,prop,swipeGesture,"vertical" | undefined,undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,prop,trigger,string | undefined,undefined,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -1518,7 +1512,6 @@ ion-toggle,css-prop,--handle-width
 ion-toggle,css-prop,--track-background
 ion-toggle,css-prop,--track-background-checked
 ion-toggle,part,handle
-ion-toggle,part,label
 ion-toggle,part,track
 
 ion-toolbar,shadow

core/package-lock.json

@@ -1,23 +1,23 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.4",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.6.4",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.9.1",
-        "ionicons": "^7.2.2",
+        "@stencil/core": "^4.8.0",
+        "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.8.2",
-        "@capacitor/core": "^5.6.0",
+        "@axe-core/playwright": "^4.8.1",
+        "@capacitor/core": "^5.5.1",
         "@capacitor/haptics": "^5.0.6",
-        "@capacitor/keyboard": "^5.0.7",
+        "@capacitor/keyboard": "^5.0.6",
         "@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.8",
+        "@stencil/sass": "^3.0.7",
         "@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.2",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
-      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.1.tgz",
+      "integrity": "sha512-KC1X++UdRAwMLRvB+BIKFheyLHUnbJTL0t0Wbv6TJMozn2V2QyEtAcN6jyUiudtGiLUGhHCtj/eWorBnVZ4dAA==",
       "dev": true,
       "dependencies": {
         "axe-core": "~4.8.2"
@@ -634,9 +634,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
-      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
+      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -652,9 +652,9 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "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==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz",
-      "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
+      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -5785,9 +5785,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
-      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
+      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -10899,9 +10899,9 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
-      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.1.tgz",
+      "integrity": "sha512-KC1X++UdRAwMLRvB+BIKFheyLHUnbJTL0t0Wbv6TJMozn2V2QyEtAcN6jyUiudtGiLUGhHCtj/eWorBnVZ4dAA==",
       "dev": true,
       "requires": {
         "axe-core": "~4.8.2"
@@ -11324,9 +11324,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
-      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
+      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11340,9 +11340,9 @@
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "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==",
       "dev": true,
       "requires": {}
     },
@@ -12184,9 +12184,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz",
-      "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw=="
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -12196,9 +12196,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
+      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
       "dev": true,
       "requires": {}
     },
@@ -15056,9 +15056,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
-      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
+      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.4",
+  "version": "7.5.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,15 +31,15 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.9.1",
-    "ionicons": "^7.2.2",
+    "@stencil/core": "^4.8.0",
+    "ionicons": "^7.2.1",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.2",
-    "@capacitor/core": "^5.6.0",
+    "@axe-core/playwright": "^4.8.1",
+    "@capacitor/core": "^5.5.1",
     "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.6",
     "@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.8",
+    "@stencil/sass": "^3.0.7",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",

core/setupJest.js

@@ -1,21 +0,0 @@
-expect.extend({
-  toHaveShadowPart(received, part) {
-    if (typeof part !== 'string') {
-      throw new Error('expected toHaveShadowPart to be called with a string of the CSS shadow part name');
-    }
-
-    if (received.shadowRoot === null) {
-      throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
-    }
-
-    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
-    const pass = shadowPart !== null;
-
-    const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
-
-    return {
-      pass,
-      message: () => message,
-    };
-  },
-});

core/src/components.d.ts

@@ -27,7 +27,7 @@ import { PickerButton, PickerColumn } from "./components/picker/picker-interface
 import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
 import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
-import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
+import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
 import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
@@ -39,7 +39,7 @@ import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
+import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
 export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
@@ -63,7 +63,7 @@ export { PickerButton, PickerColumn } from "./components/picker/picker-interface
 export { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
 export { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
-export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
+export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
 export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
@@ -75,7 +75,7 @@ export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
+export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export namespace Components {
     interface IonAccordion {
@@ -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".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * 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".
          */
         "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".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
          */
         "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.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * 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.
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -2269,10 +2269,6 @@ export namespace Components {
           * If `true`, the radios can be deselected.
          */
         "allowEmptySelection": boolean;
-        /**
-          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
-         */
-        "compareWith"?: string | RadioGroupCompareFn | null;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -2336,7 +2332,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)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
          */
         "pinFormatter": PinFormatter;
         /**
@@ -2377,10 +2373,6 @@ 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.
          */
@@ -2696,7 +2688,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
+          * A property name or function used to compare object values
          */
         "compareWith"?: string | SelectCompareFn | null;
         /**
@@ -2978,7 +2970,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * 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.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -3180,10 +3172,6 @@ export namespace Components {
           * Present the toast overlay after it has been created.
          */
         "present": () => Promise<void>;
-        /**
-          * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
-         */
-        "swipeGesture"?: ToastSwipeGestureDirection;
         /**
           * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
@@ -3402,10 +3390,6 @@ export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSelectElement;
 }
-export interface IonSkeletonTextCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLIonSkeletonTextElement;
-}
 export interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSplitPaneElement;
@@ -4420,18 +4404,7 @@ declare global {
         prototype: HTMLIonSelectPopoverElement;
         new (): HTMLIonSelectPopoverElement;
     };
-    interface HTMLIonSkeletonTextElementEventMap {
-        "ionStyle": StyleEventDetail;
-    }
     interface HTMLIonSkeletonTextElement extends Components.IonSkeletonText, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIonSkeletonTextElementEventMap>(type: K, listener: (this: HTMLIonSkeletonTextElement, ev: IonSkeletonTextCustomEvent<HTMLIonSkeletonTextElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIonSkeletonTextElementEventMap>(type: K, listener: (this: HTMLIonSkeletonTextElement, ev: IonSkeletonTextCustomEvent<HTMLIonSkeletonTextElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonSkeletonTextElement: {
         prototype: HTMLIonSkeletonTextElement;
@@ -5650,7 +5623,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".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * 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".
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -5901,7 +5874,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * 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.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -6432,7 +6405,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.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * 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.
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -6961,10 +6934,6 @@ declare namespace LocalJSX {
           * If `true`, the radios can be deselected.
          */
         "allowEmptySelection"?: boolean;
-        /**
-          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
-         */
-        "compareWith"?: string | RadioGroupCompareFn | null;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -7064,7 +7033,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)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
          */
         "pinFormatter"?: PinFormatter;
         /**
@@ -7093,10 +7062,6 @@ 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.
          */
@@ -7451,7 +7416,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
+          * A property name or function used to compare object values
          */
         "compareWith"?: string | SelectCompareFn | null;
         /**
@@ -7588,10 +7553,6 @@ declare namespace LocalJSX {
           * If `true`, the skeleton text will animate.
          */
         "animated"?: boolean;
-        /**
-          * Emitted when the styles change.
-         */
-        "onIonStyle"?: (event: IonSkeletonTextCustomEvent<StyleEventDetail>) => void;
     }
     interface IonSpinner {
         /**
@@ -7758,7 +7719,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * 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.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -7990,10 +7951,6 @@ declare namespace LocalJSX {
           * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
          */
         "positionAnchor"?: HTMLElement | string;
-        /**
-          * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
-         */
-        "swipeGesture"?: ToastSwipeGestureDirection;
         /**
           * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */

core/src/components/checkbox/checkbox.scss

@@ -90,6 +90,13 @@
 }
 
 .label-text-wrapper {
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the checkbox
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
+
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -166,6 +173,7 @@ input {
   opacity: 0;
 }
 
+
 // Justify Content
 // ---------------------------------------------
 
@@ -192,6 +200,7 @@ input {
   align-items: center;
 }
 
+
 // Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -212,6 +221,7 @@ input {
   @include margin(null, $form-control-label-margin, null, 0);
 }
 
+
 // Label Placement - End
 // ----------------------------------------------------------------
 
@@ -232,6 +242,7 @@ input {
   @include margin(null, 0, null, $form-control-label-margin);
 }
 
+
 // Label Placement - Fixed
 // ----------------------------------------------------------------
 
@@ -306,6 +317,7 @@ input {
   opacity: 1;
 }
 
+
 // Disabled Checkbox
 // ---------------------------------------------
 

core/src/components/checkbox/checkbox.tsx

@@ -18,7 +18,6 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
  * @part container - The container for the checkbox mark.
- * @part label - The label text describing the checkbox.
  * @part mark - The checkmark used to indicate the checked state.
  */
 @Component({
@@ -165,8 +164,6 @@ export class Checkbox implements ComponentInterface {
   private emitStyle() {
     const style: StyleEventDetail = {
       'interactive-disabled': this.disabled,
-      // TODO(FW-3100): remove this
-      legacy: !!this.legacy,
     };
 
     // TODO(FW-3100): remove this
@@ -285,7 +282,6 @@ export class Checkbox implements ComponentInterface {
               'label-text-wrapper': true,
               'label-text-wrapper-hidden': el.textContent === '',
             }}
-            part="label"
           >
             <slot></slot>
           </div>

core/src/components/checkbox/test/checkbox.spec.ts

@@ -2,23 +2,6 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { Checkbox } from '../checkbox';
 
-describe('ion-checkbox: shadow parts', () => {
-  it('should render the checkbox with shadow parts', async () => {
-    const page = await newSpecPage({
-      components: [Checkbox],
-      html: `
-        <ion-checkbox>Checkbox</ion-checkbox>
-      `,
-    });
-
-    const checkbox = page.body.querySelector('ion-checkbox')!;
-
-    expect(checkbox).toHaveShadowPart('container');
-    expect(checkbox).toHaveShadowPart('label');
-    expect(checkbox).toHaveShadowPart('mark');
-  });
-});
-
 describe('ion-checkbox: disabled', () => {
   it('clicking disabled checkbox should not toggle checked state', async () => {
     const page = await newSpecPage({

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

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

core/src/components/datetime/datetime.scss

@@ -267,9 +267,6 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-// TODO(FW-3547): the styles targeting ion-item
-// can be removed if we refactor datetime to
-// not use an ion-item
 :host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
   --background: translucent;
@@ -279,11 +276,6 @@ ion-picker-column-internal {
   display: flex;
 
   align-items: center;
-
-  // Width is set to auto because it is set
-  // to min-content elsewhere and we want to
-  // prevent wrapping the label in datetime
-  width: auto;
 }
 
 :host .calendar-action-buttons ion-item ion-icon {

core/src/components/datetime/datetime.tsx

@@ -341,9 +341,6 @@ 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;
 
@@ -495,7 +492,7 @@ export class Datetime implements ComponentInterface {
    */
   @Method()
   async confirm(closeOverlay = false) {
-    const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
+    const { isCalendarPicker, activeParts } = this;
 
     /**
      * We only update the value if the presentation is not a calendar picker.
@@ -503,16 +500,7 @@ export class Datetime implements ComponentInterface {
     if (activeParts !== undefined || !isCalendarPicker) {
       const activePartsIsArray = Array.isArray(activeParts);
       if (activePartsIsArray && activeParts.length === 0) {
-        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);
-        }
+        this.setValue(undefined);
       } else {
         this.setValue(convertDataToISO(activeParts));
       }
@@ -1368,21 +1356,11 @@ 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,44 +458,6 @@ 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,7 +16,6 @@ import {
   subtractDays,
   addDays,
   validateParts,
-  getClosestValidDate,
 } from '../utils/manipulation';
 
 describe('addDays()', () => {
@@ -559,160 +558,3 @@ 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

@@ -1,31 +0,0 @@
-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 { isAfter, isBefore, isSameDay } from './comparison';
+import { isSameDay } from './comparison';
 import { getNumDaysInMonth } from './helpers';
 import { clampDate, parseAmPm } from './parse';
 
@@ -424,137 +424,44 @@ 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,
-  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;
-}) => {
+export const getClosestValidDate = (
+  refParts: DatetimeParts,
+  monthValues?: number[],
+  dayValues?: number[],
+  yearValues?: number[],
+  hourValues?: number[],
+  minuteValues?: number[]
+) => {
   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) {
-    // 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);
+    copyParts.month = findClosestValue(month, monthValues);
   }
 
   // Day is nullable but cannot be undefined
   if (day !== null && dayValues !== undefined) {
-    // 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);
+    copyParts.day = findClosestValue(day, dayValues);
+  }
+
+  if (yearValues !== undefined) {
+    copyParts.year = findClosestValue(year, yearValues);
   }
 
   if (hour !== undefined && hourValues !== undefined) {
-    // 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.hour = findClosestValue(hour, hourValues);
     copyParts.ampm = parseAmPm(copyParts.hour);
   }
 
   if (minute !== undefined && minuteValues !== undefined) {
-    // 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);
+    copyParts.minute = findClosestValue(minute, minuteValues);
   }
 
   return copyParts;

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -12,14 +12,6 @@ export class InfiniteScroll implements ComponentInterface {
   private thrPx = 0;
   private thrPc = 0;
   private scrollEl?: HTMLElement;
-
-  /**
-   * didFire exists so that ionInfinite
-   * does not fire multiple times if
-   * users continue to scroll after
-   * scrolling into the infinite
-   * scroll threshold.
-   */
   private didFire = false;
   private isBusy = false;
 
@@ -135,6 +127,8 @@ export class InfiniteScroll implements ComponentInterface {
         this.ionInfinite.emit();
         return 3;
       }
+    } else {
+      this.didFire = false;
     }
 
     return 4;
@@ -196,13 +190,10 @@ export class InfiniteScroll implements ComponentInterface {
             writeTask(() => {
               scrollEl.scrollTop = newScrollTop;
               this.isBusy = false;
-              this.didFire = false;
             });
           });
         });
       });
-    } else {
-      this.didFire = false;
     }
   }
 

core/src/components/infinite-scroll/test/small-dom-update/index.html

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Infinite Scroll - Small DOM Update</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      #list .item {
-        width: 100%;
-        border-bottom: 1px solid gray;
-
-        padding: 10px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content class="ion-padding" id="content">
-        <div id="list"></div>
-
-        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-          <ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
-          </ion-infinite-scroll-content>
-        </ion-infinite-scroll>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      const list = document.getElementById('list');
-      const infiniteScroll = document.getElementById('infinite-scroll');
-
-      infiniteScroll.addEventListener('ionInfinite', () => {
-        setTimeout(() => {
-          appendItems();
-
-          infiniteScroll.complete();
-
-          // Custom event consumed in the e2e tests
-          window.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
-        }, 500);
-      });
-
-      function appendItems(count = 3) {
-        for (var i = 0; i < count; i++) {
-          const el = document.createElement('div');
-          el.classList.add('item');
-          el.textContent = `${1 + i}`;
-          list.appendChild(el);
-        }
-      }
-      appendItems(30);
-    </script>
-  </body>
-</html>

core/src/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.ts

@@ -1,34 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('infinite-scroll: appending small amounts to dom'), () => {
-    test('should load more after remaining in threshold', async ({ page }) => {
-      await page.goto('/src/components/infinite-scroll/test/small-dom-update', config);
-
-      const ionInfiniteComplete = await page.spyOnEvent('ionInfiniteComplete');
-      const content = page.locator('ion-content');
-      const items = page.locator('#list .item');
-      expect(await items.count()).toBe(30);
-
-      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
-      await ionInfiniteComplete.next();
-
-      /**
-       * Even after appending we'll still be within
-       * the infinite scroll's threshold
-       */
-      expect(await items.count()).toBe(33);
-
-      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
-      await ionInfiniteComplete.next();
-
-      /**
-       * Scrolling down again without leaving
-       * the threshold should still trigger
-       * infinite scroll again.
-       */
-      expect(await items.count()).toBe(36);
-    });
-  });
-});

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

@@ -37,25 +37,3 @@
 :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.outline.scss

@@ -89,7 +89,9 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.label-floating.input-fill-outline) .label-text-wrapper {
+: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(#{$form-control-label-stacked-scale}));
   @include margin(0);
 
@@ -214,6 +216,8 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.label-floating.input-fill-outline) .input-outline-notch {
+:host(.has-focus.input-fill-outline.input-label-placement-floating) .input-outline-notch,
+:host(.has-value.input-fill-outline.input-label-placement-floating) .input-outline-notch,
+:host(.input-fill-outline.input-label-placement-stacked) .input-outline-notch {
   border-top: none;
 }

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

@@ -117,27 +117,3 @@
 :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.md.solid.scss

@@ -67,7 +67,9 @@
 // Input Label
 // ----------------------------------------------------------------
 
-:host(.label-floating.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
+:host(.input-fill-solid.input-label-placement-stacked) .label-text-wrapper,
+:host(.has-focus.input-fill-solid.input-label-placement-floating) .label-text-wrapper,
+:host(.has-value.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
   /**
    * Label text should not extend
    * beyond the bounds of the input.

core/src/components/input/input.scss

@@ -259,16 +259,15 @@
 
 // Input Has focus
 // --------------------------------------------------
+// When the input has focus, then the input cover should be hidden
 
-// TODO FW-2764 Remove this
-:host(.has-focus.legacy-input) {
+:host(.has-focus) {
   pointer-events: none;
 }
 
-// TODO FW-2764 Remove this
-:host(.has-focus.legacy-input) input,
-:host(.has-focus.legacy-input) a,
-:host(.has-focus.legacy-input) button {
+:host(.has-focus) input,
+:host(.has-focus) a,
+:host(.has-focus) button {
   pointer-events: auto;
 }
 
@@ -323,9 +322,6 @@
 
   flex-grow: 1;
 
-  // ensure start/end slot content is vertically centered
-  align-items: center;
-
   width: 100%;
 }
 
@@ -645,7 +641,9 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.label-floating) .label-text-wrapper {
+: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(#{$form-control-label-stacked-scale}));
 
   /**
@@ -654,16 +652,3 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
-
-// Start/End Slots
-// ----------------------------------------------------------------
-
-::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

@@ -26,8 +26,6 @@ import { getCounterText } from './input.utils';
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
- * @slot start - Content to display at the leading edge of the input. (EXPERIMENTAL)
- * @slot end - Content to display at the trailing edge of the input. (EXPERIMENTAL)
  */
 @Component({
   tag: 'ion-input',
@@ -121,9 +119,6 @@ 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;
 
@@ -376,7 +371,7 @@ export class Input implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
-    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
     this.notchController = createNotchController(
       el,
       () => this.notchSpacerEl,
@@ -501,8 +496,6 @@ export class Input implements ComponentInterface {
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
         'interactive-disabled': this.disabled,
-        // TODO(FW-2764): remove this
-        legacy: !!this.legacy,
       });
     }
   }
@@ -552,37 +545,15 @@ 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() && !pressedIgnoredKey) {
+    if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
       this.value = '';
       this.emitInputChange(ev);
     }
-
-    /**
-     * Pressing an IGNORED_KEYS first and
-     * then an allowed key will cause the input to not
-     * be cleared.
-     */
-    if (!pressedIgnoredKey) {
-      this.didInputClearOnEdit = true;
-    }
+    this.didInputClearOnEdit = true;
   }
 
   private onCompositionStart = () => {
@@ -728,42 +699,18 @@ export class Input implements ComponentInterface {
   }
 
   private renderInput() {
-    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
+    const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
 
-    const hasValue = this.hasValue();
-    const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
-
-    /**
-     * If the label is stacked, it should always sit above the input.
-     * For floating labels, the label should move above the input if
-     * the input has a value, is focused, or has anything in either
-     * the start or end slot.
-     *
-     * If there is content in the start slot, the label would overlap
-     * it if not forced to float. This is also applied to the end slot
-     * because with the default or solid fills, the input is not
-     * vertically centered in the container, but the label is. This
-     * causes the slots and label to appear vertically offset from each
-     * other when the label isn't floating above the input. This doesn't
-     * apply to the outline fill, but this was not accounted for to keep
-     * things consistent.
-     *
-     * TODO(FW-5592): Remove hasStartEndSlots condition
-     */
-    const labelShouldFloat =
-      labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-
     return (
       <Host
         class={createColorClasses(this.color, {
           [mode]: true,
-          'has-value': hasValue,
-          'has-focus': hasFocus,
-          'label-floating': labelShouldFloat,
+          'has-value': this.hasValue(),
+          'has-focus': this.hasFocus,
           [`input-fill-${fill}`]: fill !== undefined,
           [`input-shape-${shape}`]: shape !== undefined,
           [`input-label-placement-${labelPlacement}`]: true,
@@ -772,16 +719,9 @@ export class Input implements ComponentInterface {
           'input-disabled': disabled,
         })}
       >
-        {/**
-         * htmlFor is needed so that clicking the label always focuses
-         * the input. Otherwise, if the start slot has something
-         * interactable, clicking the label would focus that instead
-         * since it comes before the input in the DOM.
-         */}
-        <label class="input-wrapper" htmlFor={inputId}>
+        <label class="input-wrapper">
           {this.renderLabelContainer()}
           <div class="native-wrapper">
-            <slot name="start"></slot>
             <input
               class="native-input"
               ref={(input) => (this.nativeInput = input)}
@@ -836,7 +776,6 @@ export class Input implements ComponentInterface {
                 <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
               </button>
             )}
-            <slot name="end"></slot>
           </div>
           {shouldRenderHighlight && <div class="input-highlight"></div>}
         </label>

core/src/components/input/test/a11y/index.html

@@ -21,13 +21,7 @@
       <ion-input label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input><br />
       <ion-input label="Email" label-placement="floating"></ion-input> <br />
       <ion-input label="Email" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-input> <br />
-      <ion-input label="Email" label-placement="floating" fill="solid" value="hi@ionic.io"></ion-input><br />
-      <ion-input label="Email" fill="solid" value="hi@ionic.io">
-        <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-        <ion-button slot="end" aria-label="button">
-          <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
-        </ion-button>
-      </ion-input>
+      <ion-input label="Email" label-placement="floating" fill="solid" value="hi@ionic.io"></ion-input>
     </main>
   </body>
 </html>

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

@@ -1,8 +1,6 @@
 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 }) => {
@@ -18,57 +16,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(input).toHaveJSProperty('value', 'h');
     });
 
-    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.click();
-      await input.type('hello world');
-
-      await expect(input).toHaveJSProperty('value', 'hello world');
-    });
-
-    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',
-      });
-
+    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);
 
       const input = page.locator('ion-input');
       await input.locator('input').focus();
 
-      // ignored
-      await page.keyboard.press('Shift');
+      await page.keyboard.press('Enter');
       await page.waitForChanges();
 
       await expect(input).toHaveJSProperty('value', 'abc');
+    });
 
-      // allowed
-      await page.keyboard.press('a');
+    test('should not clear when tab is pressed', async ({ page }) => {
+      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');
       await page.waitForChanges();
 
-      await expect(input).toHaveJSProperty('value', 'a');
+      await expect(input).toHaveJSProperty('value', 'abc');
     });
   });
 });

core/src/components/input/test/legacy/spec/index.html

@@ -29,7 +29,7 @@
             <h2>Inactive</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
+              <ion-input placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -37,7 +37,7 @@
             <h2>Focused</h2>
             <ion-item class="item-has-focus">
               <ion-label position="floating">Label</ion-label>
-              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
+              <ion-input placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -45,7 +45,7 @@
             <h2>Activated</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input legacy="true" placeholder="Placeholder Text" value="Input Text"></ion-input>
+              <ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
             </ion-item>
           </div>
 
@@ -53,7 +53,7 @@
             <h2>Hover</h2>
             <ion-item class="item-hovered">
               <ion-label position="floating">Label</ion-label>
-              <ion-input legacy="true"></ion-input>
+              <ion-input></ion-input>
             </ion-item>
           </div>
 
@@ -61,7 +61,7 @@
             <h2>Disabled</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input legacy="true" disabled></ion-input>
+              <ion-input disabled></ion-input>
             </ion-item>
           </div>
 
@@ -69,7 +69,7 @@
             <h2>Toggle Placeholder</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input legacy="true" id="floatingToggle" type="password"></ion-input>
+              <ion-input id="floatingToggle" type="password"></ion-input>
               <ion-button
                 fill="clear"
                 slot="end"
@@ -89,7 +89,7 @@
             <h2>Inactive</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input legacy="true"></ion-input>
+              <ion-input></ion-input>
             </ion-item>
           </div>
 
@@ -97,7 +97,7 @@
             <h2>Focused</h2>
             <ion-item class="item-has-focus">
               <ion-label position="stacked">Label</ion-label>
-              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
+              <ion-input placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -105,7 +105,7 @@
             <h2>Activated</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input legacy="true" placeholder="Placeholder Text" value="Input Text"></ion-input>
+              <ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
             </ion-item>
           </div>
 
@@ -113,7 +113,7 @@
             <h2>Hover</h2>
             <ion-item class="item-hovered">
               <ion-label position="stacked">Label</ion-label>
-              <ion-input legacy="true"></ion-input>
+              <ion-input></ion-input>
             </ion-item>
           </div>
 
@@ -121,7 +121,7 @@
             <h2>Disabled</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input legacy="true" disabled></ion-input>
+              <ion-input disabled></ion-input>
             </ion-item>
           </div>
 
@@ -129,7 +129,7 @@
             <h2>Toggle Placeholder</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input legacy="true" id="stackedToggle" type="password"></ion-input>
+              <ion-input id="stackedToggle" type="password"></ion-input>
               <ion-button
                 fill="clear"
                 slot="end"

core/src/components/input/test/slot/index.html

@@ -49,125 +49,53 @@
       </ion-header>
 
       <ion-content id="content" class="ion-padding">
-        <h1>Label Slot</h1>
         <div class="grid">
           <div class="grid-item">
-            <h2>No Fill / Start Label</h2>
+            <h2>No Fill / Start</h2>
             <ion-input label-placement="start" value="hi@ionic.io">
               <div slot="label">Email <span class="required">*</span></div>
             </ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Solid / Start Label</h2>
+            <h2>Solid / Start</h2>
             <ion-input label-placement="start" fill="solid" value="hi@ionic.io">
               <div slot="label">Email <span class="required">*</span></div>
             </ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Outline / Start Label</h2>
+            <h2>Outline / Start</h2>
             <ion-input label-placement="start" fill="outline" value="hi@ionic.io">
               <div slot="label">Email <span class="required">*</span></div>
             </ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>No Fill / Floating Label</h2>
+            <h2>No Fill / Floating</h2>
             <ion-input label-placement="floating" value="hi@ionic.io">
               <div slot="label">Email <span class="required">*</span></div>
             </ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Solid / Floating Label</h2>
+            <h2>Solid / Floating</h2>
             <ion-input label-placement="floating" fill="solid" value="hi@ionic.io">
               <div slot="label">Email <span class="required">*</span></div>
             </ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Outline / Floating Label</h2>
+            <h2>Outline / Floating</h2>
             <ion-input label-placement="floating" fill="outline" value="hi@ionic.io">
               <div slot="label">Email <span class="required">*</span></div>
             </ion-input>
           </div>
-        </div>
-
-        <h1>Start/End Slots</h1>
-        <div class="grid">
-          <div class="grid-item">
-            <h2>No Fill / Start Label</h2>
-            <ion-input label-placement="start" value="hi@ionic.io" label="Email">
-              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
-                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
-              </ion-button>
-            </ion-input>
-          </div>
 
           <div class="grid-item">
-            <h2>Solid / Start Label</h2>
-            <ion-input label-placement="start" fill="solid" value="hi@ionic.io" label="Email">
-              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
-                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
-              </ion-button>
-            </ion-input>
-          </div>
-
-          <div class="grid-item">
-            <h2>Outline / Start Label</h2>
-            <ion-input label-placement="start" fill="outline" value="hi@ionic.io" label="Email">
-              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
-                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
-              </ion-button>
-            </ion-input>
-          </div>
-
-          <div class="grid-item">
-            <h2>No Fill / Floating Label</h2>
-            <ion-input label-placement="floating" value="hi@ionic.io" label="Email">
-              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
-                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
-              </ion-button>
-            </ion-input>
-          </div>
-
-          <div class="grid-item">
-            <h2>Solid / Floating Label</h2>
-            <ion-input label-placement="floating" fill="solid" value="hi@ionic.io" label="Email">
-              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
-                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
-              </ion-button>
-            </ion-input>
-          </div>
-
-          <div class="grid-item">
-            <h2>Outline / Floating Label</h2>
-            <ion-input label-placement="floating" fill="outline" value="hi@ionic.io" label="Email">
-              <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-              <ion-button fill="clear" slot="end" aria-label="Show/hide password">
-                <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
-              </ion-button>
-            </ion-input>
-          </div>
-        </div>
-
-        <h1>Async Slot Content</h1>
-        <div class="grid">
-          <div class="grid-item">
-            <h2>Outline / Async Label</h2>
+            <h2>Outline / Floating / Async</h2>
             <ion-input id="solid-async" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-input>
           </div>
-
-          <div class="grid-item">
-            <h2>Outline / Async Decorations</h2>
-            <ion-input id="async-decorations" label-placement="floating" fill="outline" label="Email"></ion-input>
-          </div>
         </div>
 
         <ion-button onclick="addSlot()">Add Slotted Content</ion-button>
@@ -178,65 +106,29 @@
 
     <script>
       const solidAsync = document.querySelector('#solid-async');
-      const asyncDecos = document.querySelector('#async-decorations');
 
-      const getSlottedLabel = () => {
+      const getSlottedContent = () => {
         return solidAsync.querySelector('[slot="label"]');
       };
 
-      const getSlottedStartDeco = () => {
-        return asyncDecos.querySelector('[slot="start"]');
-      };
-
-      const getSlottedEndDeco = () => {
-        return asyncDecos.querySelector('[slot="end"]');
-      };
-
       const addSlot = () => {
-        if (getSlottedLabel() === null) {
+        if (getSlottedContent() === null) {
           const labelEl = document.createElement('div');
           labelEl.slot = 'label';
           labelEl.innerHTML = 'Email <span class="required">*</span>';
 
           solidAsync.appendChild(labelEl);
         }
-
-        if (getSlottedStartDeco() === null) {
-          const startEl = document.createElement('div');
-          startEl.slot = 'start';
-          startEl.innerHTML = 'Start';
-
-          asyncDecos.insertAdjacentElement('afterbegin', startEl);
-        }
-
-        if (getSlottedEndDeco() === null) {
-          const endEl = document.createElement('div');
-          endEl.slot = 'end';
-          endEl.innerHTML = 'End';
-
-          asyncDecos.insertAdjacentElement('beforeend', endEl);
-        }
       };
 
       const removeSlot = () => {
-        const slottedLabel = getSlottedLabel();
-        if (slottedLabel !== null) {
-          slottedLabel.remove();
-        }
-
-        const slottedStartDeco = getSlottedStartDeco();
-        if (slottedStartDeco !== null) {
-          slottedStartDeco.remove();
-        }
-
-        const slottedEndDeco = getSlottedEndDeco();
-        if (slottedEndDeco !== null) {
-          slottedEndDeco.remove();
+        if (getSlottedContent() !== null) {
+          solidAsync.querySelector('[slot="label"]').remove();
         }
       };
 
       const updateSlot = () => {
-        const slottedContent = getSlottedLabel();
+        const slottedContent = getSlottedContent();
 
         if (slottedContent !== null) {
           slottedContent.textContent = 'This is my really really really long text';

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

@@ -1,72 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('input: start and end slots (visual checks)'), () => {
-    test('should not have visual regressions with a start-positioned label', async ({ page }) => {
-      await page.setContent(
-        `
-          <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-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
-      );
-
-      const input = page.locator('ion-input');
-      await expect(input).toHaveScreenshot(screenshot(`input-slots-label-start`));
-    });
-
-    test('should not have visual regressions with a floating label', async ({ page }) => {
-      await page.setContent(
-        `
-          <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-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
-      );
-
-      const input = page.locator('ion-input');
-      await expect(input).toHaveScreenshot(screenshot(`input-slots-label-floating`));
-    });
-  });
-});
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('input: start and end slots (functionality checks)'), () => {
-    test('should raise floating label when there is content in the start slot', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-input label-placement="floating" fill="solid" label="Weight">
-            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-          </ion-input>
-        `,
-        config
-      );
-
-      const input = page.locator('ion-input');
-      await expect(input).toHaveClass(/label-floating/);
-    });
-
-    test('should raise floating label when there is content in the end slot', async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-input label-placement="floating" fill="solid" label="Weight">
-            <ion-icon slot="end" name="barbell" aria-hidden="true"></ion-icon>
-          </ion-input>
-        `,
-        config
-      );
-
-      const input = page.locator('ion-input');
-      await expect(input).toHaveClass(/label-floating/);
-    });
-  });
-});

core/src/components/item/item.scss

@@ -51,15 +51,6 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
-
-  /**
-   * We change the minimum width as the
-   * font size changes. Using a fixed minimum
-   * width means that fewer and fewer characters
-   * can be displayed in the same space as the
-   * text grows.
-   */
-  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,11 +221,6 @@
   display: flex;
   position: relative;
 
-  // Flex wrap is required here in order to wrap
-  // the start slot + .item-inner content that
-  // doesn't fit on the same line
-  flex-wrap: wrap;
-
   align-items: inherit;
   justify-content: inherit;
 
@@ -252,15 +238,9 @@
   background: var(--background);
 
   overflow: inherit;
+  box-sizing: border-box;
 
   z-index: 1;
-
-  box-sizing: border-box;
-}
-
-// TODO(FW-5289): remove
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
 }
 
 .item-native::-moz-focus-inner {
@@ -307,34 +287,11 @@ button, a {
   // This is required to work with an inset highlight
   position: relative;
 
-  // This flex property is required in order to make
-  // the elements wrap when there is a slotted start
-  // element and a label
-  flex: 1 0 0;
-
+  flex: 1;
   flex-direction: inherit;
-
-  // Flex wrap is required here in order to wrap
-  // .input-wrapper content + the end slot that
-  // doesn't fit on the same line
-  flex-wrap: wrap;
-
   align-items: inherit;
   align-self: stretch;
 
-  /**
-   * The min-width defines when the
-   * content in the default slot should
-   * stop wrapping/truncating within its own
-   * container. At this point the entire
-   * container will wrap to the next line.
-   */
-  min-width: var(--inner-min-width);
-
-  // Max width must be set to 100%, otherwise the
-  // elements will overflow this container instead
-  // of wrapping
-  max-width: 100%;
   min-height: inherit;
 
   border-width: var(--inner-border-width);
@@ -346,14 +303,6 @@ button, a {
   box-sizing: border-box;
 }
 
-// TODO(FW-5289): remove
-:host(.item-legacy) .item-inner {
-  flex: 1;
-
-  flex-wrap: unset;
-
-  max-width: unset;
-}
 
 // Item Bottom
 // --------------------------------------------------
@@ -421,18 +370,6 @@ button, a {
 
 ::slotted(ion-label:not([slot="end"])) {
   flex: 1;
-
-  // Setting width to min-content allows the label to
-  // 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
@@ -445,41 +382,18 @@ button, a {
 .input-wrapper {
   display: flex;
 
-  // This flex property is required in order to keep
-  // the label from shrinking when there are wide
-  // elements next to it
-  flex: 1 0 auto;
-
+  flex: 1;
   flex-direction: inherit;
 
-  // Flex wrap is required here in order to wrap
-  // content in the default slot (such as a label
-  // and a button) that doesn't fit on the same line
-  flex-wrap: wrap;
-
   align-items: inherit;
   align-self: stretch;
 
-  // Max width must be set to 100%, otherwise the
-  // elements will overflow this container instead
-  // of wrapping
-  max-width: 100%;
-
   text-overflow: ellipsis;
 
   overflow: inherit;
   box-sizing: border-box;
 }
 
-// TODO(FW-5289): remove
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-
-  flex-wrap: unset;
-
-  max-width: unset;
-}
-
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

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

@@ -43,13 +43,11 @@
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-nowrap">
-            Single line text that should have ellipses when it doesn't all fit in the item
-          </ion-label>
+          <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
         </ion-item>
 
         <ion-item lines="none">
-          <ion-label>Single line item with no lines</ion-label>
+          <ion-label> Single line item with no lines</ion-label>
         </ion-item>
 
         <ion-item>
@@ -59,21 +57,21 @@
         </ion-item>
 
         <ion-item color="secondary">
-          <ion-label>
+          <ion-label class="ion-text-wrap">
             <h1>H1 Title Text</h1>
             <p>Paragraph line 1</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
-          <ion-label>
+          <ion-label class="ion-text-wrap">
             <h2>H2 Title Text</h2>
             <p>Paragraph line 1</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
-          <ion-label>
+          <ion-label class="ion-text-wrap">
             <ion-text color="primary">
               <h3>H3 Title Text</h3>
             </ion-text>
@@ -85,7 +83,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>
+          <ion-label class="ion-text-wrap">
             <h4>H4 Title Text</h4>
             <p>Paragraph line 1</p>
             <p>Paragraph line 2</p>
@@ -94,7 +92,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Item using inner ion-label </ion-label>
+          <ion-label> Item using inner ion-label </ion-label>
         </ion-item>
 
         <ion-item class="overflow-visible">

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

@@ -31,7 +31,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-item>
 
           <ion-item>
-            <ion-label class="ion-text-nowrap"> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
+            <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
           </ion-item>
         </ion-list>
       `,