chore(): sync with main

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

@@ -2,7 +2,9 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('accordion: multiple', () => {
-  test('should update value and not have visual regressions', async ({ page }) => {
+  test('should update value and visually expand items', async ({ page, skip }) => {
+    skip.rtl();
+
     await page.goto(`/src/components/accordion/test/multiple`);
     const accordionGroup = page.locator('ion-accordion-group');
     const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');

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

@@ -2,11 +2,33 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('accordion: nested', () => {
-  test('should not have visual regressions', async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+
     await page.goto(`/src/components/accordion/test/nested`);
+  });
 
-    await page.setIonViewport();
+  test('parent and child should not be disabled', async ({ page }) => {
+    const enabledGroup = page.locator('ion-accordion-group#enabled');
 
-    expect(await page.screenshot()).toMatchSnapshot(`accordion-nested-${page.getSnapshotSettings()}.png`);
+    expect(await enabledGroup.screenshot()).toMatchSnapshot(
+      `accordion-nested-enabled-${page.getSnapshotSettings()}.png`
+    );
+  });
+
+  test('parent should not be disabled when only child is disabled', async ({ page }) => {
+    const nestedDisabledGroup = page.locator('ion-accordion-group#nested-disabled');
+
+    expect(await nestedDisabledGroup.screenshot()).toMatchSnapshot(
+      `accordion-child-disabled-${page.getSnapshotSettings()}.png`
+    );
+  });
+
+  test('parent and child should be disabled when parent is disabled', async ({ page }) => {
+    const parentDisabledGroup = page.locator('ion-accordion-group#parent-disabled');
+
+    expect(await parentDisabledGroup.screenshot()).toMatchSnapshot(
+      `accordion-parent-disabled-${page.getSnapshotSettings()}.png`
+    );
   });
 });

core/src/components/accordion/test/nested/index.html

@@ -43,7 +43,7 @@
         <div class="grid ion-padding">
           <div class="grid-item">
             <h2>Nested</h2>
-            <ion-accordion-group expand="inset" value="attractions">
+            <ion-accordion-group id="enabled" expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
@@ -75,7 +75,7 @@
           </div>
           <div class="grid-item">
             <h2>Nested Disabled</h2>
-            <ion-accordion-group expand="inset" value="attractions">
+            <ion-accordion-group id="nested-disabled" expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
@@ -107,7 +107,7 @@
           </div>
           <div class="grid-item">
             <h2>Nested Parent Disabled</h2>
-            <ion-accordion-group expand="inset" value="attractions" disabled="true">
+            <ion-accordion-group id="parent-disabled" expand="inset" value="attractions" disabled="true">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>

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

@@ -10,14 +10,4 @@ test.describe('accordion: standalone', () => {
 
     expect(results.violations).toEqual([]);
   });
-
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/accordion/test/standalone`);
-
-    await page.waitForChanges();
-
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
-      `accordion-standalone-${page.getSnapshotSettings()}.png`
-    );
-  });
 });

core/src/components/avatar/test/standalone/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Avatar - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body class="ion-padding">
-    <h1>Default</h1>
-    <ion-avatar>
-      <img
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-      />
-    </ion-avatar>
-
-    <h1>Custom</h1>
-    <ion-avatar style="width: 200px; height: 200px">
-      <img
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-      />
-    </ion-avatar>
-
-    <ion-avatar style="--border-radius: 4px">
-      <img
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-      />
-    </ion-avatar>
-  </body>
-</html>

core/src/components/back-button/test/basic/back-button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('back-button: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/back-button/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`back-button-basic-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/back-button/test/basic/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('back-button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('back-button: basic-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/back-button/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('back-button: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/back-button/test/standalone/index.html

@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Back Button - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <h3>Default</h3>
-    <p>
-      <ion-back-button></ion-back-button>
-      <ion-back-button text="Back"></ion-back-button>
-      <ion-back-button icon="add"></ion-back-button>
-      <ion-back-button text="Text Only" icon=""></ion-back-button>
-      <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
-    </p>
-
-    <h3>Colors</h3>
-    <p>
-      <ion-back-button color="primary"></ion-back-button>
-      <ion-back-button color="secondary"></ion-back-button>
-      <ion-back-button color="tertiary"></ion-back-button>
-      <ion-back-button color="success"></ion-back-button>
-      <ion-back-button color="warning"></ion-back-button>
-      <ion-back-button color="danger"></ion-back-button>
-      <ion-back-button color="light"></ion-back-button>
-      <ion-back-button color="medium"></ion-back-button>
-      <ion-back-button color="dark"></ion-back-button>
-    </p>
-    <p>
-      <ion-back-button color="primary" class="ion-activated"></ion-back-button>
-      <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
-      <ion-back-button color="tertiary" class="ion-activated"></ion-back-button>
-      <ion-back-button color="success" class="ion-activated"></ion-back-button>
-      <ion-back-button color="warning" class="ion-activated"></ion-back-button>
-      <ion-back-button color="danger" class="ion-activated"></ion-back-button>
-      <ion-back-button color="light" class="ion-activated"></ion-back-button>
-      <ion-back-button color="medium" class="ion-activated"></ion-back-button>
-      <ion-back-button color="dark" class="ion-activated"></ion-back-button>
-    </p>
-
-    <h3>Custom</h3>
-
-    <!-- Custom Font -->
-    <ion-back-button class="wide" text="wide"></ion-back-button>
-    <ion-back-button class="large" text="large"></ion-back-button>
-    <ion-back-button class="round" text="round"></ion-back-button>
-
-    <!-- Custom Colors -->
-    <ion-back-button class="custom"></ion-back-button>
-    <ion-back-button class="custom ion-activated"></ion-back-button>
-    <ion-back-button color="secondary" class="custom"></ion-back-button>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button></ion-back-button>
-        <ion-back-button class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Default</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button class="custom"></ion-back-button>
-        <ion-back-button class="custom ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Custom</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button color="secondary"></ion-back-button>
-        <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Secondary</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar color="danger">
-      <ion-buttons slot="start">
-        <ion-back-button></ion-back-button>
-        <ion-back-button class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Danger</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar color="dark">
-      <ion-buttons slot="start">
-        <ion-back-button text="Back" icon=""></ion-back-button>
-        <ion-back-button text="Back" icon="" class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Dark</ion-title>
-    </ion-toolbar>
-
-    <style>
-      ion-back-button {
-        display: inline-block !important;
-      }
-
-      .wide {
-        --background: lightblue;
-
-        width: 200px;
-      }
-
-      .large {
-        font-size: 32px;
-        text-transform: capitalize;
-      }
-
-      .custom {
-        --background: lightpink;
-        --color: rgb(214, 60, 235);
-        --border-radius: 10px;
-        --padding-start: 10px;
-        --padding-end: 10px;
-      }
-    </style>
-  </body>
-</html>

core/src/components/back-button/test/toolbar/back-button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('back-button: toolbar', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/back-button/test/toolbar`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`back-button-toolbar-${page.getSnapshotSettings()}.png`);
+  });
+});