@ionic/core 7.7.2-dev.11707926434.1affaed4 → 7.7.2-dev.11707932366.16baf005

package/dist/collection/components/datetime-button/datetime-button.js

@@ -7,7 +7,7 @@ import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 import { getToday } from "../datetime/utils/data";
-import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
+import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
 /**
@@ -43,12 +43,11 @@ export class DatetimeButton {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = () => {
-            var _a, _b, _c, _d, _e;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default
@@ -71,8 +70,8 @@ export class DatetimeButton {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
-                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
+                    const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
+                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
                     }
@@ -95,20 +94,20 @@ export class DatetimeButton {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
+                        this.dateText = getMonthDayAndYear(locale, firstParsedDatetime);
                     }
                     break;
                 case 'time':
-                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
+                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
                     break;
                 case 'month-year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
+                    this.dateText = getMonthAndYear(locale, firstParsedDatetime);
                     break;
                 case 'month':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
                     break;
             }
         };
@@ -337,7 +336,7 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '861a08f4a239de771875aee9b505e06ac7064b32', class: createColorClasses(color, {
+        return (h(Host, { key: 'c1ceeee6a920f8c6d43d3d8ede88a6c31a2241d8', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
@@ -347,14 +346,14 @@ export class DatetimeButton {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["datetime-button.scss"],
-            "md": ["datetime-button.scss"]
+            "ios": ["datetime-button.ios.scss"],
+            "md": ["datetime-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["datetime-button.css"],
-            "md": ["datetime-button.css"]
+            "ios": ["datetime-button.ios.css"],
+            "md": ["datetime-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/datetime-button/{datetime-button.css → datetime-button.md.css}

@@ -62,12 +62,6 @@
 
 :host button {
   border-radius: 8px;
-  -webkit-padding-start: 12px;
-  padding-inline-start: 12px;
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  padding-top: 6px;
-  padding-bottom: 6px;
   -webkit-margin-start: 2px;
   margin-inline-start: 2px;
   -webkit-margin-end: 2px;
@@ -77,7 +71,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;
@@ -97,4 +91,13 @@
 
 :host(.datetime-button-disabled) button {
   opacity: 0.4;
+}
+
+:host button {
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }

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

@@ -3,6 +3,18 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ config, screenshot, title }) => {
+    test.describe(title('datetime-button: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+        <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);
+            const datetimeButton = page.locator('ion-datetime-button');
+            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-basic`));
+        });
+    });
+});
 /**
  * The tested behavior does not
  * vary across modes/directions
@@ -174,70 +186,4 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
     });
-    test.describe(title('datetime-button: formatOptions'), () => {
-        test('should include date and time for presentation date-time', async ({ page }) => {
-            await page.setContent(`
-        <ion-datetime-button datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
-        <script>
-          const datetime = document.querySelector('ion-datetime');
-          datetime.formatOptions = {
-            date: {
-              weekday: "short",
-              month: "long",
-              day: "2-digit"
-            },
-            time: {
-              hour: "2-digit",
-              minute: "2-digit"
-            }
-          }
-        </script>
-      `, config);
-            await page.locator('.datetime-ready').waitFor();
-            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
-            await expect(page.locator('#time-button')).toContainText('01:22 AM');
-        });
-        test('should include date for presentation date', async ({ page }) => {
-            await page.setContent(`
-        <ion-datetime-button datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
-        <script>
-          const datetime = document.querySelector('ion-datetime');
-          datetime.formatOptions = {
-            date: {
-              weekday: "short",
-              month: "long",
-              day: "2-digit"
-            }
-          }
-        </script>
-      `, config);
-            await page.locator('.datetime-ready').waitFor();
-            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
-        });
-        test('should include date and time in same button for preferWheel', async ({ page }) => {
-            await page.setContent(`
-        <ion-datetime-button datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
-        <script>
-        const datetime = document.querySelector('ion-datetime');
-        datetime.formatOptions = {
-          date: {
-            weekday: "short",
-            month: "long",
-            day: "2-digit"
-          },
-          time: {
-            hour: "2-digit",
-            minute: "2-digit"
-          }
-        }
-        </script>
-      `, config);
-            await page.locator('.datetime-ready').waitFor();
-            await page.pause();
-            await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
-        });
-    });
 });

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, { key: '1a7b685098508c4eebff449775de7db5bce6937a', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
+            } }, h("slot", { key: 'd4c27f0307292cf443bfefe064f72827b0193508' })));
     }
     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;
@@ -395,9 +395,9 @@ 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) {

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, { key: '46827ed444d314218e02138c7f790418637d95d0', 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({ key: '05ab8562306b3af9a68e5f97f2815653f4ec4f86' }, 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: '315b62c5dcee8a27a3e4e572e9a9f76be9bf9f76', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '63b69cde22a13813ffa50d8f688f538a36372953', class: "button-inner" }, h("slot", { key: '39c1e85c385b36cbb31a8da8cc721cd5aa389009' })), 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;

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

@@ -184,27 +184,8 @@
   margin-bottom: 0;
   flex-direction: row-reverse;
 }
-@supports (inset-inline-start: 0) {
-  :host(.fab-list-side-start) {
-    inset-inline-end: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.fab-list-side-start) {
-    right: 0;
-  }
-  :host-context([dir=rtl]):host(.fab-list-side-start), :host-context([dir=rtl]).fab-list-side-start {
-    left: unset;
-    right: unset;
-    left: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.fab-list-side-start:dir(rtl)) {
-      left: unset;
-      right: unset;
-      left: 0;
-    }
-  }
+:host(.fab-list-side-start) {
+  inset-inline-end: 0;
 }
 
 :host(.fab-list-side-end) {
@@ -216,25 +197,6 @@
   margin-bottom: 0;
   flex-direction: row;
 }
-@supports (inset-inline-start: 0) {
-  :host(.fab-list-side-end) {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.fab-list-side-end) {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.fab-list-side-end), :host-context([dir=rtl]).fab-list-side-end {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.fab-list-side-end:dir(rtl)) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host(.fab-list-side-end) {
+  inset-inline-start: 0;
 }

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, { key: '62bfbad01d821663c6d50f63b3dc02ba2754faf0', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
+            } }, h("slot", { key: '2eec0c8415c1e4a43d7f11d26874c952a9f02046' })));
     }
     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, { key: '67ca25d2340178624b1858c7f8109013e5376934', 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", { key: 'e35b1c0c474fa0d80b6f6c0248db2b43d0903c0f' })));
     }
     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, { key: 'fdcfd1ac3b1d609c91edc514e1207447cceaf8f7', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
+            } }, h("slot", { key: 'a0660b629d05c03a8385003ade6cd0db75075987' })));
     }
     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({ key: '5546d07e3b83695335698a7707d37a298da38b72', 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", { key: '7f701a4b57b2888fbcce9b839a3bc5c9d1240e2a' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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, { key: 'b1ceee3a85c5092af386fb50ac8972c040ece6b7', class: getIonMode(this) }, h("img", { key: '722d81aaceb392f9bfde078a9054b579f51dceda', 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, { key: '118757d9470756d66434331fc0180d31ac158e06', 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));
 }

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

@@ -27,11 +27,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
+        return (h(Host, { key: '0ffeaebe071c7ffe8aabacf89382f402804de44c', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: '30a3bac66ac8230b9352223f90eb7fed56071732', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {

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