@ionic/core 7.6.7-dev.11706625796.1b3c1ab2 → 7.6.7-dev.11706894781.1cd59fde

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

@@ -336,7 +336,7 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses(color, {
+        return (h(Host, { class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

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/fab.js

@@ -47,12 +47,12 @@ export class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eb7470763cfaadd229036fe4e04913cb4a0551c7', class: {
+        return (h(Host, { class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
+            } }, h("slot", null)));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

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.js

@@ -63,7 +63,7 @@ export class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: '78f11aaac39bf0fcb25b64885ee61619223e4241', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -74,7 +74,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: 'a29b5eff122006d463ef3e10e1abe8378de07dc5' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: 'e554c978fd9825eec9ca958f5b481f662ed6daa4', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'd7dd93e93343767d223800899f0fd4c405845023', class: "button-inner" }, h("slot", { key: 'dd5df0945385480e7551e24117d136cd6b231638' })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

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/fab-list/fab-list.js

@@ -18,11 +18,11 @@ export class FabList {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c786680f9868700913a182f908f25a612ec08498', class: {
+        return (h(Host, { class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
+            } }, h("slot", null)));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js

@@ -80,7 +80,7 @@ export class Footer {
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: '550b8b8fb614e541e1d369fc1ac5ba1f083913b4', role: "contentinfo", class: {
+        return (h(Host, { role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -88,7 +88,7 @@ export class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: 'd25187ecc2ce7848ba882af078cb634e9d5e8814' })));
+            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", null)));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/grid/grid.js

@@ -9,10 +9,10 @@ export class Grid {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
+        return (h(Host, { class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
+            } }, h("slot", null)));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -140,14 +140,14 @@ export class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'a33e7e1818cb4718ae36b8bcfa811c4138b85fac', role: roleType, class: {
+        return (h(Host, Object.assign({ role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '7e2fa75034f7422a3dc5691e9b3c25393e16c0ca' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", null)));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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/img/img.js

@@ -71,7 +71,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '1983ddd575d8f870f249d37a3897dbcc110bf4d7', class: getIonMode(this) }, h("img", { key: 'f2ba013804f6ed9e5dadb08c75e47c0f844e67f3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { class: getIonMode(this) }, h("img", { decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -167,7 +167,7 @@ export class InfiniteScroll {
     render() {
         const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '8b5da92c7a1c118cd6c6a6be8f21b11b79f166bd', class: {
+        return (h(Host, { class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

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));
 }