tests

fix: do not emit ionChange if value did not change
fix: column scrolls into view when option is ready
2026-03-13 10:22:08 +08:00 · 2023-12-01 15:38:09 -05:00 · 2023-12-01 15:29:40 -05:00 · 2023-12-01 15:16:59 -05:00 · 2023-12-01 14:58:06 -05:00 · 2023-12-01 14:58:01 -05:00
637 changed files with 6034 additions and 9330 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -11,8 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.

-* @ionic-team/framework
-
 # Frameworks

 ## Angular
@@ -53,8 +51,8 @@
 /core/src/components/nav/ @sean-perkins
 /core/src/components/nav-link/ @sean-perkins

-/core/src/components/picker-internal/ @liamdebeasi
-/core/src/components/picker-column-internal/ @liamdebeasi
+/core/src/components/picker/ @liamdebeasi
+/core/src/components/picker-column/ @liamdebeasi

 /core/src/components/radio/ @amandaejohnston
 /core/src/components/radio-group/ @amandaejohnston
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.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
--- a/.github/ionic-issue-bot.yml
+++ b/.github/ionic-issue-bot.yml
@@ -1,15 +1,10 @@
 triage:
-  label: "holiday triage"
+  label: triage
  removeLabelWhenProjectAssigned: true
  dryRun: false

 comment:
  labels:
-    - label: "holiday triage"
-      message: >
-        Thanks for the issue! This issue has been labeled as `holiday triage`. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.
-        In the meantime, please read our [Winter Holiday Triage Guide](https://github.com/ionic-team/ionic-framework/issues/22699) for information on how to ensure that your issue is triaged correctly.
-        Thank you!
    - label: "help wanted"
      message: >
        This issue has been labeled as `help wanted`. This label is added to issues
@@ -45,7 +40,7 @@ comment:


        If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
-
+        

        The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.

--- a/.github/labeler.yml
+++ b/.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-*/**/*
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@@ -13,7 +13,7 @@ jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/labeler@v5
+    - uses: actions/labeler@main
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"
        sync-labels: true
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -1,5 +1,11 @@
 name: 'Ionic Nightly Build'

+on:
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
+
 jobs:
  create-nightly-hash:
    runs-on: ubuntu-latest
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -69,25 +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:
-      # 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]
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -4,338 +4,65 @@ This is a comprehensive list of the breaking changes introduced in the major ver

 ## Versions

- [Version 7.x](#version-7x)
+- [Version 8.x](#version-8x)
+- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
 - [Version 6.x](./BREAKING_ARCHIVE/v6.md)
 - [Version 5.x](./BREAKING_ARCHIVE/v5.md)
 - [Version 4.x](./BREAKING_ARCHIVE/v4.md)
 - [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)

-## Version 7.x
+## Version 8.x

- [Browser and Platform Support](#version-7x-browser-platform-support)
- [Components](#version-7x-components)
-  - [Accordion Group](#version-7x-accordion-group)
-  - [Action Sheet](#version-7x-action-sheet)
-  - [Back Button](#version-7x-back-button)
-  - [Button](#version-7x-button)
-  - [Card Header](#version-7x-card-header)
-  - [Checkbox](#version-7x-checkbox)
-  - [Datetime](#version-7x-datetime)
-  - [Input](#version-7x-input)
-  - [Item](#version-7x-item)
-  - [Modal](#version-7x-modal)
-  - [Overlays](#version-7x-overlays)
-  - [Picker](#version-7x-picker)
-  - [Radio Group](#version-7x-radio-group)
-  - [Range](#version-7x-range)
-  - [Searchbar](#version-7x-searchbar)
-  - [Segment](#version-7x-segment)
-  - [Select](#version-7x-select)
-  - [Slides](#version-7x-slides)
-  - [Textarea](#version-7x-textarea)
-  - [Toggle](#version-7x-toggle)
-  - [Virtual Scroll](#version-7x-virtual-scroll)
- [Config](#version-7x-config)
- [Types](#version-7x-types)
-  - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
- [JavaScript Frameworks](#version-7x-javascript-frameworks)
-  - [Angular](#version-7x-angular)
-  - [React](#version-7x-react)
-  - [Vue](#version-7x-vue)
- [CSS Utilities](#version-7x-css-utilities)
-  - [hidden attribute](#version-7x-hidden-attribute)
+- [Browser and Platform Support](#version-8x-browser-platform-support)
+- [Components](#version-8x-components)
+  - [Content](#version-8x-content)
+  - [Datetime](#version-8x-datetime)
+  - [Picker](#version-8x-picker)

-<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
+<h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>

-This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
+This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.

 **Minimum Browser Versions**
 | Desktop Browser | Supported Versions |
 | --------------- | ----------------- |
-| Chrome          | 79+               |
-| Safari          | 14+               |
-| Firefox         | 70+               |
-| Edge            | 79+               |
+| Chrome          | 89+               |
+| Safari          | 15+               |
+| Firefox         | 75+               |
+| Edge            | 89+               |

 **Minimum JavaScript Framework Versions**
-
 | Framework | Supported Version     |
 | --------- | --------------------- |
-| Angular   | 14+                   |
+| Angular   | 16+                   |
 | React     | 17+                   |
 | Vue       | 3.0.6+                |

 **Minimum Mobile Platform Versions**
-
 | Platform | Supported Version      |
 | -------- | ---------------------- |
-| iOS      | 14+                    |
-| Android  | 5.1+ with Chromium 79+ |
+| iOS      | 15+                    |
+| Android  | 5.1+ with Chromium 89+ |

-<h2 id="version-7x-components">Components</h2>
+<h2 id="version-8x-components">Components</h2>

-<h4 id="version-7x-accordion-group">Accordion Group</h4>
+<h4 id="version-8x-content">Content</h4>

- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
+- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.

- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
+<h4 id="version-8x-datetime">Datetime</h4>

-<h4 id="version-7x-action-sheet">Action Sheet</h4>
+- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
+   - Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
+      ```diff
+      ion-datetime::part(month-year-button) {
+      -  --background: red;

- Action Sheet is updated to align with the design specification.
+      +  background: red;
+      }
+      ```
+<h2 id="version-8x-picker">Picker</h2>

-**Design tokens**
-
-| Token      | Previous Value | New Value |
-| ---------- | -------------- | --------- |
-| `--height` | `100%`         | `auto`    |
-
-<h4 id="version-7x-button">Button</h4>
-
- Button is updated to align with the design specification for iOS.
-
-**Design tokens**
-
-| Token                              | Previous Value | New Value |
-| ---------------------------------- | -------------- | --------- |
-| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
-| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
-| `$button-ios-height`               | `2.8em`        | `3.1em`   |
-| `$button-ios-border-radius`        | `10px`         | `14px`    |
-| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
-| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
-
-<h4 id="version-7x-back-button">Back Button</h4>
-
- Back Button is updated to align with the design specification for iOS.
-
-**Design tokens**
-
-| Token               | Previous Value | New Value |
-| ------------------- | -------------- | --------- |
-| `--icon-margin-end` | `-5px`         | `1px`     |
-| `--icon-font-size`  | `1.85em`       | `1.6em`   |
-
-<h4 id="version-7x-card-header">Card Header</h4>
-
- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
-
-<h4 id="version-7x-checkbox">Checkbox</h4>
-
- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
-
- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively.
-
-<h4 id="version-7x-datetime">Datetime</h4>
-
- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date.
-
- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
-
- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
-
- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
-
- The haptics when swiping the wheel picker are now enabled only on iOS.
-
-<h4 id="version-7x-input">Input</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
-
-  - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
-
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.5`          | `0.6`     |
-
-<h4 id="version-7x-item">Item</h4>
-
-**Design tokens**
-
-iOS:
-
-| Token                 | Previous Value | New Value |
-| --------------------- | -------------- | --------- |
-| `$item-ios-font-size` | `17px`         | `16px`    |
-| `--inner-padding-end` | `10px`         | `16px`    |
-| `--padding-start`     | `20px`         | `16px`    |
-
-<h4 id="version-7x-modal">Modal</h4>
-
- The `swipeToClose` property has been removed in favor of `canDismiss`.
- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
-
-<h4 id="version-7x-overlays">Overlays</h4>
-
-Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
-
-<h4 id="version-7x-picker">Picker</h4>
-
- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
-
-<h4 id="version-7x-radio-group">Radio Group</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group.
-
-<h4 id="version-7x-range">Range</h4>
-
- Range is updated to align with the design specification for supported modes.
-
-  **Design tokens**
-
-  iOS:
-
-  | Token                             | Previous Value                                                                            | New Value                                                             |
-  | --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-  | `--bar-border-radius`             | `0px`                                                                                     | `$range-ios-bar-border-radius` (`2px` default)                        |
-  | `--knob-size`                     | `28px`                                                                                    | `$range-ios-knob-width` (`26px` default)                              |
-  | `$range-ios-bar-height`           | `2px`                                                                                     | `4px`                                                                 |
-  | `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)`                                            | `var(--ion-color-step-900, #e6e6e6)`                                  |
-  | `$range-ios-knob-box-shadow`      | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` |
-  | `$range-ios-knob-width`           | `28px`                                                                                    | `26px`                                                                |
-
- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows.
-  - If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value.
-
- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`.
-
-<h4 id="version-7x-searchbar">Searchbar</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
-
-  - If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
-
- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.5`          | `0.6`     |
-
-
-<h4 id="version-7x-segment">Segment</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button.
-
- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
-  - Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
-
-<h4 id="version-7x-select">Select</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
-
- The `icon` CSS Shadow Part now targets an `ion-icon` component.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.33`         | `0.6`     |
-
-<h4 id="version-7x-slides">Slides</h4>
-
-`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
-
-Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
-
- [Angular](https://ionicframework.com/docs/angular/slides)
- [React](https://ionicframework.com/docs/react/slides)
- [Vue](https://ionicframework.com/docs/vue/slides)
-
-<h4 id="version-7x-textarea">Textarea</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus.
-
-  - If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
-
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
-
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.5`          | `0.6`     |
-
-
-<h4 id="version-7x-toggle">Toggle</h4>
-
- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
-
- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
-
-<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
-
-`ion-virtual-scroll` has been removed from Ionic.
-
-Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
-
- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
- [React](https://ionicframework.com/docs/react/virtual-scroll)
- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
-
-Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
-
-<h2 id="version-7x-config">Config</h2>
-
- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
-
-<h2 id="version-7x-types">Types</h2>
-
-<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
-
-`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
-
-<h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
-
-<h4 id="version-7x-angular">Angular</h4>
-
- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
-
- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
-
- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
-
-<h4 id="version-7x-react">React</h4>
-
-`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
-
-<h4 id="version-7x-vue">Vue</h4>
-
-`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
-
-<h2 id="version-7x-css-utilities">CSS Utilities</h2>
-
-<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
-
-The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
-
-Developers can add the following CSS to their global stylesheet if they need the old behavior:
-
-```css
-[hidden] {
-  display: none !important;
-}
-```
+- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
+  - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
+  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. 
--- a/BREAKING_ARCHIVE/v7.md
+++ b/BREAKING_ARCHIVE/v7.md
@@ -0,0 +1,331 @@
+# Breaking Changes
+
+## Version 7.x
+
+- [Browser and Platform Support](#version-7x-browser-platform-support)
+- [Components](#version-7x-components)
+  - [Accordion Group](#version-7x-accordion-group)
+  - [Action Sheet](#version-7x-action-sheet)
+  - [Back Button](#version-7x-back-button)
+  - [Button](#version-7x-button)
+  - [Card Header](#version-7x-card-header)
+  - [Checkbox](#version-7x-checkbox)
+  - [Datetime](#version-7x-datetime)
+  - [Input](#version-7x-input)
+  - [Item](#version-7x-item)
+  - [Modal](#version-7x-modal)
+  - [Overlays](#version-7x-overlays)
+  - [Picker](#version-7x-picker)
+  - [Radio Group](#version-7x-radio-group)
+  - [Range](#version-7x-range)
+  - [Searchbar](#version-7x-searchbar)
+  - [Segment](#version-7x-segment)
+  - [Select](#version-7x-select)
+  - [Slides](#version-7x-slides)
+  - [Textarea](#version-7x-textarea)
+  - [Toggle](#version-7x-toggle)
+  - [Virtual Scroll](#version-7x-virtual-scroll)
+- [Config](#version-7x-config)
+- [Types](#version-7x-types)
+  - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
+- [JavaScript Frameworks](#version-7x-javascript-frameworks)
+  - [Angular](#version-7x-angular)
+  - [React](#version-7x-react)
+  - [Vue](#version-7x-vue)
+- [CSS Utilities](#version-7x-css-utilities)
+  - [hidden attribute](#version-7x-hidden-attribute)
+
+<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
+
+This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
+
+**Minimum Browser Versions**
+| Desktop Browser | Supported Versions |
+| --------------- | ----------------- |
+| Chrome          | 79+               |
+| Safari          | 14+               |
+| Firefox         | 70+               |
+| Edge            | 79+               |
+
+**Minimum JavaScript Framework Versions**
+
+| Framework | Supported Version     |
+| --------- | --------------------- |
+| Angular   | 14+                   |
+| React     | 17+                   |
+| Vue       | 3.0.6+                |
+
+**Minimum Mobile Platform Versions**
+
+| Platform | Supported Version      |
+| -------- | ---------------------- |
+| iOS      | 14+                    |
+| Android  | 5.1+ with Chromium 79+ |
+
+<h2 id="version-7x-components">Components</h2>
+
+<h4 id="version-7x-accordion-group">Accordion Group</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
+
+- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
+
+<h4 id="version-7x-action-sheet">Action Sheet</h4>
+
+- Action Sheet is updated to align with the design specification.
+
+**Design tokens**
+
+| Token      | Previous Value | New Value |
+| ---------- | -------------- | --------- |
+| `--height` | `100%`         | `auto`    |
+
+<h4 id="version-7x-button">Button</h4>
+
+- Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token                              | Previous Value | New Value |
+| ---------------------------------- | -------------- | --------- |
+| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
+| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
+| `$button-ios-height`               | `2.8em`        | `3.1em`   |
+| `$button-ios-border-radius`        | `10px`         | `14px`    |
+| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
+| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
+
+<h4 id="version-7x-back-button">Back Button</h4>
+
+- Back Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token               | Previous Value | New Value |
+| ------------------- | -------------- | --------- |
+| `--icon-margin-end` | `-5px`         | `1px`     |
+| `--icon-font-size`  | `1.85em`       | `1.6em`   |
+
+<h4 id="version-7x-card-header">Card Header</h4>
+
+- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
+
+<h4 id="version-7x-checkbox">Checkbox</h4>
+
+- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
+
+- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively.
+
+<h4 id="version-7x-datetime">Datetime</h4>
+
+- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date.
+
+- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
+
+- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
+
+- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
+
+- The haptics when swiping the wheel picker are now enabled only on iOS.
+
+<h4 id="version-7x-input">Input</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
+
+  - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
+
+- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.5`          | `0.6`     |
+
+<h4 id="version-7x-item">Item</h4>
+
+**Design tokens**
+
+iOS:
+
+| Token                 | Previous Value | New Value |
+| --------------------- | -------------- | --------- |
+| `$item-ios-font-size` | `17px`         | `16px`    |
+| `--inner-padding-end` | `10px`         | `16px`    |
+| `--padding-start`     | `20px`         | `16px`    |
+
+<h4 id="version-7x-modal">Modal</h4>
+
+- The `swipeToClose` property has been removed in favor of `canDismiss`.
+- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
+
+<h4 id="version-7x-overlays">Overlays</h4>
+
+Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
+
+<h4 id="version-7x-picker">Picker</h4>
+
+- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
+
+<h4 id="version-7x-radio-group">Radio Group</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group.
+
+<h4 id="version-7x-range">Range</h4>
+
+- Range is updated to align with the design specification for supported modes.
+
+  **Design tokens**
+
+  iOS:
+
+  | Token                             | Previous Value                                                                            | New Value                                                             |
+  | --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+  | `--bar-border-radius`             | `0px`                                                                                     | `$range-ios-bar-border-radius` (`2px` default)                        |
+  | `--knob-size`                     | `28px`                                                                                    | `$range-ios-knob-width` (`26px` default)                              |
+  | `$range-ios-bar-height`           | `2px`                                                                                     | `4px`                                                                 |
+  | `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)`                                            | `var(--ion-color-step-900, #e6e6e6)`                                  |
+  | `$range-ios-knob-box-shadow`      | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` |
+  | `$range-ios-knob-width`           | `28px`                                                                                    | `26px`                                                                |
+
+- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows.
+  - If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value.
+
+- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`.
+
+<h4 id="version-7x-searchbar">Searchbar</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
+
+  - If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
+
+- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.5`          | `0.6`     |
+
+
+<h4 id="version-7x-segment">Segment</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button.
+
+- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
+  - Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
+
+<h4 id="version-7x-select">Select</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
+
+- The `icon` CSS Shadow Part now targets an `ion-icon` component.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.33`         | `0.6`     |
+
+<h4 id="version-7x-slides">Slides</h4>
+
+`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
+
+Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
+
+- [Angular](https://ionicframework.com/docs/angular/slides)
+- [React](https://ionicframework.com/docs/react/slides)
+- [Vue](https://ionicframework.com/docs/vue/slides)
+
+<h4 id="version-7x-textarea">Textarea</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus.
+
+  - If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
+
+- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
+
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.5`          | `0.6`     |
+
+
+<h4 id="version-7x-toggle">Toggle</h4>
+
+- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
+
+- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
+
+<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
+
+`ion-virtual-scroll` has been removed from Ionic.
+
+Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
+
+- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
+- [React](https://ionicframework.com/docs/react/virtual-scroll)
+- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
+
+Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
+
+<h2 id="version-7x-config">Config</h2>
+
+- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
+
+<h2 id="version-7x-types">Types</h2>
+
+<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
+
+`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
+
+<h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
+
+<h4 id="version-7x-angular">Angular</h4>
+
+- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
+- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
+
+- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
+<h4 id="version-7x-react">React</h4>
+
+`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
+
+<h4 id="version-7x-vue">Vue</h4>
+
+`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
+
+<h2 id="version-7x-css-utilities">CSS Utilities</h2>
+
+<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
+
+The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
+
+Developers can add the following CSS to their global stylesheet if they need the old behavior:
+
+```css
+[hidden] {
+  display: none !important;
+}
+```
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,106 +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.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)
-
-
-### Bug Fixes
-
-* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
-* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
-
-
-
-
-
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,98 +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.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)
-
-
-### Bug Fixes
-
-* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
-* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
-
-
-
-
-
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)


--- a/core/api.txt
+++ b/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
@@ -907,47 +906,64 @@ ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color

-ion-picker,scoped
-ion-picker,prop,animated,boolean,true,false,false
-ion-picker,prop,backdropDismiss,boolean,true,false,false
-ion-picker,prop,buttons,PickerButton[],[],false,false
-ion-picker,prop,columns,PickerColumn[],[],false,false
-ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-picker,prop,duration,number,0,false,false
-ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
-ion-picker,prop,isOpen,boolean,false,false,false
-ion-picker,prop,keyboardClose,boolean,true,false,false
-ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker,shadow
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
-ion-picker,prop,showBackdrop,boolean,true,false,false
-ion-picker,prop,trigger,string | undefined,undefined,false,false
-ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
-ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
-ion-picker,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-picker,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-picker,method,present,present() => Promise<void>
-ion-picker,event,didDismiss,OverlayEventDetail<any>,true
-ion-picker,event,didPresent,void,true
-ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
-ion-picker,event,ionPickerDidPresent,void,true
-ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
-ion-picker,event,ionPickerWillPresent,void,true
-ion-picker,event,willDismiss,OverlayEventDetail<any>,true
-ion-picker,event,willPresent,void,true
-ion-picker,css-prop,--backdrop-opacity
-ion-picker,css-prop,--background
-ion-picker,css-prop,--background-rgb
-ion-picker,css-prop,--border-color
-ion-picker,css-prop,--border-radius
-ion-picker,css-prop,--border-style
-ion-picker,css-prop,--border-width
-ion-picker,css-prop,--height
-ion-picker,css-prop,--max-height
-ion-picker,css-prop,--max-width
-ion-picker,css-prop,--min-height
-ion-picker,css-prop,--min-width
-ion-picker,css-prop,--width
+ion-picker,event,ionInputModeChange,PickerChangeEventDetail,true
+
+ion-picker-column,shadow
+ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
+ion-picker-column,prop,disabled,boolean,false,false,false
+ion-picker-column,prop,items,PickerColumnItem[],[],false,false
+ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
+ion-picker-column,prop,value,number | string | undefined,undefined,false,false
+ion-picker-column,event,ionChange,PickerColumnItem,true
+
+ion-picker-column-option,shadow
+ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
+ion-picker-column-option,prop,disabled,boolean,false,false,false
+ion-picker-column-option,prop,value,any,undefined,false,false
+
+ion-picker-legacy,scoped
+ion-picker-legacy,prop,animated,boolean,true,false,false
+ion-picker-legacy,prop,backdropDismiss,boolean,true,false,false
+ion-picker-legacy,prop,buttons,PickerButton[],[],false,false
+ion-picker-legacy,prop,columns,PickerColumn[],[],false,false
+ion-picker-legacy,prop,cssClass,string | string[] | undefined,undefined,false,false
+ion-picker-legacy,prop,duration,number,0,false,false
+ion-picker-legacy,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker-legacy,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-picker-legacy,prop,isOpen,boolean,false,false,false
+ion-picker-legacy,prop,keyboardClose,boolean,true,false,false
+ion-picker-legacy,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker-legacy,prop,mode,"ios" | "md",undefined,false,false
+ion-picker-legacy,prop,showBackdrop,boolean,true,false,false
+ion-picker-legacy,prop,trigger,string | undefined,undefined,false,false
+ion-picker-legacy,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
+ion-picker-legacy,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
+ion-picker-legacy,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
+ion-picker-legacy,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
+ion-picker-legacy,method,present,present() => Promise<void>
+ion-picker-legacy,event,didDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,didPresent,void,true
+ion-picker-legacy,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,ionPickerDidPresent,void,true
+ion-picker-legacy,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,ionPickerWillPresent,void,true
+ion-picker-legacy,event,willDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,willPresent,void,true
+ion-picker-legacy,css-prop,--backdrop-opacity
+ion-picker-legacy,css-prop,--background
+ion-picker-legacy,css-prop,--background-rgb
+ion-picker-legacy,css-prop,--border-color
+ion-picker-legacy,css-prop,--border-radius
+ion-picker-legacy,css-prop,--border-style
+ion-picker-legacy,css-prop,--border-width
+ion-picker-legacy,css-prop,--height
+ion-picker-legacy,css-prop,--max-height
+ion-picker-legacy,css-prop,--max-width
+ion-picker-legacy,css-prop,--min-height
+ion-picker-legacy,css-prop,--min-width
+ion-picker-legacy,css-prop,--width

 ion-popover,shadow
 ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
@@ -1030,12 +1046,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 +1093,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 +1100,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 +1463,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 +1529,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
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,23 +1,23 @@
 {
  "name": "@ionic/core",
-  "version": "7.6.3",
+  "version": "7.5.6",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "7.6.3",
+      "version": "7.5.6",
      "license": "MIT",
      "dependencies": {
-        "@stencil/core": "^4.8.2",
-        "ionicons": "^7.2.2",
+        "@stencil/core": "^4.7.2",
+        "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.8.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
-      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA==",
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
+      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
      "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.8.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
-      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA=="
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
+      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA=="
    },
    "@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"
      }
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.6.3",
+  "version": "7.5.6",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,15 +31,15 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.8.2",
-    "ionicons": "^7.2.2",
+    "@stencil/core": "^4.7.2",
+    "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",
--- a/core/scripts/testing/themes/dark.css
+++ b/core/scripts/testing/themes/dark.css
@@ -1,151 +0,0 @@
-/*
- * Dark Colors
- * -------------------------------------------
- */
-
-:root {
-  --ion-color-primary: #428cff;
-  --ion-color-primary-rgb: 66, 140, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
-
-  --ion-color-secondary: #50c8ff;
-  --ion-color-secondary-rgb: 80, 200, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
-
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106, 100, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47, 223, 117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #ffd534;
-  --ion-color-warning-rgb: 255, 213, 52;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0bb2e;
-  --ion-color-warning-tint: #ffd948;
-
-  --ion-color-danger: #ff4961;
-  --ion-color-danger-rgb: 255, 73, 97;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
-
-  --ion-color-dark: #f4f5f8;
-  --ion-color-dark-rgb: 244, 245, 248;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0, 0, 0;
-  --ion-color-dark-shade: #d7d8da;
-  --ion-color-dark-tint: #f5f6f9;
-
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  --ion-color-light: #222428;
-  --ion-color-light-rgb: 34, 36, 40;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255, 255, 255;
-  --ion-color-light-shade: #1e2023;
-  --ion-color-light-tint: #383a3e;
-}
-
-/*
- * iOS Dark Theme
- * -------------------------------------------
- */
-
-.ios body {
-  --ion-background-color: #000000;
-  --ion-background-color-rgb: 0, 0, 0;
-
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
-
-  --ion-color-step-50: #0d0d0d;
-  --ion-color-step-100: #1a1a1a;
-  --ion-color-step-150: #262626;
-  --ion-color-step-200: #333333;
-  --ion-color-step-250: #404040;
-  --ion-color-step-300: #4d4d4d;
-  --ion-color-step-350: #595959;
-  --ion-color-step-400: #666666;
-  --ion-color-step-450: #737373;
-  --ion-color-step-500: #808080;
-  --ion-color-step-550: #8c8c8c;
-  --ion-color-step-600: #999999;
-  --ion-color-step-650: #a6a6a6;
-  --ion-color-step-700: #b3b3b3;
-  --ion-color-step-750: #bfbfbf;
-  --ion-color-step-800: #cccccc;
-  --ion-color-step-850: #d9d9d9;
-  --ion-color-step-900: #e6e6e6;
-  --ion-color-step-950: #f2f2f2;
-
-  --ion-toolbar-background: #0d0d0d;
-
-  --ion-item-background: #000000;
-
-  --ion-card-background: #1c1c1d;
-}
-
-/*
- * Material Design Dark Theme
- * -------------------------------------------
- */
-
-.md body {
-  --ion-background-color: #121212;
-  --ion-background-color-rgb: 18, 18, 18;
-
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
-
-  --ion-border-color: #222222;
-
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
-
-  --ion-item-background: #1e1e1e;
-
-  --ion-toolbar-background: #1f1f1f;
-
-  --ion-tab-bar-background: #1f1f1f;
-
-  --ion-card-background: #1e1e1e;
-}
--- a/core/setupJest.js
+++ b/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,
-    };
-  },
-});
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -23,11 +23,11 @@ import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
-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 { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
+import { PickerColumnItem } from "./components/picker-column/picker-column-interfaces";
+import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 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";
@@ -59,11 +59,11 @@ export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
-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 { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
+export { PickerColumnItem } from "./components/picker-column/picker-column-interfaces";
+export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 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;
        /**
@@ -1162,7 +1162,7 @@ export namespace Components {
         */
        "autocorrect": 'on' | 'off';
        /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
         */
        "autofocus": boolean;
        /**
@@ -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;
        /**
@@ -1274,7 +1274,7 @@ export namespace Components {
         */
        "required": boolean;
        /**
-          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
         */
        "setFocus": () => Promise<void>;
        /**
@@ -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>);
        /**
@@ -1949,6 +1949,58 @@ export namespace Components {
        "mode"?: "ios" | "md";
    }
    interface IonPicker {
+        "exitInputMode": () => Promise<void>;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+    }
+    interface IonPickerColumn {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled": boolean;
+        /**
+          * A list of options to be displayed in the picker
+         */
+        "items": PickerColumnItem[];
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
+         */
+        "numericInput": boolean;
+        "scrollActiveItemIntoView": () => Promise<void>;
+        /**
+          * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
+         */
+        "setValue": (value?: string | number) => Promise<void>;
+        /**
+          * The selected option in the picker.
+         */
+        "value"?: string | number;
+    }
+    interface IonPickerColumnOption {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker column option.
+         */
+        "disabled": boolean;
+        /**
+          * The text value of the option.
+         */
+        "value"?: any | null;
+    }
+    interface IonPickerLegacy {
        /**
          * If `true`, the picker will animate.
         */
@@ -2032,50 +2084,12 @@ export namespace Components {
         */
        "trigger": string | undefined;
    }
-    interface IonPickerColumn {
+    interface IonPickerLegacyColumn {
        /**
          * Picker column data
         */
        "col": PickerColumn;
    }
-    interface IonPickerColumnInternal {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the picker.
-         */
-        "disabled": boolean;
-        /**
-          * A list of options to be displayed in the picker
-         */
-        "items": PickerColumnItem[];
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
-         */
-        "numericInput": boolean;
-        "scrollActiveItemIntoView": () => Promise<void>;
-        /**
-          * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
-         */
-        "setValue": (value?: string | number) => Promise<void>;
-        /**
-          * The selected option in the picker.
-         */
-        "value"?: string | number;
-    }
-    interface IonPickerInternal {
-        "exitInputMode": () => Promise<void>;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-    }
    interface IonPopover {
        /**
          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
@@ -2269,10 +2283,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 +2346,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 +2387,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.
         */
@@ -2609,7 +2615,7 @@ export namespace Components {
         */
        "searchIcon"?: string;
        /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
         */
        "setFocus": () => Promise<void>;
        /**
@@ -2696,7 +2702,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;
        /**
@@ -2958,7 +2964,7 @@ export namespace Components {
         */
        "autocapitalize": string;
        /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
         */
        "autofocus": boolean;
        /**
@@ -2978,7 +2984,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;
        /**
@@ -3058,7 +3064,7 @@ export namespace Components {
         */
        "rows"?: number;
        /**
-          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
@@ -3180,10 +3186,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).
         */
@@ -3342,13 +3344,13 @@ export interface IonPickerColumnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPickerColumnElement;
 }
-export interface IonPickerColumnInternalCustomEvent<T> extends CustomEvent<T> {
+export interface IonPickerLegacyCustomEvent<T> extends CustomEvent<T> {
    detail: T;
-    target: HTMLIonPickerColumnInternalElement;
+    target: HTMLIonPickerLegacyElement;
 }
-export interface IonPickerInternalCustomEvent<T> extends CustomEvent<T> {
+export interface IonPickerLegacyColumnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
-    target: HTMLIonPickerInternalElement;
+    target: HTMLIonPickerLegacyColumnElement;
 }
 export interface IonPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
@@ -3402,10 +3404,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;
@@ -4036,14 +4034,7 @@ declare global {
        new (): HTMLIonNoteElement;
    };
    interface HTMLIonPickerElementEventMap {
-        "ionPickerDidPresent": void;
-        "ionPickerWillPresent": void;
-        "ionPickerWillDismiss": OverlayEventDetail;
-        "ionPickerDidDismiss": OverlayEventDetail;
-        "didPresent": void;
-        "willPresent": void;
-        "willDismiss": OverlayEventDetail;
-        "didDismiss": OverlayEventDetail;
+        "ionInputModeChange": PickerChangeEventDetail;
    }
    interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerElementEventMap>(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent<HTMLIonPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4060,7 +4051,7 @@ declare global {
        new (): HTMLIonPickerElement;
    };
    interface HTMLIonPickerColumnElementEventMap {
-        "ionPickerColChange": PickerColumn;
+        "ionChange": string | number | undefined;
    }
    interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4076,39 +4067,52 @@ declare global {
        prototype: HTMLIonPickerColumnElement;
        new (): HTMLIonPickerColumnElement;
    };
-    interface HTMLIonPickerColumnInternalElementEventMap {
-        "ionChange": PickerColumnItem;
+    interface HTMLIonPickerColumnOptionElement extends Components.IonPickerColumnOption, HTMLStencilElement {
    }
-    interface HTMLIonPickerColumnInternalElement extends Components.IonPickerColumnInternal, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIonPickerColumnInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent<HTMLIonPickerColumnInternalElementEventMap[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 HTMLIonPickerColumnInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent<HTMLIonPickerColumnInternalElementEventMap[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 HTMLIonPickerColumnInternalElement: {
-        prototype: HTMLIonPickerColumnInternalElement;
-        new (): HTMLIonPickerColumnInternalElement;
+    var HTMLIonPickerColumnOptionElement: {
+        prototype: HTMLIonPickerColumnOptionElement;
+        new (): HTMLIonPickerColumnOptionElement;
    };
-    interface HTMLIonPickerInternalElementEventMap {
-        "ionInputModeChange": PickerInternalChangeEventDetail;
+    interface HTMLIonPickerLegacyElementEventMap {
+        "ionPickerDidPresent": void;
+        "ionPickerWillPresent": void;
+        "ionPickerWillDismiss": OverlayEventDetail;
+        "ionPickerDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
    }
-    interface HTMLIonPickerInternalElement extends Components.IonPickerInternal, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIonPickerInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent<HTMLIonPickerInternalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLIonPickerLegacyElement extends Components.IonPickerLegacy, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[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 HTMLIonPickerInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent<HTMLIonPickerInternalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[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 HTMLIonPickerInternalElement: {
-        prototype: HTMLIonPickerInternalElement;
-        new (): HTMLIonPickerInternalElement;
+    var HTMLIonPickerLegacyElement: {
+        prototype: HTMLIonPickerLegacyElement;
+        new (): HTMLIonPickerLegacyElement;
+    };
+    interface HTMLIonPickerLegacyColumnElementEventMap {
+        "ionPickerColChange": PickerColumn;
+    }
+    interface HTMLIonPickerLegacyColumnElement extends Components.IonPickerLegacyColumn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[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 HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[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 HTMLIonPickerLegacyColumnElement: {
+        prototype: HTMLIonPickerLegacyColumnElement;
+        new (): HTMLIonPickerLegacyColumnElement;
    };
    interface HTMLIonPopoverElementEventMap {
        "ionPopoverDidPresent": void;
@@ -4420,18 +4424,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;
@@ -4674,8 +4667,9 @@ declare global {
        "ion-note": HTMLIonNoteElement;
        "ion-picker": HTMLIonPickerElement;
        "ion-picker-column": HTMLIonPickerColumnElement;
-        "ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
-        "ion-picker-internal": HTMLIonPickerInternalElement;
+        "ion-picker-column-option": HTMLIonPickerColumnOptionElement;
+        "ion-picker-legacy": HTMLIonPickerLegacyElement;
+        "ion-picker-legacy-column": HTMLIonPickerLegacyColumnElement;
        "ion-popover": HTMLIonPopoverElement;
        "ion-progress-bar": HTMLIonProgressBarElement;
        "ion-radio": HTMLIonRadioElement;
@@ -5650,7 +5644,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;
        /**
@@ -5881,7 +5875,7 @@ declare namespace LocalJSX {
         */
        "autocorrect"?: 'on' | 'off';
        /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
         */
        "autofocus"?: boolean;
        /**
@@ -5901,7 +5895,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 +6426,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>);
        /**
@@ -6607,6 +6601,57 @@ declare namespace LocalJSX {
        "mode"?: "ios" | "md";
    }
    interface IonPicker {
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        "onIonInputModeChange"?: (event: IonPickerCustomEvent<PickerChangeEventDetail>) => void;
+    }
+    interface IonPickerColumn {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled"?: boolean;
+        /**
+          * A list of options to be displayed in the picker
+         */
+        "items"?: PickerColumnItem[];
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
+         */
+        "numericInput"?: boolean;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIonChange"?: (event: IonPickerColumnCustomEvent<string | number | undefined>) => void;
+        /**
+          * The selected option in the picker.
+         */
+        "value"?: string | number;
+    }
+    interface IonPickerColumnOption {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker column option.
+         */
+        "disabled"?: boolean;
+        /**
+          * The text value of the option.
+         */
+        "value"?: any | null;
+    }
+    interface IonPickerLegacy {
        /**
          * If `true`, the picker will animate.
         */
@@ -6660,35 +6705,35 @@ declare namespace LocalJSX {
        /**
          * Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
         */
-        "onDidDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
         */
-        "onDidPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted after the picker has dismissed.
         */
-        "onIonPickerDidDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onIonPickerDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the picker has presented.
         */
-        "onIonPickerDidPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onIonPickerDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted before the picker has dismissed.
         */
-        "onIonPickerWillDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onIonPickerWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the picker has presented.
         */
-        "onIonPickerWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onIonPickerWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
         */
-        "onWillDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
         */
-        "onWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * If `true`, a backdrop will be displayed behind the picker.
@@ -6699,7 +6744,7 @@ declare namespace LocalJSX {
         */
        "trigger"?: string | undefined;
    }
-    interface IonPickerColumn {
+    interface IonPickerLegacyColumn {
        /**
          * Picker column data
         */
@@ -6707,44 +6752,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the selected value has changed
         */
-        "onIonPickerColChange"?: (event: IonPickerColumnCustomEvent<PickerColumn>) => void;
-    }
-    interface IonPickerColumnInternal {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the picker.
-         */
-        "disabled"?: boolean;
-        /**
-          * A list of options to be displayed in the picker
-         */
-        "items"?: PickerColumnItem[];
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
-         */
-        "numericInput"?: boolean;
-        /**
-          * Emitted when the value has changed.
-         */
-        "onIonChange"?: (event: IonPickerColumnInternalCustomEvent<PickerColumnItem>) => void;
-        /**
-          * The selected option in the picker.
-         */
-        "value"?: string | number;
-    }
-    interface IonPickerInternal {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        "onIonInputModeChange"?: (event: IonPickerInternalCustomEvent<PickerInternalChangeEventDetail>) => void;
+        "onIonPickerColChange"?: (event: IonPickerLegacyColumnCustomEvent<PickerColumn>) => void;
    }
    interface IonPopover {
        /**
@@ -6961,10 +6969,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 +7068,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 +7097,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 +7451,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 +7588,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 {
        /**
@@ -7738,7 +7734,7 @@ declare namespace LocalJSX {
         */
        "autocapitalize"?: string;
        /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
         */
        "autofocus"?: boolean;
        /**
@@ -7758,7 +7754,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 +7986,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).
         */
@@ -8129,8 +8121,9 @@ declare namespace LocalJSX {
        "ion-note": IonNote;
        "ion-picker": IonPicker;
        "ion-picker-column": IonPickerColumn;
-        "ion-picker-column-internal": IonPickerColumnInternal;
-        "ion-picker-internal": IonPickerInternal;
+        "ion-picker-column-option": IonPickerColumnOption;
+        "ion-picker-legacy": IonPickerLegacy;
+        "ion-picker-legacy-column": IonPickerLegacyColumn;
        "ion-popover": IonPopover;
        "ion-progress-bar": IonProgressBar;
        "ion-radio": IonRadio;
@@ -8226,8 +8219,9 @@ declare module "@stencil/core" {
            "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
            "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
            "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
-            "ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;
-            "ion-picker-internal": LocalJSX.IonPickerInternal & JSXBase.HTMLAttributes<HTMLIonPickerInternalElement>;
+            "ion-picker-column-option": LocalJSX.IonPickerColumnOption & JSXBase.HTMLAttributes<HTMLIonPickerColumnOptionElement>;
+            "ion-picker-legacy": LocalJSX.IonPickerLegacy & JSXBase.HTMLAttributes<HTMLIonPickerLegacyElement>;
+            "ion-picker-legacy-column": LocalJSX.IonPickerLegacyColumn & JSXBase.HTMLAttributes<HTMLIonPickerLegacyColumnElement>;
            "ion-popover": LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
            "ion-progress-bar": LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
            "ion-radio": LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -337,17 +337,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    if (this.isOpen === true) {
      raf(() => this.present());
    }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
  }

  render() {
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -376,17 +376,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
    if (this.isOpen === true) {
      raf(() => this.present());
    }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
  }

  /**
--- a/core/src/components/app/test/safe-area/index.html
+++ b/core/src/components/app/test/safe-area/index.html
@@ -36,7 +36,7 @@
      }

      async function showPicker() {
-        const picker = Object.assign(document.createElement('ion-picker'), {
+        const picker = Object.assign(document.createElement('ion-picker-legacy'), {
          columns: [
            {
              name: 'Picker',
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/core/src/components/backdrop/backdrop.tsx
@@ -1,6 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Event, Host, Listen, Prop, h } from '@stencil/core';
-import { GESTURE_CONTROLLER } from '@utils/gesture';

 import { getIonMode } from '../../global/ionic-global';

@@ -13,10 +12,6 @@ import { getIonMode } from '../../global/ionic-global';
  shadow: true,
 })
 export class Backdrop implements ComponentInterface {
-  private blocker = GESTURE_CONTROLLER.createBlocker({
-    disableScroll: true,
-  });
-
  /**
   * If `true`, the backdrop will be visible.
   */
@@ -37,16 +32,6 @@ export class Backdrop implements ComponentInterface {
   */
  @Event() ionBackdropTap!: EventEmitter<void>;

-  connectedCallback() {
-    if (this.stopPropagation) {
-      this.blocker.block();
-    }
-  }
-
-  disconnectedCallback() {
-    this.blocker.unblock();
-  }
-
  @Listen('click', { passive: false, capture: true })
  protected onMouseDown(ev: TouchEvent) {
    this.emitTap(ev);
--- a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/checkbox.scss
+++ b/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
 // ---------------------------------------------

--- a/core/src/components/checkbox/checkbox.tsx
+++ b/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>
--- a/core/src/components/checkbox/test/checkbox.spec.ts
+++ b/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({
--- a/core/src/components/chip/chip.ios.scss
+++ b/core/src/components/chip/chip.ios.scss
@@ -1,8 +1,6 @@
-@use "./chip" as b;
+@import "./chip";
@import "./chip.vars";

-@include b.base;
-
 :host {
  /**
   * Main content should be prioritized on iOS,
--- a/core/src/components/chip/chip.md.scss
+++ b/core/src/components/chip/chip.md.scss
@@ -1,7 +1,6 @@
+@import "./chip";
@import "./chip.vars";

-@mixin md2 {
-  :host {
-    font-size: $chip-base-font-size-rem;
-  }
+:host {
+  font-size: $chip-base-font-size-rem;
 }
--- a/core/src/components/chip/chip.md2.flag.scss
+++ b/core/src/components/chip/chip.md2.flag.scss
@@ -1,9 +0,0 @@
-@use 'chip.md.scss' as c;
-@use 'chip.scss' as b;
-
-@use '../../utils/md-controller/index.scss' as controller;
-
-@if controller.$md2 {
-  @include b.base;
-  @include c.md2;
-}
--- a/core/src/components/chip/chip.md3.flag.scss
+++ b/core/src/components/chip/chip.md3.flag.scss
@@ -1,9 +0,0 @@
-@use 'chip.md3.scss' as c;
-@use 'chip.scss' as b;
-
-@use '../../utils/md-controller/index.scss' as controller;
-
-@if controller.$md3 {
-  @include b.base;
-  @include c.md3;
-}
--- a/core/src/components/chip/chip.md3.scss
+++ b/core/src/components/chip/chip.md3.scss
@@ -1,7 +0,0 @@
-@import "./chip.vars";
-
-@mixin md3 {
-  :host {
-    background: green;
-  }
-}
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -1,158 +1,156 @@
@import "../../themes/ionic.globals";
@import "./chip.vars";

-@mixin base {
-  :host {
-    /**
-     * @prop --background: Background of the chip
-     * @prop --color: Color of the chip
-     */
-    --background: #{rgba($text-color-rgb, 0.12)};
-    --color: #{rgba($text-color-rgb, 0.87)};
+:host {
+  /**
+   * @prop --background: Background of the chip
+   * @prop --color: Color of the chip
+   */
+  --background: #{rgba($text-color-rgb, 0.12)};
+  --color: #{rgba($text-color-rgb, 0.87)};

-    @include border-radius(16px);
-    @include font-smoothing();
-    @include margin(4px);
-    @include padding(6px, 12px);
+  @include border-radius(16px);
+  @include font-smoothing();
+  @include margin(4px);
+  @include padding(6px, 12px);

-    display: inline-flex;
+  display: inline-flex;

-    position: relative;
+  position: relative;

-    align-items: center;
+  align-items: center;

-    min-height: 32px;
+  min-height: 32px;

-    background: var(--background);
-    color: var(--color);
+  background: var(--background);
+  color: var(--color);

-    font-family: $font-family-base;
+  font-family: $font-family-base;

-    cursor: pointer;
+  cursor: pointer;

-    overflow: hidden;
+  overflow: hidden;

-    vertical-align: middle;
-    box-sizing: border-box;
-  }
+  vertical-align: middle;
+  box-sizing: border-box;
+}

-  :host(.chip-disabled) {
-    cursor: default;
-    opacity: 0.4;
-    pointer-events: none;
-  }
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: 0.4;
+  pointer-events: none;
+}

-  // Chip Colors
-  // ---------------------------------------------
+// Chip Colors
+// ---------------------------------------------

-  :host(.ion-color) {
-    background: current-color(base, 0.08);
-    color: current-color(shade);
-  }
+:host(.ion-color) {
+  background: current-color(base, 0.08);
+  color: current-color(shade);
+}

-  :host(.ion-color:focus) {
-    background: current-color(base, 0.12);
-  }
+:host(.ion-color:focus) {
+  background: current-color(base, 0.12);
+}

-  :host(.ion-color.ion-activated) {
-    background: current-color(base, 0.16);
-  }
+:host(.ion-color.ion-activated) {
+  background: current-color(base, 0.16);
+}

-  // Outline Chip
-  // ---------------------------------------------
+// Outline Chip
+// ---------------------------------------------

-  :host(.chip-outline) {
-    border-width: 1px;
-    border-style: solid;
-  }
+:host(.chip-outline) {
+  border-width: 1px;
+  border-style: solid;
+}

-  :host(.chip-outline) {
-    border-color: rgba($text-color-rgb, 0.32);
+:host(.chip-outline) {
+  border-color: rgba($text-color-rgb, 0.32);

-    background: transparent;
-  }
+  background: transparent;
+}

-  :host(.chip-outline.ion-color) {
-    border-color: current-color(base, 0.32);
-  }
+:host(.chip-outline.ion-color) {
+  border-color: current-color(base, 0.32);
+}

-  :host(.chip-outline:not(.ion-color):focus) {
-    background: rgba($text-color-rgb, 0.04);
-  }
+:host(.chip-outline:not(.ion-color):focus) {
+  background: rgba($text-color-rgb, 0.04);
+}

-  :host(.chip-outline.ion-activated:not(.ion-color)) {
-    background: rgba($text-color-rgb, 0.08);
-  }
+:host(.chip-outline.ion-activated:not(.ion-color)) {
+  background: rgba($text-color-rgb, 0.08);
+}

-  // Chip Icon
-  // ---------------------------------------------
+// Chip Icon
+// ---------------------------------------------

-  ::slotted(ion-icon) {
-    font-size: $chip-icon-size;
-  }
+::slotted(ion-icon) {
+  font-size: $chip-icon-size;
+}

-  :host(:not(.ion-color)) ::slotted(ion-icon) {
-    color: rgba($text-color-rgb, 0.54);
-  }
+:host(:not(.ion-color)) ::slotted(ion-icon) {
+  color: rgba($text-color-rgb, 0.54);
+}

-  ::slotted(ion-icon:first-child) {
-    @include margin(-4px, 8px, -4px, -4px);
-  }
+::slotted(ion-icon:first-child) {
+  @include margin(-4px, 8px, -4px, -4px);
+}

-  ::slotted(ion-icon:last-child) {
-    @include margin(-4px, -4px, -4px, 8px);
-  }
+::slotted(ion-icon:last-child) {
+  @include margin(-4px, -4px, -4px, 8px);
+}

-  // Chip Avatar
-  // ---------------------------------------------
+// Chip Avatar
+// ---------------------------------------------

-  ::slotted(ion-avatar) {
-    flex-shrink: 0;
+::slotted(ion-avatar) {
+  flex-shrink: 0;

-    width: $chip-avatar-size;
-    height: $chip-avatar-size;
-  }
+  width: $chip-avatar-size;
+  height: $chip-avatar-size;
+}

-  ::slotted(ion-avatar:first-child) {
-    @include margin(-4px, 8px, -4px, -8px);
-  }
+::slotted(ion-avatar:first-child) {
+  @include margin(-4px, 8px, -4px, -8px);
+}

-  ::slotted(ion-avatar:last-child) {
-    @include margin(-4px, -8px, -4px, 8px);
-  }
+::slotted(ion-avatar:last-child) {
+  @include margin(-4px, -8px, -4px, 8px);
+}

-  // Chip: Focus
-  // ---------------------------------------------
+// Chip: Focus
+// ---------------------------------------------

-  :host(:focus) {
-    outline: none;
-  }
+:host(:focus) {
+  outline: none;
+}

-  :host(:focus) {
+:host(:focus) {
+  --background: #{rgba($text-color-rgb, 0.16)};
+}
+
+// Chip: Activated
+// ---------------------------------------------
+
+:host(.ion-activated) {
+  --background: #{rgba($text-color-rgb, 0.2)};
+}
+
+// Chip: Hover
+// ---------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) {
    --background: #{rgba($text-color-rgb, 0.16)};
  }

-  // Chip: Activated
-  // ---------------------------------------------
-
-  :host(.ion-activated) {
-    --background: #{rgba($text-color-rgb, 0.2)};
+  :host(.ion-color:hover) {
+    background: current-color(base, 0.12);
  }

-  // Chip: Hover
-  // ---------------------------------------------
-
-  @media (any-hover: hover) {
-    :host(:hover) {
-      --background: #{rgba($text-color-rgb, 0.16)};
-    }
-
-    :host(.ion-color:hover) {
-      background: current-color(base, 0.12);
-    }
-
-    :host(.chip-outline:not(.ion-color):hover) {
-      background: rgba($text-color-rgb, 0.04);
-    }
+  :host(.chip-outline:not(.ion-color):hover) {
+    background: rgba($text-color-rgb, 0.04);
  }
 }
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -5,14 +5,6 @@ import { createColorClasses } from '@utils/theme';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

-/**
-styleUrls: {
-  ios: 'chip.ios.scss',
-  md: 'chip.md2.scss',
-  md3: Build.isDev ? 'chip.md3.scss' : undefined
-},
-*/
-
 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@@ -20,8 +12,7 @@ styleUrls: {
  tag: 'ion-chip',
  styleUrls: {
    ios: 'chip.ios.scss',
-    md: 'chip.md2.flag.scss',
-    md3: 'chip.md3.flag.scss'
+    md: 'chip.md.scss',
  },
  shadow: true,
 })
--- a/core/src/components/chip/test/basic/index.html
+++ b/core/src/components/chip/test/basic/index.html
@@ -23,19 +23,82 @@
      </ion-header>

      <ion-content class="ion-padding" id="content" style="text-align: center">
-        <h2>Default Chip</h2>
+        <h2>Basic Chips</h2>
        <ion-chip>
          <ion-label>Default</ion-label>
        </ion-chip>
-
-        <h2>MD2 Chip</h2>
-        <ion-chip mode="md">
-          <ion-label>MD2</ion-label>
+        <ion-chip style="border-radius: 4px">
+          <ion-label>Border Radius</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>With Icon</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
        </ion-chip>

-        <h2>MD3 Chip</h2>
-        <ion-chip mode="md3">
-          <ion-label>MD3</ion-label>
+        <h2>Color Chips</h2>
+        <ion-chip color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+        <ion-chip color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip color="primary">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>Primary with Avatar</ion-label>
+        </ion-chip>
+        <ion-chip color="success">
+          <ion-label>Success with Icon</ion-label>
+          <ion-icon name="calendar"></ion-icon>
+        </ion-chip>
+
+        <h2>Outline Chips</h2>
+        <ion-chip outline>
+          <ion-label>Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger">
+          <ion-label>Danger Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Secondary Outline with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary">
+          <ion-label>Primary Outline with Avatar</ion-label>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+        </ion-chip>
+        <ion-chip outline>
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
        </ion-chip>
      </ion-content>
    </ion-app>
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -54,10 +54,6 @@
  color: current-color(contrast);
 }

-:host(.outer-content) {
-  --background: #{$background-color-step-50};
-}
-
 #background-content {
  @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);

--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -34,16 +34,24 @@

 // Calendar / Header / Action Buttons
 // -----------------------------------
-:host .calendar-action-buttons ion-item {
-  --padding-start: #{$datetime-ios-padding};
-  --background-hover: transparent;
-  --background-activated: transparent;
+.calendar-month-year-toggle {
+  @include padding(0px, 16px, 0px, #{$datetime-ios-padding});
+
+  min-height: 44px;

  font-size: dynamic-font-max(16px, 1.6);
  font-weight: 600;
+
+  &.ion-focused::after {
+    opacity: 0.15;
+  }
 }

-:host .calendar-action-buttons ion-item ion-icon,
+.calendar-month-year-toggle #toggle-wrapper {
+  @include margin(10px, 8px, 10px, 0);
+}
+
+:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
  color: current-color(base);
 }
@@ -249,11 +257,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);
 }

--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -30,15 +30,41 @@

 // Calendar / Header / Action Buttons
 // -----------------------------------
-:host .datetime-calendar .calendar-action-buttons ion-item {
-  --padding-start: #{$datetime-md-header-padding};
-}

-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
  --color: #{$text-color-step-350};
 }

+.calendar-month-year-toggle {
+  @include padding(12px, 16px, 12px, #{$datetime-md-header-padding});
+
+  min-height: 48px;
+
+  background: transparent;
+
+  color: #{$text-color-step-350};
+
+  z-index: 1;
+
+  &.ion-focused::after {
+    opacity: 0.04;
+  }
+}
+
+.calendar-month-year-toggle ion-ripple-effect {
+  color: currentColor;
+}
+
+@media (any-hover: hover) {
+  .calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover {
+    &::after {
+      background: currentColor;
+
+      opacity: 0.04;
+    }
+  }
+}
+
 // Calendar / Header / Days of Week
 // -----------------------------------
 :host .calendar-days-of-week {
@@ -64,7 +90,6 @@
   * if necessary.
   */
  grid-template-rows: repeat(6, 1fr);
-
 }

 // Individual day button in month
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -34,7 +34,7 @@
 * widest item in the column. Setting a minimum
 * width avoids this layout shifting.
 */
-ion-picker-column-internal {
+ion-picker-column {
  min-width: 26px;
 }

@@ -48,7 +48,7 @@ ion-picker-column-internal {
 }

 /**
- * This ensures that the picker is apppropriately
+ * This ensures that the picker is appropriately
 * sized and never truncates the text.
 */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -267,27 +267,8 @@ 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;
-}
-
-:host .calendar-action-buttons ion-item ion-label {
-  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 {
-  @include padding(0, 0, 0, 4px);
+  --background: transparent;
 }

 // Calendar / Header / Days of Week
@@ -496,6 +477,55 @@ ion-picker-column-internal {

 // Year Picker
 // -----------------------------------
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: #{current-color(base)};
+:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: #{current-color(base)};
+}
+
+.calendar-month-year {
+  min-width: 0;
+}
+
+.calendar-month-year-toggle {
+  @include text-inherit();
+
+  position: relative;
+
+  border: 0;
+
+  outline: none;
+
+  background: transparent;
+
+  cursor: pointer;
+
+  z-index: 1;
+
+  &::after {
+    @include button-state();
+
+    transition: opacity 15ms linear, background-color 15ms linear;
+
+    z-index: -1;
+  }
+
+  &.ion-focused::after {
+    background: currentColor;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}
+
+.calendar-month-year-toggle ion-icon {
+  @include padding(0, 0, 0, 4px);
+
+  flex-shrink: 0;
+}
+
+.calendar-month-year-toggle #toggle-wrapper {
+  display: inline-flex;
+
+  align-items: center;
 }
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -9,7 +9,7 @@ import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward

 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
-import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
+import type { PickerColumnItem } from '../picker-column/picker-column-interfaces';

 import type {
  DatetimePresentation,
@@ -104,7 +104,6 @@ import {
 export class Datetime implements ComponentInterface {
  private inputId = `ion-dt-${datetimeIds++}`;
  private calendarBodyRef?: HTMLElement;
-  private monthYearToggleItemRef?: HTMLIonItemElement;
  private popoverRef?: HTMLIonPopoverElement;
  private clearFocusVisible?: () => void;
  private parsedMinuteValues?: number[];
@@ -341,9 +340,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 +491,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 +499,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 +1355,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();
@@ -1550,7 +1527,7 @@ export class Datetime implements ComponentInterface {
      forcePresentation === 'time-date'
        ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
        : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-    return <ion-picker-internal>{renderArray}</ion-picker-internal>;
+    return <ion-picker>{renderArray}</ion-picker>;
  }

  private renderDatePickerColumns(forcePresentation: string) {
@@ -1636,7 +1613,7 @@ export class Datetime implements ComponentInterface {
        : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        class="date-column"
        color={this.color}
        disabled={disabled}
@@ -1670,7 +1647,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }

@@ -1756,7 +1733,7 @@ export class Datetime implements ComponentInterface {
    const activePart = this.getActivePartsWithFallback();

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        class="day-column"
        color={this.color}
        disabled={disabled}
@@ -1787,7 +1764,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }

@@ -1801,7 +1778,7 @@ export class Datetime implements ComponentInterface {
    const activePart = this.getActivePartsWithFallback();

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        class="month-column"
        color={this.color}
        disabled={disabled}
@@ -1832,7 +1809,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }
  private renderYearPickerColumn(years: PickerColumnItem[]) {
@@ -1845,7 +1822,7 @@ export class Datetime implements ComponentInterface {
    const activePart = this.getActivePartsWithFallback();

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        class="year-column"
        color={this.color}
        disabled={disabled}
@@ -1876,7 +1853,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }
  private renderTimePickerColumns(forcePresentation: string) {
@@ -1920,7 +1897,7 @@ export class Datetime implements ComponentInterface {
    const activePart = this.getActivePartsWithFallback();

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        color={this.color}
        disabled={disabled}
        value={activePart.hour}
@@ -1939,7 +1916,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }
  private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
@@ -1949,7 +1926,7 @@ export class Datetime implements ComponentInterface {
    const activePart = this.getActivePartsWithFallback();

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        color={this.color}
        disabled={disabled}
        value={activePart.minute}
@@ -1968,7 +1945,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }
  private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
@@ -1981,7 +1958,7 @@ export class Datetime implements ComponentInterface {
    const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);

    return (
-      <ion-picker-column-internal
+      <ion-picker-column
        style={isDayPeriodRTL ? { order: '-1' } : {}}
        color={this.color}
        disabled={disabled}
@@ -2004,7 +1981,7 @@ export class Datetime implements ComponentInterface {

          ev.stopPropagation();
        }}
-      ></ion-picker-column-internal>
+      ></ion-picker-column>
    );
  }

@@ -2042,35 +2019,18 @@ export class Datetime implements ComponentInterface {
      <div class="calendar-header">
        <div class="calendar-action-buttons">
          <div class="calendar-month-year">
-            <ion-item
-              part="month-year-button"
-              ref={(el) => (this.monthYearToggleItemRef = el)}
-              button
-              aria-label="Show year picker"
-              detail={false}
-              lines="none"
-              disabled={disabled}
-              onClick={() => {
-                this.toggleMonthAndYearView();
-                /**
-                 * TODO: FW-3547
-                 *
-                 * Currently there is not a way to set the aria-label on the inner button
-                 * on the `ion-item` and have it be reactive to changes. This is a workaround
-                 * until we either refactor `ion-item` to a button or Stencil adds a way to
-                 * have reactive props for built-in properties, such as `aria-label`.
-                 */
-                const { monthYearToggleItemRef } = this;
-                if (monthYearToggleItemRef) {
-                  const btn = monthYearToggleItemRef.shadowRoot?.querySelector('.item-native');
-                  if (btn) {
-                    const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
-                    btn.setAttribute('aria-label', monthYearAriaLabel);
-                  }
-                }
+            <button
+              class={{
+                'calendar-month-year-toggle': true,
+                'ion-activatable': true,
+                'ion-focusable': true,
              }}
+              part="month-year-button"
+              disabled={disabled}
+              aria-label={this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}
+              onClick={() => this.toggleMonthAndYearView()}
            >
-              <ion-label>
+              <span id="toggle-wrapper">
                {getMonthAndYear(this.locale, this.workingParts)}
                <ion-icon
                  aria-hidden="true"
@@ -2078,8 +2038,9 @@ export class Datetime implements ComponentInterface {
                  lazy={false}
                  flipRtl={true}
                ></ion-icon>
-              </ion-label>
-            </ion-item>
+              </span>
+              {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            </button>
          </div>

          <div class="calendar-next-prev">
@@ -2384,7 +2345,7 @@ export class Datetime implements ComponentInterface {
           * This will correctly scroll the element position to the correct time value,
           * before the popover is fully presented.
           */
-          const cols = (ev.target! as HTMLElement).querySelectorAll('ion-picker-column-internal');
+          const cols = (ev.target! as HTMLElement).querySelectorAll('ion-picker-column');
          // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
          cols.forEach((col) => col.scrollActiveItemIntoView());
        }}
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts
@@ -47,7 +47,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';

      const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');

--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/a11y/datetime.spec.ts
+++ b/core/src/components/datetime/test/a11y/datetime.spec.ts
@@ -1,7 +1,6 @@
 import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';

-import { Item } from '../../../item/item';
 import { Datetime } from '../../datetime';

 describe('datetime', () => {
@@ -20,15 +19,14 @@ describe('datetime', () => {

    beforeEach(async () => {
      page = await newSpecPage({
-        components: [Datetime, Item],
+        components: [Datetime],
        html: `<ion-datetime></ion-datetime>`,
      });
    });

    it('should have aria-label "Show year picker" when collapsed', async () => {
      const datetime = page.body.querySelector('ion-datetime')!;
-      const item = datetime.shadowRoot!.querySelector('.calendar-month-year ion-item');
-      const monthYearToggleBtn = item!.shadowRoot!.querySelector('button');
+      const monthYearToggleBtn = datetime.shadowRoot!.querySelector('.calendar-month-year .calendar-month-year-toggle');
      const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');

      expect(ariaLabel).toContain('Show year picker');
@@ -36,15 +34,18 @@ describe('datetime', () => {

    it('should have aria-label "Hide year picker" when expanded', async () => {
      const datetime = page.body.querySelector('ion-datetime')!;
-      const item = datetime.shadowRoot!.querySelector<HTMLIonItemElement>('.calendar-month-year ion-item');
+      const monthYearToggleBtn = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
+        '.calendar-month-year .calendar-month-year-toggle'
+      );

-      item!.click();
+      monthYearToggleBtn!.click();

      await page.waitForChanges();

-      const itemAfter = datetime.shadowRoot!.querySelector<HTMLIonItemElement>('.calendar-month-year ion-item');
-      const monthYearToggleBtn = itemAfter!.shadowRoot!.querySelector<HTMLElement>('button');
-      const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');
+      const monthYearToggleBtnAfter = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
+        '.calendar-month-year .calendar-month-year-toggle'
+      );
+      const ariaLabel = monthYearToggleBtnAfter!.getAttribute('aria-label');

      expect(ariaLabel).toContain('Hide year picker');
    });
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/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.
@@ -564,4 +526,20 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
      await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-calendar-day`));
    });
  });
+
+  test.describe(title('datetime: calendar month toggle'), () => {
+    test('should have focus styles', async ({ page }) => {
+      await page.setContent('<ion-datetime value="2021-01-01"></ion-datetime>', config);
+
+      const datetime = page.locator('ion-datetime');
+
+      await page.waitForSelector('.datetime-ready');
+
+      const monthYearToggle = datetime.locator('.calendar-month-year-toggle');
+
+      monthYearToggle.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
+
+      await expect(datetime).toHaveScreenshot(screenshot(`date-month-toggle-focused`));
+    });
+  });
 });
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/test/custom/index.html
+++ b/core/src/components/datetime/test/custom/index.html
@@ -52,28 +52,28 @@
      }

      /*
-        The second selectors that target ion-picker(-column)-internal
+        The second selectors that target ion-picker(-column)
        directly are for styling the time picker. This is currently
        undocumented usage.
      */

      .custom-grid-wheel,
-      ion-picker-internal {
+      ion-picker {
        --wheel-highlight-background: rgb(218, 216, 255);
        --wheel-fade-background-rgb: 245, 235, 247;
      }

-      ion-picker-internal {
+      ion-picker {
        background-color: rgb(245, 235, 247);
      }

      .custom-grid-wheel::part(wheel-item),
-      ion-picker-column-internal::part(wheel-item) {
+      ion-picker-column::part(wheel-item) {
        color: rgb(255, 134, 154);
      }

      .custom-grid-wheel::part(wheel-item active),
-      ion-picker-column-internal::part(wheel-item active) {
+      ion-picker-column::part(wheel-item active) {
        color: rgb(128, 30, 171);
      }

--- a/core/src/components/datetime/test/disabled/datetime.spec.tsx
+++ b/core/src/components/datetime/test/disabled/datetime.spec.tsx
@@ -2,8 +2,8 @@ import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';

 import { Datetime } from '../../../datetime/datetime';
-import { PickerColumnInternal } from '../../../picker-column-internal/picker-column-internal';
-import { PickerInternal } from '../../../picker-internal/picker-internal';
+import { PickerColumn } from '../../../picker-column/picker-column';
+import { Picker } from '../../../picker/picker';

 describe('ion-datetime disabled', () => {
  beforeEach(() => {
@@ -19,7 +19,7 @@ describe('ion-datetime disabled', () => {

  it('picker should be disabled in prefer wheel mode', async () => {
    const page = await newSpecPage({
-      components: [Datetime, PickerColumnInternal, PickerInternal],
+      components: [Datetime, PickerColumn, Picker],
      template: () => (
        <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
      ),
@@ -28,7 +28,7 @@ describe('ion-datetime disabled', () => {
    await page.waitForChanges();

    const datetime = page.body.querySelector('ion-datetime')!;
-    const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column-internal');
+    const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column');

    await expect(columns.length).toEqual(4);

--- a/core/src/components/datetime/test/manipulation.spec.ts
+++ b/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);
-  });
-});
--- a/core/src/components/datetime/test/minmax/datetime.e2e.ts
+++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts
@@ -109,12 +109,8 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
        await page.click('.time-body');
        await ionPopoverDidPresent.next();

-        const hours = page.locator(
-          'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)'
-        );
-        const minutes = page.locator(
-          'ion-popover ion-picker-column-internal:nth-child(2) .picker-item:not(.picker-item-empty)'
-        );
+        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
+        const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) .picker-item:not(.picker-item-empty)');

        expect(await hours.count()).toBe(12);
        expect(await minutes.count()).toBe(60);
@@ -219,7 +215,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
      );

      const hourPickerItems = page.locator(
-        'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'
+        'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'
      );
      await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']);
    });
@@ -243,7 +239,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
      );

      const hourPickerItems = page.locator(
-        'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'
+        'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'
      );
      await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
    });
@@ -360,9 +356,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>

        await ionPopoverDidPresent.next();

-        const hours = page.locator(
-          'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)'
-        );
+        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');

        await expect(await hours.count()).toBe(4);
      });
--- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
+++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
      const datetimeFooter = page.locator('#date-time .datetime-footer');
      await expect(datetimeFooter).toBeVisible();

-      const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
+      const pickerButton = page.locator('#date-time .calendar-month-year > .calendar-month-year-toggle');
      await pickerButton.click();
      await page.waitForChanges();
      await expect(datetimeFooter).not.toBeVisible();
--- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -308,7 +308,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {

          await page.waitForSelector('.datetime-ready');

-          const columns = page.locator('ion-picker-column-internal');
+          const columns = page.locator('ion-picker-column');

          await expect(columns.nth(0)).toHaveClass(/month-column/);
          await expect(columns.nth(1)).toHaveClass(/day-column/);
@@ -329,7 +329,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {

          await page.waitForSelector('.datetime-ready');

-          const columns = page.locator('ion-picker-column-internal');
+          const columns = page.locator('ion-picker-column');

          await expect(columns.nth(0)).toHaveClass(/day-column/);
          await expect(columns.nth(1)).toHaveClass(/month-column/);
--- a/core/src/components/datetime/test/prefer-wheel/datetime.spec.ts
+++ b/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');
-  });
-});
--- a/core/src/components/datetime/test/presentation/datetime.e2e.ts
+++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts
@@ -227,7 +227,7 @@ class TimePickerFixture {
  }

  async expectTime(hour: number, minute: number, ampm: string) {
-    const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
+    const pickerColumns = this.timePicker.locator('ion-picker-column');

    await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
    await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
--- a/core/src/components/datetime/test/readonly/datetime.e2e.ts
+++ b/core/src/components/datetime/test/readonly/datetime.e2e.ts
@@ -68,7 +68,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree

      await page.waitForSelector('.datetime-ready');
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
      await expect(calendarMonthYear).toHaveText('February 2022');

      await page.keyboard.press(tabKey);
@@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';

      const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
--- a/core/src/components/datetime/test/values/datetime.e2e.ts
+++ b/core/src/components/datetime/test/values/datetime.e2e.ts
@@ -51,7 +51,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
+      const items = page.locator('ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)');
      await expect(items).toHaveText(['1', '2', '3']);
    });
    test('should render correct minutes', async ({ page }) => {
@@ -62,7 +62,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
        config
      );

-      const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+      const items = page.locator('ion-picker-column:nth-of-type(2) .picker-item:not(.picker-item-empty)');
      await expect(items).toHaveText(['01', '02', '03']);
    });
    test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -93,13 +93,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>

      await page.waitForSelector('.datetime-ready');

-      const minuteItems = page.locator(
-        'ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'
-      );
+      const minuteItems = page.locator('ion-picker-column:nth-of-type(2) .picker-item:not(.picker-item-empty)');
      await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
      await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);

-      const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
+      const hourItems = page.locator('ion-picker-column:nth-of-type(1) .picker-item:not(.picker-item-empty)');
      await expect(hourItems).toHaveText(['2']);
      await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);

@@ -107,7 +105,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       * Since the allowed hour is 2AM, the time period
       * should switch from PM to AM.
       */
-      const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
+      const ampmItems = page.locator('ion-picker-column:nth-of-type(3) .picker-item:not(.picker-item-empty)');
      await expect(ampmItems).toHaveText(['AM', 'PM']);
      await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
    });
--- a/core/src/components/datetime/utils/data.ts
+++ b/core/src/components/datetime/utils/data.ts
@@ -1,5 +1,5 @@
 import type { Mode } from '../../../interface';
-import type { PickerColumnItem } from '../../picker-column-internal/picker-column-internal-interfaces';
+import type { PickerColumnItem } from '../../picker-column/picker-column-interfaces';
 import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';

 import { isAfter, isBefore, isSameDay } from './comparison';
@@ -380,7 +380,7 @@ export const getMonthColumnData = (
 * @param minParts The minimum bound on the date that can be returned
 * @param maxParts The maximum bound on the date that can be returned
 * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column-internal
+ * @returns Date data to be used in ion-picker-column
 */
 export const getDayColumnData = (
  locale: string,
--- a/core/src/components/datetime/utils/manipulation.ts
+++ b/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;
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/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;
    }
  }

--- a/core/src/components/infinite-scroll/test/small-dom-update/index.html
+++ b/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>
--- a/core/src/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.ts
+++ b/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);
-    });
-  });
-});
--- a/core/src/components/input/input.ios.scss
+++ b/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;
-}
--- a/core/src/components/input/input.md.outline.scss
+++ b/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;
 }
--- a/core/src/components/input/input.md.scss
+++ b/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;
-}
--- a/core/src/components/input/input.md.solid.scss
+++ b/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.
--- a/core/src/components/input/input.scss
+++ b/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;
-}
--- a/core/src/components/input/input.tsx
+++ b/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',
@@ -97,9 +95,7 @@ export class Input implements ComponentInterface {
  @Prop() autocorrect: 'on' | 'off' = 'off';

  /**
-   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-   *
-   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
   */
  @Prop() autofocus = false;

@@ -121,9 +117,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 +369,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,
@@ -431,8 +424,6 @@ export class Input implements ComponentInterface {
   *
   * Developers who wish to focus an input when an overlay is presented
   * should call `setFocus` after `didPresent` has resolved.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
   */
  @Method()
  async setFocus() {
@@ -501,8 +492,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 +541,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 +695,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 +715,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 +772,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>
--- a/core/src/components/input/test/a11y/index.html
+++ b/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>
--- a/core/src/components/input/test/clear-on-edit/input.e2e.ts
+++ b/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');
    });
  });
 });
--- a/core/src/components/input/test/legacy/spec/index.html
+++ b/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"
--- a/core/src/components/input/test/slot/index.html
+++ b/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';
--- a/core/src/components/input/test/slot/input.e2e.ts
+++ b/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/);
-    });
-  });
-});
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Liam DeBeasi	629d862c54	tests	2023-12-01 15:38:09 -05:00
Liam DeBeasi	2c773ed0e6	fix: do not emit ionChange if value did not change	2023-12-01 15:29:40 -05:00
Liam DeBeasi	b1fc67227c	fix: column scrolls into view when option is ready	2023-12-01 15:16:59 -05:00
Liam DeBeasi	75ee951ce8	chore: lint	2023-12-01 14:58:06 -05:00
Liam DeBeasi	2f3f9dc9ca	refactor: clicking option sets value	2023-12-01 14:58:01 -05:00
Liam DeBeasi	b68c93d55d	refactor: scrolling column sets value	2023-12-01 14:49:23 -05:00
Liam DeBeasi	eace6425a2	refactor: add slot to integrate basic options	2023-12-01 14:28:07 -05:00
Liam DeBeasi	1aeb19403b	chore: run build	2023-12-01 12:59:03 -05:00
ionitron	9d0834b201	chore(): add updated snapshots	2023-12-01 17:55:49 +00:00
Liam DeBeasi	7b21bd40a6	feat(picker-column): add styles, disabled and active states	2023-12-01 12:44:38 -05:00
Maria Hutt	0b469646b2	feat(picker-column-option): add the new component (#28591 )	2023-11-30 09:54:01 -08:00
Shawn Taylor	5e47412e1f	refactor(picker): rename internal picker components to ion-picker and ion-picker-column (#28589 )	2023-11-28 16:17:28 -05:00
Liam DeBeasi	cc45e2220b	refactor(picker): deprecate ion-picker and ion-picker-column (#28584 ) BREAKING CHANGE: `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.	2023-11-28 12:47:37 -05:00
Liam DeBeasi	7ac0018a3c	chore: sync with main chore: sync with main	2023-11-27 10:38:48 -05:00
Liam DeBeasi	a7c966776a	test: resolve type errors	2023-11-27 10:28:30 -05:00
Liam DeBeasi	7de4e34f13	Merge remote-tracking branch 'origin/main' into sync-80-main-11-27	2023-11-27 10:24:40 -05:00
Sean Perkins	4b5e62e60f	refactor(datetime): render button for month/year toggle (#28443 ) Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `ion-datetime` uses an `ion-item` to render the month/year toggle button inside of the header. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `ion-datetime` uses a `button` element for the month/year toggle button ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> Impact and migration path is noted in the `BREAKING.md`. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> - `translucent` is not a valid CSS value for `background`. This was always intended to be `transparent`. --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> BREAKING CHANGE: The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.	2023-11-27 10:19:19 -05:00
Liam DeBeasi	9883eac0f7	fix(angular): transition plays when using browser buttons (#28530 ) Issue number: resolves #16569 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic Angular's routing integration disables page transitions when using the browser back/forward buttons. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Transitions now play when using the back/forward buttons ## Does this introduce a breaking change? - [ ] Yes - [x] No We're not aware of any breaking changes here, though it's possible some developers were relying on this behavior. As a result, we are targeting Ionic 8 to minimize any potential negative impact this fix may have on developers. <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Supersedes https://github.com/ionic-team/ionic-framework/pull/28188 Dev build: `7.5.6-dev.11700068172.15ce9b35` Co-authored-by: hoi4 <hoi4@users.noreply.github.com>	2023-11-16 10:52:32 -05:00
Liam DeBeasi	aa2a7f5271	chore: sync with main chore: sync with main	2023-11-15 12:18:04 -05:00
Liam DeBeasi	2509d565b2	chore: sync	2023-11-15 12:06:22 -05:00
Liam DeBeasi	ce89057641	refactor(angular): radio component is auto generated (#28533 )	2023-11-15 12:05:17 -05:00
Liam DeBeasi	5aafd68f03	chore: remove unused code (#28503 ) BREAKING CHANGE: Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.	2023-11-13 11:30:36 -05:00
Maria Hutt	098ed054b1	chore(angular): remove radio value accessor (#28386 ) Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>	2023-11-06 10:50:03 -08:00
Sean Perkins	7ba939fb94	fix(overlays): prevent scroll gestures when the overlay is presented (#28415 ) Issue number: Resolves #23942 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When an overlay is created (inserted in the DOM), but not presented, the scroll gesture is prevented. This behavior comes from the `connectedCallback` of `ion-backdrop`, where the gesture is prevented as soon as the backdrop is inserted in the DOM. This means in situations where a developer creates an overlay, but does not present it immediately, the user cannot scroll. This is not desired. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Scroll blocking behavior tied to the gesture has been removed from `ion-backdrop` and implemented into the overlays directly. - When an overlay is presented, scroll blocking is enabled on the `body` element (the user cannot scroll on the main content). - When the last presented overlay is dismissed, scroll blocking is disabled on the `body` element (the user can scroll on the main content). ## Does this introduce a breaking change? - [x] Yes - [ ] No `ion-backdrop` no longer prevents scrolling on the main content when the backdrop is either inserted into the DOM or removed from the DOM. Developers using Ionic overlays do not need to migrate their implementations. Developers with custom overlays using `ion-backdrop` internally can either use Ionic's gesture controller to disable scrolling when their overlay is presented/dismissed or can manually add the `backdrop-no-scroll` Ionic global class to the `body` element. <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> ---------	2023-11-01 14:58:53 -04:00
Sean Perkins	6cd819a059	Merge pull request #28427 from ionic-team/sp/sync-feature-8-with-main chore: sync with main	2023-10-29 22:55:59 -04:00
Sean Perkins	9bcee94e0b	Merge remote-tracking branch 'origin/main' into sp/sync-feature-8-with-main	2023-10-27 13:05:48 -04:00
Liam DeBeasi	409df1bea5	docs(breaking): add v8 browser and platform support (#28368 ) BREAKING CHANGE: The supported JS Framework and Browser/Platform versions have been revised for Ionic 8	2023-10-19 11:51:08 -04:00
Amanda Johnston	021712bd7d	chore(): update BREAKING.md to prepare for Ionic 8 development (#28360 ) Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - v7 breaking changes moved to legacy file. - New v8 section added to main breaking changes list. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->	2023-10-17 09:07:36 -05:00