@ionic/core 7.5.7-dev.11700601419.1c57af2e → 7.5.7-dev.11701113479.149fdab6

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

@@ -94,7 +94,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) {
@@ -317,23 +317,8 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-: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;
-}
-
-: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;
+  --background: transparent;
 }
 
 :host .calendar-days-of-week {
@@ -515,8 +500,66 @@ ion-picker-column-internal {
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: var(--ion-color-base);
+: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;
 }
 
 /**
@@ -600,15 +643,36 @@ ion-picker-column-internal {
   font-size: 2.125rem;
 }
 
-:host .datetime-calendar .calendar-action-buttons ion-item {
-  --padding-start: 20px;
-}
-
-:host .calendar-action-buttons ion-item,
 :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;
+}
+
+.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;
+  }
+}
 :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 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)');
       await page.keyboard.press(tabKey);

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

@@ -2,7 +2,6 @@
  * (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(() => {
@@ -18,25 +17,23 @@ describe('datetime', () => {
     let page;
     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');
     });
     it('should have aria-label "Hide year picker" when expanded', async () => {
       const datetime = page.body.querySelector('ion-datetime');
-      const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
-      item.click();
+      const monthYearToggleBtn = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
+      monthYearToggleBtn.click();
       await page.waitForChanges();
-      const itemAfter = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
-      const monthYearToggleBtn = itemAfter.shadowRoot.querySelector('button');
-      const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
+      const monthYearToggleBtnAfter = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
+      const ariaLabel = monthYearToggleBtnAfter.getAttribute('aria-label');
       expect(ariaLabel).toContain('Hide year picker');
     });
   });

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

@@ -372,4 +372,14 @@ 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

@@ -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/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/infinite-scroll/infinite-scroll.js

@@ -8,13 +8,6 @@ export class InfiniteScroll {
   constructor() {
     this.thrPx = 0;
     this.thrPc = 0;
-    /**
-     * didFire exists so that ionInfinite
-     * does not fire multiple times if
-     * users continue to scroll after
-     * scrolling into the infinite
-     * scroll threshold.
-     */
     this.didFire = false;
     this.isBusy = false;
     this.onScroll = () => {
@@ -42,6 +35,9 @@ export class InfiniteScroll {
           return 3;
         }
       }
+      else {
+        this.didFire = false;
+      }
       return 4;
     };
     this.isLoading = false;
@@ -141,15 +137,11 @@ export class InfiniteScroll {
             writeTask(() => {
               scrollEl.scrollTop = newScrollTop;
               this.isBusy = false;
-              this.didFire = false;
             });
           });
         });
       });
     }
-    else {
-      this.didFire = false;
-    }
   }
   canStart() {
     return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;

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