@ionic/core 7.6.7-dev.11706551083.17301493 → 7.6.7-dev.11706551842.118ce6e0

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

@@ -9,7 +9,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="date" day-values="1,2,3"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const items = page.locator('.calendar-day:not([disabled])');
             /**
              * Datetime calendar grid renders 3 months by default,
@@ -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 }) => {
@@ -68,20 +68,23 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
-            const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+            await page.waitForSelector('.datetime-ready');
+            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 }) => {
             /**
@@ -105,10 +108,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
-            const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+            await page.waitForSelector('.datetime-ready');
+            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 }) => {
             /**
@@ -132,7 +135,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
             await expect(todayButton).toHaveClass(/calendar-day-today/);
         });

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/datetime-button/test/basic/datetime-button.e2e.js

@@ -14,7 +14,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
         });
         test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
             const datetime = page.locator('ion-datetime');
@@ -37,7 +37,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
             await expect(page.locator('#time-button')).toContainText('6:30 AM');
         });
@@ -46,7 +46,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month-year"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('January 2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -55,7 +55,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="year"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -64,7 +64,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('January');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -73,7 +73,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#time-button')).toContainText('6:30 AM');
             await expect(page.locator('#date-button')).toBeHidden();
         });
@@ -82,7 +82,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             const dateTarget = page.locator('#date-button');
             await expect(dateTarget).toContainText('Jan 1, 2022');
@@ -99,7 +99,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01" presentation="month-year"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('January 2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -112,7 +112,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022" presentation="year"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -123,7 +123,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="es-ES" id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             /**
              * The entire text reads 1 ene 2022, but some browsers will add
              * a period after "ene". Just checking ene allows us to verify the
@@ -137,7 +137,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime hour-cycle="h23" locale="en-US" id="datetime" value="2022-01-01T16:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#time-button')).toContainText('16:30');
         });
         test('should ignore the timezone when selecting a date', async ({ page }) => {
@@ -145,7 +145,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-02T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const timeTarget = page.locator('#time-button');
             await expect(timeTarget).toContainText('6:30');
             const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
@@ -160,7 +160,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
@@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
             await expect(page.locator('#time-button')).not.toBeVisible();
         });

package/dist/collection/components/datetime-button/test/disabled/datetime-button.e2e.js

@@ -10,7 +10,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toBeDisabled();
             await expect(page.locator('#time-button')).toBeDisabled();
         });
@@ -19,7 +19,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetimeButton = page.locator('ion-datetime-button');
             await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
         });

package/dist/collection/components/datetime-button/test/multiple/datetime-button.e2e.js

@@ -19,7 +19,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toContainText('3 days');
         });
         test('should render number of dates when 0 dates are selected', async ({ page }) => {
@@ -27,7 +27,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toHaveText('0 days');
         });
         test('should render date when only 1 day is selected', async ({ page }) => {
@@ -40,7 +40,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01'];
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
         });
         test('should use customFormatter', async ({ page }) => {
@@ -56,7 +56,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toHaveText('Selected: 3');
         });
         test('should re-render when value is programmatically changed', async ({ page }) => {
@@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01', '2022-06-02'];
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             const ionValueChange = await page.spyOnEvent('ionValueChange');
             const dateButton = page.locator('#date-button');
@@ -88,7 +88,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           datetime.value = ['2022-06-01T16:30', '2022-06-02'];
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
             await expect(page.locator('#time-button')).toHaveText('4:30 PM');
         });

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

@@ -334,10 +334,10 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --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: 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-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, #f4f5f8);
-  --background-activated: var(--ion-color-light-shade, #d7d8da);
+  --background: var(--ion-color-light, #f6f8fc);
+  --background-activated: var(--ion-color-light-shade, #d8dade);
   --background-focused: var(--background-activated);
-  --background-hover: var(--ion-color-light-tint, #f5f6f9);
+  --background-hover: var(--ion-color-light-tint, #f7f9fc);
   --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, 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);
+    --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);
     --backdrop-filter: saturate(180%) blur(20px);
   }
   :host(.fab-button-translucent-in-list) {
-    --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);
+    --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);
   }
 }
 @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, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --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, #f4f5f8);
+  --background: var(--ion-color-light, #f6f8fc);
   --background-activated: transparent;
-  --background-focused: var(--ion-color-light-shade, #d7d8da);
-  --background-hover: var(--ion-color-light-tint, #f5f6f9);
+  --background-focused: var(--ion-color-light-shade, #d8dade);
+  --background-hover: var(--ion-color-light-tint, #f7f9fc);
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {

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

@@ -1,8 +1,58 @@
 /*!
  * (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/header/test/condense/header.e2e.js

@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
             await content.evaluate(async (el) => {
                 await el.scrollToBottom();
             });
-            await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();
+            await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
             await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));
             /**
              * Playwright can't do .not.toHaveAttribute() because a value is expected,
@@ -26,7 +26,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
             await content.evaluate(async (el) => {
                 await el.scrollToTop();
             });
-            await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();
+            await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
             await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
         });
     });

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, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * 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, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * 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,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('input: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/input/test/a11y`, config);
+        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>
+          <ion-input label="Email" fill="solid" value="hi@ionic.io">
+            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+            <ion-button slot="end" aria-label="button">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
+          </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);
             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(`