@ionic/core 9.0.7-dev.11791381676.118a7a15 → 9.0.7-dev.11792524803.14f0e7d2

package/dist/cjs/{overlays-CLld3axA.js → overlays-C68wNDWY.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Cqr69qxA.js');
-var index = require('./index-BiQyIvoc.js');
-var ionicGlobal = require('./ionic-global-48ceLiJ6.js');
-var frameworkDelegate = require('./framework-delegate-JbKIVMzR.js');
+var helpers = require('./helpers-Crluoxqu.js');
+var index = require('./index-SAR1xwtW.js');
+var ionicGlobal = require('./ionic-global-C1h8Yi_K.js');
+var frameworkDelegate = require('./framework-delegate-DTLbqaaO.js');
 var gestureController = require('./gesture-controller-CeJslptU.js');
 
 /**
@@ -35,23 +35,6 @@ const shouldUseCloseWatcher = () => index.config.get('experimentalCloseWatcher',
 const blockHardwareBackButton = () => {
     document.addEventListener('backbutton', () => { });
 };
-const closeWatcherConditions = [];
-let syncCloseWatcher;
-/**
- * Registers a check for whether the back button
- * has something to close. The CloseWatcher is only
- * active while one of these checks passes.
- */
-const addCloseWatcherCondition = (condition) => {
-    closeWatcherConditions.push(condition);
-};
-/**
- * Call this whenever something the back button
- * can close opens or closes.
- */
-const updateCloseWatcher = () => {
-    syncCloseWatcher?.();
-};
 const startHardwareBackButton = () => {
     const doc = document;
     let busy = false;
@@ -103,44 +86,32 @@ const startHardwareBackButton = () => {
         processHandlers();
     };
     /**
-     * Android WebView never sends the hardware back
-     * button to a CloseWatcher, so hybrid apps still
-     * need this. Browsers never fire backbutton.
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
      */
-    doc.addEventListener('backbutton', backButtonCallback);
     if (shouldUseCloseWatcher()) {
         let watcher;
-        /**
-         * An active CloseWatcher stops the back button from
-         * navigating, so only keep one while there's something to close.
-         */
-        syncCloseWatcher = () => {
-            const canClose = closeWatcherConditions.some((condition) => condition());
-            if (!canClose) {
-                watcher?.destroy();
-                watcher = undefined;
-                return;
-            }
-            if (watcher !== undefined) {
-                return;
-            }
+        const configureWatcher = () => {
+            watcher?.destroy();
             watcher = new helpers.win.CloseWatcher();
             /**
              * Once a close request happens
              * the watcher gets destroyed.
              * As a result, we need to re-configure
              * the watcher so we can respond to other
-             * close requests, including after one that
-             * closed nothing, like a modal whose canDismiss
-             * returned false.
+             * close requests.
              */
             watcher.onclose = () => {
-                watcher = undefined;
                 backButtonCallback();
-                syncCloseWatcher?.();
+                configureWatcher();
             };
         };
-        syncCloseWatcher();
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
     }
 };
 const OVERLAY_BACK_BUTTON_PRIORITY = 100;
@@ -150,11 +121,9 @@ var hardwareBackButton = /*#__PURE__*/Object.freeze({
     __proto__: null,
     MENU_BACK_BUTTON_PRIORITY: MENU_BACK_BUTTON_PRIORITY,
     OVERLAY_BACK_BUTTON_PRIORITY: OVERLAY_BACK_BUTTON_PRIORITY,
-    addCloseWatcherCondition: addCloseWatcherCondition,
     blockHardwareBackButton: blockHardwareBackButton,
     shouldUseCloseWatcher: shouldUseCloseWatcher,
-    startHardwareBackButton: startHardwareBackButton,
-    updateCloseWatcher: updateCloseWatcher
+    startHardwareBackButton: startHardwareBackButton
 });
 
 /**
@@ -240,11 +209,6 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
 
 let lastOverlayIndex = 0;
 let lastId = 0;
-/**
- * Every overlay except toast, which doesn't trap
- * focus or close on back.
- */
-const NON_TOAST_OVERLAYS = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover';
 const activeAnimations = new WeakMap();
 /**
  * Determines if the overlay's backdrop is always blocking (no background interaction).
@@ -371,7 +335,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, NON_TOAST_OVERLAYS);
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -554,11 +518,6 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
-        /**
-         * Whether the overlay actually dismisses is checked at press time,
-         * since `backdropDismiss` can change while it's open.
-         */
-        addCloseWatcherCondition(() => getPresentedOverlay(doc, NON_TOAST_OVERLAYS) !== undefined);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
@@ -682,8 +641,7 @@ const setRootAriaHidden = (hidden = false) => {
  * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
  * an overlay is removed from the DOM without going through
  * the `dismiss()` flow (e.g., when a framework unmounts the
- * overlay during a route change). Also releases the
- * CloseWatcher if nothing is left to close.
+ * overlay during a route change).
  *
  * Should be called from an overlay's `disconnectedCallback`
  * when the overlay was still presented at the time of removal.
@@ -692,7 +650,6 @@ const cleanupRootFocusTrapAccessibility = () => {
     if (typeof document === 'undefined') {
         return;
     }
-    updateCloseWatcher();
     const remainingOverlays = getPresentedOverlays(document);
     const hasRemainingLocking = remainingOverlays.some((o) => locksAppRoot(o));
     if (!hasRemainingLocking) {
@@ -714,9 +671,7 @@ const applyRootLock = (el) => {
 };
 /**
  * Re-applies the root lock that `cleanupRootFocusTrapAccessibility()` released.
- * Call from `connectedCallback` when the overlay is still presented. Also
- * re-arms the CloseWatcher, which every overlay needs, so that happens
- * before the `locksAppRoot` check.
+ * Call from `connectedCallback` when the overlay is still presented.
  *
  * A synchronous move keeps the overlay connected, so the lock survives. A
  * detach with a re-insert in a later task releases it, which is the shape a
@@ -726,7 +681,6 @@ const restoreRootFocusTrapAccessibility = (overlayEl) => {
     if (typeof document === 'undefined') {
         return;
     }
-    updateCloseWatcher();
     const el = overlayEl;
     if (!locksAppRoot(el)) {
         return;
@@ -940,11 +894,6 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         index.printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
-    /**
-     * Release the back button if nothing
-     * else is left to close.
-     */
-    updateCloseWatcher();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -953,12 +902,6 @@ const getAppRoot = (doc) => {
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden
     baseEl.classList.remove('overlay-hidden');
-    /**
-     * Removing `overlay-hidden` makes the overlay count
-     * as presented, so back can dismiss it while it
-     * animates in.
-     */
-    updateCloseWatcher();
     const aniRoot = overlay.el;
     const animation = animationBuilder(aniRoot, opts);
     if (!overlay.animated || !index.config.getBoolean('animated', true)) {
@@ -1188,7 +1131,6 @@ exports.GESTURE = GESTURE;
 exports.MENU_BACK_BUTTON_PRIORITY = MENU_BACK_BUTTON_PRIORITY;
 exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
 exports.actionSheetController = actionSheetController;
-exports.addCloseWatcherCondition = addCloseWatcherCondition;
 exports.alertController = alertController;
 exports.cleanupRootFocusTrapAccessibility = cleanupRootFocusTrapAccessibility;
 exports.createDelegateController = createDelegateController;
@@ -1211,4 +1153,3 @@ exports.safeCall = safeCall;
 exports.setOverlayId = setOverlayId;
 exports.shouldUseCloseWatcher = shouldUseCloseWatcher;
 exports.toastController = toastController;
-exports.updateCloseWatcher = updateCloseWatcher;

package/dist/cjs/{select-option-render-CzyhrkOu.js → select-option-render-C-Yh9yZG.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BiQyIvoc.js');
-var index$1 = require('./index-B4ONUQRp.js');
+var index = require('./index-SAR1xwtW.js');
+var index$1 = require('./index-BSD7toMO.js');
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

package/dist/cjs/{slot-mutation-controller-ClDxh3EK.js → slot-mutation-controller-zixZ5LyH.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Cqr69qxA.js');
+var helpers = require('./helpers-Crluoxqu.js');
 var dir = require('./dir-zwDPRE5K.js');
 
 /**

package/dist/cjs/{status-tap-CDA0Y3Ad.js → status-tap-C3frTJ4c.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-BiQyIvoc.js');
-var index$1 = require('./index-CNaZ6SYM.js');
-var helpers = require('./helpers-Cqr69qxA.js');
+var index = require('./index-SAR1xwtW.js');
+var index$1 = require('./index-BAM4223M.js');
+var helpers = require('./helpers-Crluoxqu.js');
 require('./dir-zwDPRE5K.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-Idb4gqUk.js → swipe-back-BigumsQ1.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Cqr69qxA.js');
+var helpers = require('./helpers-Crluoxqu.js');
 var dir = require('./dir-zwDPRE5K.js');
 var index = require('./index-DRPqwSvU.js');
-require('./index-BiQyIvoc.js');
+require('./index-SAR1xwtW.js');
 require('./gesture-controller-CeJslptU.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/collection/collection-manifest.json

@@ -99,7 +99,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.45.2",
+    "version": "4.45.1",
     "typescriptVersion": "5.8.3"
   },
   "collections": [

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

@@ -19,11 +19,6 @@ export class InputOTP {
          * focus behavior when an input box is focused.
          */
         this.isKeyboardNavigation = false;
-        /**
-         * The `length` watcher runs before new inputs render, so
-         * `componentDidRender` updates their tab indexes instead.
-         */
-        this.updateTabIndexesAfterRender = false;
         this.inputValues = [];
         this.hasFocus = false;
         this.previousInputValues = [];
@@ -383,10 +378,6 @@ export class InputOTP {
         this.initializeValues();
         this.updateTabIndexes();
     }
-    lengthChanged() {
-        this.initializeValues();
-        this.updateTabIndexesAfterRender = true;
-    }
     /**
      * Processes the separators prop into an array of numbers.
      *
@@ -443,12 +434,6 @@ export class InputOTP {
     componentDidLoad() {
         this.updateTabIndexes();
     }
-    componentDidRender() {
-        if (this.updateTabIndexesAfterRender) {
-            this.updateTabIndexesAfterRender = false;
-            this.updateTabIndexes();
-        }
-    }
     /**
      * Get the regex pattern for allowed characters.
      * If a pattern is provided, use it to create a regex pattern
@@ -626,7 +611,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
-        return (h(Host, { key: 'def9fbd4fa135e6f435380c6ea86ac1621b4a111', class: createColorClasses(color, {
+        return (h(Host, { key: 'bd37661e13cde21feff30c663e6813ce3fff0d9a', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -634,18 +619,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", { key: '5d3d7646a3d4fc856b7b2e1f53d29fca47b10baf', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => {
-                if (el) {
-                    inputRefs[index] = el;
-                }
-                else {
-                    // The input was removed, so drop its ref and any after it.
-                    inputRefs.splice(index);
-                }
-            }, onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '9d72a4ab35b5fdd6bba9701050c385ed253b310f', class: {
+            }) }, h("div", { key: '5e206f870024f1ecfebda999ff31e6e815774deb', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'c268f838ddab2c8d6a612a11c7d38e6ca076436d', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '7deb3373c0d4e5deac22fa51577d271b9bb3a6d2' }))));
+            } }, h("slot", { key: 'c0736359b26f609b795e399fc1ad9b540632af18' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -1077,9 +1054,6 @@ export class InputOTP {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
-            }, {
-                "propName": "length",
-                "methodName": "lengthChanged"
             }, {
                 "propName": "separators",
                 "methodName": "processSeparators"

package/dist/collection/components/menu/menu.js

@@ -5,7 +5,7 @@ import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-trap";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
-import { shouldUseCloseWatcher, updateCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { menuController } from "../../utils/menu-controller/index";
@@ -560,7 +560,6 @@ export class Menu {
         // emit opened/closed events
         this._isOpen = isOpen;
         this.isAnimating = false;
-        updateCloseWatcher();
         if (!this._isOpen) {
             this.blocker.unblock();
         }
@@ -657,14 +656,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '5cf26df26d4e539860cbeaea98ec621b98c3fcfc', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '1208ba437fa58680325408d3d4c8580950da1d68', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'f337016e293bb8665c99762e0c389dd6c372bb33', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '4c3fe331aa42cd57d7ad9bd1f5910f8eeb62d7da' })), h("ion-backdrop", { key: '61af7ea876d81574841e1dd3e81e2352e555d096', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'c0ddc957b7a7956b41901d77ae02d91e73071c55', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '6e44c56116431a024f114ab85ded1b822c942fac' })), h("ion-backdrop", { key: '5f4bbcf84444d96ec6b02bf567e1aaf95f59078d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,14 @@ export class Route {
          *
          * Accepts paths similar to expressjs so that you can define parameters
          * in the url /foo/:bar where bar would be available in incoming props.
+         *
+         * A url ending in `*`, such as `*` or `/admin/*`, matches any remaining path,
+         * including none, so `/admin/*` also matches `/admin`. It only wins over a
+         * route that matches the whole path when it has more fixed segments, so
+         * `/admin/*` wins over `/:section/:id` but not over `/admin/:id`. It always
+         * wins over a route that matches by ignoring trailing segments, such as
+         * `/admin` for `/admin/users`. The matched path is passed in the `pathMatch`
+         * prop without a leading `/`. A `*` on a route with child routes is ignored.
          */
         this.url = '';
     }
@@ -47,7 +55,7 @@ export class Route {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props."
+                    "text": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props.\n\nA url ending in `*`, such as `*` or `/admin/*`, matches any remaining path,\nincluding none, so `/admin/*` also matches `/admin`. It only wins over a\nroute that matches the whole path when it has more fixed segments, so\n`/admin/*` wins over `/:section/:id` but not over `/admin/:id`. It always\nwins over a route that matches by ignoring trailing segments, such as\n`/admin` for `/admin/users`. The matched path is passed in the `pathMatch`\nprop without a leading `/`. A `*` on a route with child routes is ignored."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -20,7 +20,7 @@ export class RouteRedirect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified."
+                    "text": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply, unless it ends in `*`.\nA `from` that ends in `*` matches any path below it, but not the path itself, so `/admin/*`\nmatches `/admin/posts` but not `/admin`.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -4,3 +4,5 @@
 export const ROUTER_INTENT_NONE = 'root';
 export const ROUTER_INTENT_FORWARD = 'forward';
 export const ROUTER_INTENT_BACK = 'back';
+/** Param that holds the path matched by a trailing `*` in an `ion-route` url. */
+export const WILDCARD_PARAM = 'pathMatch';

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

@@ -1,6 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { WILDCARD_PARAM } from "./constants";
+import { chainToSegments, endsWithWildcard, withoutWildcard } from "./path";
 /**
  * Returns whether the given redirect matches the given path segments.
  *
@@ -41,6 +43,10 @@ export const matchesIDs = (ids, chain) => {
         if (routeId.id.toLowerCase() !== routeChain.id) {
             break;
         }
+        // Weight a wildcard route when the outlet reports its `pathMatch`
+        if (routeId.params?.[WILDCARD_PARAM] !== undefined && endsWithWildcard(routeChain.segments)) {
+            score++;
+        }
         if (routeId.params) {
             const routeIdParams = Object.keys(routeId.params);
             // Only compare routes with the chain that have the same number of parameters.
@@ -96,21 +102,28 @@ export const matchesSegments = (segments, chain) => {
             matchesDefault = true;
         }
         else {
-            for (const segment of chainSegments) {
+            const params = {};
+            for (const segment of withoutWildcard(chainSegments)) {
                 const data = inputSegments.next();
                 // data param
                 if (segment[0] === ':') {
                     if (data === '') {
                         return null;
                     }
-                    allparams = allparams || [];
-                    const params = allparams[i] || (allparams[i] = {});
                     params[segment.slice(1)] = data;
                 }
                 else if (data !== segment) {
                     return null;
                 }
             }
+            // A trailing `*` on a parent route has no effect. Its children match the rest of the path.
+            if (i === chain.length - 1 && endsWithWildcard(chainSegments)) {
+                params[WILDCARD_PARAM] = inputSegments.rest().join('/');
+            }
+            if (Object.keys(params).length > 0) {
+                allparams = allparams || [];
+                allparams[i] = params;
+            }
             matchesDefault = false;
         }
     }
@@ -142,25 +155,38 @@ export const mergeParams = (a, b) => {
  * Returns the best match or null when no match is found.
  * When a chain is returned the parameters are updated from the RouteIDs.
  * That is they contain both the componentProps of the <ion-route> and the parameter segment.
+ *
+ * When a wildcard route ties with other routes, a route without a wildcard that can build a url wins,
+ * then the wildcard route. Otherwise the first route declared wins a tie.
  */
 export const findChainForIDs = (ids, chains) => {
-    let match = null;
     let maxMatches = 0;
+    let tied = [];
     for (const chain of chains) {
         const score = matchesIDs(ids, chain);
         if (score > maxMatches) {
-            match = chain;
             maxMatches = score;
+            tied = [chain];
+        }
+        else if (score > 0 && score === maxMatches) {
+            tied.push(chain);
         }
     }
-    if (match) {
-        return match.map((route, i) => ({
-            id: route.id,
-            segments: route.segments,
-            params: mergeParams(route.params, ids[i]?.params),
-        }));
+    const matches = tied.map((chain) => chain.map((route, i) => ({
+        id: route.id,
+        segments: route.segments,
+        params: mergeParams(route.params, ids[i]?.params),
+    })));
+    if (!matches.some(chainEndsWithWildcard)) {
+        return matches.length > 0 ? matches[0] : null;
+    }
+    return matches.reduce((best, chain) => (tieRank(chain) > tieRank(best) ? chain : best));
+};
+const tieRank = (chain) => {
+    if (chainEndsWithWildcard(chain)) {
+        return 1;
     }
-    return null;
+    return chainToSegments(chain) !== null ? 2 : 0;
 };
 /**
  * Finds the best match for the segments in the chains.
@@ -168,10 +194,17 @@ export const findChainForIDs = (ids, chains) => {
  * Returns the best match or null when no match is found.
  * When a chain is returned the parameters are updated from the segments.
  * That is they contain both the componentProps of the <ion-route> and the parameter segments.
+ *
+ * When wildcard routes match, the one with the most fixed segments wins if it has more fixed segments than every
+ * route that matched the whole path. Routes that only matched by ignoring trailing segments don't count.
  */
 export const findChainForSegments = (segments, chains) => {
     let match = null;
     let bestScore = 0;
+    let fullMatch = null;
+    let bestFullScore = 0;
+    let maxFullFixed = -1;
+    let wildcard = null;
     for (const chain of chains) {
         const matchedChain = matchesSegments(segments, chain);
         if (matchedChain !== null) {
@@ -180,9 +213,51 @@ export const findChainForSegments = (segments, chains) => {
                 bestScore = score;
                 match = matchedChain;
             }
+            if (chainEndsWithWildcard(matchedChain)) {
+                if (wildcard === null || winsWildcard(matchedChain, wildcard)) {
+                    wildcard = matchedChain;
+                }
+            }
+            else if (!isPartialMatch(segments, matchedChain)) {
+                if (score > bestFullScore) {
+                    bestFullScore = score;
+                    fullMatch = matchedChain;
+                }
+                maxFullFixed = Math.max(maxFullFixed, countFixedSegments(matchedChain));
+            }
         }
     }
-    return match;
+    // Without a wildcard to match the rest of the path, routes can still ignore trailing segments.
+    if (wildcard === null) {
+        return match;
+    }
+    // Compare fixed segments rather than priority, since nesting under default routes raises the priority
+    return countFixedSegments(wildcard) > maxFullFixed ? wildcard : fullMatch;
+};
+/** Returns whether the chain matched the path segments only by ignoring some trailing segments. */
+const isPartialMatch = (segments, chain) => {
+    const matched = chainToSegments(chain);
+    return matched !== null && matched.length < segments.filter((s) => s !== '').length;
+};
+const chainEndsWithWildcard = (chain) => {
+    return endsWithWildcard(chain[chain.length - 1].segments);
+};
+/** Returns whether the wildcard chain beats `best` by fixed segments, then by priority. */
+const winsWildcard = (chain, best) => {
+    const chainFixed = countFixedSegments(chain);
+    const bestFixed = countFixedSegments(best);
+    return chainFixed > bestFixed || (chainFixed === bestFixed && computePriority(chain) > computePriority(best));
+};
+const countFixedSegments = (chain) => {
+    let count = 0;
+    for (const route of chain) {
+        for (const segment of withoutWildcard(route.segments)) {
+            if (segment !== '' && segment[0] !== ':') {
+                count++;
+            }
+        }
+    }
+    return count;
 };
 /**
  * Computes the priority of a chain.
@@ -194,12 +269,14 @@ export const findChainForSegments = (segments, chains) => {
  * - /path/to/page
  *
  * The second one will be given a higher priority because "page" is a fixed segment (vs ":where", a parameter segment).
+ *
+ * A trailing wildcard is not counted.
  */
 export const computePriority = (chain) => {
     let score = 1;
     let level = 1;
     for (const route of chain) {
-        for (const segment of route.segments) {
+        for (const segment of withoutWildcard(route.segments)) {
             if (segment[0] === ':') {
                 score += Math.pow(1, level);
             }
@@ -221,4 +298,10 @@ export class RouterSegments {
         }
         return '';
     }
+    /** Consumes and returns the remaining non empty segments. */
+    rest() {
+        const rest = this.segments.filter((s) => s !== '');
+        this.segments = [];
+        return rest;
+    }
 }