chore: revert bug fix attempt for month/year interface

Issue number: N/A

---------

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

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

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

The picker heading level is currently an `h2`, where the other component
headings are `h4`.

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

- Updates the heading level for Picker to `h4`. 

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

.github/CODEOWNERS

@@ -53,8 +53,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

BREAKING.md

@@ -4,338 +4,70 @@ 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)
+  - [Button](#version-8x-button)
+  - [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-button">Button</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.
+- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
 
-- 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-content">Content</h4>
 
-<h4 id="version-7x-action-sheet">Action Sheet</h4>
+- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
 
-- Action Sheet is updated to align with the design specification.
+<h4 id="version-8x-datetime">Datetime</h4>
 
-**Design tokens**
+- 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;
 
-| Token      | Previous Value | New Value |
-| ---------- | -------------- | --------- |
-| `--height` | `100%`         | `auto`    |
+      +  background: red;
+      }
+      ```
+<h4 id="version-8x-picker">Picker</h4>
 
-<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. 

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;
+}
+```

core/api.txt

@@ -408,6 +408,7 @@ ion-datetime,prop,multiple,boolean,false,false,false
 ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,preferWheel,boolean,false,false,false
 ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false
+ion-datetime,prop,range,boolean,false,false,false
 ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,showClearButton,boolean,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
@@ -415,7 +416,7 @@ ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
 ion-datetime,prop,titleSelectedDatesFormatter,((selectedDates: string[]) => string) | undefined,undefined,false,false
-ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,false
+ion-datetime,prop,value,null | string | string[] | undefined | { start: string; end: string; },undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
 ion-datetime,method,confirm,confirm(closeOverlay?: boolean) => Promise<void>
@@ -429,6 +430,7 @@ ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,css-prop,--wheel-highlight-border-radius
 ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
 ion-datetime,part,calendar-day disabled
@@ -907,47 +909,66 @@ 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,css-prop,--fade-background-rgb
+ion-picker,css-prop,--highlight-background
+ion-picker,css-prop,--highlight-border-radius
+
+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,mode,"ios" | "md",undefined,false,false
+ion-picker-column,prop,value,number | string | undefined,undefined,false,false
+ion-picker-column,method,setFocus,setFocus() => Promise<void>
+ion-picker-column,event,ionChange,PickerColumnChangeEventDetail,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

core/src/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, DatetimeValue, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -23,9 +23,9 @@ 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 { PickerColumnChangeEventDetail, PickerColumnValue } 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 { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, DatetimeValue, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -59,9 +59,9 @@ 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 { PickerColumnChangeEventDetail, PickerColumnValue } 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 { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -914,6 +914,10 @@ export namespace Components {
           * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
          */
         "presentation": DatetimePresentation;
+        /**
+          * If `true`, a single range of dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        "range": boolean;
         /**
           * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
@@ -949,7 +953,7 @@ export namespace Components {
         /**
           * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
          */
-        "value"?: string | string[] | null;
+        "value"?: DatetimeValue;
         /**
           * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
          */
@@ -1949,6 +1953,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;
+        /**
+          * 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": (smooth?: boolean) => Promise<void>;
+        /**
+          * Sets focus on the scrollable container within the picker column. Use this method instead of the global `pickerColumn.focus()`.
+         */
+        "setFocus": () => 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: PickerColumnValue) => 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 +2088,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.
@@ -3338,13 +3356,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;
@@ -4032,14 +4050,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;
@@ -4056,7 +4067,7 @@ declare global {
         new (): HTMLIonPickerElement;
     };
     interface HTMLIonPickerColumnElementEventMap {
-        "ionPickerColChange": PickerColumn;
+        "ionChange": PickerColumnChangeEventDetail;
     }
     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;
@@ -4072,39 +4083,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;
@@ -4670,8 +4694,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;
@@ -5621,6 +5646,10 @@ declare namespace LocalJSX {
           * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
          */
         "presentation"?: DatetimePresentation;
+        /**
+          * If `true`, a single range of dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        "range"?: boolean;
         /**
           * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
@@ -5652,7 +5681,7 @@ declare namespace LocalJSX {
         /**
           * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
          */
-        "value"?: string | string[] | null;
+        "value"?: DatetimeValue;
         /**
           * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
          */
@@ -6603,6 +6632,53 @@ 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;
+        /**
+          * 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<PickerColumnChangeEventDetail>) => 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.
          */
@@ -6656,35 +6732,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.
@@ -6695,7 +6771,7 @@ declare namespace LocalJSX {
          */
         "trigger"?: string | undefined;
     }
-    interface IonPickerColumn {
+    interface IonPickerLegacyColumn {
         /**
           * Picker column data
          */
@@ -6703,44 +6779,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 {
         /**
@@ -8121,8 +8160,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;
@@ -8218,8 +8258,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>;

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',

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);

core/src/components/button/button.scss

@@ -56,8 +56,7 @@
   text-align: center;
   text-decoration: none;
 
-  // TODO(FW-4599): change to normal
-  white-space: nowrap;
+  white-space: normal;
 
   user-select: none;
   vertical-align: top; // the better option for most scenarios
@@ -68,7 +67,7 @@
 
 :host(.button-disabled) {
   cursor: default;
-  opacity: .5;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -229,11 +228,11 @@
 }
 
 ::slotted(ion-icon[slot="start"]) {
-  @include margin(0, .3em, 0, -.3em);
+  @include margin(0, 0.3em, 0, -0.3em);
 }
 
 ::slotted(ion-icon[slot="end"]) {
-  @include margin(0, -.2em, 0, .3em);
+  @include margin(0, -0.2em, 0, 0.3em);
 }
 
 ::slotted(ion-icon[slot="icon-only"]) {

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

@@ -4,10 +4,9 @@ import { configs, test } from '@utils/test/playwright';
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: wrap'), () => {
     test('should render button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button>This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -18,10 +17,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render small button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -32,10 +30,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render large button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -46,10 +43,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap">
+        <ion-button>
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -64,10 +60,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render block button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -78,10 +73,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render block button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="block">
+        <ion-button expand="block">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -96,10 +90,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render full button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `,
         config
       );
@@ -110,10 +103,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render full button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
-        <ion-button class="ion-text-wrap" expand="full">
+        <ion-button expand="full">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -128,11 +120,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render an item button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-item>
-          <ion-button class="ion-text-wrap" slot="end">
+          <ion-button slot="end">
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-item>
@@ -146,11 +137,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render an item button with long text and icons', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-item>
-          <ion-button class="ion-text-wrap" slot="end">
+          <ion-button slot="end">
             <ion-icon slot="start" name="heart"></ion-icon>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             <ion-icon slot="end" name="star"></ion-icon>
@@ -166,12 +156,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render a list header button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-list-header>
           <ion-label>List Header</ion-label>
-          <ion-button class="ion-text-wrap">
+          <ion-button>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-list-header>
@@ -185,12 +174,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
 
     test('should render a toolbar button with long text', async ({ page }) => {
-      // TODO(FW-4599): remove ion-text-wrap class
       await page.setContent(
         `
         <ion-toolbar>
           <ion-buttons slot="end">
-            <ion-button class="ion-text-wrap">
+            <ion-button>
               This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             </ion-button>
           </ion-buttons>

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);
 

core/src/components/datetime-button/datetime-button.tsx

@@ -6,7 +6,7 @@ import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import type { DatetimePresentation } from '../datetime/datetime-interface';
+import type { DatetimePresentation, DatetimeValue } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
 import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
 import { getHourCycle } from '../datetime/utils/helpers';
@@ -172,7 +172,7 @@ export class DatetimeButton implements ComponentInterface {
    * can work with an array internally and not need
    * to keep checking if the datetime value is `string` or `string[]`.
    */
-  private getParsedDateValues = (value?: string[] | string | null): string[] => {
+  private getParsedDateValues = (value?: DatetimeValue): string[] => {
     if (value === undefined || value === null) {
       return [];
     }
@@ -181,7 +181,11 @@ export class DatetimeButton implements ComponentInterface {
       return value;
     }
 
-    return [value];
+    if (typeof value === 'string') {
+      return [value];
+    }
+
+    return [value.start, value.end];
   };
 
   /**

core/src/components/datetime/datetime-interface.ts

@@ -1,5 +1,5 @@
 export interface DatetimeChangeEventDetail {
-  value?: string | string[] | null;
+  value?: DatetimeValue;
 }
 
 export interface DatetimeCustomEvent extends CustomEvent {
@@ -17,6 +17,11 @@ export interface DatetimeParts {
   ampm?: 'am' | 'pm';
 }
 
+export interface DatetimeRangeParts {
+  start: DatetimeParts;
+  end: DatetimeParts;
+}
+
 export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
 
 export type TitleSelectedDatesFormatter = (selectedDates: string[]) => string;
@@ -36,3 +41,9 @@ export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
 export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
 
 export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';
+
+export type DatetimeRangeValue = { start: string; end: string };
+
+export type DatetimeMultipleValue = string[];
+
+export type DatetimeValue = string | null | DatetimeMultipleValue | DatetimeRangeValue;

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

@@ -5,6 +5,7 @@
 :host {
   --background: var(--ion-color-light, #ffffff);
   --background-rgb: var(--ion-color-light-rgb);
+  --range-background: #{current-color(base, 0.1)};
   --title-color: #{$text-color-step-400};
 }
 
@@ -34,16 +35,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);
 }
@@ -174,7 +183,11 @@
  * The second set of @support checks account for all other browsers that
  * do not support mod() yet.
  */
-@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))) {
+@supports (
+    (border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and
+      (not (contain-intrinsic-size: none))
+  )
+  or (not (border-radius: mod(1px, 1px))) {
   .calendar-days-of-week .day-of-week {
     width: auto;
     height: auto;
@@ -190,7 +203,6 @@
 // Calendar / Body
 // -----------------------------------
 :host .calendar-body .calendar-month .calendar-month-grid {
-
   /**
    * We need to apply the padding to
    * each month grid item otherwise
@@ -198,7 +210,12 @@
    * this padding a snapping point if applied
    * on .calendar-month
    */
-  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
+  @include padding(
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5
+  );
 
   align-items: center;
 
@@ -206,13 +223,13 @@
 }
 
 :host .calendar-day-wrapper {
-  @include padding(4px);
+  @include padding(2px);
 
   // This is required so that the calendar day wrapper
   // will collapse instead of expanding to fill the button
   height: 0;
 
-  min-height: dynamic-font(16px);
+  min-height: dynamic-font(35px);
 }
 
 :host .calendar-day {
@@ -270,7 +287,12 @@
 // Footer
 // -----------------------------------
 :host .datetime-buttons {
-  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
+  @include padding(
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5
+  );
 
   border-top: $datetime-ios-border-color;
 }
@@ -286,3 +308,51 @@
 :host .datetime-action-buttons {
   width: 100%;
 }
+
+// Range Selection
+// -----------------------------------
+
+.calendar-day-in-range.calendar-day-wrapper:not(.calendar-day-wrapper-padding) {
+  position: relative;
+
+  &:not(.calendar-day-range-start):not(.calendar-day-range-end) {
+    background: var(--range-background);
+  }
+
+  &.calendar-day-range-start .calendar-day,
+  &.calendar-day-range-end .calendar-day {
+    background: var(--ion-color-base);
+
+    color: var(--ion-color-contrast);
+
+    z-index: 1;
+  }
+
+  &.calendar-day-range-start:not(.calendar-day-range-end)::after,
+  &.calendar-day-range-end:not(.calendar-day-range-start)::before {
+    position: absolute;
+
+    width: 50%;
+    height: 100%;
+
+    content: " ";
+
+    .calendar-day {
+      background: var(--ion-color-base);
+
+      color: var(--ion-color-contrast);
+    }
+  }
+
+  &.calendar-day-range-start::after {
+    @include position(null, 0, null, null);
+
+    background: var(--range-background);
+  }
+
+  &.calendar-day-range-end::before {
+    @include position(null, null, null, 0);
+
+    background: var(--range-background);
+  }
+}

core/src/components/datetime/datetime.md.scss

@@ -4,13 +4,19 @@
 
 :host {
   --background: var(--ion-color-step-100, #ffffff);
+  --range-background: #{current-color(base, 0.1)};
   --title-color: #{current-color(contrast)};
 }
 
 // Header
 // -----------------------------------
 :host .datetime-header {
-  @include padding($datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding);
+  @include padding(
+    $datetime-md-header-padding,
+    $datetime-md-header-padding,
+    $datetime-md-header-padding,
+    $datetime-md-header-padding
+  );
 
   background: current-color(base);
   color: var(--title-color);
@@ -30,15 +36,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 +96,6 @@
    * if necessary.
    */
   grid-template-rows: repeat(6, 1fr);
-
 }
 
 // Individual day button in month
@@ -136,3 +167,39 @@
 
   justify-content: flex-end;
 }
+
+// Range Selection
+// -----------------------------------
+
+.calendar-day-in-range.calendar-day-wrapper:not(.calendar-day-wrapper-padding) {
+  position: relative;
+
+  &:not(.calendar-day-range-start):not(.calendar-day-range-end) {
+    background: var(--range-background);
+  }
+
+  &.calendar-day-range-start .calendar-day,
+  &.calendar-day-range-end .calendar-day {
+    z-index: 1;
+  }
+
+  &.calendar-day-range-start:not(.calendar-day-range-end)::after,
+  &.calendar-day-range-end:not(.calendar-day-range-start)::before {
+    position: absolute;
+
+    width: 50%;
+    height: 100%;
+
+    background: var(--range-background);
+
+    content: " ";
+  }
+
+  &.calendar-day-range-start::after {
+    @include position(null, 0, null, null);
+  }
+
+  &.calendar-day-range-end::before {
+    @include position(null, null, null, 0);
+  }
+}

core/src/components/datetime/datetime.scss

@@ -11,9 +11,13 @@
    *
    * @prop --wheel-highlight-background: The background of the highlight under the selected
    * item when using a wheel style layout, or in the month/year picker for grid style layouts.
+   * @prop --wheel-highlight-border-radius: The border radius of the highlight under the selected
+   * item when using a wheel style layout, or in the month/year picker for grid style layouts.
    * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
    * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
    * be in RGB format, e.g. `255, 255, 255`.
+   *
+   * @prop --range-background: The background of the range track between a start and end date.
    */
 
   display: flex;
@@ -25,19 +29,6 @@
   overflow: hidden;
 }
 
-/**
- * When using the wheel picker to switch
- * between months, sometimes the allowed
- * dates may be filtered. As a result, it
- * is possible to get a layout shift as
- * the picker column will shrink to fit the
- * widest item in the column. Setting a minimum
- * width avoids this layout shifting.
- */
-ion-picker-column-internal {
-  min-width: 26px;
-}
-
 :host(.datetime-size-fixed) {
   width: auto;
   height: auto;
@@ -48,7 +39,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) {
@@ -90,9 +81,9 @@ ion-picker-column-internal {
  * the text alignment too.
  */
 :host .wheel-order-year-first .day-column {
- order: 3;
+  order: 3;
 
- text-align: end;
+  text-align: end;
 }
 
 :host .wheel-order-year-first .month-column {
@@ -172,7 +163,8 @@ ion-picker-column-internal {
  * sufficient to resolve the issue mentioned above, which
  * is why we do another set of @supports checks.
  */
-@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
+@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or
+  ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
   :host(.show-month-and-year) .calendar-next-prev,
   :host(.show-month-and-year) .calendar-days-of-week,
   :host(.show-month-and-year) .calendar-body,
@@ -267,27 +259,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
@@ -311,7 +284,6 @@ ion-picker-column-internal {
 // Calendar / Body
 // -----------------------------------
 :host .calendar-body {
-
   /**
    * Show all calendar months inline
    * and allow them to take up 100% of
@@ -496,6 +468,64 @@ 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;
+}
+
+// Picker Custom Variables
+// -----------------------------------
+
+ion-picker {
+  --highlight-background: var(--wheel-highlight-background);
+  --highlight-border-radius: var(--wheel-highlight-border-radius);
+  --fade-background-rgb: var(--wheel-fade-background-rgb);
 }

core/src/components/datetime/datetime.tsx

@@ -9,7 +9,6 @@ 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 {
   DatetimePresentation,
@@ -20,8 +19,11 @@ import type {
   DatetimeHighlightStyle,
   DatetimeHighlightCallback,
   DatetimeHourCycle,
+  DatetimeValue,
+  DatetimeRangeParts,
 } from './datetime-interface';
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
+import type { WheelColumnOption } from './utils/data';
 import {
   generateMonths,
   getDaysOfMonth,
@@ -63,6 +65,9 @@ import {
 import {
   getCalendarDayState,
   getHighlightStyles,
+  isDateInRange,
+  isDateRangeEnd,
+  isDateRangeStart,
   isDayDisabled,
   isMonthDisabled,
   isNextMonthDisabled,
@@ -104,7 +109,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[];
@@ -128,7 +132,7 @@ export class Datetime implements ComponentInterface {
 
   @State() showMonthAndYear = false;
 
-  @State() activeParts: DatetimeParts | DatetimeParts[] = [];
+  @State() activeParts: DatetimeParts | DatetimeParts[] | DatetimeRangeParts = [];
 
   @State() workingParts: DatetimeParts = {
     month: 5,
@@ -350,6 +354,12 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() multiple = false;
 
+  /**
+   * If `true`, a single range of dates can be selected at once.
+   * Only applies to `presentation="date"` and `preferWheel="false"`.
+   */
+  @Prop() range = false;
+
   /**
    * Used to apply custom text and background colors to specific dates.
    *
@@ -365,7 +375,7 @@ export class Datetime implements ComponentInterface {
    * The value of the datetime as a valid ISO 8601 datetime string.
    * This should be an array of strings only when `multiple="true"`.
    */
-  @Prop({ mutable: true }) value?: string | string[] | null;
+  @Prop({ mutable: true }) value?: DatetimeValue;
 
   /**
    * Update the datetime value when the value changes
@@ -546,8 +556,8 @@ export class Datetime implements ComponentInterface {
   }
 
   private warnIfIncorrectValueUsage = () => {
-    const { multiple, value } = this;
-    if (!multiple && Array.isArray(value)) {
+    const { multiple, value, range } = this;
+    if (!multiple && !range && Array.isArray(value)) {
       /**
        * We do some processing on the `value` array so
        * that it looks more like an array when logged to
@@ -607,16 +617,21 @@ export class Datetime implements ComponentInterface {
     };
   };
 
+  // TODO - I'm not happy with this change/API.
+  // But we need to avoid calling confirm()
+  // Otherwise changing the month/year in the wheel picker
+  // will update the value of the range selection.
   private setActiveParts = (parts: DatetimeParts, removeDate = false) => {
-    /** if the datetime component is in readonly mode,
+    /**
+     * If the datetime component is in readonly mode,
      * allow browsing of the calendar without changing
-     * the set value
+     * the set value.
      */
     if (this.readonly) {
       return;
     }
 
-    const { multiple, minParts, maxParts, activeParts } = this;
+    const { multiple, minParts, maxParts, activeParts, range } = this;
 
     /**
      * When setting the active parts, it is possible
@@ -632,12 +647,47 @@ export class Datetime implements ComponentInterface {
     this.setWorkingParts(validatedParts);
 
     if (multiple) {
-      const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+      const activePartsArray = Array.isArray(activeParts) ? activeParts : ([activeParts] as DatetimeParts[]);
       if (removeDate) {
         this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
       } else {
         this.activeParts = [...activePartsArray, validatedParts];
       }
+    } else if (range) {
+      if (Array.isArray(this.activeParts)) {
+        /**
+         * If the active parts is an array, then we need to determine which part of the range
+         * we are setting. We can do this by comparing if the validatedParts is before or after
+         * the first active part. Users can select the same day as the start or end of the range.
+         */
+        const [start, end] = this.activeParts;
+        if (start !== undefined && isBefore(validatedParts, start)) {
+          this.activeParts = {
+            start: validatedParts,
+            end,
+          };
+        } else if (end !== undefined && isAfter(validatedParts, end)) {
+          this.activeParts = {
+            start,
+            end: validatedParts,
+          };
+        } else {
+          this.activeParts = {
+            start: validatedParts,
+            end: validatedParts,
+          };
+        }
+      } else {
+        /**
+         * If the activeParts is not an array, that means they have not made a selection yet
+         * and that the current activeParts is just the default value.
+         * We can set the start and end range to the same value.
+         */
+        this.activeParts = {
+          start: validatedParts,
+          end: validatedParts,
+        };
+      }
     } else {
       this.activeParts = {
         ...validatedParts,
@@ -1203,7 +1253,7 @@ export class Datetime implements ComponentInterface {
     });
   }
 
-  private processValue = (value?: string | string[] | null) => {
+  private processValue = (value?: DatetimeValue) => {
     const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
     const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
 
@@ -1333,7 +1383,7 @@ export class Datetime implements ComponentInterface {
   };
 
   componentWillLoad() {
-    const { el, highlightedDates, multiple, presentation, preferWheel } = this;
+    const { el, highlightedDates, multiple, presentation, preferWheel, range } = this;
 
     if (multiple) {
       if (presentation !== 'date') {
@@ -1358,6 +1408,18 @@ export class Datetime implements ComponentInterface {
       }
     }
 
+    if (range) {
+      if (presentation !== 'date') {
+        printIonWarning('The range property is only supported with presentation="date".', el);
+      }
+      if (multiple) {
+        printIonWarning('The range property cannot be used with multiple="true".', el);
+      }
+      if (preferWheel) {
+        printIonWarning('The range property is not supported with preferWheel="true".', el);
+      }
+    }
+
     const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
     const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
     const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -1547,7 +1609,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) {
@@ -1559,7 +1621,7 @@ export class Datetime implements ComponentInterface {
   private renderCombinedDatePickerColumn() {
     const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
 
     /**
      * By default, generate a range of 3 months:
@@ -1633,11 +1695,10 @@ 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}
-        items={items}
         value={todayString}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
@@ -1667,7 +1728,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {items.map((item) => (
+          <ion-picker-column-option
+            part={item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={item.value}
+            disabled={item.disabled}
+            value={item.value}
+          >
+            {item.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
 
@@ -1743,22 +1815,22 @@ export class Datetime implements ComponentInterface {
     return renderArray;
   }
 
-  private renderDayPickerColumn(days: PickerColumnItem[]) {
+  private renderDayPickerColumn(days: WheelColumnOption[]) {
     if (days.length === 0) {
       return [];
     }
 
     const { disabled, workingParts } = this;
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
+    const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
 
     return (
-      <ion-picker-column-internal
+      <ion-picker-column
         class="day-column"
         color={this.color}
         disabled={disabled}
-        items={days}
-        value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
+        value={pickerColumnValue}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
           // Due to a Safari 14 issue we need to destroy
@@ -1784,25 +1856,35 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {days.map((day) => (
+          <ion-picker-column-option
+            part={day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={day.value}
+            disabled={day.disabled}
+            value={day.value}
+          >
+            {day.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
 
-  private renderMonthPickerColumn(months: PickerColumnItem[]) {
+  private renderMonthPickerColumn(months: WheelColumnOption[]) {
     if (months.length === 0) {
       return [];
     }
 
     const { disabled, workingParts } = this;
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
 
     return (
-      <ion-picker-column-internal
+      <ion-picker-column
         class="month-column"
         color={this.color}
         disabled={disabled}
-        items={months}
         value={workingParts.month}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
@@ -1829,24 +1911,34 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {months.map((month) => (
+          <ion-picker-column-option
+            part={month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={month.value}
+            disabled={month.disabled}
+            value={month.value}
+          >
+            {month.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
-  private renderYearPickerColumn(years: PickerColumnItem[]) {
+  private renderYearPickerColumn(years: WheelColumnOption[]) {
     if (years.length === 0) {
       return [];
     }
 
     const { disabled, workingParts } = this;
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
 
     return (
-      <ion-picker-column-internal
+      <ion-picker-column
         class="year-column"
         color={this.color}
         disabled={disabled}
-        items={years}
         value={workingParts.year}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
@@ -1873,7 +1965,18 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {years.map((year) => (
+          <ion-picker-column-option
+            part={year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={year.value}
+            disabled={year.disabled}
+            value={year.value}
+          >
+            {year.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
   private renderTimePickerColumns(forcePresentation: string) {
@@ -1910,18 +2013,17 @@ export class Datetime implements ComponentInterface {
     ];
   }
 
-  private renderHourPickerColumn(hoursData: PickerColumnItem[]) {
+  private renderHourPickerColumn(hoursData: WheelColumnOption[]) {
     const { disabled, workingParts } = this;
     if (hoursData.length === 0) return [];
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
 
     return (
-      <ion-picker-column-internal
+      <ion-picker-column
         color={this.color}
         disabled={disabled}
         value={activePart.hour}
-        items={hoursData}
         numericInput
         onIonChange={(ev: CustomEvent) => {
           this.setWorkingParts({
@@ -1936,21 +2038,31 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {hoursData.map((hour) => (
+          <ion-picker-column-option
+            part={hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={hour.value}
+            disabled={hour.disabled}
+            value={hour.value}
+          >
+            {hour.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
-  private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
+  private renderMinutePickerColumn(minutesData: WheelColumnOption[]) {
     const { disabled, workingParts } = this;
     if (minutesData.length === 0) return [];
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
 
     return (
-      <ion-picker-column-internal
+      <ion-picker-column
         color={this.color}
         disabled={disabled}
         value={activePart.minute}
-        items={minutesData}
         numericInput
         onIonChange={(ev: CustomEvent) => {
           this.setWorkingParts({
@@ -1965,25 +2077,35 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {minutesData.map((minute) => (
+          <ion-picker-column-option
+            part={minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
+            key={minute.value}
+            disabled={minute.disabled}
+            value={minute.value}
+          >
+            {minute.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
-  private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
+  private renderDayPeriodPickerColumn(dayPeriodData: WheelColumnOption[]) {
     const { disabled, workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
 
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
     const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
 
     return (
-      <ion-picker-column-internal
+      <ion-picker-column
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
         disabled={disabled}
         value={activePart.ampm}
-        items={dayPeriodData}
         onIonChange={(ev: CustomEvent) => {
           const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
 
@@ -2001,7 +2123,20 @@ export class Datetime implements ComponentInterface {
 
           ev.stopPropagation();
         }}
-      ></ion-picker-column-internal>
+      >
+        {dayPeriodData.map((dayPeriod) => (
+          <ion-picker-column-option
+            part={
+              dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART
+            }
+            key={dayPeriod.value}
+            disabled={dayPeriod.disabled}
+            value={dayPeriod.value}
+          >
+            {dayPeriod.text}
+          </ion-picker-column-option>
+        ))}
+      </ion-picker-column>
     );
   }
 
@@ -2039,35 +2174,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"
@@ -2075,8 +2193,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">
@@ -2155,7 +2274,7 @@ export class Datetime implements ComponentInterface {
         <div class="calendar-month-grid">
           {getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
             const { day, dayOfWeek } = dateObject;
-            const { el, highlightedDates, isDateEnabled, multiple } = this;
+            const { el, highlightedDates, isDateEnabled, multiple, range, activeParts } = this;
             const referenceParts = { month, day, year };
             const isCalendarPadding = day === null;
             const {
@@ -2217,16 +2336,30 @@ export class Datetime implements ComponentInterface {
 
             let dateParts = undefined;
 
+            const inRange = range && isDateInRange(referenceParts, activeParts as DatetimeRangeParts);
+            const isRangeStart = range && isDateRangeStart(referenceParts, activeParts as DatetimeRangeParts);
+            const isRangeEnd = range && isDateRangeEnd(referenceParts, activeParts as DatetimeRangeParts);
+
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
             if (!isCalendarPadding) {
               dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
                 isCalDayDisabled ? ' disabled' : ''
+              }${inRange ? ' range-selection' : ''}${isRangeStart ? ' range-start' : ''}${
+                isRangeEnd ? ' range-end' : ''
               }`;
             }
 
             return (
-              <div class="calendar-day-wrapper">
+              <div
+                class={{
+                  'calendar-day-wrapper': true,
+                  'calendar-day-wrapper-padding': isCalendarPadding,
+                  'calendar-day-in-range': inRange,
+                  'calendar-day-range-start': isRangeStart,
+                  'calendar-day-range-end': isRangeEnd,
+                }}
+              >
                 <button
                   // We need to use !important for the inline styles here because
                   // otherwise the CSS shadow parts will override these styles.
@@ -2274,8 +2407,8 @@ export class Datetime implements ComponentInterface {
                       year,
                     });
 
-                    // multiple only needs date info, so we can wipe out other fields like time
-                    if (multiple) {
+                    // multiple and range only needs date info, so we can wipe out other fields like time
+                    if (multiple || range) {
                       this.setActiveParts(
                         {
                           month,
@@ -2332,7 +2465,7 @@ export class Datetime implements ComponentInterface {
   private renderTimeOverlay() {
     const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
-    const activePart = this.getActivePartsWithFallback();
+    const activePart = this.getActivePartsWithFallback() as DatetimeParts;
 
     return [
       <div class="time-header">{this.renderTimeLabel()}</div>,
@@ -2381,7 +2514,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());
         }}
@@ -2415,7 +2548,7 @@ export class Datetime implements ComponentInterface {
       }
     } else {
       // for exactly 1 day selected (multiple set or not), show a formatted version of that
-      headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback());
+      headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback() as DatetimeParts); // TODO verify if this can show with range enabled
     }
 
     return headerText;
@@ -2565,3 +2698,5 @@ export class Datetime implements ComponentInterface {
 }
 
 let datetimeIds = 0;
+const WHEEL_ITEM_PART = 'wheel-item';
+const WHEEL_ITEM_ACTIVE_PART = `active`;

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)');
 

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');
     });

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

@@ -526,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`));
+    });
+  });
 });

core/src/components/datetime/test/custom/index.html

@@ -51,29 +51,26 @@
         background-color: rgb(248, 215, 255);
       }
 
-      /*
-        The second selectors that target ion-picker(-column)-internal
-        directly are for styling the time picker. This is currently
-        undocumented usage.
-      */
-
-      .custom-grid-wheel,
-      ion-picker-internal {
+      .custom-grid-wheel {
         --wheel-highlight-background: rgb(218, 216, 255);
+        --wheel-highlight-border-radius: 16px;
         --wheel-fade-background-rgb: 245, 235, 247;
       }
 
-      ion-picker-internal {
+      ion-picker {
+        --highlight-background: rgb(218, 216, 255);
+        --highlight-border-radius: 16px;
+        --fade-background-rgb: 245, 235, 247;
+
         background-color: rgb(245, 235, 247);
       }
-
       .custom-grid-wheel::part(wheel-item),
-      ion-picker-column-internal::part(wheel-item) {
+      ion-picker-column-option {
         color: rgb(255, 134, 154);
       }
 
       .custom-grid-wheel::part(wheel-item active),
-      ion-picker-column-internal::part(wheel-item active) {
+      ion-picker-column-option.option-active {
         color: rgb(128, 30, 171);
       }
 

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

@@ -18,7 +18,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       page,
     }) => {
       const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
-      const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+      const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
 
       await expect(monthYearToggle).toContainText('January 2022');
 
@@ -34,7 +34,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
     test('should adjust the selected day when moving to a month with a different number of days', async ({ page }) => {
       const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
-      const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+      const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
       const datetime = page.locator('ion-datetime');
       const ionChange = await page.spyOnEvent('ionChange');
 

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);
 

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

@@ -107,14 +107,13 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test('should correctly localize year column data', async ({ page }) => {
       await page.setContent(
         `
-        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
+        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01" max="2022" min="2022"></ion-datetime>
       `,
         config
       );
       await page.waitForSelector('.datetime-ready');
 
-      const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
-
+      const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0);
       await expect(datetimeYear).toHaveText('٢٠٢٢');
     });
   });

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) ion-picker-column-option');
+        const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) ion-picker-column-option');
 
         expect(await hours.count()).toBe(12);
         expect(await minutes.count()).toBe(60);
@@ -218,9 +214,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         config
       );
 
-      const hourPickerItems = page.locator(
-        'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'
-      );
+      const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type ion-picker-column-option');
       await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']);
     });
 
@@ -242,9 +236,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         config
       );
 
-      const hourPickerItems = page.locator(
-        'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'
-      );
+      const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type ion-picker-column-option');
       await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
     });
 
@@ -308,7 +300,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         );
 
         const datetime = page.locator('ion-datetime');
-        const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+        const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
         const ionChange = await page.spyOnEvent('ionChange');
 
         await page.waitForSelector('.datetime-ready');
@@ -360,9 +352,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) ion-picker-column-option');
 
         await expect(await hours.count()).toBe(4);
       });

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();

core/src/components/datetime/test/position/index.html

@@ -25,7 +25,7 @@
       <ion-content class="ion-padding">
         <ion-button id="open-datetime" onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
         <ion-popover class="datetime-popover" id="default-popover">
-          <ion-datetime value="2022-05-03"></ion-datetime>
+          <ion-datetime value="2022-05-03T14:23:00.000Z"></ion-datetime>
         </ion-popover>
       </ion-content>
 

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

@@ -82,7 +82,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
+        const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
         expect(await dayValues.count()).toEqual(27);
       });
       test('should respect the max bounds', async ({ page }) => {
@@ -95,7 +95,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
+        const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
         expect(await dayValues.count()).toEqual(1);
       });
       test('should respect isDateEnabled preference', async ({ page }) => {
@@ -118,9 +118,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const disabledMonths = page.locator('.month-column .picker-item[disabled]');
-        const disabledYears = page.locator('.year-column .picker-item[disabled]');
-        const disabledDays = page.locator('.day-column .picker-item[disabled]');
+        const disabledMonths = page.locator('.month-column ion-picker-column-option.option-disabled');
+        const disabledYears = page.locator('.year-column ion-picker-column-option.option-disabled');
+        const disabledDays = page.locator('.day-column ion-picker-column-option.option-disabled');
 
         expect(await disabledMonths.count()).toBe(0);
         expect(await disabledYears.count()).toBe(0);
@@ -143,9 +143,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
-        const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
-        const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
+        const monthValues = page.locator('.month-column ion-picker-column-option');
+        const yearValues = page.locator('.year-column ion-picker-column-option');
+        const dayValues = page.locator('.day-column ion-picker-column-option');
 
         expect(await monthValues.count()).toBe(2);
         expect(await yearValues.count()).toBe(3);
@@ -178,7 +178,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const ionChange = await page.spyOnEvent('ionChange');
-        const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+        const monthValues = page.locator('.month-column ion-picker-column-option');
 
         // Change month value
         await monthValues.nth(0).click();
@@ -212,7 +212,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const ionChange = await page.spyOnEvent('ionChange');
-        const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
+        const dayValues = page.locator('.day-column ion-picker-column-option');
 
         // Change day value
         await dayValues.nth(0).click();
@@ -233,7 +233,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const ionChange = await page.spyOnEvent('ionChange');
-        const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+        const yearValues = page.locator('.year-column ion-picker-column-option');
 
         /**
          * Change year value
@@ -259,9 +259,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
         await page.waitForChanges();
 
-        const selectedMonth = datetime.locator('.month-column .picker-item-active');
-        const selectedDay = datetime.locator('.day-column .picker-item-active');
-        const selectedYear = datetime.locator('.year-column .picker-item-active');
+        const selectedMonth = datetime.locator('.month-column ion-picker-column-option.option-active');
+        const selectedDay = datetime.locator('.day-column ion-picker-column-option.option-active');
+        const selectedYear = datetime.locator('.year-column ion-picker-column-option.option-active');
 
         await expect(selectedMonth).toHaveText(/May/);
         await expect(selectedDay).toHaveText(/25/);
@@ -287,9 +287,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
           await page.waitForSelector('.datetime-ready');
 
-          const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
-          const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
-
+          const monthValues = page.locator('.month-column ion-picker-column-option');
+          const dayValues = page.locator('.day-column ion-picker-column-option');
           await expect(monthValues).toHaveText(['1月', '2月', '3月']);
           await expect(dayValues).toHaveText(['1日', '2日', '3日']);
         });
@@ -308,7 +307,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 +328,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/);
@@ -348,7 +347,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+        const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
         expect(await dayValues.count()).toEqual(57);
       });
       test('should respect the max bounds', async ({ page }) => {
@@ -361,7 +360,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+        const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
         expect(await dayValues.count()).toEqual(41);
       });
       test('should respect isDateEnabled preference', async ({ page }) => {
@@ -384,7 +383,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const disabledDates = page.locator('.date-column .picker-item[disabled]');
+        const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
 
         expect(await disabledDates.count()).toBe(44);
       });
@@ -405,7 +404,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dateValues = page.locator('.date-column ion-picker-column-option');
 
         expect(await dateValues.count()).toBe(5);
       });
@@ -426,8 +425,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
-
+        const dateValues = page.locator('.date-column ion-picker-column-option');
         await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
       });
       test('should respect min and max bounds even across years', async ({ page }) => {
@@ -447,18 +445,19 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const dateColumn = page.locator('.date-column');
-        const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
+        const dateColumnScrollEl = dateColumn.locator('.picker-opts');
+        const dateValues = dateColumn.locator('ion-picker-column-option');
 
         expect(await dateValues.count()).toBe(90);
 
         /**
          * Select 1st item to change the dates rendered
          */
-        await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-        await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
+        await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
+        await dateColumnScrollEl.evaluate((el: HTMLElement) => (el.scrollTop = 0));
         await page.waitForChanges();
 
-        await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
+        await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
       });
       test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
         await page.setContent(
@@ -476,7 +475,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dayValues = page.locator('.date-column ion-picker-column-option');
 
         expect(await dayValues.count()).toBe(92);
       });
@@ -496,7 +495,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dayValues = page.locator('.date-column ion-picker-column-option');
 
         expect(await dayValues.count()).toBe(15);
       });
@@ -514,7 +513,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const ionChange = await page.spyOnEvent('ionChange');
-        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dayValues = page.locator('.date-column ion-picker-column-option');
 
         // Change day/month value
         await dayValues.nth(0).click();
@@ -533,7 +532,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+        const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
         expect(await dayValues.count()).toEqual(57);
       });
       test('should respect the max bounds', async ({ page }) => {
@@ -546,7 +545,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+        const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
         expect(await dayValues.count()).toEqual(41);
       });
       test('should respect isDateEnabled preference', async ({ page }) => {
@@ -569,7 +568,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const disabledDates = page.locator('.date-column .picker-item[disabled]');
+        const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
 
         expect(await disabledDates.count()).toBe(44);
       });
@@ -590,7 +589,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dateValues = page.locator('.date-column ion-picker-column-option');
 
         expect(await dateValues.count()).toBe(5);
       });
@@ -611,7 +610,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dateValues = page.locator('.date-column ion-picker-column-option');
 
         await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
       });
@@ -632,18 +631,19 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const dateColumn = page.locator('.date-column');
-        const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
+        const dateColumnScrollEl = dateColumn.locator('.picker-opts');
+        const dateValues = dateColumn.locator('ion-picker-column-option');
 
         expect(await dateValues.count()).toBe(90);
 
         /**
          * Select 1st item to change the dates rendered
          */
-        await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-        await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
+        await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
+        await dateColumnScrollEl.evaluate((el: HTMLElement) => (el.scrollTop = 0));
         await page.waitForChanges();
 
-        await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
+        await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
       });
       test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
         await page.setContent(
@@ -661,7 +661,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dayValues = page.locator('.date-column ion-picker-column-option');
 
         expect(await dayValues.count()).toBe(92);
       });
@@ -681,7 +681,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await page.waitForSelector('.datetime-ready');
 
-        const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+        const dayValues = page.locator('.date-column ion-picker-column-option');
 
         expect(await dayValues.count()).toBe(15);
       });

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);

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

@@ -0,0 +1,68 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: range'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime presentation="date" range="true"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = {
+            start: '2023-01-09',
+            end:'2023-01-16'
+          };
+        </script>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      await expect(datetime).toHaveScreenshot(screenshot('datetime-range'));
+    });
+  });
+});
+
+configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: range: styling api'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+      <style>
+        ion-datetime {
+          --range-background: rgb(235, 68, 90, 0.1);
+        }
+        ion-datetime::part(range-start),
+        ion-datetime::part(range-end) {
+          background: rgb(235, 68, 90);
+        }
+        ion-datetime::part(range-start) {
+          border-radius: 32px 0 0 32px;
+        }
+        ion-datetime::part(range-end) {
+          border-radius: 0 32px 32px 0;
+        }
+        ion-datetime::part(range-start range-end) {
+          border-radius: 50%;
+        }
+      </style>
+      <ion-datetime presentation="date" range="true"></ion-datetime>
+      <script>
+        const datetime = document.querySelector('ion-datetime');
+        datetime.value = {
+          start: '2023-01-09',
+          end:'2023-01-16'
+        };
+      </script>
+    `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      await expect(datetime).toHaveScreenshot(screenshot('datetime-range-styling-api'));
+    });
+  });
+});

core/src/components/datetime/test/range/index.html

@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Datetime - Range</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      .options-popover {
+        --width: 300px;
+      }
+
+      ion-modal.ios,
+      ion-popover.datetime-popover.ios {
+        --width: 350px;
+        --height: 420px;
+      }
+
+      ion-modal.md,
+      ion-popover.datetime-popover.md {
+        --width: 350px;
+      }
+
+      ion-datetime {
+        width: 350px;
+      }
+
+      body.dark {
+        --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.dark {
+        --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-item-background: #000000;
+
+        --ion-card-background: #1c1c1d;
+      }
+
+      .ios body.dark ion-modal {
+        --ion-background-color: var(--ion-color-step-100);
+        --ion-toolbar-background: var(--ion-color-step-150);
+        --ion-toolbar-border-color: var(--ion-color-step-250);
+        --ion-item-background: var(--ion-color-step-150);
+      }
+
+      /*
+       * Material Design Dark Theme
+       * -------------------------------------------
+       */
+
+      .md body.dark {
+        --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;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Basic</ion-title>
+          <ion-buttons slot="end">
+            <ion-button id="popover-trigger">Options</ion-button>
+          </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item>
+                <ion-label>Dark Mode</ion-label>
+                <ion-checkbox slot="end"></ion-checkbox>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=ios">
+                <ion-label>iOS Mode</ion-label>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=md">
+                <ion-label>MD Mode</ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Show Default Title</ion-label>
+                <ion-toggle id="titleToggle"></ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Show Default Buttons</ion-label>
+                <ion-toggle id="buttonsToggle"></ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Locale</ion-label>
+                <ion-input placeholder="default" id="locale"></ion-input>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Color</ion-label>
+                <ion-select id="color" value="primary">
+                  <ion-select-option value="primary">Primary</ion-select-option>
+                  <ion-select-option value="secondary">Secondary</ion-select-option>
+                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
+                  <ion-select-option value="success">Success</ion-select-option>
+                  <ion-select-option value="warning">Warning</ion-select-option>
+                  <ion-select-option value="danger">Danger</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Date Range</h2>
+            <ion-datetime presentation="date" id="date-range" range="true"></ion-datetime>
+          </div>
+        </div>
+      </ion-content>
+      <script>
+        const datetime = document.querySelector('#date-range');
+        datetime.addEventListener('ionChange', (event) => {
+          console.log('Listen ionChange', event.detail);
+        });
+
+        datetime.value = {
+          start: '2024-01-05',
+          end: '2024-02-10',
+        };
+      </script>
+    </ion-app>
+  </body>
+</html>

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

@@ -49,7 +49,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
 
       await calendarMonthYear.click();
       await page.waitForChanges();
-      await page.locator('.month-column .picker-item[data-value="3"]').click();
+      await page.locator('.month-column ion-picker-column-option').nth(2).click();
       await page.waitForChanges();
       await expect(calendarMonthYear).toHaveText('March 2022');
 
@@ -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);
@@ -78,7 +78,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
       await page.keyboard.press('Enter');
       await page.waitForChanges();
 
-      const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
+      const marchPickerItem = page.locator('.month-column ion-picker-column-option').nth(2);
       await expect(marchPickerItem).toBeVisible();
     });
 
@@ -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');

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

@@ -29,7 +29,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+      const items = page.locator('.month-column ion-picker-column-option');
       await expect(items).toHaveText(['May', 'June', 'October']);
     });
     test('should render correct years', async ({ page }) => {
@@ -40,7 +40,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+      const items = page.locator('.year-column ion-picker-column-option');
       await expect(items).toHaveText(['2022', '2021', '2020']);
     });
     test('should render correct hours', async ({ page }) => {
@@ -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 ion-picker-column-option');
       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) ion-picker-column-option');
       await expect(items).toHaveText(['01', '02', '03']);
     });
     test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -93,23 +93,25 @@ 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)'
-      );
-      await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
-      await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
+      const minuteColumn = page.locator('ion-picker-column').nth(1);
+      const minuteItems = minuteColumn.locator('ion-picker-column-option');
 
-      const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
+      await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
+      await expect(minuteColumn).toHaveJSProperty('value', 15);
+
+      const hourColumn = page.locator('ion-picker-column').nth(0);
+      const hourItems = hourColumn.locator('ion-picker-column-option');
       await expect(hourItems).toHaveText(['2']);
-      await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
+      await expect(hourColumn).toHaveJSProperty('value', 2);
 
       /**
        * 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 ampmColumn = page.locator('ion-picker-column').nth(2);
+      const ampmItems = ampmColumn.locator('ion-picker-column-option');
       await expect(ampmItems).toHaveText(['AM', 'PM']);
-      await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
+      await expect(ampmColumn).toHaveJSProperty('value', 'am');
     });
     test('should adjust default parts month for allowed month values', async ({ page }) => {
       /**
@@ -139,9 +141,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await page.waitForSelector('.datetime-ready');
 
-      const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+      const monthItems = page.locator('.month-column ion-picker-column-option');
       await expect(monthItems).toHaveText(['January']);
-      await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
+      await expect(monthItems.nth(0)).toHaveClass(/option-active/);
     });
     test('today date highlight should persist even if disallowed from dayValues', async ({ page }) => {
       /**

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

@@ -1,5 +1,4 @@
 import type { Mode } from '../../../interface';
-import type { PickerColumnItem } from '../../picker-column-internal/picker-column-internal-interfaces';
 import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
 
 import { isAfter, isBefore, isSameDay } from './comparison';
@@ -14,6 +13,12 @@ import {
 import { getNumDaysInMonth, is24Hour, getHourCycle } from './helpers';
 import { getNextMonth, getPreviousMonth, getInternalHourValue } from './manipulation';
 
+export interface WheelColumnOption {
+  text: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
 /**
  * Returns the current date as
  * an ISO string in the user's
@@ -313,7 +318,7 @@ export const getMonthColumnData = (
   formatOptions: Intl.DateTimeFormatOptions = {
     month: 'long',
   }
-): PickerColumnItem[] => {
+): WheelColumnOption[] => {
   const { year } = refParts;
   const months = [];
 
@@ -380,7 +385,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,
@@ -391,7 +396,7 @@ export const getDayColumnData = (
   formatOptions: Intl.DateTimeFormatOptions = {
     day: 'numeric',
   }
-): PickerColumnItem[] => {
+): WheelColumnOption[] => {
   const { month, year } = refParts;
   const days = [];
 
@@ -438,7 +443,7 @@ export const getYearColumnData = (
   minParts?: DatetimeParts,
   maxParts?: DatetimeParts,
   yearValues?: number[]
-): PickerColumnItem[] => {
+): WheelColumnOption[] => {
   let processedYears = [];
   if (yearValues !== undefined) {
     processedYears = yearValues;
@@ -466,7 +471,7 @@ export const getYearColumnData = (
 
 interface CombinedDateColumnData {
   parts: DatetimeParts[];
-  items: PickerColumnItem[];
+  items: WheelColumnOption[];
 }
 
 /**
@@ -495,7 +500,7 @@ export const getCombinedDateColumnData = (
   dayValues?: number[],
   monthValues?: number[]
 ): CombinedDateColumnData => {
-  let items: PickerColumnItem[] = [];
+  let items: WheelColumnOption[] = [];
   let parts: DatetimeParts[] = [];
 
   /**
@@ -528,7 +533,7 @@ export const getCombinedDateColumnData = (
     });
 
     const dateParts: DatetimeParts[] = [];
-    const dateColumnItems: PickerColumnItem[] = [];
+    const dateColumnItems: WheelColumnOption[] = [];
 
     monthDays.forEach((dayObject) => {
       const isToday = isSameDay({ ...referenceMonth, day: dayObject.value as number }, todayParts);
@@ -576,7 +581,7 @@ export const getTimeColumnsData = (
   maxParts?: DatetimeParts,
   allowedHourValues?: number[],
   allowedMinuteValues?: number[]
-): { [key: string]: PickerColumnItem[] } => {
+): { [key: string]: WheelColumnOption[] } => {
   const computedHourCycle = getHourCycle(locale, hourCycle);
   const use24Hour = is24Hour(computedHourCycle);
   const { hours, minutes, am, pm } = generateTime(

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

@@ -1,4 +1,4 @@
-import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
+import type { DatetimeParts, DatetimeHourCycle, DatetimeValue, DatetimeRangeParts } from '../datetime-interface';
 
 import { is24Hour } from './helpers';
 import { convertDataToISO } from './manipulation';
@@ -344,6 +344,28 @@ export const getLocalizedDayPeriod = (locale: string, dayPeriod: 'am' | 'pm' | u
  *
  * @param value The value to format, either an ISO string or an array thereof.
  */
-export const formatValue = (value: string | string[] | null | undefined) => {
-  return Array.isArray(value) ? value.join(',') : value;
+export const formatValue = (value?: DatetimeValue) => {
+  if (Array.isArray(value)) {
+    return value.join(',');
+  }
+  if (typeof value === 'object' && value !== null) {
+    return [value.start, value.end].join(',');
+  }
+  return value;
+};
+
+/**
+ * Takes an incoming active parts object and formats it into an array
+ * of active parts.
+ * @param activeParts The active parts object to format.
+ * @returns Active parts as an array.
+ */
+export const activePartsToArray = (activeParts: DatetimeParts | DatetimeRangeParts | DatetimeParts[]) => {
+  if (Array.isArray(activeParts)) {
+    return activeParts;
+  }
+  if ('start' in activeParts) {
+    return [activeParts.start, activeParts.end];
+  }
+  return [activeParts];
 };