@ionic/core 7.5.8-dev.11704294569.1abc989d → 7.5.8-dev.11705350665.1a40ee3a

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

@@ -22,28 +22,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="month-year" month-values="5,6,10"></ion-datetime>
       `, config);
-            const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+            const items = page.locator('.month-column ion-picker-column-option');
             await expect(items).toHaveText(['May', 'June', 'October']);
         });
         test('should render correct years', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="month-year" year-values="2022,2021,2020"></ion-datetime>
       `, config);
-            const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+            const items = page.locator('.year-column ion-picker-column-option');
             await expect(items).toHaveText(['2022', '2021', '2020']);
         });
         test('should render correct hours', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" hour-values="1,2,3"></ion-datetime>
       `, config);
-            const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
+            const items = page.locator('ion-picker-column:first-of-type ion-picker-column-option');
             await expect(items).toHaveText(['1', '2', '3']);
         });
         test('should render correct minutes', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" minute-values="1,2,3"></ion-datetime>
       `, config);
-            const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+            const items = page.locator('ion-picker-column:nth-of-type(2) ion-picker-column-option');
             await expect(items).toHaveText(['01', '02', '03']);
         });
         test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -69,19 +69,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.waitForSelector('.datetime-ready');
-            const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+            const minuteColumn = page.locator('ion-picker-column').nth(1);
+            const minuteItems = minuteColumn.locator('ion-picker-column-option');
             await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
-            await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
-            const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
+            await expect(minuteColumn).toHaveJSProperty('value', 15);
+            const hourColumn = page.locator('ion-picker-column').nth(0);
+            const hourItems = hourColumn.locator('ion-picker-column-option');
             await expect(hourItems).toHaveText(['2']);
-            await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
+            await expect(hourColumn).toHaveJSProperty('value', 2);
             /**
              * Since the allowed hour is 2AM, the time period
              * should switch from PM to AM.
              */
-            const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
+            const ampmColumn = page.locator('ion-picker-column').nth(2);
+            const ampmItems = ampmColumn.locator('ion-picker-column-option');
             await expect(ampmItems).toHaveText(['AM', 'PM']);
-            await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
+            await expect(ampmColumn).toHaveJSProperty('value', 'am');
         });
         test('should adjust default parts month for allowed month values', async ({ page }) => {
             /**
@@ -106,9 +109,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.waitForSelector('.datetime-ready');
-            const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+            const monthItems = page.locator('.month-column ion-picker-column-option');
             await expect(monthItems).toHaveText(['January']);
-            await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
+            await expect(monthItems.nth(0)).toHaveClass(/option-active/);
         });
         test('today date highlight should persist even if disallowed from dayValues', async ({ page }) => {
             /**

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

@@ -323,7 +323,7 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
  * @param minParts The minimum bound on the date that can be returned
  * @param maxParts The maximum bound on the date that can be returned
  * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column-internal
+ * @returns Date data to be used in ion-picker-column
  */
 export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
     day: 'numeric',

package/dist/collection/components/fab-button/fab-button.ios.css

@@ -334,10 +334,10 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
-  --background-activated: var(--ion-color-primary-shade, #004acd);
-  --background-focused: var(--ion-color-primary-shade, #004acd);
-  --background-hover: var(--ion-color-primary-tint, #1a65eb);
+  --background: var(--ion-color-primary, #3880ff);
+  --background-activated: var(--ion-color-primary-shade, #3171e0);
+  --background-focused: var(--ion-color-primary-shade, #3171e0);
+  --background-hover: var(--ion-color-primary-tint, #4c8dff);
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
@@ -358,10 +358,10 @@ ion-ripple-effect {
 }
 
 :host(.fab-button-in-list) {
-  --background: var(--ion-color-light, #f6f8fc);
-  --background-activated: var(--ion-color-light-shade, #d8dade);
+  --background: var(--ion-color-light, #f4f5f8);
+  --background-activated: var(--ion-color-light-shade, #d7d8da);
   --background-focused: var(--background-activated);
-  --background-hover: var(--ion-color-light-tint, #f7f9fc);
+  --background-hover: var(--ion-color-light-tint, #f5f6f9);
   --color: var(--ion-color-light-contrast, #000);
   --color-activated: var(--ion-color-light-contrast, #000);
   --color-focused: var(--color-activated);
@@ -395,15 +395,15 @@ ion-ripple-effect {
 }
 @supports (backdrop-filter: blur(0)) {
   :host(.fab-button-translucent) {
-    --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.9);
-    --background-hover: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.8);
-    --background-focused: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.82);
+    --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);
+    --background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);
+    --background-focused: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);
     --backdrop-filter: saturate(180%) blur(20px);
   }
   :host(.fab-button-translucent-in-list) {
-    --background: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.9);
-    --background-hover: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.8);
-    --background-focused: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.82);
+    --background: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);
+    --background-hover: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);
+    --background-focused: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82);
   }
 }
 @supports (backdrop-filter: blur(0)) {

package/dist/collection/components/fab-button/fab-button.md.css

@@ -334,7 +334,7 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
@@ -359,10 +359,10 @@ ion-ripple-effect {
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-activated: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-focused: var(--color-activated);
-  --background: var(--ion-color-light, #f6f8fc);
+  --background: var(--ion-color-light, #f4f5f8);
   --background-activated: transparent;
-  --background-focused: var(--ion-color-light-shade, #d8dade);
-  --background-hover: var(--ion-color-light-tint, #f7f9fc);
+  --background-focused: var(--ion-color-light-shade, #d7d8da);
+  --background-hover: var(--ion-color-light-tint, #f5f6f9);
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {

package/dist/collection/components/fab-button/test/a11y/fab-button.e2e.js

@@ -1,58 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('fab-button: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab-button>FAB</ion-fab-button>
-        <ion-fab-button class="ion-activated">FAB</ion-fab-button>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('fab-list: contrast'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab activated="true">
-          <ion-fab-button>
-            Open
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button>Down</ion-fab-button>
-            <ion-fab-button class="ion-activated">Down</ion-fab-button>
-            <ion-fab-button class="ion-focused">Down</ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('fab: translucent contrast'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-fab-button translucent="true">FAB</ion-fab-button>
-        <ion-fab-button class="ion-focused" translucent="true">FAB</ion-fab-button>
-        <ion-fab activated="true">
-          <ion-fab-button>
-            Open
-          </ion-fab-button>
-          <ion-fab-list side="bottom">
-            <ion-fab-button translucent="true">Down</ion-fab-button>
-            <ion-fab-button class="ion-focused" translucent="true">Down</ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('fab-button: aria attributes'), () => {
         test('should inherit aria attributes to inner button', async ({ page }) => {

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state

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

@@ -4,46 +4,14 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: a11y'), () => {
-        test('default layout should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-input label="Label" placeholder="Placeholder"></ion-input>
-          <ion-input placeholder="Placeholder">
-            <div slot="label">Label"></div>
-          </ion-input>
-          <ion-input label="Label" value="My Text"></ion-input>
-          <ion-input aria-label="Label"></ion-input>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('focused state should not have accessibility violations', async ({ page }) => {
-            /**
-             * The primary color against the focus background
-             * when using fill="solid" does not meet AA
-             * contrast guidelines so it excluded from the test.
-             * The contrast here is a significant improvement
-             * over what Ionic has had in the past, so the team
-             * has decided that this tradeoff is acceptable since
-             * the scope of the problem is limited to the focus
-             * state with the primary color when fill="solid".
-             */
-            await page.setContent(`
-        <main>
-          <ion-input class="has-focus" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-input>
-        </main>
-      `, config);
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/input/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
-});
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

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

@@ -656,9 +656,9 @@ ion-ripple-effect {
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --highlight-height: 0px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   --bottom-padding-start: 0px;
   font-size: 1rem;
 }

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

@@ -756,9 +756,9 @@ ion-ripple-effect {
   --inner-padding-end: 16px;
   --inner-border-width: 0 0 1px 0;
   --highlight-height: 1px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   font-size: 1rem;
   font-weight: normal;
   text-transform: none;
@@ -1056,7 +1056,7 @@ ion-ripple-effect {
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.ion-color) {

package/dist/collection/components/item-option/item-option.ios.css

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);
@@ -234,7 +234,7 @@
 }
 
 :host(.ion-activated) {
-  background: var(--ion-color-primary-shade, #004acd);
+  background: var(--ion-color-primary-shade, #3171e0);
 }
 
 :host(.ion-color.ion-activated) {

package/dist/collection/components/item-option/item-option.md.css

@@ -58,7 +58,7 @@
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);

package/dist/collection/components/item-sliding/test/a11y/item-sliding.e2e.js

@@ -1,36 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from "@axe-core/playwright";
-import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 import { testSlidingItem } from "../test.utils";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('item-sliding: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-item-sliding id="axe">
-            <ion-item>
-              <ion-label>Sliding Item with End Options</ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>Favorite</ion-item-option>
-              <ion-item-option class="ion-activated">Activated</ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </main>
-      `, config);
-            await page.locator(`#axe`).evaluate(async (el) => {
-                await el.open('end');
-            });
-            await page.waitForChanges();
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 /**
  * This behavior does not vary across directions
  */

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

@@ -337,7 +337,7 @@
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 :host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),

package/dist/collection/components/label/test/a11y/label.e2e.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
@@ -65,22 +64,3 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('label: a11y for ion-color()'), () => {
-        test('should not have accessibility violations when focused', async ({ page }) => {
-            /**
-             * All page content should be contained by landmarks (main, nav, etc.)
-             * By containing the badge in a main element, we can avoid this violation.
-             */
-            await page.setContent(`
-          <main>
-            <div class="ion-focused">
-              <ion-label position="stacked">Default Label</ion-label>
-            </div>
-          </main>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});

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

@@ -173,7 +173,7 @@ ion-spinner {
   --background: var(--ion-color-step-50, #f2f2f2);
   --max-width: 280px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-primary, #0054e9);
+  --spinner-color: var(--ion-color-primary, #3880ff);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
   color: var(--ion-color-step-850, #262626);
   font-size: 0.875rem;

package/dist/collection/components/loading/test/a11y/loading.e2e.js

@@ -4,36 +4,20 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('loading: a11y'), () => {
         test('should set aria-labelledby with a message', async ({ page }) => {
-            await page.setContent(`
-          <ion-loading></ion-loading>
-
-          <script>
-            const loading = document.querySelector('ion-loading');
-            loading.message = 'Loading';
-          </script>
-        `, config);
+            await page.goto('/src/components/loading/test/a11y', config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            const loading = page.locator('ion-loading');
-            await loading.evaluate((el) => el.present());
+            await page.click('#open-message-loading');
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
         test('should set aria-labelledby with a label', async ({ page }) => {
-            await page.setContent(`
-          <ion-loading aria-label="Loading"></ion-loading>
-
-          <script>
-            const loading = document.querySelector('ion-loading');
-            loading.spinner = 'bubbles';
-          </script>
-        `, config);
+            await page.goto('/src/components/loading/test/a11y', config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            const loading = page.locator('ion-loading');
-            await loading.evaluate((el) => el.present());
+            await page.click('#open-label-loading');
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -261,7 +261,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: .1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
   --padding-start: 5px;
   --padding-end: 5px;
   min-height: 32px;

package/dist/collection/components/menu-button/test/a11y/menu-button.e2e.js

@@ -4,20 +4,6 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Only ios mode uses ion-color() for the menu button
- */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('menu-button: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-menu-button auto-hide="false"></ion-menu-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('menu-button: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {