@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/progress-bar/progress-bar.js

@@ -5,10 +5,8 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } 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.
  *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
@@ -38,48 +36,39 @@ export class ProgressBar {
          */
         this.buffer = 1;
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11638): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
+    /**
+     * Gets the progress bar shape. Uses the `shape` property if set,
+     * otherwise checks the theme config. Defaults to `round` if
+     * neither is set.
+     */
+    get shapeValue() {
+        var _a;
+        return (_a = this.shape) !== null && _a !== void 0 ? _a : config.getObjectValue('IonProgressBar.shape', 'round');
     }
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
+        const shape = this.shapeValue;
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '0f6202e25d884fb85d18578769f6cfa5c704e9d9', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
-                [theme]: true,
-                [`progress-bar-${type}`]: true,
+        return (h(Host, { key: '244d091bd9f601cf4292c35022053141f667dbb0', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+                [`progress-bar-type-${type}`]: true,
+                [`progress-bar-shape-${shape}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
                 'progress-bar-solid': progressSolid,
-                [`progress-bar-shape-${shape}`]: shape !== undefined,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
     static get is() { return "ion-progress-bar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["progress-bar.ios.scss"],
-            "md": ["progress-bar.md.scss"],
-            "ionic": ["progress-bar.ionic.scss"]
+            "$": ["progress-bar.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["progress-bar.ios.css"],
-            "md": ["progress-bar.md.css"],
-            "ionic": ["progress-bar.ionic.css"]
+            "$": ["progress-bar.css"]
         };
     }
     static get properties() {
@@ -194,15 +183,22 @@ export class ProgressBar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round' | 'rectangular'",
+                    "original": "IonProgressBarShape",
                     "resolved": "\"rectangular\" | \"round\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonProgressBarShape": {
+                            "location": "import",
+                            "path": "./progress-bar.interfaces",
+                            "id": "src/components/progress-bar/progress-bar.interfaces.ts::IonProgressBarShape",
+                            "referenceLocation": "IonProgressBarShape"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"round\"` for a progress bar with rounded corners, or `\"rectangular\"`\nfor a progress bar without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                    "text": "Set to `\"round\"` for a progress bar with rounded corners, or `\"rectangular\"`\nfor a progress bar without rounded corners.\n\nDefaults to `\"round\"` if both the shape property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
@@ -227,8 +223,12 @@ const renderProgress = (value, buffer) => {
          * When finalBuffer === 1, we use display: none
          * instead of removing the element to avoid flickering.
          */
-        // TODO(FW-6697): change `ion-hide` class to `ion-display-none` or another class
-        h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
+        // TODO(FW-6697): remove `ion-hide` class in favor of `buffer-circles-container-hidden`
+        h("div", { class: {
+                'buffer-circles-container': true,
+                'buffer-circles-container-hidden': finalBuffer === 1,
+                'ion-hide': finalBuffer === 1,
+            }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
         h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
     ];
 };

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

@@ -469,7 +469,7 @@ input {
  * }
  */
 :host {
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 
 :host(.ion-color.radio-checked) .radio-inner {
@@ -506,7 +506,7 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
+  background: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint));
   content: "";
   opacity: 0.2;
 }

package/dist/collection/components/radio/radio.js

@@ -139,7 +139,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const theme = getIonTheme(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '82127b11eac97fa45886179d248c8509ca07655a', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '19cc76c559551a34e4968f4902709be6f104dede', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -150,10 +150,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '352c25ebdeeba01b85dc02b2108de988e9eb14a6', class: "radio-wrapper" }, h("div", { key: '8eca395a22199d24b376c57dd52eeaa91ba51c34', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'ba97fae433b69e609ad88b949a56cd213d866ae6', class: "radio-wrapper" }, h("div", { key: 'a742b8f1a56d080fd221d89717dbd110db18ee69', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '9c26b977843398be61f1b753251d8fe40d65702a' })), h("div", { key: '336b2d6aeb5e86dc1d994ac1eac52634f5da5b9c', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: 'f06b9b57e1c2d66d3eb6790ca30f4d5e85d0d264' })), h("div", { key: '780fc11778f5661d95e60c6cd72a9ed78910b889', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -470,7 +470,7 @@ input {
  */
 :host {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, var(--ion-color-primary-bold));
   --border-width: 0.125rem;
   --border-style: solid;
   --border-radius: 50%;
@@ -526,7 +526,7 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
+  background: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint));
   content: "";
   opacity: 0.2;
 }

package/dist/collection/components/radio-group/radio-group.ios.css

@@ -149,11 +149,11 @@
 }
 
 .radio-group-top .error-text {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, var(--ion-color-danger-bold));
 }
 
 .radio-group-top .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 /**

package/dist/collection/components/radio-group/radio-group.js

@@ -265,10 +265,10 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: 'c8077cb16bcc6719fa2aba1a5a9cb139e0b81a9e', class: {
+        return (h(Host, { key: '39246fbf1f1e3a6ba27dd715f030445d4434999b', class: {
                 [theme]: true,
                 'in-list': hostContext('ion-list', el),
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("slot", { key: 'ddeca1867cb8e74121add7616f6be9e1a202c142' })));
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("slot", { key: '892b023cb363fc2dc67f8df028d3dfc58f7b54cd' })));
     }
     static get is() { return "ion-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.md.css

@@ -149,11 +149,11 @@
 }
 
 .radio-group-top .error-text {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, var(--ion-color-danger-bold));
 }
 
 .radio-group-top .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 /**

package/dist/collection/components/range/range.ionic.css

@@ -352,7 +352,7 @@
   --knob-handle-size: var(--token-scale-1100, 44px);
   --bar-height: var(--token-scale-200, 8px);
   --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
-  --bar-background-active: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
+  --bar-background-active: var(--ion-color-primary, var(--ion-color-primary-bold));
   --bar-border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
   --height: var(--token-scale-1100, 44px);
   font-size: var(--token-font-size-350, 0.875rem);

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

@@ -497,8 +497,8 @@
   --knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
   --knob-size: 26px;
   --bar-height: 4px;
-  --bar-background: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
-  --bar-background-active: var(--ion-color-primary, #0054e9);
+  --bar-background: var(--ion-background-color-step-900, #e6e6e6);
+  --bar-background-active: var(--ion-color-primary, var(--ion-color-primary-bold));
   --bar-border-radius: 2px;
   --height: 42px;
 }
@@ -582,7 +582,7 @@
   top: 17px;
   width: 4px;
   height: 8px;
-  background: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
+  background: var(--ion-background-color-step-900, #e6e6e6);
   pointer-events: none;
 }
 

package/dist/collection/components/range/range.js

@@ -773,7 +773,7 @@ export class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '6c11f7ad176a00ca5368be9ba46c29f6a9aa02bb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '1b8ca217fa6965fc038fb4ca8f0bc9142b3893ad', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -787,10 +787,10 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: '4ac202cf5fd17a9f69e288508e89cfe266a2c8f2', class: "range-wrapper", id: "range-label" }, h("div", { key: '1261d51ce247e066e5005f4aaa7b474ae0ddd421', class: {
+            }) }, h("label", { key: '98b02130c9bb5a9ba6557be28f1ac09be0d10806', class: "range-wrapper", id: "range-label" }, h("div", { key: '570083103b51b335c805672918d69e997dc30e66', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '4c09b153ab02c2c80b6197c2beb73c8cd1dc9348', class: "native-wrapper" }, h("slot", { key: 'a81e2e9a5442603f128fec3d1f15090615164abf', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'ccc0a89eb6ce714e5b67893fb6845670a7857914', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '1e3233a747d0adca6611234d0675ce049ef979cf', class: "native-wrapper" }, h("slot", { key: '4f06a217592a98d889420468eb282ba8652ef1cc', name: "start" }), this.renderRangeSlider(), h("slot", { key: '4286279dbadf0e92bffbd5e98d5e36cba095be3c', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -497,12 +497,12 @@
   --knob-box-shadow: none;
   --knob-size: 18px;
   --bar-height: 2px;
-  --bar-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.26);
-  --bar-background-active: var(--ion-color-primary, #0054e9);
+  --bar-background: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.26);
+  --bar-background-active: var(--ion-color-primary, var(--ion-color-primary-bold));
   --bar-border-radius: 0;
   --height: 42px;
-  --pin-background: var(--ion-color-primary, #0054e9);
-  --pin-color: var(--ion-color-primary-contrast, #fff);
+  --pin-background: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --pin-color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
 }
 
 ::slotted(:not(ion-icon)[slot=start]),
@@ -716,13 +716,13 @@
 :host(.range-disabled) .range-bar-active,
 :host(.range-disabled) .range-bar,
 :host(.range-disabled) .range-tick {
-  background-color: var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
+  background-color: var(--ion-background-color-step-250, #bfbfbf);
 }
 
 :host(.range-disabled) .range-knob {
   transform: scale(0.55);
   outline: 5px solid #fff;
-  background-color: var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
+  background-color: var(--ion-background-color-step-250, #bfbfbf);
 }
 
 :host(.range-disabled) .label-text-wrapper,

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

@@ -264,7 +264,7 @@ ion-refresher.refresher-native ion-spinner {
 .refresher-native ion-spinner {
   width: 32px;
   height: 32px;
-  color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
+  color: var(--ion-background-color-step-450, #747577);
 }
 
 .refresher-native.refresher-refreshing .refresher-pulling ion-spinner,

package/dist/collection/components/refresher/refresher.js

@@ -493,7 +493,7 @@ export class Refresher {
          * element to ensure that the refresher is shown.
          */
         if (this.contentFullscreen && this.backgroundContentEl) {
-            this.backgroundContentEl.style.setProperty('--offset-top', '0px');
+            this.backgroundContentEl.style.setProperty('--internal-offset-top', '0px');
         }
     }
     onMove(detail) {
@@ -659,7 +659,7 @@ export class Refresher {
              * does not change when refreshing is complete.
              */
             if (this.contentFullscreen && this.backgroundContentEl) {
-                (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
+                (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--internal-offset-top');
             }
             this.ionPullEnd.emit({
                 reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
@@ -717,7 +717,7 @@ export class Refresher {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'd2671f7850b565e7a6fc5b3ff15b2410bcf7cb32', slot: "fixed", class: {
+        return (h(Host, { key: '95a9b35e835bc77f5f8d228a95420209f266f54a', slot: "fixed", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`refresher-${theme}`]: true,

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

@@ -250,7 +250,7 @@ ion-refresher.refresher-native ion-spinner {
   margin-bottom: 0;
   width: 24px;
   height: 24px;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }
 ion-refresher.refresher-native .spinner-arrow-container {
   display: inherit;
@@ -272,7 +272,7 @@ ion-refresher.refresher-native .arrow-container ion-icon {
   left: 0;
   bottom: -4px;
   position: absolute;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
   font-size: 12px;
 }
 ion-refresher.refresher-native.refresher-pulling ion-refresher-content .refresher-pulling, ion-refresher.refresher-native.refresher-ready ion-refresher-content .refresher-pulling {
@@ -300,7 +300,7 @@ ion-refresher.refresher-native .refresher-refreshing-icon {
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec));
-  background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff));
+  border: 1px solid var(--ion-background-color-step-200, #ececec);
+  background: var(--ion-background-color-step-250, #ffffff);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
 }

package/dist/collection/components/refresher/refresher.utils.js

@@ -3,7 +3,7 @@
  */
 import { writeTask } from "@stencil/core";
 import { createAnimation } from "../../utils/animation/animation";
-import { clamp, componentOnReady, transitionEndAsync } from "../../utils/helpers";
+import { clamp, waitForComponentReady, transitionEndAsync } from "../../utils/helpers";
 export const getRefresherAnimationType = (contentEl) => {
     const previousSibling = contentEl.previousElementSibling;
     const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
@@ -184,7 +184,7 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     if (!refresherContent) {
         return Promise.resolve(false);
     }
-    await new Promise((resolve) => componentOnReady(refresherContent, resolve));
+    await waitForComponentReady(refresherContent);
     const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
     const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
     return (pullingSpinner !== null &&

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

@@ -53,9 +53,9 @@ export class RefresherContent {
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const theme = getIonTheme(this);
         const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
-        return (h(Host, { key: '684bf1189acba94c502e2bb421f0b65313c3e9f9', class: {
+        return (h(Host, { key: '3a3a3fb44f8397bb8e5019b51254ada8c26ae371', class: {
                 [theme]: true,
-            } }, h("div", { key: '29bfcc52d581913654f7639b0f669d149bf91026', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'c5ddc5a3c22ec365906e8716cdbdb8cf793bb978', class: "refresher-pulling-icon" }, h("div", { key: '4314fff1f89758c81de7d908be2eaae81e8d9fb8', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'cea2bc74fd42c35ec6d6349f033830e745c9e99b', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'bfd43614c33fa6e83f67ac95022db5343af160d6', class: "arrow-container" }, h("ion-icon", { key: '64f48d15dc2c17cbeb177f28272477ee8535136b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '6f540e79e981a923050f57167aff8da92bfe8990', class: "refresher-pulling-icon" }, h("ion-icon", { key: '97b0755e0f240ec199b408a9cfef9fc48b481a68', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '1cd2a284b786fa94272f88659942ff15a7344f66', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '722aea4deaef0b014f49ce61a4a81ef219d0b101', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8152f4fe27037c4f34918e515ac460c1f03240d5', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+            } }, h("div", { key: '3e63966e8c2b262b1f9d4a5545dbdd00e97a4c68', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'd4c8fa7151cee666520a40050c58f6e8201b14a5', class: "refresher-pulling-icon" }, h("div", { key: '2f45a17fe5fe51e81e2d7bd580fd60ce754c5989', class: "spinner-arrow-container" }, h("ion-spinner", { key: '210cd5f152453a283dbc579f545c683e3af84ea3', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: '060c8d531e90478121113f59989ac29809f48947', class: "arrow-container" }, h("ion-icon", { key: '7c30ddd2c1a6e2274e7d57f792733017c663197b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '3dee253d56c871195dcd59eaedc2b867ac578319', class: "refresher-pulling-icon" }, h("ion-icon", { key: '46b859328da272449f316ea8f68f3c3dd545c2e7', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '56660f9f6cff1006c5552df3a9430124689d42cb', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'e8232281f251e5d0d22972fa8e38176edc3d9e5d', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '70f42df444c4669f393137f218ba9d635f76a26c', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/reorder/reorder.js

@@ -43,9 +43,9 @@ export class Reorder {
     render() {
         const { reorderHandleIcon } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2a30643d0c5dbebab97a7aca68c165ee79ceed33', class: {
+        return (h(Host, { key: 'ba59a095c200b70c6d847dc7362d52b315dc853a', class: {
                 [theme]: true,
-            } }, h("slot", { key: '9ac45a0cc21aea6ed0ec03aa12334886219b1051' }, h("ion-icon", { key: '6d6789a718db4f252c6b3b4484148be2a65c80b8', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+            } }, h("slot", { key: '79be263f78cc21c9c4f91326e557e65849ab1e51' }, h("ion-icon", { key: '6e5c47c8bbd33f5cd405a5fd531831cb87c8e57e', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/reorder-group/reorder-group.js

@@ -257,7 +257,7 @@ export class ReorderGroup {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f618089290a47bae34bcaaed968c3f8f4daa827f', class: {
+        return (h(Host, { key: 'df12858536c409c76552fe79b88827b3c4a5d9c5', class: {
                 [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -72,7 +72,7 @@ export class RippleEffect {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f4db39623cfd1bdc773e222b2dd9ed52a26cc685', role: "presentation", class: {
+        return (h(Host, { key: '502ce1841747f255dfab542914bebd0d0f4ae9bd', role: "presentation", class: {
                 [theme]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/collection/components/router/router.js

@@ -413,7 +413,7 @@ export class Router {
                             "docs": "The path to navigate to."
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": "The direction of the animation. Defaults to `\"forward\"`."
                         }, {
                             "name": "animation",
@@ -496,7 +496,7 @@ export class Router {
                     "signature": "(direction: RouterDirection) => Promise<boolean>",
                     "parameters": [{
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": ""
                         }],
                     "references": {

package/dist/collection/components/router/utils/dom.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { componentOnReady } from "../../../utils/helpers";
+import { waitForComponentReady } from "../../../utils/helpers";
 import { printIonError } from "../../../utils/logging/index";
 import { ROUTER_INTENT_NONE } from "./constants";
 /**
@@ -20,7 +20,7 @@ export const writeNavState = async (root, chain, direction, index, changed = fal
         if (index >= chain.length || !outlet) {
             return changed;
         }
-        await new Promise((resolve) => componentOnReady(outlet, resolve));
+        await waitForComponentReady(outlet);
         const route = chain[index];
         const result = await outlet.setRouteId(route.id, route.params, direction, animation);
         // if the outlet changed the page, reset navigation to neutral (no direction)

package/dist/collection/components/router-link/router-link.css

@@ -65,7 +65,7 @@
    * @prop --color: Text color of the router link
    */
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, var(--ion-color-primary-bold));
   background: var(--background);
   color: var(--color);
 }

package/dist/collection/components/router-link/router-link.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createColorClasses, openURL } from "../../utils/theme";
+import { openURL } from "../../utils/helpers";
+import { createColorClasses } from "../../utils/theme";
 import { getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -26,10 +27,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '989574921f3bf06e4e5ad4e98ea3cce2e5c7165e', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7362169264d402eb9c110a450dd5432dc36b8eee', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'ee72dba91cc13ca4f251ba6bb5a8b7bf54b6f88d' }, attrs), h("slot", { key: '8e8b5afd795bb213b8765f731463e0588799b001' }))));
+            }) }, h("a", Object.assign({ key: '0fe2314243ffc7e34d92a153daffbcf06e708402' }, attrs), h("slot", { key: 'a4cba359b1a7f751213e806e93b49b299c862d96' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-outlet/router-outlet.js

@@ -184,7 +184,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'f59dfdc11831ed91f5f7d8147cdc14f3c07bc289' });
+        return h("slot", { key: '3f107f085a977b4d27c7266771a9564e3219f736' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -439,7 +439,7 @@ export class RouterOutlet {
                             "docs": ""
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": ""
                         }, {
                             "name": "animation",

package/dist/collection/components/row/row.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Row {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
+        return (h(Host, { key: '6f5dd5032485a69ddf9510e2e539a7ba90afda47', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
+            } }, h("slot", { key: '994dcbbc871d606b61ff5993fb29aa1fa349c483' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -300,10 +300,10 @@
   --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);
   --border-radius: 10px;
   --box-shadow: none;
-  --cancel-button-color: var(--ion-color-primary, #0054e9);
-  --clear-button-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --cancel-button-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --clear-button-color: var(--ion-text-color-step-400, #666666);
   --color: var(--ion-text-color, #000);
-  --icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --icon-color: var(--ion-text-color-step-400, #666666);
   -webkit-padding-start: 12px;
   padding-inline-start: 12px;
   -webkit-padding-end: 12px;