@ionic/core 7.5.8-dev.11702664817.19cab605 → 7.5.8-dev.11704294569.1abc989d

package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js

@@ -60,7 +60,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
+                const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(27);
             });
             test('should respect the max bounds', async ({ page }) => {
@@ -68,7 +68,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2023-10-01"></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
+                const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(1);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -86,9 +86,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           </script>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const disabledMonths = page.locator('.month-column ion-picker-column-option.option-disabled');
-                const disabledYears = page.locator('.year-column ion-picker-column-option.option-disabled');
-                const disabledDays = page.locator('.day-column ion-picker-column-option.option-disabled');
+                const disabledMonths = page.locator('.month-column .picker-item[disabled]');
+                const disabledYears = page.locator('.year-column .picker-item[disabled]');
+                const disabledDays = page.locator('.day-column .picker-item[disabled]');
                 expect(await disabledMonths.count()).toBe(0);
                 expect(await disabledYears.count()).toBe(0);
                 expect(await disabledDays.count()).toBe(15);
@@ -105,9 +105,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const monthValues = page.locator('.month-column ion-picker-column-option');
-                const yearValues = page.locator('.year-column ion-picker-column-option');
-                const dayValues = page.locator('.day-column ion-picker-column-option');
+                const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+                const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                 expect(await monthValues.count()).toBe(2);
                 expect(await yearValues.count()).toBe(3);
                 expect(await dayValues.count()).toBe(5);
@@ -134,7 +134,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const monthValues = page.locator('.month-column ion-picker-column-option');
+                const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                 // Change month value
                 await monthValues.nth(0).click();
                 await ionChange.next();
@@ -161,7 +161,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const dayValues = page.locator('.day-column ion-picker-column-option');
+                const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                 // Change day value
                 await dayValues.nth(0).click();
                 await ionChange.next();
@@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const yearValues = page.locator('.year-column ion-picker-column-option');
+                const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
                 /**
                  * Change year value
                  * The 0th index is the current
@@ -192,9 +192,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 const datetime = page.locator('ion-datetime');
                 await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
                 await page.waitForChanges();
-                const selectedMonth = datetime.locator('.month-column ion-picker-column-option.option-active');
-                const selectedDay = datetime.locator('.day-column ion-picker-column-option.option-active');
-                const selectedYear = datetime.locator('.year-column ion-picker-column-option.option-active');
+                const selectedMonth = datetime.locator('.month-column .picker-item-active');
+                const selectedDay = datetime.locator('.day-column .picker-item-active');
+                const selectedYear = datetime.locator('.year-column .picker-item-active');
                 await expect(selectedMonth).toHaveText(/May/);
                 await expect(selectedDay).toHaveText(/25/);
                 await expect(selectedYear).toHaveText(/2021/);
@@ -213,8 +213,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
                     await page.waitForSelector('.datetime-ready');
-                    const monthValues = page.locator('.month-column ion-picker-column-option');
-                    const dayValues = page.locator('.day-column ion-picker-column-option');
+                    const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+                    const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                     await expect(monthValues).toHaveText(['1月', '2月', '3月']);
                     await expect(dayValues).toHaveText(['1日', '2日', '3日']);
                 });
@@ -228,7 +228,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
                     await page.waitForSelector('.datetime-ready');
-                    const columns = page.locator('ion-picker-column');
+                    const columns = page.locator('ion-picker-column-internal');
                     await expect(columns.nth(0)).toHaveClass(/month-column/);
                     await expect(columns.nth(1)).toHaveClass(/day-column/);
                     await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -243,7 +243,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
                     await page.waitForSelector('.datetime-ready');
-                    const columns = page.locator('ion-picker-column');
+                    const columns = page.locator('ion-picker-column-internal');
                     await expect(columns.nth(0)).toHaveClass(/day-column/);
                     await expect(columns.nth(1)).toHaveClass(/month-column/);
                     await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -256,7 +256,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date-time" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
+                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(57);
             });
             test('should respect the max bounds', async ({ page }) => {
@@ -264,7 +264,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date-time" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
+                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(41);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -282,7 +282,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           </script>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
+                const disabledDates = page.locator('.date-column .picker-item[disabled]');
                 expect(await disabledDates.count()).toBe(44);
             });
             test('should respect month, day, and year preferences', async ({ page }) => {
@@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dateValues = page.locator('.date-column ion-picker-column-option');
+                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(5);
             });
             test('should correctly localize the date data', async ({ page }) => {
@@ -312,7 +312,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dateValues = page.locator('.date-column ion-picker-column-option');
+                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
             test('should respect min and max bounds even across years', async ({ page }) => {
@@ -327,16 +327,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.waitForSelector('.datetime-ready');
                 const dateColumn = page.locator('.date-column');
-                const dateColumnScrollEl = dateColumn.locator('.picker-opts');
-                const dateValues = dateColumn.locator('ion-picker-column-option');
+                const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(90);
                 /**
                  * Select 1st item to change the dates rendered
                  */
-                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
-                await dateColumnScrollEl.evaluate((el) => (el.scrollTop = 0));
+                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
+                await dateColumn.evaluate((el) => (el.scrollTop = 0));
                 await page.waitForChanges();
-                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
+                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
             });
             test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
                 await page.setContent(`
@@ -349,7 +348,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('.date-column ion-picker-column-option');
+                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(92);
             });
             test('should narrow sliding window if default window is not within min and max constraints', async ({ page }) => {
@@ -363,7 +362,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('.date-column ion-picker-column-option');
+                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(15);
             });
             test('selecting date should update value when no value is set', async ({ page }) => {
@@ -375,7 +374,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const dayValues = page.locator('.date-column ion-picker-column-option');
+                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 // Change day/month value
                 await dayValues.nth(0).click();
                 await ionChange.next();
@@ -387,7 +386,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="time-date" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
+                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(57);
             });
             test('should respect the max bounds', async ({ page }) => {
@@ -395,7 +394,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="time-date" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
+                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(41);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -413,7 +412,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           </script>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
+                const disabledDates = page.locator('.date-column .picker-item[disabled]');
                 expect(await disabledDates.count()).toBe(44);
             });
             test('should respect month, day, and year preferences', async ({ page }) => {
@@ -428,7 +427,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dateValues = page.locator('.date-column ion-picker-column-option');
+                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(5);
             });
             test('should correctly localize the date data', async ({ page }) => {
@@ -443,7 +442,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dateValues = page.locator('.date-column ion-picker-column-option');
+                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
             test('should respect min and max bounds even across years', async ({ page }) => {
@@ -458,16 +457,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.waitForSelector('.datetime-ready');
                 const dateColumn = page.locator('.date-column');
-                const dateColumnScrollEl = dateColumn.locator('.picker-opts');
-                const dateValues = dateColumn.locator('ion-picker-column-option');
+                const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(90);
                 /**
                  * Select 1st item to change the dates rendered
                  */
-                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
-                await dateColumnScrollEl.evaluate((el) => (el.scrollTop = 0));
+                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
+                await dateColumn.evaluate((el) => (el.scrollTop = 0));
                 await page.waitForChanges();
-                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
+                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
             });
             test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
                 await page.setContent(`
@@ -480,7 +478,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         ></ion-datetime>
       `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('.date-column ion-picker-column-option');
+                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(92);
             });
             test('should narrow sliding window if default window is not within min and max constraints', async ({ page }) => {
@@ -494,7 +492,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         ></ion-datetime>
       `, config);
                 await page.waitForSelector('.datetime-ready');
-                const dayValues = page.locator('.date-column ion-picker-column-option');
+                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(15);
             });
         });

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

@@ -161,7 +161,7 @@ class TimePickerFixture {
         await this.page.waitForChanges();
     }
     async expectTime(hour, minute, ampm) {
-        const pickerColumns = this.timePicker.locator('ion-picker-column');
+        const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
         await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
         await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
         await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);

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

@@ -34,7 +34,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await expect(calendarMonthYear).toHaveText('February 2022');
             await calendarMonthYear.click();
             await page.waitForChanges();
-            await page.locator('.month-column ion-picker-column-option').nth(2).click();
+            await page.locator('.month-column .picker-item[data-value="3"]').click();
             await page.waitForChanges();
             await expect(calendarMonthYear).toHaveText('March 2022');
             await expect(ionChange).not.toHaveReceivedEvent();
@@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.waitForChanges();
             await page.keyboard.press('Enter');
             await page.waitForChanges();
-            const marchPickerItem = page.locator('.month-column ion-picker-column-option').nth(2);
+            const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
             await expect(marchPickerItem).toBeVisible();
         });
         test('should view next month via next button', async ({ page }) => {

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 ion-picker-column-option');
+            const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
             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 ion-picker-column-option');
+            const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
             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:first-of-type ion-picker-column-option');
+            const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
             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:nth-of-type(2) ion-picker-column-option');
+            const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
             await expect(items).toHaveText(['01', '02', '03']);
         });
         test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -69,22 +69,19 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.waitForSelector('.datetime-ready');
-            const minuteColumn = page.locator('ion-picker-column').nth(1);
-            const minuteItems = minuteColumn.locator('ion-picker-column-option');
+            const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
             await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
-            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(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(hourItems).toHaveText(['2']);
-            await expect(hourColumn).toHaveJSProperty('value', 2);
+            await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
             /**
              * Since the allowed hour is 2AM, the time period
              * should switch from PM to AM.
              */
-            const ampmColumn = page.locator('ion-picker-column').nth(2);
-            const ampmItems = ampmColumn.locator('ion-picker-column-option');
+            const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
             await expect(ampmItems).toHaveText(['AM', 'PM']);
-            await expect(ampmColumn).toHaveJSProperty('value', 'am');
+            await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
         });
         test('should adjust default parts month for allowed month values', async ({ page }) => {
             /**
@@ -109,9 +106,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.waitForSelector('.datetime-ready');
-            const monthItems = page.locator('.month-column ion-picker-column-option');
+            const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
             await expect(monthItems).toHaveText(['January']);
-            await expect(monthItems.nth(0)).toHaveClass(/option-active/);
+            await expect(monthItems.nth(0)).toHaveClass(/picker-item-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
+ * @returns Date data to be used in ion-picker-column-internal
  */
 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, #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/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,46 @@
 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>
+        </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(`

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, #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);
   --bottom-padding-start: 0px;
   font-size: 1rem;
 }