chore(): sync with main

core/playwright.config.ts

@@ -87,7 +87,7 @@ const config: PlaywrightTestConfig = {
        * Increases the maximum allowed pixel difference to account
        * for slight browser rendering inconsistencies.
        */
-      maxDiffPixelRatio: 0.005
+      maxDiffPixelRatio: 0.0025
     }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */

core/src/components/accordion/test/accordion.e2e.ts

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: states', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+  test('should properly set readonly on child accordions', async ({ page }) => {
+    await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `);
+
+    const accordionGroup = page.locator('ion-accordion-group');
+    const accordion = page.locator('ion-accordion');
+
+    expect(accordion).toHaveJSProperty('readonly', false);
+
+    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+      el.readonly = true;
+    });
+
+    await page.waitForChanges();
+
+    expect(accordion).toHaveJSProperty('readonly', true);
+  });
+
+  test('should properly set disabled on child accordions', async ({ page }) => {
+    await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `);
+
+    const accordionGroup = page.locator('ion-accordion-group');
+    const accordion = page.locator('ion-accordion');
+
+    expect(accordion).toHaveJSProperty('disabled', false);
+
+    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+      el.disabled = true;
+    });
+
+    await page.waitForChanges();
+
+    expect(accordion).toHaveJSProperty('disabled', true);
+  });
+});

core/src/components/accordion/test/e2e.ts

@@ -1,55 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should properly set readonly on child accordions', async () => {
-  const page = await newE2EPage({
-    html: `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-  });
-
-  const accordion = await page.find('ion-accordion');
-  const value = await accordion.getProperty('readonly');
-
-  expect(value).toBe(false);
-
-  await page.$eval('ion-accordion-group', (el: HTMLIonAccordionGroupElement) => {
-    el.readonly = true;
-  });
-
-  await page.waitForChanges();
-
-  const valueAgain = await accordion.getProperty('readonly');
-  expect(valueAgain).toBe(true);
-});
-
-test('should properly set disabled on child accordions', async () => {
-  const page = await newE2EPage({
-    html: `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-  });
-
-  const accordion = await page.find('ion-accordion');
-  const value = await accordion.getProperty('disabled');
-
-  expect(value).toBe(false);
-
-  await page.$eval('ion-accordion-group', (el: HTMLIonAccordionGroupElement) => {
-    el.disabled = true;
-  });
-
-  await page.waitForChanges();
-
-  const valueAgain = await accordion.getProperty('disabled');
-  expect(valueAgain).toBe(true);
-});

core/src/components/datetime/datetime.tsx

@@ -1893,6 +1893,7 @@ export class Datetime implements ComponentInterface {
                   aria-hidden="true"
                   icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
                   lazy={false}
+                  flipRtl={true}
                 ></ion-icon>
               </ion-label>
             </ion-item>

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

@@ -156,9 +156,8 @@ class DatetimeLocaleFixture {
   }
 
   async expectLocalizedDatePicker() {
-    await this.waitForDatetime();
-
     await this.page.setIonViewport();
+    await this.waitForDatetime();
     // Captures a screenshot of the datepicker with localized am/pm labels
     expect(await this.page.screenshot()).toMatchSnapshot(
       `datetime-locale-${this.locale}-diff-${this.page.getSnapshotSettings()}.png`
@@ -166,8 +165,8 @@ class DatetimeLocaleFixture {
   }
 
   async expectLocalizedMonthYearPicker() {
-    await this.waitForDatetime();
     await this.page.setIonViewport();
+    await this.waitForDatetime();
     // Opens the month/year picker
     const monthYearButton = this.page.locator('#am .calendar-month-year ion-item');
     await monthYearButton.click();
@@ -179,8 +178,8 @@ class DatetimeLocaleFixture {
   }
 
   async expectLocalizedTimePicker() {
-    await this.waitForDatetime();
     await this.page.setIonViewport();
+    await this.waitForDatetime();
     // Opens the timepicker
     const timePickerButton = this.page.locator('#am .time-body');
     const timePickerPopoverPresentSpy = await this.page.spyOnEvent('ionPopoverDidPresent');