voyager-ionic-core 8.8.17 → 9.0.3

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

@@ -314,10 +314,9 @@ const focusItem = (item) => {
 export const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
 export const configureKeyboardInteraction = (popoverEl) => {
     const callback = async (ev) => {
-        var _a;
         const activeElement = document.activeElement;
         let items = [];
-        const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
+        const targetTagName = ev.target?.tagName;
         /**
          * Only handle custom keyboard interactions for the host popover element
          * and children ion-item elements.
@@ -338,7 +337,7 @@ export const configureKeyboardInteraction = (popoverEl) => {
             items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
             /* eslint-disable-next-line */
         }
-        catch (_b) { }
+        catch { }
         switch (ev.key) {
             /**
              * If we are in a child popover
@@ -421,7 +420,6 @@ export const configureKeyboardInteraction = (popoverEl) => {
  * and viewport dimensions.
  */
 export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
-    var _a;
     let referenceCoordinates = {
         top: 0,
         left: 0,
@@ -466,8 +464,8 @@ export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidt
              * as a whole.
              */
             const actualTriggerEl = (triggerEl ||
-                ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) ||
-                (customEv === null || customEv === void 0 ? void 0 : customEv.target));
+                customEv?.detail?.ionShadowTarget ||
+                customEv?.target);
             if (!actualTriggerEl) {
                 return defaultPosition;
             }

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

@@ -43,7 +43,7 @@ export class ProgressBar {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

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

@@ -64,7 +64,7 @@ export class Radio {
              * Otherwise, the checked state should always be set
              * to true because the checked state cannot be toggled.
              */
-            if (checked && (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.allowEmptySelection)) {
+            if (checked && radioGroup?.allowEmptySelection) {
                 this.checked = false;
             }
             else {
@@ -142,7 +142,7 @@ export class Radio {
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
         const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
-        return (h(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -155,10 +155,10 @@ export class Radio {
                 // styling stays suppressed either way.
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem || inMultipleInputsItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, h("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), h("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -258,7 +258,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "labelPlacement": {

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

@@ -223,7 +223,7 @@ export class RadioGroup {
     /** @internal */
     async setFocus() {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
+        radioToFocus?.setFocus();
     }
     /**
      * Renders the helper text or error text values
@@ -250,7 +250,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '377e4aa3a656cc84b742f9d7a7d4be65d20c69f5', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'c3187a2497773b4f15cea3b413b036502bcec8c0' })));
+        return (h(Host, { key: '8d926a17e800adf0184274215c9689c96a8d6dfd', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: '2ff891123d5971a581b70d0886d23a074358c2dc' })));
     }
     static get is() { return "ion-radio-group"; }
     static get originalStyleUrls() {

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

@@ -64,7 +64,9 @@ export class Range {
          */
         this.name = this.rangeId;
         /**
-         * Show two knobs.
+         * If `true`, the range shows two knobs and `value` is an object with `lower`
+         * and `upper` properties. If `false`, the range shows one knob and `value` is
+         * a number.
          */
         this.dualKnobs = false;
         /**
@@ -175,9 +177,9 @@ export class Range {
             const knobHandleA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
             const knobHandleB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
             const syncActivated = () => {
-                this.activatedKnob = (knobHandleA === null || knobHandleA === void 0 ? void 0 : knobHandleA.classList.contains('ion-activated'))
+                this.activatedKnob = knobHandleA?.classList.contains('ion-activated')
                     ? 'A'
-                    : (knobHandleB === null || knobHandleB === void 0 ? void 0 : knobHandleB.classList.contains('ion-activated'))
+                    : knobHandleB?.classList.contains('ion-activated')
                         ? 'B'
                         : undefined;
             };
@@ -243,8 +245,7 @@ export class Range {
             // Check if focus is moving to another knob within the same range
             // by delaying the reset to allow the new focus to register
             setTimeout(() => {
-                var _a;
-                const activeElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+                const activeElement = this.el.shadowRoot?.activeElement;
                 const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
                 if (!isStillFocusedOnKnob) {
                     if (this.hasFocus) {
@@ -268,7 +269,12 @@ export class Range {
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
+        this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
+    }
+    dualKnobsChanged() {
+        if (!this.noUpdate) {
+            this.updateRatio();
+        }
     }
     minChanged(newValue) {
         if (!isSafeNumber(newValue)) {
@@ -341,7 +347,6 @@ export class Range {
         this.didLoad = true;
     }
     connectedCallback() {
-        var _a;
         this.updateRatio();
         this.debounceChanged();
         this.disabledChanged();
@@ -357,7 +362,7 @@ export class Range {
             this.setupActivatedObserver();
         }
         const ionContent = findClosestIonContent(this.el);
-        this.contentEl = (_a = ionContent === null || ionContent === void 0 ? void 0 : ionContent.querySelector('.ion-content-scroll-host')) !== null && _a !== void 0 ? _a : ionContent;
+        this.contentEl = ionContent?.querySelector('.ion-content-scroll-host') ?? ionContent;
     }
     disconnectedCallback() {
         if (this.gesture) {
@@ -370,8 +375,7 @@ export class Range {
         }
     }
     getValue() {
-        var _a;
-        const value = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
+        const value = this.value ?? 0;
         if (this.dualKnobs) {
             if (typeof value === 'object') {
                 return value;
@@ -457,9 +461,8 @@ export class Range {
      * @param detail The details of the gesture or mouse event.
      */
     onEnd(detail) {
-        var _a;
         const { contentEl, initialContentScrollY } = this;
-        const currentX = (_a = detail.currentX) !== null && _a !== void 0 ? _a : detail.clientX;
+        const currentX = detail.currentX ?? detail.clientX;
         /**
          * The `pressedKnob` can be undefined if the user never
          * dragged the knob. They just tapped on the bar.
@@ -595,7 +598,6 @@ export class Range {
         return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
     }
     renderRangeSlider() {
-        var _a;
         const { min, max, step, handleKeyboard, activatedKnob, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
@@ -612,7 +614,7 @@ export class Range {
              * When the value is less than the activeBarStart or the min value,
              * the knob will display at the start of the active bar.
              */
-            if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) {
+            if (this.valA < (this.activeBarStart ?? this.min)) {
                 /**
                  * Sets the bar positions relative to the upper and lower limits.
                  * Converts the ratio values into percentages, used as offsets for left/right styles.
@@ -760,7 +762,7 @@ export class Range {
          * Determine the name and position of the pressed knob to apply
          * Host classes for styling.
          */
-        const pressedKnobName = dualKnobs ? pressedKnob === null || pressedKnob === void 0 ? void 0 : pressedKnob.toLowerCase() : undefined;
+        const pressedKnobName = dualKnobs ? pressedKnob?.toLowerCase() : undefined;
         const pressedKnobPosition = dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
         /**
          * Determine if any knob is at the min or max value to
@@ -769,7 +771,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: 'f8063d1234fb113fe55a7902845dd4b4da8b1edb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '72f253ee1514b4c5874a6720c2f954fae7a7c4d4', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -783,10 +785,10 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: 'beead65ab01e3b18e4be59c0ee8ac6ebf32aad7c', class: "range-wrapper", id: "range-label" }, h("div", { key: '03633c689d9d2e4c50a2131bcd560329df49e314', class: {
+            }) }, h("label", { key: '9b96b83a6118ee2a79d8adbb0a58197470308179', class: "range-wrapper", id: "range-label" }, h("div", { key: 'c7b31a7c87c20857a26624bd94501df6420fceec', 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: 'c066804263ab6ae7393f8dcc51184b7198844ffa', class: "native-wrapper" }, h("slot", { key: '7e8ea224d72b3e965dd948bee7e45c1a096b6899', name: "start" }), this.renderRangeSlider(), h("slot", { key: '21f242f6f60ff3adce6a2d90b2d4dac1ceaf6624', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '4ca15b9370097e140550489ff24979f3a959e65b', class: "native-wrapper" }, h("slot", { key: 'f110896c68741bad92239f98b6028cbe0ad5122f', name: "start" }), this.renderRangeSlider(), h("slot", { key: '5c4031c4403fa643ee2e11637b2420ddd8cbc4ce', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -900,7 +902,7 @@ export class Range {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show two knobs."
+                    "text": "If `true`, the range shows two knobs and `value` is an object with `lower`\nand `upper` properties. If `false`, the range shows one knob and `value` is\na number."
                 },
                 "getter": false,
                 "setter": false,
@@ -1277,6 +1279,9 @@ export class Range {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "dualKnobs",
+                "methodName": "dualKnobsChanged"
             }, {
                 "propName": "min",
                 "methodName": "minChanged"

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

@@ -3,7 +3,7 @@
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
-import { getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
+import { findRefresherScrollHost, getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
@@ -184,7 +184,7 @@ export class Refresher {
                          * when the refresh completes
                          */
                         const activeElement = document.activeElement;
-                        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+                        if (activeElement?.blur !== undefined) {
                             activeElement.blur();
                         }
                         /**
@@ -378,11 +378,18 @@ export class Refresher {
     componentDidUpdate() {
         this.checkNativeRefresher();
     }
-    async connectedCallback() {
+    /**
+     * Validate the slot attribute before rendering, while the host still reflects the
+     * developer's original markup. `connectedCallback` is too early: in the custom
+     * elements build it runs during insertion, before frameworks such as React assign
+     * the slot.
+     */
+    componentWillLoad() {
         if (this.el.getAttribute('slot') !== 'fixed') {
             printIonError('[ion-refresher] - Make sure you use: <ion-refresher slot="fixed">');
-            return;
         }
+    }
+    async connectedCallback() {
         const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
         if (!contentEl) {
             printIonContentErrorMsg(this.el);
@@ -393,14 +400,14 @@ export class Refresher {
          * or the background content element.
          */
         componentOnReady(contentEl, async () => {
-            const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR);
+            const customScrollTarget = findRefresherScrollHost(contentEl);
             /**
              * Query the custom scroll target (if available), first. In refresher implementations,
              * the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By
              * querying the custom scroll target first and falling back to the ion-content element,
              * the correct scroll element will be returned by the implementation.
              */
-            this.scrollEl = await getScrollElement(customScrollTarget !== null && customScrollTarget !== void 0 ? customScrollTarget : contentEl);
+            this.scrollEl = await getScrollElement(customScrollTarget ?? contentEl);
             /**
              * Query the background content element from the host ion-content element directly.
              */
@@ -655,7 +662,7 @@ export class Refresher {
          * This ensures the view stays at the top after refresh completes.
          */
         const activeElement = document.activeElement;
-        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+        if (activeElement?.blur !== undefined) {
             activeElement.blur();
         }
         // emit "refresh" because it was pulled down far enough
@@ -667,7 +674,6 @@ export class Refresher {
     close(state, delay) {
         // create fallback timer incase something goes wrong with transitionEnd event
         setTimeout(() => {
-            var _a;
             this.state = 1 /* RefresherState.Inactive */;
             this.progress = 0;
             this.didStart = false;
@@ -685,7 +691,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');
+                this.backgroundContentEl?.style.removeProperty('--offset-top');
             }
             this.ionPullEnd.emit({
                 reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
@@ -726,9 +732,9 @@ export class Refresher {
         if (this.scrollEl) {
             const { overflow, overflowX, overflowY } = this.scrollEl.style;
             this.overflowStyles = {
-                overflow: overflow !== null && overflow !== void 0 ? overflow : '',
-                overflowX: overflowX !== null && overflowX !== void 0 ? overflowX : '',
-                overflowY: overflowY !== null && overflowY !== void 0 ? overflowY : '',
+                overflow: overflow ?? '',
+                overflowX: overflowX ?? '',
+                overflowY: overflowY ?? '',
             };
         }
     }
@@ -743,7 +749,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '2eaca7f85b3d40418f213077434e519dfacd9d42', slot: "fixed", class: {
+        return (h(Host, { key: 'fd9c8e51155d56f12148e8eb547e45c05807b4b5', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -48,7 +48,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, h("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, h("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, h("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: 'a1546008813bbcfa70f97e9b9025846ee0aed722', class: mode }, h("div", { key: '5422771d67fe201e22d4f9d7db6b685f3db5d99d', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '5c2b6dfc3f01b42586ea83380548d454b220a7ca', class: "refresher-pulling-icon" }, h("div", { key: '2c3799ca3f66960d7081c63c5a0840951f694baf', class: "spinner-arrow-container" }, h("ion-spinner", { key: '03f766a9b9354dcb8f6975757a9b882c2eb5cf4a', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'e5f4ba7c6a70adb71f8985af0e23aca07d7b005a', class: "arrow-container" }, h("ion-icon", { key: 'ddccbd9164ae8daa97178fc53b52f74f1fd298ef', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '6fb742f47f9149fa6dc3daefe5aaa77f925da4bd', class: "refresher-pulling-icon" }, h("ion-icon", { key: '907657135eeac4c394be1eae4a659664a7bfacb0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'fb3094b3ed7e100ab9641c3221770889088e27f3', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'bc8078f94e7cea3cb6f03a09e98540f0e0b38721', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8f39524f073aa828e941bcdd4d48e4d5dfc759c6', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

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

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, h("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, h("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'f278c473b4695a6a93565100e4fcaa7f9e3e9ff5', class: mode }, h("slot", { key: 'cc26b5ed297f68a0bea82e27e34a7fe945186f4e' }, h("ion-icon", { key: '696f5e4c2b09e64bd08abf0d0818b1554cd29737', icon: reorderIcon, 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

@@ -253,7 +253,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9527bbdedaab63d31f562c874a7332ea60c4b47b', class: {
+        return (h(Host, { key: '779332508f44409696b6bab80eda72f9b1d7869d', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

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

@@ -68,7 +68,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
+        return (h(Host, { key: '371350cb76e98338ef7467191aaaf817b1298b3f', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/collection/components/route/route.js

@@ -67,7 +67,7 @@ export class Route {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
+                    "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -103,9 +103,8 @@ export class Router {
      * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
-        var _a;
         if (path.startsWith('.')) {
-            const currentPath = (_a = this.previousPath) !== null && _a !== void 0 ? _a : '/';
+            const currentPath = this.previousPath ?? '/';
             // Convert currentPath to an URL by pre-pending a protocol and a host to resolve the relative path.
             const url = new URL(path, `https://host/${currentPath}`);
             path = url.pathname + url.search + url.hash;
@@ -176,11 +175,10 @@ export class Router {
         return this.writeNavStateRoot(this.getSegments(), ROUTER_INTENT_NONE);
     }
     historyDirection() {
-        var _a;
         const win = window;
         if (win.history.state === null) {
             this.state++;
-            win.history.replaceState(this.state, win.document.title, (_a = win.document.location) === null || _a === void 0 ? void 0 : _a.href);
+            win.history.replaceState(this.state, win.document.title, win.document.location?.href);
         }
         const state = win.history.state;
         const lastState = this.lastState;
@@ -254,14 +252,12 @@ export class Router {
         }
         const routes = readRoutes(this.el);
         const fromChain = findChainForSegments(from, routes);
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const beforeLeaveHook = fromChain && fromChain[fromChain.length - 1].beforeLeave;
         const canLeave = beforeLeaveHook ? await beforeLeaveHook() : true;
         if (canLeave === false || typeof canLeave === 'object') {
             return canLeave;
         }
         const toChain = findChainForSegments(to, routes);
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
         return beforeEnterHook ? beforeEnterHook() : true;
     }

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

@@ -1,9 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { Build } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, isIonContent } from "../../../utils/content/index";
 import { componentOnReady, raf } from "../../../utils/helpers";
-import { printIonError } from "../../../utils/logging/index";
+import { printIonError, printIonWarning } from "../../../utils/logging/index";
 import { ROUTER_INTENT_NONE } from "./constants";
 /**
  * Activates the passed route chain.
@@ -53,7 +54,6 @@ export const readNavState = async (root) => {
     const ids = [];
     let outlet;
     let node = root;
-    // eslint-disable-next-line no-cond-assign
     while ((outlet = searchNavNode(node))) {
         const id = await outlet.getRouteId();
         if (id) {
@@ -108,7 +108,7 @@ const findFragmentTarget = async (fragment, shouldContinue) => {
             try {
                 candidates = [...document.querySelectorAll(`#${escaped}, a[name="${escaped}"]`)];
             }
-            catch (_a) {
+            catch {
                 candidates = [...document.querySelectorAll(`#${escaped}`)];
             }
         }
@@ -145,7 +145,7 @@ export const scrollToFragment = async (fragment, shouldContinue = () => true) =>
     try {
         decoded = decodeURIComponent(fragment);
     }
-    catch (_a) {
+    catch {
         decoded = fragment;
     }
     const target = await findFragmentTarget(decoded, shouldContinue);
@@ -179,16 +179,34 @@ export const scrollToFragment = async (fragment, shouldContinue = () => true) =>
         return false;
     }
 };
+/** How long the router waits for a navigation outlet before giving up and proceeding. */
+const NAV_NODE_TIMEOUT = 500;
 export const waitUntilNavNode = () => {
     if (searchNavNode(document.body)) {
         return Promise.resolve();
     }
     return new Promise((resolve) => {
-        window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
+        /**
+         * Outlets emit `ionNavWillLoad` as they load, so resolve as soon as one does.
+         * A timeout backstops the case where the page has no outlet at all: without it
+         * the router would wait forever and its `componentWillLoad` would never settle,
+         * which in turn prevents the app from signalling that it has finished loading.
+         */
+        const done = () => {
+            window.removeEventListener('ionNavWillLoad', done);
+            clearTimeout(timeout);
+            if (Build.isDev && !searchNavNode(document.body)) {
+                printIonWarning('[ion-router] - No outlet found. The router requires an ion-router-outlet or ion-tabs to render routed views. ' +
+                    'Note that as of Ionic 9 ion-nav is no longer a router outlet.');
+            }
+            resolve();
+        };
+        const timeout = setTimeout(done, NAV_NODE_TIMEOUT);
+        window.addEventListener('ionNavWillLoad', done, { once: true });
     });
 };
 /** Selector for all the outlets supported by the router. */
-const OUTLET_SELECTOR = ':not([no-router]) ion-nav, :not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
+const OUTLET_SELECTOR = ':not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
 const searchNavNode = (root) => {
     if (!root) {
         return undefined;
@@ -197,5 +215,5 @@ const searchNavNode = (root) => {
         return root;
     }
     const outlet = root.querySelector(OUTLET_SELECTOR);
-    return outlet !== null && outlet !== void 0 ? outlet : undefined;
+    return outlet ?? undefined;
 };

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

@@ -134,7 +134,7 @@ export const matchesSegments = (segments, chain) => {
  * Returns undefined when both parameters are undefined.
  */
 export const mergeParams = (a, b) => {
-    return a || b ? Object.assign(Object.assign({}, a), b) : undefined;
+    return a || b ? { ...a, ...b } : undefined;
 };
 /**
  * Finds the best match for the ids in the chains.
@@ -154,14 +154,11 @@ export const findChainForIDs = (ids, chains) => {
         }
     }
     if (match) {
-        return match.map((route, i) => {
-            var _a;
-            return ({
-                id: route.id,
-                segments: route.segments,
-                params: mergeParams(route.params, (_a = ids[i]) === null || _a === void 0 ? void 0 : _a.params),
-            });
-        });
+        return match.map((route, i) => ({
+            id: route.id,
+            segments: route.segments,
+            params: mergeParams(route.params, ids[i]?.params),
+        }));
     }
     return null;
 };

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

@@ -42,7 +42,7 @@ export const readRoutes = (root) => {
  */
 export const readRouteNodes = (node) => {
     return Array.from(node.children)
-        .filter((el) => el.tagName === 'ION-ROUTE' && el.component)
+        .filter((el) => el.tagName === 'ION-ROUTE' && Boolean(el.component))
         .map((el) => {
         const component = readProp(el, 'component');
         return {

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

@@ -41,7 +41,6 @@ export const chainToSegments = (chain) => {
     for (const route of chain) {
         for (const segment of route.segments) {
             if (segment[0] === ':') {
-                // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
                 const param = route.params && route.params[segment.slice(1)];
                 if (!param) {
                     return null;

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

@@ -22,10 +22,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8aaf732d8f5cc4ced351e2b3164605c10bd90cad', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), h("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
+            }) }, h("a", { key: '8f291ffbbce5b08dd10720d855eb020880bf1be1', ...attrs }, h("slot", { key: '24dc388a49204011e1c1f0a1131c9a1b0a4ae4da' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }