@ionic/core 7.3.2 → 7.3.3-dev.11693454416.1cb6a7ec

package/dist/collection/components/input/test/fill/input.e2e.js

@@ -21,7 +21,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-solid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-solid`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -36,7 +36,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-solid-label-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-solid-label-floating`));
       });
       test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(`
@@ -51,7 +51,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-solid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-solid`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -75,7 +75,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-solid-custom`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-solid-custom`));
       });
     });
     test.describe('input: fill outline', () => {
@@ -91,7 +91,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-outline`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -106,7 +106,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-label-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-label-floating`));
       });
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(`
@@ -121,7 +121,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-outline`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-outline`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -145,7 +145,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-outline-custom`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-outline-custom`));
       });
     });
   });
@@ -168,7 +168,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-slotted-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-slotted-label`));
     });
     test('should render the notch correctly with a slotted label after the input was originally hidden', async ({ page, }) => {
       await page.setContent(`
@@ -188,7 +188,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `, config);
       const input = page.locator('ion-input');
       await input.evaluate((el) => el.style.removeProperty('display'));
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-hidden-slotted-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-hidden-slotted-label`));
     });
   });
   test.describe(title('input: notch cutout'), () => {

package/dist/collection/components/input/test/highlight/input.e2e.js

@@ -19,7 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-valid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -34,7 +34,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-invalid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -49,7 +49,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-focus`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-focus`));
       });
     });
     test.describe('input: solid', () => {
@@ -67,7 +67,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-valid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -83,7 +83,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-invalid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -99,7 +99,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-focus`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-focus`));
       });
     });
     test.describe('input: outline', () => {
@@ -117,7 +117,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-valid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -133,7 +133,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-invalid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -149,7 +149,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-focus`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-focus`));
       });
     });
   });

package/dist/collection/components/input/test/item/input.e2e.js

@@ -20,7 +20,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`input-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`input-list-no-fill`));
     });
     test('should render correctly in inset list with no fill', async ({ page }) => {
       await page.setContent(`
@@ -37,7 +37,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`input-inset-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`input-inset-list-no-fill`));
     });
   });
 });

package/dist/collection/components/input/test/label-placement/input.e2e.js

@@ -10,7 +10,7 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="start"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-start`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-start`));
     });
   });
   test.describe(title('input: label placement end'), () => {
@@ -19,7 +19,7 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="end"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-end`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-end`));
     });
   });
   test.describe(title('input: label placement fixed'), () => {
@@ -28,7 +28,7 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email Email Email Email Email Email" value="example@ionic.io" label-placement="fixed"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-fixed`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-fixed`));
     });
   });
   test.describe(title('input: label placement stacked'), () => {
@@ -37,21 +37,21 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-stacked-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-stacked-value`));
     });
     test('label should appear above the input when there is a no value', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-stacked-no-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-stacked-no-value`));
     });
     test('long label should truncate', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-stacked-long-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-stacked-long-label`));
     });
   });
   test.describe(title('input: label placement floating'), () => {
@@ -60,14 +60,14 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-value`));
     });
     test('label should appear on top of the input and hide the input when there is a no value', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email" label-placement="floating" placeholder="example@ionic.io"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-no-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-no-value`));
     });
     test('label should appear on top of the input when the input is focused', async ({ page }) => {
       await page.setContent(`
@@ -77,14 +77,14 @@ configs().forEach(({ title, screenshot, config }) => {
       const nativeInput = input.locator('input');
       await nativeInput.click();
       await page.waitForChanges();
-      expect(await input.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-focused-placement-floating-no-value`));
+      await expect(input).toHaveScreenshot(screenshot(`input-focused-placement-floating-no-value`));
     });
     test('long label should truncate', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-long-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-long-label`));
     });
   });
 });
@@ -98,14 +98,14 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         <ion-input fill="outline" label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-long-label-outline`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-long-label-outline`));
     });
     test('long label should truncate with solid', async ({ page }) => {
       await page.setContent(`
         <ion-input fill="solid" label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-floating-long-label-solid`));
+      await expect(input).toHaveScreenshot(screenshot(`input-placement-floating-long-label-solid`));
     });
   });
 });
@@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             <ion-input label="Label Label Label Label Label" placeholder="Text Input"></ion-input>
           `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-truncate`));
+      await expect(input).toHaveScreenshot(screenshot(`input-label-truncate`));
     });
     test('label slot should be truncated with an ellipsis', async ({ page }) => {
       await page.setContent(`
@@ -125,7 +125,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             </ion-input>
           `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-slot-truncate`));
+      await expect(input).toHaveScreenshot(screenshot(`input-label-slot-truncate`));
     });
   });
   test.describe(title('input: async label'), () => {
@@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         el.appendChild(labelEl);
       });
       await page.waitForChanges();
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-async-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-async-label`));
     });
   });
   test.describe(title('input: floating/stacked label layering'), () => {
@@ -159,7 +159,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-input class="custom-input" label="My Label" label-placement="stacked"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-layering`));
+      await expect(input).toHaveScreenshot(screenshot(`input-label-layering`));
     });
   });
 });

package/dist/collection/components/input/test/legacy/basic/input.e2e.js

@@ -18,7 +18,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input where text extends off the edge of the component.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-with-text-overflow`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-text-overflow`));
       });
     });
     test.describe('input with placeholder', () => {
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input with a placeholder.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-with-placeholder`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-placeholder`));
       });
     });
     test.describe('input disabled', () => {
@@ -50,7 +50,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input in a disabled state.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-disabled`));
+        await expect(item).toHaveScreenshot(screenshot(`input-disabled`));
       });
     });
     test.describe('input with lines="full"', () => {
@@ -67,12 +67,12 @@ configs().forEach(({ title, screenshot, config }) => {
         const item = page.locator('ion-item');
         const input = page.locator('ion-input');
         // Validates the display of an input with an ion-item using lines="full".
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-full`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full`));
         await input.click();
         // Verifies that the parent item receives .item-has-focus when the input is focused.
         await expect(item).toHaveClass(/item-has-focus/);
         // Validates the display of an input with an ion-item using lines="full" when focused.
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-full-focused`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-full-focused`));
       });
     });
     test.describe('input with lines="inset"', () => {
@@ -89,12 +89,12 @@ configs().forEach(({ title, screenshot, config }) => {
         const item = page.locator('ion-item');
         const input = page.locator('ion-input');
         // Validates the display of an input with an ion-item using lines="inset".
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-inset`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset`));
         await input.click();
         // Verifies that the parent item receives .item-has-focus when the input is focused.
         await expect(item).toHaveClass(/item-has-focus/);
         // Validates the display of an input with an ion-item using lines="inset" when focused.
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-inset-focused`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-inset-focused`));
       });
     });
     test.describe('input with lines="none"', () => {
@@ -111,12 +111,12 @@ configs().forEach(({ title, screenshot, config }) => {
         const item = page.locator('ion-item');
         const input = page.locator('ion-input');
         // Validates the display of an input with an ion-item using lines="none".
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-none`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none`));
         await input.click();
         // Verifies that the parent item receives .item-has-focus when the input is focused.
         await expect(item).toHaveClass(/item-has-focus/);
         // Validates the display of an input with an ion-item using lines="none" when focused.
-        expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`input-with-lines-none-focused`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-lines-none-focused`));
       });
     });
     test.describe('input with clear button', () => {
@@ -137,7 +137,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `, config);
         const item = page.locator('ion-item');
         // Validates the display of an input with a clear button.
-        expect(await item.screenshot()).toMatchSnapshot(screenshot(`input-with-clear-button`));
+        await expect(item).toHaveScreenshot(screenshot(`input-with-clear-button`));
       });
     });
   });

package/dist/collection/components/input/test/states/input.e2e.js

@@ -10,14 +10,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-readonly`));
+      await expect(input).toHaveScreenshot(screenshot(`input-readonly`));
     });
     test('should render disabled input correctly', async ({ page }) => {
       await page.setContent(`
         <ion-input label="Email" value="hi@ionic.io" disabled="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-disabled`));
+      await expect(input).toHaveScreenshot(screenshot(`input-disabled`));
     });
   });
 });

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

@@ -17,8 +17,7 @@
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   white-space: normal;
 }
 
@@ -67,8 +66,7 @@
   overflow: inherit;
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   font-size: 14px;
   line-height: 1.5;
 }

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

@@ -17,8 +17,7 @@
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   white-space: normal;
 }
 
@@ -67,8 +66,7 @@
   overflow: inherit;
 }
 
-:host(.ion-text-wrap),
-:host([text-wrap]) {
+:host(.ion-text-wrap) {
   line-height: 1.5;
 }
 

package/dist/collection/components/nav-link/nav-link.js

@@ -6,7 +6,13 @@ import { navLink } from "./nav-link-utils";
 export class NavLink {
   constructor() {
     this.onClick = () => {
-      return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
+      const { el } = this;
+      const button = el.querySelector('button,ion-button,a');
+      if (button === null || button === void 0 ? void 0 : button.hasAttribute('disabled')) {
+        // Do not navigate if the button is disabled
+        return;
+      }
+      return navLink(el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
     };
     this.component = undefined;
     this.componentProps = undefined;

package/dist/collection/components/radio/test/color/radio.e2e.js

@@ -12,7 +12,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-color-checked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-color-checked`));
     });
     test('should not apply color when unchecked', async ({ page }) => {
       await page.setContent(`
@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-color-unchecked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-color-unchecked`));
     });
   });
 });

package/dist/collection/components/radio/test/item/radio.e2e.js

@@ -16,7 +16,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-list`));
+      await expect(list).toHaveScreenshot(screenshot(`toggle-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(`
@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-inset-list`));
+      await expect(list).toHaveScreenshot(screenshot(`radio-inset-list`));
     });
   });
 });
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
           </ion-list>
         `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-long-label-in-item`));
+      await expect(list).toHaveScreenshot(screenshot(`radio-long-label-in-item`));
     });
   });
 });

package/dist/collection/components/radio/test/label-placement/radio.e2e.js

@@ -21,7 +21,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
            `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-start-justify-start`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-start-justify-start`));
       });
       test('should render an end justification with label in the start position', async ({ page }) => {
         await page.setContent(`
@@ -30,7 +30,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-start-justify-end`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-start-justify-end`));
       });
       test('should render a space between justification with label in the start position', async ({ page }) => {
         await page.setContent(`
@@ -39,7 +39,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-start-justify-space-between`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-start-justify-space-between`));
       });
     });
     test.describe('radio: end placement', () => {
@@ -50,7 +50,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-end-justify-start`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-end-justify-start`));
       });
       test('should render an end justification with label in the end position', async ({ page }) => {
         await page.setContent(`
@@ -59,7 +59,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-end-justify-end`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-end-justify-end`));
       });
       test('should render a space between justification with label in the end position', async ({ page }) => {
         await page.setContent(`
@@ -68,7 +68,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-end-justify-space-between`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-end-justify-space-between`));
       });
     });
     test.describe('radio: fixed placement', () => {
@@ -79,7 +79,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-start`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-start`));
       });
       test('should render an end justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
@@ -88,7 +88,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-end`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-end`));
       });
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
@@ -97,7 +97,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-space-between`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-space-between`));
       });
     });
   });

package/dist/collection/components/radio/test/states/radio.e2e.js

@@ -12,7 +12,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-disabled`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-disabled`));
     });
     test('should render disabled checked radio correctly', async ({ page }) => {
       await page.setContent(`
@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-checked-disabled`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-checked-disabled`));
     });
     test('should render checked radio correctly', async ({ page }) => {
       await page.setContent(`
@@ -30,7 +30,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-checked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-checked`));
     });
     test('should render unchecked radio correctly', async ({ page }) => {
       await page.setContent(`
@@ -39,7 +39,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-unchecked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-unchecked`));
     });
   });
 });