@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/content/content.js

@@ -2,15 +2,14 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, readTask } from "@stencil/core";
-import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from "../../utils/helpers";
+import { hasLazyBuild, inheritAriaAttributes, waitForComponentReady } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed in the scrollable area if provided without a slot.
  * @slot fixed - Should be used for fixed content that should not scroll.
@@ -186,7 +185,7 @@ export class Content {
          * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
          * `forceUpdate` will trigger another render, locking up the server.
          *
-         * TODO: Remove if STENCIL-834 determines Stencil will account for this.
+         * TODO(STENCIL-834): Remove if Stencil will account for this.
          */
         if (Build.isBrowser) {
             if (this.fullscreen) {
@@ -249,9 +248,9 @@ export class Content {
          * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
          */
         if (!this.scrollEl) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
+            await waitForComponentReady(this.el);
         }
-        return Promise.resolve(this.scrollEl);
+        return this.scrollEl;
     }
     /**
      * Returns the background content element.
@@ -259,9 +258,9 @@ export class Content {
      */
     async getBackgroundElement() {
         if (!this.backgroundContentEl) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
+            await waitForComponentReady(this.el);
         }
-        return Promise.resolve(this.backgroundContentEl);
+        return this.backgroundContentEl;
     }
     /**
      * Scroll to the top of the component.
@@ -372,26 +371,28 @@ export class Content {
     render() {
         const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
+        const mode = getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll(mode);
-        const transitionShadow = theme === 'ios';
+        /**
+         * The transition shadow effect is only animated by the iOS transition
+         * builder, so these elements are only rendered in iOS mode.
+         */
+        const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: 'd7f325c30b698dc42ec5e8c45b29e82749743cf4', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, Object.assign({ key: '17824a110a0ca47f8bbc6614100c8409f447c75d', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
-                overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
+                overscroll: forceOverscroll,
             }), style: {
-                '--offset-top': `${this.cTop}px`,
-                '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: 'c93b2c622a69c7fd153bbe9b0c6f8c24d85ed969', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '1700cc94e464ad1ab1c6672270f9649e90be3a5e', class: {
+                '--internal-offset-top': `${this.cTop}px`,
+                '--internal-offset-bottom': `${this.cBottom}px`,
+            } }, inheritedAttributes), h("div", { key: '41f32530395575c8dd8e18ed141c723b9fcf2ff1', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'c4ff0449c4e5a1168d1edbcd8c0379ae508d97b9', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'bff713ead4f61730e3f36b5af4b771ae62bde6cd' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '90325c23154a4a35cf6827337bb49edbd7bc3f20' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -571,8 +572,8 @@ export class Content {
                     "references": {
                         "ScrollBaseDetail": {
                             "location": "import",
-                            "path": "./content-interface",
-                            "id": "src/components/content/content-interface.ts::ScrollBaseDetail",
+                            "path": "./content.interfaces",
+                            "id": "src/components/content/content.interfaces.ts::ScrollBaseDetail",
                             "referenceLocation": "ScrollBaseDetail"
                         }
                     }
@@ -593,8 +594,8 @@ export class Content {
                     "references": {
                         "ScrollDetail": {
                             "location": "import",
-                            "path": "./content-interface",
-                            "id": "src/components/content/content-interface.ts::ScrollDetail",
+                            "path": "./content.interfaces",
+                            "id": "src/components/content/content.interfaces.ts::ScrollDetail",
                             "referenceLocation": "ScrollDetail"
                         }
                     }
@@ -615,8 +616,8 @@ export class Content {
                     "references": {
                         "ScrollBaseDetail": {
                             "location": "import",
-                            "path": "./content-interface",
-                            "id": "src/components/content/content-interface.ts::ScrollBaseDetail",
+                            "path": "./content.interfaces",
+                            "id": "src/components/content/content.interfaces.ts::ScrollBaseDetail",
                             "referenceLocation": "ScrollBaseDetail"
                         }
                     }

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

@@ -553,7 +553,7 @@
   padding-inline-end: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-background-color-step-300, #edeef0);
   color: var(--ion-text-color, #000);
 }
 
@@ -726,9 +726,9 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-light, #f4f5f8);
-  --background-rgb: var(--ion-color-light-rgb, 244, 245, 248);
-  --title-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --background: var(--ion-color-light, var(--ion-color-light-bold));
+  --background-rgb: var(--ion-color-light-rgb, var(--ion-color-light-bold-rgb));
+  --title-color: var(--ion-text-color-step-400, #666666);
 }
 
 :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
@@ -744,7 +744,7 @@ ion-picker {
   padding-inline-end: 16px;
   padding-top: 16px;
   padding-bottom: 16px;
-  border-bottom: 0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));
+  border-bottom: 0.55px solid var(--ion-background-color-step-200, #cccccc);
   font-size: min(0.875rem, 22.4px);
 }
 
@@ -820,7 +820,7 @@ ion-picker {
   padding-inline-end: 8px;
   padding-top: 0;
   padding-bottom: 0;
-  color: var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));
+  color: var(--ion-text-color-step-700, #b3b3b3);
   font-size: min(0.75rem, 19.2px);
   font-weight: 600;
   line-height: 24px;
@@ -997,7 +997,7 @@ ion-picker {
 }
 
 :host .calendar-day.calendar-day-adjacent-day {
-  color: var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));
+  color: var(--ion-text-color-step-700, #b3b3b3);
 }
 
 :host .datetime-time {
@@ -1021,7 +1021,7 @@ ion-picker {
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  border-top: 0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));
+  border-top: 0.55px solid var(--ion-background-color-step-200, #cccccc);
 }
 
 :host .datetime-buttons,

package/dist/collection/components/datetime/datetime.md.css

@@ -553,7 +553,7 @@
   padding-inline-end: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-background-color-step-300, #edeef0);
   color: var(--ion-text-color, #000);
 }
 
@@ -726,7 +726,7 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --background: var(--ion-background-color-step-100, #ffffff);
   --title-color: var(--ion-color-contrast);
 }
 
@@ -752,7 +752,7 @@ ion-picker {
 }
 
 :host .calendar-action-buttons ion-button {
-  --color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
+  --color: var(--ion-text-color-step-350, #595959);
 }
 
 .calendar-next-prev ion-button {
@@ -782,7 +782,7 @@ ion-picker {
   padding-bottom: 12px;
   min-height: 48px;
   background: transparent;
-  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
+  color: var(--ion-text-color-step-350, #595959);
   z-index: 1;
 }
 .calendar-month-year-toggle.ion-focused::after {
@@ -806,7 +806,7 @@ ion-picker {
   padding-inline-end: 10px;
   padding-top: 0px;
   padding-bottom: 0px;
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-text-color-step-500, gray);
   font-size: 0.875rem;
   line-height: 36px;
 }
@@ -861,7 +861,7 @@ ion-picker {
 }
 
 :host .calendar-day.calendar-day-adjacent-day {
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-text-color-step-500, gray);
 }
 
 :host .datetime-time {
@@ -874,7 +874,7 @@ ion-picker {
 }
 
 :host .time-header {
-  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
+  color: var(--ion-text-color-step-350, #595959);
 }
 
 /**

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

@@ -77,7 +77,7 @@
   position: relative;
   transition: 150ms color ease-in-out;
   border: none;
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-background-color-step-300, #edeef0);
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: 1rem;
@@ -109,5 +109,5 @@
 }
 
 :host button.ion-activated {
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-text-color-step-400, #666666);
 }

package/dist/collection/components/datetime-button/datetime-button.md.css

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

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

@@ -95,7 +95,7 @@
   --color-activated: var(--color);
   --color-focused: var(--color);
   --color-hover: var(--color);
-  --background-hover: var(--ion-color-primary-contrast, #fff);
+  --background-hover: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
   --background-hover-opacity: 0.08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
@@ -346,14 +346,14 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --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: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --background-activated: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
+  --background-focused: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
+  --background-hover: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint));
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
-  --color: var(--ion-color-primary-contrast, #fff);
+  --color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
   --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   --transition: 0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);
   --close-icon-font-size: 28px;
@@ -370,12 +370,12 @@ 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, var(--ion-color-light-bold));
+  --background-activated: var(--ion-color-light-shade, var(--ion-color-light-bold-shade));
   --background-focused: var(--background-activated);
-  --background-hover: var(--ion-color-light-tint, #f5f6f9);
-  --color: var(--ion-color-light-contrast, #000);
-  --color-activated: var(--ion-color-light-contrast, #000);
+  --background-hover: var(--ion-color-light-tint, var(--ion-color-light-bold-tint));
+  --color: var(--ion-color-light-contrast, var(--ion-color-light-bold-contrast));
+  --color-activated: var(--ion-color-light-contrast, var(--ion-color-light-bold-contrast));
   --color-focused: var(--color-activated);
   --transition: transform 200ms ease 10ms, opacity 200ms ease 10ms;
 }
@@ -407,15 +407,15 @@ ion-ripple-effect {
 }
 @supports (backdrop-filter: blur(0)) {
   :host(.fab-button-translucent) {
-    --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);
+    --background: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.9);
+    --background-hover: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.8);
+    --background-focused: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 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, var(--ion-color-light-bold-rgb)), 0.9);
+    --background-hover: rgba(var(--ion-color-light-rgb, var(--ion-color-light-bold-rgb)), 0.8);
+    --background-focused: rgba(var(--ion-color-light-rgb, var(--ion-color-light-bold-rgb)), 0.82);
   }
 }
 @supports (backdrop-filter: blur(0)) {

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

@@ -3,8 +3,8 @@
  */
 import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, h } from "@stencil/core";
-import { inheritAriaAttributes } from "../../utils/helpers";
-import { createColorClasses, hostContext, openURL } from "../../utils/theme";
+import { inheritAriaAttributes, openURL } from "../../utils/helpers";
+import { createColorClasses, hostContext } from "../../utils/theme";
 import { close } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";

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

@@ -95,7 +95,7 @@
   --color-activated: var(--color);
   --color-focused: var(--color);
   --color-hover: var(--color);
-  --background-hover: var(--ion-color-primary-contrast, #fff);
+  --background-hover: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
   --background-hover-opacity: 0.08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
@@ -346,14 +346,14 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, var(--ion-color-primary-bold));
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
   --background-activated-opacity: 0;
   --background-focused-opacity: 0.24;
   --background-hover-opacity: 0.08;
-  --color: var(--ion-color-primary-contrast, #fff);
+  --color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
   --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
   --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   --close-icon-font-size: 24px;
@@ -371,10 +371,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, var(--ion-color-light-bold));
   --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, var(--ion-color-light-bold-shade));
+  --background-hover: var(--ion-color-light-tint, var(--ion-color-light-bold-tint));
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {

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

@@ -16,10 +16,10 @@ export class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
+        return (h(Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
+            } }, h("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,7 +156,7 @@ export class Header {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
-        return (h(Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '658d5746920c349cc9fe85666c7215f2edc3c794', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -164,7 +164,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: '4a1470d86e1aac6f8d545fe01e75b4dce665fb70', class: "header-background" }), h("slot", { key: '3b02661242bda5834c4e13e4eb61bf79b53ba33e' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/img/img.js

@@ -80,9 +80,9 @@ export class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
+        return (h(Host, { key: '840d5b29d81222b061ac72168ef6551b5a061e3a', class: {
                 [theme]: true,
-            } }, h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: 'e22e66ee4bb3a648b21c6080674e68eebf4a3feb', 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

@@ -264,7 +264,7 @@ export class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
+        return (h(Host, { key: '22d99824cb589d9024666a3c1ed205f781858eed', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

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

@@ -152,17 +152,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-ios .infinite-loading-text {
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: 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, var(--ion-text-color-step-400, #666666));
+  stroke: 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, var(--ion-text-color-step-400, #666666));
+  fill: var(--ion-text-color-step-400, #666666);
 }

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

@@ -29,11 +29,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
+        return (h(Host, { key: 'e94d19f17ef9d4d77786716152e3206366feb546', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: 'ee38d3c52df9dc5de186406b3087f20917a17252', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'e2348727f79a26f52f42641d4334a0ba9d4aa03e', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '41be6f2747f3af5f46c8738e2ef56083ecd95e99', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: '35fcc0572ad27a683aa55a704bd11b19fcdfd29c', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'fec3c13dbb2fa98699401147ce442b73e97e8bd8', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '6cd6083255dacc891b4d201477e6bffccb1084bc', 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

@@ -152,17 +152,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-md .infinite-loading-text {
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: 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, var(--ion-text-color-step-400, #666666));
+  stroke: 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, var(--ion-text-color-step-400, #666666));
+  fill: var(--ion-text-color-step-400, #666666);
 }

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

@@ -529,9 +529,9 @@
   --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --color: initial;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --highlight-color-valid: var(--ion-color-success, var(--ion-color-success-bold));
+  --highlight-color-invalid: var(--ion-color-danger, var(--ion-color-danger-bold));
   min-height: 44px;
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
@@ -563,7 +563,7 @@
 .input-clear-icon {
   width: 30px;
   height: 30px;
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-text-color-step-400, #666666);
 }
 
 /**
@@ -611,11 +611,11 @@
 }
 
 .input-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .input-bottom .counter {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   padding-inline-start: 16px;
 }
 
@@ -807,7 +807,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   --highlight-height: 0px;
   font-size: inherit;
 }

package/dist/collection/components/input/input.js

@@ -4,7 +4,7 @@
 import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
 import { createNotchController, checkInvalidState } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, inheritAttributes, waitForComponentReady } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -324,7 +324,7 @@ export class Input {
          * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
          */
         if (!this.nativeInput) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
+            await waitForComponentReady(this.el);
         }
         return Promise.resolve(this.nativeInput);
     }
@@ -617,7 +617,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '3da29d837b5abe22de740ac96c8142422fce537a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '72ff80060f5d455269e60c7a91a5431374359747', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -630,7 +630,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: '142a8230382a05938887e9c0790832218ac37697', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '953f247ea2f40545e01e0346549d9b7aa344b720', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: 'b0c5ac639540d810492b96aa97e51a509b0e6e85', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'a901459cffc5ca52684ebd7bb060986c6ca7fa3b', class: "native-wrapper", onClick: this.onLabelClick }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -640,14 +640,14 @@ export class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && h("div", { key: 'fd09b37c6a798900c5074e7cbe2e790ea050c29d', class: "input-outline" }), h("slot", { key: '3eef4c4748104d8722f3254a04ff88e2b70c560e', name: "start" }), h("input", Object.assign({ key: '012a3fa52e19422d7fbc227845e9771c7d8fbe4a', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'b115494d9611aea57a976d3102026f3d9b430bfb', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && h("div", { key: '9082f89d9ebbfe2d8fea776e9c0d954a269f27df', class: "input-outline" }), h("slot", { key: 'a864258f44c1dbe56bd90e46f04d11f42f33de61', name: "start" }), h("input", Object.assign({ key: '6f6f2e5965a545599524b1a1e24eee0f4dba4e50', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: '524d8d203a585f77ea54b11b848b934e84b460cd', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'a259afa47a9914b2e0656364bed40644fa2c87c4', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'beec86eb500f6b335149c8734afc7c3945a10219', name: "end" })), shouldRenderHighlight && h("div", { key: '77a25d118934f369e09edbc2ffa6f90e3e760338', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '1054440665cf6488e95c03d13430b2848aab695c', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '712aedbe1a5b8864912c04128ea7141d72ca0fd7', name: "end" })), shouldRenderHighlight && h("div", { key: '11cc8a95be3489811c22ad54e8acf7406517e503', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }