@ionic/core 7.5.7-dev.11700601905.13f94170 → 7.5.7-dev.11701113479.149fdab6

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

@@ -0,0 +1,33 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+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";
+describe('ion-datetime disabled', () => {
+  beforeEach(() => {
+    // IntersectionObserver isn't available in test environment
+    const mockIntersectionObserver = jest.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    global.IntersectionObserver = mockIntersectionObserver;
+  });
+  it('picker should be disabled in prefer wheel mode', async () => {
+    const page = await newSpecPage({
+      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-internal');
+    await expect(columns.length).toEqual(4);
+    columns.forEach((column) => {
+      expect(column.disabled).toBe(true);
+    });
+  });
+});

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, getClosestValidDate, } from "../utils/manipulation";
+import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, } from "../utils/manipulation";
 describe('addDays()', () => {
   it('should correctly add days', () => {
     expect(addDays({
@@ -431,79 +431,3 @@ describe('validateParts()', () => {
     })).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
   });
 });
-describe('getClosestValidDate()', () => {
-  it('should match a date with only month/day/year', () => {
-    // October 10, 2023
-    const refParts = { month: 10, day: 10, year: 2023 };
-    // April 10, 2021
-    const minParts = { month: 4, day: 10, year: 2021 };
-    // September 14, 2021
-    const maxParts = { month: 9, day: 14, year: 2021 };
-    // September 4, 2021
-    const expected = { month: 9, day: 4, year: 2021, dayOfWeek: undefined };
-    expect(getClosestValidDate({
-      refParts,
-      monthValues: [2, 3, 7, 9, 10],
-      dayValues: [4, 15, 25],
-      yearValues: [2020, 2021, 2023],
-      maxParts,
-      minParts,
-    })).toEqual(expected);
-  });
-  it('should match a date when the reference date is before the min', () => {
-    // April 2, 2020 3:20 PM
-    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
-    // September 10, 2021 10:10 AM
-    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
-    // September 14, 2021 10:11 AM
-    const maxParts = { month: 9, day: 14, year: 2021, hour: 10, minute: 11 };
-    // September 11, 2021 11:15 AM
-    const expected = {
-      year: 2021,
-      day: 11,
-      month: 9,
-      hour: 11,
-      minute: 15,
-      ampm: 'am',
-      dayOfWeek: undefined,
-    };
-    expect(getClosestValidDate({
-      refParts,
-      monthValues: [4, 9, 11],
-      dayValues: [11, 12, 13, 14],
-      yearValues: [2020, 2021, 2023],
-      hourValues: [9, 10, 11],
-      minuteValues: [11, 12, 13, 14, 15],
-      maxParts,
-      minParts,
-    })).toEqual(expected);
-  });
-  it('should match a date when the reference date is before the min', () => {
-    // April 2, 2020 3:20 PM
-    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
-    // September 10, 2021 10:10 AM
-    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
-    // September 10, 2021 10:15 AM
-    const maxParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 15 };
-    // September 10, 2021 10:15 AM
-    const expected = {
-      month: 9,
-      day: 10,
-      year: 2021,
-      hour: 10,
-      minute: 15,
-      ampm: 'am',
-      dayOfWeek: undefined,
-    };
-    expect(getClosestValidDate({
-      refParts,
-      monthValues: [4, 9, 11],
-      dayValues: [10, 12, 13, 14],
-      yearValues: [2020, 2021, 2023],
-      hourValues: [9, 10, 11],
-      minuteValues: [11, 12, 13, 14, 15],
-      minParts,
-      maxParts,
-    })).toEqual(expected);
-  });
-});

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

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 ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
       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 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');

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isAfter, isBefore, isSameDay } from "./comparison";
+import { isSameDay } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 import { clampDate, parseAmPm } from "./parse";
 const twoDigit = (val) => {
@@ -355,60 +355,32 @@ export const validateParts = (parts, minParts, maxParts) => {
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
+ * @param refParts The reference date
+ * @param monthValues The allowed month values
+ * @param dayValues The allowed day (of the month) values
+ * @param yearValues The allowed year values
+ * @param hourValues The allowed hour values
+ * @param minuteValues The allowed minute values
  */
-export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
+export const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => {
   const { hour, minute, day, month, year } = refParts;
-  const copyParts = clampDate(Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined }), minParts, maxParts);
+  const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
   if (monthValues !== undefined) {
-    // Filters out months that are out of the min/max bounds
-    const filteredMonths = monthValues.filter((month) => !(minParts !== undefined && month < minParts.month) && !(maxParts !== undefined && month > maxParts.month));
-    copyParts.month = findClosestValue(month, filteredMonths);
+    copyParts.month = findClosestValue(month, monthValues);
   }
   // Day is nullable but cannot be undefined
   if (day !== null && dayValues !== undefined) {
-    // Filters out days that are out of the min/max bounds
-    const filteredDays = dayValues.filter((day) => {
-      if (minParts && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
-        return false;
-      }
-      if (maxParts && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.day = findClosestValue(day, filteredDays);
+    copyParts.day = findClosestValue(day, dayValues);
   }
   if (yearValues !== undefined) {
-    // Filters out years that are out of the min/max bounds
-    const filteredYears = yearValues.filter((year) => !(minParts !== undefined && year < minParts.year) && !(maxParts !== undefined && year > maxParts.year));
-    copyParts.year = findClosestValue(year, filteredYears);
+    copyParts.year = findClosestValue(year, yearValues);
   }
   if (hour !== undefined && hourValues !== undefined) {
-    // Filters out hours that are out of the min/max bounds
-    const filteredHours = hourValues.filter((hour) => {
-      if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
-        return false;
-      }
-      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.hour = findClosestValue(hour, filteredHours);
+    copyParts.hour = findClosestValue(hour, hourValues);
     copyParts.ampm = parseAmPm(copyParts.hour);
   }
   if (minute !== undefined && minuteValues !== undefined) {
-    // Filters out minutes that are out of the min/max bounds
-    const filteredMinutes = minuteValues.filter((minute) => {
-      if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined && isSameDay(copyParts, minParts) && minute < minParts.minute) {
-        return false;
-      }
-      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined && isSameDay(copyParts, maxParts) && minute > maxParts.minute) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.minute = findClosestValue(minute, filteredMinutes);
+    copyParts.minute = findClosestValue(minute, minuteValues);
   }
   return copyParts;
 };

package/dist/collection/components/picker-column-internal/picker-column-internal.ios.css

@@ -109,12 +109,20 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item.picker-item-disabled {
-  scroll-snap-align: none;
+:host .picker-item[disabled] {
   cursor: default;
 }
 
-:host .picker-item.picker-item-disabled {
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
+  scroll-snap-align: none;
+}
+
+:host([disabled]) {
+  overflow-y: hidden;
+}
+
+:host .picker-item[disabled] {
   opacity: 0.4;
 }
 

package/dist/collection/components/picker-column-internal/picker-column-internal.js

@@ -221,6 +221,7 @@ export class PickerColumnInternal {
       this.el.classList.remove('picker-column-active');
     };
     this.isActive = false;
+    this.disabled = false;
     this.items = [];
     this.value = undefined;
     this.color = 'primary';
@@ -318,10 +319,13 @@ export class PickerColumnInternal {
     }
   }
   get activeItem() {
-    return getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
+    // If the whole picker column is disabled, the current value should appear active
+    // If the current value item is specifically disabled, it should not appear active
+    const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
+    return getElementRoot(this.el).querySelector(selector);
   }
   render() {
-    const { items, color, isActive, numericInput } = this;
+    const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
     const mode = getIonMode(this);
     /**
      * exportparts is needed so ion-datetime can expose the parts
@@ -329,11 +333,12 @@ export class PickerColumnInternal {
      * the attribute can be moved to datetime.tsx and set on every
      * instance of ion-picker-column-internal there instead.
      */
-    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, tabindex: 0, class: createColorClasses(color, {
+    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
         [mode]: true,
         ['picker-column-active']: isActive,
         ['picker-column-numeric-input']: numericInput,
       }) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+      const isItemDisabled = pickerDisabled || item.disabled || false;
       {
         /*
         Users should be able to tab
@@ -346,10 +351,9 @@ export class PickerColumnInternal {
       }
       return (h("button", { tabindex: "-1", class: {
           'picker-item': true,
-          'picker-item-disabled': item.disabled || false,
         }, "data-value": item.value, "data-index": index, onClick: (ev) => {
           this.centerPickerItemInView(ev.target, true);
-        }, disabled: item.disabled, part: PICKER_ITEM_PART }, item.text));
+        }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
     }), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
   }
   static get is() { return "ion-picker-column-internal"; }
@@ -368,6 +372,24 @@ export class PickerColumnInternal {
   }
   static get properties() {
     return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user cannot interact with the picker."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "items": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/picker-column-internal/picker-column-internal.md.css

@@ -109,12 +109,20 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item.picker-item-disabled {
-  scroll-snap-align: none;
+:host .picker-item[disabled] {
   cursor: default;
 }
 
-:host .picker-item.picker-item-disabled {
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
+  scroll-snap-align: none;
+}
+
+:host([disabled]) {
+  overflow-y: hidden;
+}
+
+:host .picker-item[disabled] {
   opacity: 0.4;
 }
 

package/dist/collection/components/picker-column-internal/test/disabled/picker-column-internal.e2e.js

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * This behavior does not vary across modes/directions.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('picker-column-internal: disabled'), () => {
+  test.describe(title('picker-column-internal: disabled items'), () => {
     test('all picker items should be enabled by default', async ({ page }) => {
       await page.setContent(`
         <ion-picker-internal>
@@ -48,7 +48,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ]
         </script>
       `, config);
-      const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, .picker-item-disabled)');
+      const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, [disabled])');
       expect(await pickerItems.count()).toBe(3);
     });
     test('disabled picker item should not be interactive', async ({ page }) => {
@@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ]
         </script>
       `, config);
-      const disabledItem = page.locator('ion-picker-column-internal .picker-item.picker-item-disabled');
+      const disabledItem = page.locator('ion-picker-column-internal .picker-item[disabled]');
       await expect(disabledItem).not.toBeEnabled();
     });
     test('disabled picker item should not be considered active', async ({ page }) => {
@@ -106,7 +106,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await pickerColumn.evaluate((el) => (el.value = 'b'));
       await page.waitForChanges();
       const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]');
-      await expect(disabledItem).toHaveClass(/picker-item-disabled/);
+      await expect(disabledItem).toBeDisabled();
       await expect(disabledItem).not.toHaveClass(/picker-item-active/);
     });
     test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => {
@@ -126,8 +126,37 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
       const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]');
-      await expect(disabledItem).toHaveClass(/picker-item-disabled/);
+      await expect(disabledItem).toBeDisabled();
       await expect(disabledItem).not.toHaveClass(/picker-item-active/);
     });
   });
 });
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker-column-internal: disabled column rendering'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/picker-column-internal/test/disabled', config);
+    });
+    test('disabled column should not have visual regressions', async ({ page }) => {
+      const disabledColumn = page.locator('#column-disabled');
+      await page.waitForChanges();
+      await expect(disabledColumn).toHaveScreenshot(screenshot('picker-internal-disabled-column'));
+    });
+  });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('picker-column-internal: disabled column'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/picker-column-internal/test/disabled', config);
+    });
+    test('item in disabled column should not be interactive', async ({ page }) => {
+      const secondItem = page.locator('#column-disabled .picker-item:not(.picker-item-empty)').nth(1);
+      await expect(secondItem).toBeDisabled();
+    });
+  });
+});

package/dist/collection/components/{picker-column → picker-column-legacy}/picker-column.js

@@ -340,7 +340,7 @@ export class PickerColumnCmp {
         'max-width': this.col.columnWidth,
       } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
   }
-  static get is() { return "ion-picker-column"; }
+  static get is() { return "ion-picker-legacy-column"; }
   static get originalStyleUrls() {
     return {
       "ios": ["picker-column.ios.scss"],
@@ -364,8 +364,8 @@ export class PickerColumnCmp {
           "references": {
             "PickerColumn": {
               "location": "import",
-              "path": "../picker/picker-interface",
-              "id": "src/components/picker/picker-interface.ts::PickerColumn"
+              "path": "../picker-legacy/picker-interface",
+              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
             }
           }
         },
@@ -398,8 +398,8 @@ export class PickerColumnCmp {
           "references": {
             "PickerColumn": {
               "location": "import",
-              "path": "../picker/picker-interface",
-              "id": "src/components/picker/picker-interface.ts::PickerColumn"
+              "path": "../picker-legacy/picker-interface",
+              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
             }
           }
         }

package/dist/collection/components/{picker-column → picker-column-legacy}/test/picker-column-aria.spec.js

@@ -25,10 +25,10 @@ describe('picker-column', () => {
     };
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => h("ion-picker-column", { col: col }),
+      template: () => h("ion-picker-legacy-column", { col: col }),
     });
-    const firstOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(1)');
-    const secondOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(2)');
+    const firstOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(1)');
+    const secondOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(2)');
     expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
     expect(secondOption.getAttribute('aria-label')).toBe(null);
   });

package/dist/collection/components/{picker-column → picker-column-legacy}/test/picker-column-dynamic.spec.js

@@ -15,9 +15,9 @@ describe('picker-column: dynamic options', () => {
     ];
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => h("ion-picker-column", { col: { options: defaultOptions, name: 'animals' } }),
+      template: () => (h("ion-picker-legacy-column", { col: { options: defaultOptions, name: 'animals' } })),
     });
-    const pickerCol = page.body.querySelector('ion-picker-column');
+    const pickerCol = page.body.querySelector('ion-picker-legacy-column');
     pickerCol.col = {
       options: [...defaultOptions, { text: 'Carrot', value: 'carrot' }],
       name: 'vegetables',

package/dist/collection/components/{picker-column → picker-column-legacy}/test/picker-column.spec.js

@@ -9,9 +9,9 @@ describe('picker-column', () => {
     const col = { cssClass: 'test-class', options: [], name: 'col' };
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => h("ion-picker-column", { col: col }),
+      template: () => h("ion-picker-legacy-column", { col: col }),
     });
-    const pickerCol = page.body.querySelector('ion-picker-column');
+    const pickerCol = page.body.querySelector('ion-picker-legacy-column');
     expect(pickerCol.classList.contains('test-class')).toBe(true);
   });
 });

package/dist/collection/components/{picker-column → picker-column-legacy}/test/standalone/picker-column.e2e.js

@@ -6,11 +6,11 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('picker-column'), () => {
     test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/picker-column/test/standalone`, config);
+      await page.goto(`/src/components/picker-column-legacy/test/standalone`, config);
     });
     test('should present picker without ion-app', async ({ page }) => {
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
-      const picker = page.locator('ion-picker');
+      const picker = page.locator('ion-picker-legacy');
       await page.click('#single-column-button');
       await ionPickerDidPresent.next();
       await expect(picker).toBeVisible();
@@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
       const ionPickerColChangeEvent = await page.spyOnEvent('ionPickerColChange');
-      const column = page.locator('ion-picker-column');
+      const column = page.locator('ion-picker-legacy-column');
       const secondOption = column.locator('.picker-opt').nth(1);
       await page.click('#single-column-button');
       await ionPickerDidPresent.next();

package/dist/collection/components/{picker → picker-legacy}/picker.js

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
+import { printIonWarning } from "../../utils/logging/index";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -71,6 +72,7 @@ export class Picker {
     setOverlayId(this.el);
   }
   componentDidLoad() {
+    printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
     /**
      * If picker was rendered with isOpen="true"
      * then we should open picker immediately.
@@ -174,9 +176,9 @@ export class Picker {
         zIndex: `${20000 + this.overlayIndex}`,
       }, class: Object.assign({ [mode]: true,
         // Used internally for styling
-        [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
+        [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
   }
-  static get is() { return "ion-picker"; }
+  static get is() { return "ion-picker-legacy"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -327,7 +329,7 @@ export class Picker {
             "PickerButton": {
               "location": "import",
               "path": "./picker-interface",
-              "id": "src/components/picker/picker-interface.ts::PickerButton"
+              "id": "src/components/picker-legacy/picker-interface.ts::PickerButton"
             }
           }
         },
@@ -349,7 +351,7 @@ export class Picker {
             "PickerColumn": {
               "location": "import",
               "path": "./picker-interface",
-              "id": "src/components/picker/picker-interface.ts::PickerColumn"
+              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
             }
           }
         },
@@ -778,7 +780,7 @@ export class Picker {
             "PickerColumn": {
               "location": "import",
               "path": "./picker-interface",
-              "id": "src/components/picker/picker-interface.ts::PickerColumn"
+              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
             }
           },
           "return": "Promise<PickerColumn | undefined>"

package/dist/collection/components/{picker → picker-legacy}/test/basic/picker.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('picker: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
-      await page.goto('/src/components/picker/test/basic', config);
+      await page.goto('/src/components/picker-legacy/test/basic', config);
       const didPresent = await page.spyOnEvent('ionPickerDidPresent');
       const didDismiss = await page.spyOnEvent('ionPickerDidDismiss');
       await page.click('#basic');
@@ -14,7 +14,7 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.waitForChanges();
       await expect(page).toHaveScreenshot(screenshot(`picker-basic`));
       await page.click('.picker-opt:nth-child(2)');
-      await page.click('ion-picker .save-btn');
+      await page.click('ion-picker-legacy .save-btn');
       await didDismiss.next();
       await page.click('#basic');
       await didPresent.next();

package/dist/collection/components/{picker → picker-legacy}/test/is-open/picker.e2e.js

@@ -9,10 +9,10 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('picker: isOpen'), () => {
     test('should open and close the picker', async ({ page }) => {
-      await page.goto('/src/components/picker/test/is-open', config);
+      await page.goto('/src/components/picker-legacy/test/is-open', config);
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
       const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
-      const picker = page.locator('ion-picker');
+      const picker = page.locator('ion-picker-legacy');
       await page.click('#default');
       await ionPickerDidPresent.next();
       await expect(picker).toBeVisible();
@@ -21,8 +21,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(picker).toBeHidden();
     });
     test('should open if isOpen is true on load', async ({ page }) => {
-      await page.setContent('<ion-picker is-open="true"></ion-picker>', config);
-      await expect(page.locator('ion-picker')).toBeVisible();
+      await page.setContent('<ion-picker-legacy is-open="true"></ion-picker-legacy>', config);
+      await expect(page.locator('ion-picker-legacy')).toBeVisible();
     });
   });
 });