@ionic/core 8.8.14-dev.11784037956.17449639 → 8.8.14-dev.11784216165.1ecbf364

package/dist/collection/components/nav/nav.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { assert } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
@@ -9,12 +9,11 @@ import { lifecycle, setPageHidden, transition } from "../../utils/transition/ind
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
-import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from "./view-controller";
+import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews } from "./view-controller";
 export class Nav {
     constructor() {
         this.transInstr = [];
         this.gestureOrAnimationInProgress = false;
-        this.useRouter = false;
         this.isTransitioning = false;
         this.destroyed = false;
         this.views = [];
@@ -30,7 +29,6 @@ export class Nav {
         }
     }
     rootChanged() {
-        const isDev = Build.isDev;
         if (this.root === undefined) {
             return;
         }
@@ -41,17 +39,9 @@ export class Nav {
              */
             return;
         }
-        if (!this.useRouter) {
-            if (this.root !== undefined) {
-                this.setRoot(this.root, this.rootParams);
-            }
-        }
-        else if (isDev) {
-            printIonWarning('[ion-nav] - A root attribute is not supported when using ion-router.', this.el);
-        }
+        this.setRoot(this.root, this.rootParams);
     }
     componentWillLoad() {
-        this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
         if (this.swipeGesture === undefined) {
             const mode = getIonMode(this);
             this.swipeGesture = config.getBoolean('swipeBackEnabled', mode === 'ios');
@@ -216,78 +206,6 @@ export class Nav {
             opts,
         }, done);
     }
-    /**
-     * Called by the router to update the view.
-     *
-     * @param id The component tag.
-     * @param params The component params.
-     * @param direction A direction hint.
-     * @param animation an AnimationBuilder.
-     *
-     * @return the status.
-     * @internal
-     */
-    setRouteId(id, params, direction, animation) {
-        const active = this.getActiveSync();
-        if (matches(active, id, params)) {
-            return Promise.resolve({
-                changed: false,
-                element: active.element,
-            });
-        }
-        let resolve;
-        const promise = new Promise((r) => (resolve = r));
-        let finish;
-        const commonOpts = {
-            updateURL: false,
-            viewIsReady: (enteringEl) => {
-                let mark;
-                const p = new Promise((r) => (mark = r));
-                resolve({
-                    changed: true,
-                    element: enteringEl,
-                    markVisible: async () => {
-                        mark();
-                        await finish;
-                    },
-                });
-                return p;
-            },
-        };
-        if (direction === 'root') {
-            finish = this.setRoot(id, params, commonOpts);
-        }
-        else {
-            // Look for a view matching the target in the view stack.
-            const viewController = this.views.find((v) => matches(v, id, params));
-            if (viewController) {
-                finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
-            }
-            else if (direction === 'forward') {
-                finish = this.push(id, params, Object.assign(Object.assign({}, commonOpts), { animationBuilder: animation }));
-            }
-            else if (direction === 'back') {
-                finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
-            }
-        }
-        return promise;
-    }
-    /**
-     * Called by <ion-router> to retrieve the current component.
-     *
-     * @internal
-     */
-    async getRouteId() {
-        const active = this.getActiveSync();
-        if (active) {
-            return {
-                id: active.element.tagName,
-                params: active.params,
-                element: active.element,
-            };
-        }
-        return undefined;
-    }
     /**
      * Get the active view.
      */
@@ -353,25 +271,6 @@ export class Nav {
             ti.reject = reject;
         });
         ti.done = done;
-        /**
-         * If using router, check to see if navigation hooks
-         * will allow us to perform this transition. This
-         * is required in order for hooks to work with
-         * the ion-back-button or swipe to go back.
-         */
-        if (ti.opts && ti.opts.updateURL !== false && this.useRouter) {
-            const router = document.querySelector('ion-router');
-            if (router) {
-                const canTransition = await router.canTransition();
-                if (canTransition === false) {
-                    return false;
-                }
-                if (typeof canTransition === 'string') {
-                    router.push(canTransition, ti.opts.direction || 'back');
-                    return false;
-                }
-            }
-        }
         // Normalize empty
         if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             ti.insertViews = undefined;
@@ -392,13 +291,6 @@ export class Nav {
             ti.done(result.hasCompleted, result.requiresTransition, result.enteringView, result.leavingView, result.direction);
         }
         ti.resolve(result.hasCompleted);
-        if (ti.opts.updateURL !== false && this.useRouter) {
-            const router = document.querySelector('ion-router');
-            if (router) {
-                const direction = result.direction === 'back' ? 'back' : 'forward';
-                router.navChanged(direction);
-            }
-        }
     }
     failed(rejectReason, ti) {
         if (this.destroyed) {
@@ -828,7 +720,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
+        return h("slot", { key: 'bb4a201a3a8079548f5474ff42293b28fc7599fb' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -1601,113 +1493,6 @@ export class Nav {
                         }]
                 }
             },
-            "setRouteId": {
-                "complexType": {
-                    "signature": "(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>",
-                    "parameters": [{
-                            "name": "id",
-                            "type": "string",
-                            "docs": "The component tag."
-                        }, {
-                            "name": "params",
-                            "type": "ComponentProps | undefined",
-                            "docs": "The component params."
-                        }, {
-                            "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
-                            "docs": "A direction hint."
-                        }, {
-                            "name": "animation",
-                            "type": "AnimationBuilder | undefined",
-                            "docs": "an AnimationBuilder."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "RouteWrite": {
-                            "location": "import",
-                            "path": "../router/utils/interface",
-                            "id": "src/components/router/utils/interface.ts::RouteWrite",
-                            "referenceLocation": "RouteWrite"
-                        },
-                        "ComponentProps": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::ComponentProps",
-                            "referenceLocation": "ComponentProps"
-                        },
-                        "RouterDirection": {
-                            "location": "import",
-                            "path": "../router/utils/interface",
-                            "id": "src/components/router/utils/interface.ts::RouterDirection",
-                            "referenceLocation": "RouterDirection"
-                        },
-                        "AnimationBuilder": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder",
-                            "referenceLocation": "AnimationBuilder"
-                        },
-                        "NavOptions": {
-                            "location": "import",
-                            "path": "./nav-interface",
-                            "id": "src/components/nav/nav-interface.ts::NavOptions",
-                            "referenceLocation": "NavOptions"
-                        }
-                    },
-                    "return": "Promise<RouteWrite>"
-                },
-                "docs": {
-                    "text": "Called by the router to update the view.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "id The component tag."
-                        }, {
-                            "name": "param",
-                            "text": "params The component params."
-                        }, {
-                            "name": "param",
-                            "text": "direction A direction hint."
-                        }, {
-                            "name": "param",
-                            "text": "animation an AnimationBuilder."
-                        }, {
-                            "name": "return",
-                            "text": "the status."
-                        }, {
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getRouteId": {
-                "complexType": {
-                    "signature": "() => Promise<RouteID | undefined>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "RouteID": {
-                            "location": "import",
-                            "path": "../router/utils/interface",
-                            "id": "src/components/router/utils/interface.ts::RouteID",
-                            "referenceLocation": "RouteID"
-                        }
-                    },
-                    "return": "Promise<RouteID | undefined>"
-                },
-                "docs": {
-                    "text": "Called by <ion-router> to retrieve the current component.",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
             "getActive": {
                 "complexType": {
                     "signature": "() => Promise<ViewController | undefined>",

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

@@ -177,6 +177,21 @@
   }
 }
 
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes. Intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
@@ -229,6 +229,10 @@ export class Popover {
             this.headerResizeObserver.disconnect();
             this.headerResizeObserver = undefined;
         }
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -467,9 +471,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd7f3aa2c2fa93a93585e3eda9e4a6d0daaa541be', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'b87be2ef14219997b9c47dcbaf904eb770d0e057', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'e6243572faf1b871ae2b34923410b2a6638469f0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3d4938c9d0764a644398e0e7a4361106da1bd926', class: "popover-arrow", part: "arrow" }), h("div", { key: '24ad6d777828aad2881d56595693e6022fc9cb8e', class: "popover-content", part: "content" }, h("slot", { key: '79f83df74a5c5e3dd7650f15c1aa50795b90a345' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -177,6 +177,21 @@
   }
 }
 
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes. Intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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: 'd7476268ce53b6a4f425b7bc9f01d6935eb411c3', 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

@@ -136,7 +136,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'd9425b252ed38086420d91d5c680421d121c99f4', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -147,10 +147,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: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'de391fca2aa0b681af5c1d089121596c46e68271', class: "radio-wrapper" }, h("div", { key: '44e4c71645f86a9e73ad58c0e8b41c0558b920f6', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '589d7c1b45a1918b5811663daa8f30788e7729f8' })), h("div", { key: '0f61a17b195582d6c9a0c597cd40e6629256e479', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -250,7 +250,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "labelPlacement": {

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

@@ -769,7 +769,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: 'cd26f0187c0d37c7eb9df923f75c8a0f57c19ab6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -783,10 +783,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: '90224fd24b0e625a17e7972feff73a0ac31e093d', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e07b9fa10983249c425eec26b741f0f628daf2b2', 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: '9e252f1190838fbae46e724bf665f9b1943600a4', class: "native-wrapper" }, h("slot", { key: '950697dd9636da340de659812daa91fff50e5345', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'd3fce46b29db275af71e6149e725967839ec12b0', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -716,7 +716,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
+        return (h(Host, { key: '1dd475095f76491206644828cf89fc6d2ec276d1', 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: 'ec378d6a302be697c12c4f973a57c6ad2ada070f', class: mode }, h("div", { key: '0055f98f8c5a1ed7979dc8146ec1f82a575860c7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4f88468e26370df6889e72aa54ebb395ebf3757d', class: "refresher-pulling-icon" }, h("div", { key: '05b3f8679576aaa6c2d84d60df6629a392df29e2', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0bf6ceea416ce1140c0f10a5bede063cae7054f4', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'b71ede8455837968218edae28504e5e14bbc1f5c', class: "arrow-container" }, h("ion-icon", { key: '30b808288d23d3eac681b1225cd8392fdacfefe1', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'fee1ae7e57ef8a02f5654808dff9dca3002b6702', class: "refresher-pulling-icon" }, h("ion-icon", { key: '55b34a98028adb497fbc2ac66bdb3d5ae5b1705b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'ef8f987daa8060cb6f8fd83c0864095042b9eecf', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'cd6fe0e81b34eeae11478fcc8a42044bff6f7a52', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '9cd778229582b538d54589c4d8e4d470efb64aad', 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: '4d35db30b5b3df2020d2212abb3cfac94f9bc2b8', class: mode }, h("slot", { key: '68a565ae4a47f6a9f5d6ba845b596fdfa629ece8' }, h("ion-icon", { key: '168fb0f8eb9c02329274488900fcdb05d44cb895', 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: '3afdc6a6c81bba2f88ea523d4b73c6fccff1b9ec', 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: '5e88b5225414e29883256c86f111ded5bdf2ef91', 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/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.
@@ -179,16 +180,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;

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: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', 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", Object.assign({ key: '85796b7b48581fe9830ba1102dad7d1069de4e17' }, attrs), h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }