feat(datetime): add shadow parts and CSS variables for styling wheel pickers (#27529)

Issue number: resolves #25945

---------

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

Datetime wheel pickers cannot be styled.

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

Adds styling APIs in accordance with the Wheel Pickers and Time Picker
sections of [this design
doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/datetime/datetime-styling.md).

Shadow parts added:
- `wheel-item`
- `wheel-item active`
- `time-button`
- `time-button active`

CSS properties added:
- `--wheel-highlight-background`
- `--wheel-fade-background-rgb`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

Dev build: `7.0.7-dev.11685554390.10c2ca9b`
Docs PR: ionic-team/ionic-docs#2982

Author: averyjohnston

core/api.txt

@@ -425,6 +425,12 @@ ion-datetime,event,ionFocus,void,true
 ion-datetime,css-prop,--background
 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,part,time-button
+ion-datetime,part,time-button active
+ion-datetime,part,wheel-item
+ion-datetime,part,wheel-item active
 
 ion-datetime-button,shadow
 ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true

core/src/components/datetime/datetime.scss

@@ -8,6 +8,12 @@
    * @prop --background: The primary background of the datetime component.
    * @prop --background-rgb: The primary background of the datetime component in RGB format.
    * @prop --title-color: The text color of the title.
+   *
+   * @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-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`.
    */
 
   display: flex;

core/src/components/datetime/datetime.tsx

@@ -74,6 +74,14 @@ import {
  * @slot title - The title of the datetime.
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
+ *
+ * @part wheel-item - The individual items when using a wheel style layout, or in the
+ * month/year picker when using a grid style layout.
+ * @part wheel-item active - The currently selected wheel-item.
+ *
+ * @part time-button - The button that opens the time picker when using a grid style
+ * layout with `presentation="date-time"` or `"time-date"`.
+ * @part time-button active - The time picker button when the picker is open.
  */
 @Component({
   tag: 'ion-datetime',
@@ -2167,16 +2175,18 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderTimeOverlay() {
-    const use24Hour = is24Hour(this.locale, this.hourCycle);
+    const { hourCycle, isTimePopoverOpen, locale } = this;
+    const use24Hour = is24Hour(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
 
     return [
       <div class="time-header">{this.renderTimeLabel()}</div>,
       <button
         class={{
           'time-body': true,
-          'time-body-active': this.isTimePopoverOpen,
+          'time-body-active': isTimePopoverOpen,
         }}
+        part={`time-button${isTimePopoverOpen ? ' active' : ''}`}
         aria-expanded="false"
         aria-haspopup="true"
         onClick={async (ev) => {
@@ -2199,7 +2209,7 @@ export class Datetime implements ComponentInterface {
           }
         }}
       >
-        {getLocalizedTime(this.locale, activePart, use24Hour)}
+        {getLocalizedTime(locale, activePart, use24Hour)}
       </button>,
       <ion-popover
         alignment="center"

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

@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: custom'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/datetime/test/custom`, config);
+    });
+
+    test('should allow styling wheel style datetimes', async ({ page }) => {
+      const datetime = page.locator('#custom-wheel');
+
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-wheel`));
+    });
+
+    test('should allow styling month/year picker in grid style datetimes', async ({ page }) => {
+      const datetime = page.locator('#custom-grid');
+      const monthYearToggle = datetime.locator('.calendar-month-year');
+
+      await monthYearToggle.click();
+      await page.waitForChanges();
+
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-month-year`));
+    });
+
+    test('should allow styling time picker in grid style datetimes', async ({ page }) => {
+      const timeButton = page.locator('ion-datetime .time-body');
+      const popover = page.locator('.popover-viewport');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));
+
+      await timeButton.click();
+      await ionPopoverDidPresent.next();
+
+      await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
+      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
+    });
+  });
+});