@ionic/core 7.5.7-dev.11701188221.15180cb4 → 7.5.7-dev.11701203423.1b6a8829

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

@@ -94,7 +94,7 @@ ion-picker-column-internal {
 }
 
 /**
- * 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-internal {
   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-internal {
   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);
 }
 
 /**
@@ -648,31 +605,15 @@ ion-picker-column-internal {
   margin-top: 10px;
 }
 
-.calendar-month-year-toggle {
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  min-height: 44px;
+:host .calendar-action-buttons ion-item {
+  --padding-start: 16px;
+  --background-hover: transparent;
+  --background-activated: transparent;
   font-size: min(1rem, 25.6px);
   font-weight: 600;
 }
-.calendar-month-year-toggle.ion-focused::after {
-  opacity: 0.15;
-}
-
-.calendar-month-year-toggle #toggle-wrapper {
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 8px;
-  margin-inline-end: 8px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
 
-:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
+:host .calendar-action-buttons ion-item ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }

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

@@ -1257,11 +1257,26 @@ export class Datetime {
     const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
     // don't use the inheritAttributes util because it removes dir from the host, and we still need that
     const hostDir = this.el.getAttribute('dir') || undefined;
-    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("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() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
+        var _a;
+        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 = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
+          if (btn) {
+            const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
+            btn.setAttribute('aria-label', monthYearAriaLabel);
+          }
+        }
+      } }, h("ion-label", null, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
       return h("div", { class: "day-of-week" }, d);
     }))));
   }

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

@@ -94,7 +94,7 @@ ion-picker-column-internal {
 }
 
 /**
- * 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-internal {
   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-internal {
   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-internal {
   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/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/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/{picker-legacy → picker}/picker.js

@@ -4,7 +4,6 @@
 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";
@@ -72,7 +71,6 @@ export class Picker {
     setOverlayId(this.el);
   }
   componentDidLoad() {
-    printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions 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.
@@ -176,9 +174,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-legacy-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-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
   }
-  static get is() { return "ion-picker-legacy"; }
+  static get is() { return "ion-picker"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -329,7 +327,7 @@ export class Picker {
             "PickerButton": {
               "location": "import",
               "path": "./picker-interface",
-              "id": "src/components/picker-legacy/picker-interface.ts::PickerButton"
+              "id": "src/components/picker/picker-interface.ts::PickerButton"
             }
           }
         },
@@ -351,7 +349,7 @@ export class Picker {
             "PickerColumn": {
               "location": "import",
               "path": "./picker-interface",
-              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+              "id": "src/components/picker/picker-interface.ts::PickerColumn"
             }
           }
         },
@@ -780,7 +778,7 @@ export class Picker {
             "PickerColumn": {
               "location": "import",
               "path": "./picker-interface",
-              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+              "id": "src/components/picker/picker-interface.ts::PickerColumn"
             }
           },
           "return": "Promise<PickerColumn | undefined>"

package/dist/collection/components/{picker-legacy → picker}/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-legacy/test/basic', config);
+      await page.goto('/src/components/picker/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-legacy .save-btn');
+      await page.click('ion-picker .save-btn');
       await didDismiss.next();
       await page.click('#basic');
       await didPresent.next();

package/dist/collection/components/{picker-legacy → picker}/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-legacy/test/is-open', config);
+      await page.goto('/src/components/picker/test/is-open', config);
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
       const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
-      const picker = page.locator('ion-picker-legacy');
+      const picker = page.locator('ion-picker');
       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-legacy is-open="true"></ion-picker-legacy>', config);
-      await expect(page.locator('ion-picker-legacy')).toBeVisible();
+      await page.setContent('<ion-picker is-open="true"></ion-picker>', config);
+      await expect(page.locator('ion-picker')).toBeVisible();
     });
   });
 });

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

@@ -6,27 +6,27 @@ import { Picker } from "../picker";
 it('picker should be assigned an incrementing id', async () => {
   const page = await newSpecPage({
     components: [Picker],
-    html: `<ion-picker-legacy is-open="true"></ion-picker-legacy>`,
+    html: `<ion-picker is-open="true"></ion-picker>`,
   });
   let picker;
-  picker = page.body.querySelector('ion-picker-legacy');
+  picker = page.body.querySelector('ion-picker');
   expect(picker).not.toBe(null);
   expect(picker.getAttribute('id')).toBe('ion-overlay-1');
   // Remove the picker from the DOM
   picker.remove();
   await page.waitForChanges();
   // Create a new picker to verify the id is incremented
-  picker = document.createElement('ion-picker-legacy');
+  picker = document.createElement('ion-picker');
   picker.isOpen = true;
   page.body.appendChild(picker);
   await page.waitForChanges();
-  picker = page.body.querySelector('ion-picker-legacy');
+  picker = page.body.querySelector('ion-picker');
   expect(picker.getAttribute('id')).toBe('ion-overlay-2');
   // Presenting the same picker again should reuse the existing id
   picker.isOpen = false;
   await page.waitForChanges();
   picker.isOpen = true;
   await page.waitForChanges();
-  picker = page.body.querySelector('ion-picker-legacy');
+  picker = page.body.querySelector('ion-picker');
   expect(picker.getAttribute('id')).toBe('ion-overlay-2');
 });

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

@@ -9,7 +9,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('picker: trigger'), () => {
     test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/picker-legacy/test/trigger', config);
+      await page.goto('/src/components/picker/test/trigger', config);
     });
     test('should open the picker', async ({ page }) => {
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');

package/dist/collection/components/{picker-legacy-column → picker-column}/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-legacy-column"; }
+  static get is() { return "ion-picker-column"; }
   static get originalStyleUrls() {
     return {
       "ios": ["picker-column.ios.scss"],
@@ -364,8 +364,8 @@ export class PickerColumnCmp {
           "references": {
             "PickerColumn": {
               "location": "import",
-              "path": "../picker-legacy/picker-interface",
-              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+              "path": "../picker/picker-interface",
+              "id": "src/components/picker/picker-interface.ts::PickerColumn"
             }
           }
         },
@@ -398,8 +398,8 @@ export class PickerColumnCmp {
           "references": {
             "PickerColumn": {
               "location": "import",
-              "path": "../picker-legacy/picker-interface",
-              "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+              "path": "../picker/picker-interface",
+              "id": "src/components/picker/picker-interface.ts::PickerColumn"
             }
           }
         }

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

@@ -25,10 +25,10 @@ describe('picker-column', () => {
     };
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => h("ion-picker-legacy-column", { col: col }),
+      template: () => h("ion-picker-column", { col: col }),
     });
-    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)');
+    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)');
     expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
     expect(secondOption.getAttribute('aria-label')).toBe(null);
   });

package/dist/collection/components/{picker-legacy-column → picker-column}/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-legacy-column", { col: { options: defaultOptions, name: 'animals' } })),
+      template: () => h("ion-picker-column", { col: { options: defaultOptions, name: 'animals' } }),
     });
-    const pickerCol = page.body.querySelector('ion-picker-legacy-column');
+    const pickerCol = page.body.querySelector('ion-picker-column');
     pickerCol.col = {
       options: [...defaultOptions, { text: 'Carrot', value: 'carrot' }],
       name: 'vegetables',

package/dist/collection/components/{picker-legacy-column → picker-column}/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-legacy-column", { col: col }),
+      template: () => h("ion-picker-column", { col: col }),
     });
-    const pickerCol = page.body.querySelector('ion-picker-legacy-column');
+    const pickerCol = page.body.querySelector('ion-picker-column');
     expect(pickerCol.classList.contains('test-class')).toBe(true);
   });
 });

package/dist/collection/components/{picker-legacy-column → picker-column}/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-legacy-column/test/standalone`, config);
+      await page.goto(`/src/components/picker-column/test/standalone`, config);
     });
     test('should present picker without ion-app', async ({ page }) => {
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
-      const picker = page.locator('ion-picker-legacy');
+      const picker = page.locator('ion-picker');
       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-legacy-column');
+      const column = page.locator('ion-picker-column');
       const secondOption = column.locator('.picker-opt').nth(1);
       await page.click('#single-column-button');
       await ionPickerDidPresent.next();