@ionic/core 7.6.7-dev.11706571117.1bcbc36b → 7.6.7-dev.11706824245.18d35376

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/datetime-button.css

@@ -77,7 +77,7 @@
   position: relative;
   transition: 150ms color ease-in-out;
   border: none;
-  background: var(--ion-color-step-300, #edeef0);
+  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: 1rem;

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/infinite-scroll-content/infinite-scroll-content.ios.css

@@ -140,17 +140,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-ios .infinite-loading-text {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle {
-  stroke: var(--ion-color-step-600, #666666);
+  stroke: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,
 .infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle {
-  fill: var(--ion-color-step-600, #666666);
+  fill: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css

@@ -140,17 +140,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-md .infinite-loading-text {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
-  stroke: var(--ion-color-step-600, #666666);
+  stroke: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle {
-  fill: var(--ion-color-step-600, #666666);
+  fill: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }

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

@@ -81,7 +81,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
@@ -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
@@ -284,7 +284,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   visibility: hidden;
   appearance: none;
 }
@@ -417,7 +417,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -436,7 +436,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -786,7 +786,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   font-size: inherit;
 }