@ionic/core 7.5.7-dev.11701201960.104b3a1f → 7.5.7-dev.11701203423.1b6a8829

package/dist/collection/components/datetime/datetime.md.css

@@ -80,7 +80,7 @@
  * widest item in the column. Setting a minimum
  * width avoids this layout shifting.
  */
-ion-picker-column {
+ion-picker-column-internal {
   min-width: 26px;
 }
 
@@ -94,7 +94,7 @@ ion-picker-column {
 }
 
 /**
- * This ensures that the picker is appropriately
+ * This ensures that the picker is apppropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -317,8 +317,23 @@ ion-picker-column {
   justify-content: space-between;
 }
 
+:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: transparent;
+  --background: translucent;
+}
+
+:host .calendar-action-buttons ion-item ion-label {
+  display: flex;
+  align-items: center;
+}
+
+:host .calendar-action-buttons ion-item ion-icon {
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 :host .calendar-days-of-week {
@@ -500,66 +515,8 @@ ion-picker-column {
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
-  color: var(--ion-color-base);
-}
-
-.calendar-month-year {
-  min-width: 0;
-}
-
-.calendar-month-year-toggle {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  position: relative;
-  border: 0;
-  outline: none;
-  background: transparent;
-  cursor: pointer;
-  z-index: 1;
-}
-.calendar-month-year-toggle::after {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  content: "";
-  opacity: 0;
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: -1;
-}
-.calendar-month-year-toggle.ion-focused::after {
-  background: currentColor;
-}
-.calendar-month-year-toggle:disabled {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.calendar-month-year-toggle ion-icon {
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  flex-shrink: 0;
-}
-
-.calendar-month-year-toggle #toggle-wrapper {
-  display: inline-flex;
-  align-items: center;
+:host(.show-month-and-year) .calendar-action-buttons ion-item {
+  --color: var(--ion-color-base);
 }
 
 /**
@@ -643,36 +600,15 @@ ion-picker-column {
   font-size: 2.125rem;
 }
 
-:host .calendar-action-buttons ion-button {
-  --color: var(--ion-color-step-650, #595959);
-}
-
-.calendar-month-year-toggle {
-  -webkit-padding-start: 20px;
-  padding-inline-start: 20px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  min-height: 48px;
-  background: transparent;
-  color: var(--ion-color-step-650, #595959);
-  z-index: 1;
-}
-.calendar-month-year-toggle.ion-focused::after {
-  opacity: 0.04;
+:host .datetime-calendar .calendar-action-buttons ion-item {
+  --padding-start: 20px;
 }
 
-.calendar-month-year-toggle ion-ripple-effect {
-  color: currentColor;
+:host .calendar-action-buttons ion-item,
+:host .calendar-action-buttons ion-button {
+  --color: var(--ion-color-step-650, #595959);
 }
 
-@media (any-hover: hover) {
-  .calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after {
-    background: currentColor;
-    opacity: 0.04;
-  }
-}
 :host .calendar-days-of-week {
   -webkit-padding-start: 10px;
   padding-inline-start: 10px;

package/dist/collection/components/datetime/test/a11y/datetime.e2e.js

@@ -38,7 +38,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     `, config);
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
       const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year-toggle');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
       const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
       const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
       await page.keyboard.press(tabKey);

package/dist/collection/components/datetime/test/a11y/datetime.spec.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { newSpecPage } from "@stencil/core/testing";
+import { Item } from "../../../item/item";
 import { Datetime } from "../../datetime";
 describe('datetime', () => {
   beforeEach(() => {
@@ -17,23 +18,25 @@ describe('datetime', () => {
     let page;
     beforeEach(async () => {
       page = await newSpecPage({
-        components: [Datetime],
+        components: [Datetime, Item],
         html: `<ion-datetime></ion-datetime>`,
       });
     });
     it('should have aria-label "Show year picker" when collapsed', async () => {
       const datetime = page.body.querySelector('ion-datetime');
-      const monthYearToggleBtn = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
+      const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
+      const monthYearToggleBtn = item.shadowRoot.querySelector('button');
       const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
       expect(ariaLabel).toContain('Show year picker');
     });
     it('should have aria-label "Hide year picker" when expanded', async () => {
       const datetime = page.body.querySelector('ion-datetime');
-      const monthYearToggleBtn = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
-      monthYearToggleBtn.click();
+      const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
+      item.click();
       await page.waitForChanges();
-      const monthYearToggleBtnAfter = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
-      const ariaLabel = monthYearToggleBtnAfter.getAttribute('aria-label');
+      const itemAfter = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
+      const monthYearToggleBtn = itemAfter.shadowRoot.querySelector('button');
+      const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
       expect(ariaLabel).toContain('Hide year picker');
     });
   });

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -372,14 +372,4 @@ 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) => el.classList.add('ion-focused'));
-      await expect(datetime).toHaveScreenshot(screenshot(`date-month-toggle-focused`));
-    });
-  });
 });

package/dist/collection/components/datetime/test/disabled/datetime.spec.js

@@ -4,8 +4,8 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Datetime } from "../../../datetime/datetime";
-import { PickerColumn } from "../../../picker-column/picker-column";
-import { Picker } from "../../../picker/picker";
+import { PickerColumnInternal } from "../../../picker-column-internal/picker-column-internal";
+import { PickerInternal } from "../../../picker-internal/picker-internal";
 describe('ion-datetime disabled', () => {
   beforeEach(() => {
     // IntersectionObserver isn't available in test environment
@@ -19,12 +19,12 @@ describe('ion-datetime disabled', () => {
   });
   it('picker should be disabled in prefer wheel mode', async () => {
     const page = await newSpecPage({
-      components: [Datetime, PickerColumn, Picker],
+      components: [Datetime, PickerColumnInternal, PickerInternal],
       template: () => (h("ion-datetime", { id: "inline-datetime-wheel", disabled: true, "prefer-wheel": true, value: "2022-04-21T00:00:00" })),
     });
     await page.waitForChanges();
     const datetime = page.body.querySelector('ion-datetime');
-    const columns = datetime.shadowRoot.querySelectorAll('ion-picker-column');
+    const columns = datetime.shadowRoot.querySelectorAll('ion-picker-column-internal');
     await expect(columns.length).toEqual(4);
     columns.forEach((column) => {
       expect(column.disabled).toBe(true);

package/dist/collection/components/datetime/test/minmax/datetime.e2e.js

@@ -81,8 +81,8 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
         await page.click('.time-body');
         await ionPopoverDidPresent.next();
-        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
-        const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) .picker-item:not(.picker-item-empty)');
+        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)');
         expect(await hours.count()).toBe(12);
         expect(await minutes.count()).toBe(60);
       });
@@ -159,7 +159,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           value="2022-04-25T08:30:00"
         ></ion-datetime>
       `, config);
-      const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)');
+      const hourPickerItems = page.locator('ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
       await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']);
     });
     test('should include 12PM when minimum is greater than 12', async ({ page }) => {
@@ -175,7 +175,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           value="2022-07-29T12:00:00"
         ></ion-datetime>
       `, config);
-      const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)');
+      const hourPickerItems = page.locator('ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
       await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
     });
     test.describe('minmax value adjustment when out of bounds', () => {
@@ -258,7 +258,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         const timeButton = page.locator('ion-datetime .time-body');
         await timeButton.click();
         await ionPopoverDidPresent.next();
-        const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
+        const hours = page.locator('ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)');
         await expect(await hours.count()).toBe(4);
       });
     });

package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js

@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test('should hide the footer when picker is open', async ({ page }) => {
       const datetimeFooter = page.locator('#date-time .datetime-footer');
       await expect(datetimeFooter).toBeVisible();
-      const pickerButton = page.locator('#date-time .calendar-month-year > .calendar-month-year-toggle');
+      const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
       await pickerButton.click();
       await page.waitForChanges();
       await expect(datetimeFooter).not.toBeVisible();

package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js

@@ -228,7 +228,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
           await page.waitForSelector('.datetime-ready');
-          const columns = page.locator('ion-picker-column');
+          const columns = page.locator('ion-picker-column-internal');
           await expect(columns.nth(0)).toHaveClass(/month-column/);
           await expect(columns.nth(1)).toHaveClass(/day-column/);
           await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -243,7 +243,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
           await page.waitForSelector('.datetime-ready');
-          const columns = page.locator('ion-picker-column');
+          const columns = page.locator('ion-picker-column-internal');
           await expect(columns.nth(0)).toHaveClass(/day-column/);
           await expect(columns.nth(1)).toHaveClass(/month-column/);
           await expect(columns.nth(2)).toHaveClass(/year-column/);

package/dist/collection/components/datetime/test/presentation/datetime.e2e.js

@@ -161,7 +161,7 @@ class TimePickerFixture {
     await this.page.waitForChanges();
   }
   async expectTime(hour, minute, ampm) {
-    const pickerColumns = this.timePicker.locator('ion-picker-column');
+    const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
     await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
     await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
     await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);

package/dist/collection/components/datetime/test/readonly/datetime.e2e.js

@@ -46,7 +46,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
       await page.waitForSelector('.datetime-ready');
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-      const monthYearButton = page.locator('.calendar-month-year-toggle');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
       await expect(calendarMonthYear).toHaveText('February 2022');
       await page.keyboard.press(tabKey);
       await expect(monthYearButton).toBeFocused();
@@ -75,7 +75,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
     `, config);
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
       const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year-toggle');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
       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');

package/dist/collection/components/datetime/test/values/datetime.e2e.js

@@ -36,14 +36,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" hour-values="1,2,3"></ion-datetime>
       `, config);
-      const items = page.locator('ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)');
+      const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
       await expect(items).toHaveText(['1', '2', '3']);
     });
     test('should render correct minutes', async ({ page }) => {
       await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" minute-values="1,2,3"></ion-datetime>
       `, config);
-      const items = page.locator('ion-picker-column:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+      const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
       await expect(items).toHaveText(['01', '02', '03']);
     });
     test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -69,17 +69,17 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
       await page.waitForSelector('.datetime-ready');
-      const minuteItems = page.locator('ion-picker-column:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+      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 hourItems = page.locator('ion-picker-column:nth-of-type(1) .picker-item:not(.picker-item-empty)');
+      const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
       await expect(hourItems).toHaveText(['2']);
       await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
       /**
        * Since the allowed hour is 2AM, the time period
        * should switch from PM to AM.
        */
-      const ampmItems = page.locator('ion-picker-column:nth-of-type(3) .picker-item:not(.picker-item-empty)');
+      const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
       await expect(ampmItems).toHaveText(['AM', 'PM']);
       await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
     });

package/dist/collection/components/datetime/utils/data.js

@@ -323,7 +323,7 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
  * @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
+ * @returns Date data to be used in ion-picker-column-internal
  */
 export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
   day: 'numeric',