@ionic/core 8.8.16-dev.11784914346.10d0804c → 8.8.16-dev.11785274070.1b3387c9

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

@@ -7,11 +7,10 @@ import { getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELEC
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, translateElement, } from "./refresher.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Refresher {
     constructor() {
@@ -716,11 +715,11 @@ export class Refresher {
         }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '5761384ab0eb88600ad036b6fdbebf8e5150e6b8', slot: "fixed", class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '1dd475095f76491206644828cf89fc6d2ec276d1', slot: "fixed", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`refresher-${theme}`]: true,
+                [`refresher-${mode}`]: true,
                 'refresher-native': this.nativeRefresher,
                 'refresher-active': this.state !== 1 /* RefresherState.Inactive */,
                 'refresher-pulling': this.state === 2 /* RefresherState.Pulling */,
@@ -734,15 +733,13 @@ export class Refresher {
     static get originalStyleUrls() {
         return {
             "ios": ["refresher.ios.scss"],
-            "md": ["refresher.md.scss"],
-            "ionic": ["refresher.md.scss"]
+            "md": ["refresher.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["refresher.ios.css"],
-            "md": ["refresher.md.css"],
-            "ionic": ["refresher.md.css"]
+            "md": ["refresher.md.css"]
         };
     }
     static get properties() {

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -149,17 +143,10 @@ ion-refresher-content .arrow-container {
   transform: scale(0);
 }
 
-.refresher-native .refresher-pulling-text,
-.refresher-native .refresher-refreshing-text {
+.refresher-native .refresher-pulling-text, .refresher-native .refresher-refreshing-text {
   display: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -268,8 +255,8 @@ ion-refresher.refresher-native .arrow-container ion-icon {
   margin-inline-end: auto;
   margin-top: 0;
   margin-bottom: 0;
-  right: 0;
   left: 0;
+  right: 0;
   bottom: -4px;
   position: absolute;
   color: var(--ion-color-primary, #0054e9);

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

@@ -1,25 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretLeftFill from "@phosphor-icons/core/assets/fill/caret-left-fill.svg";
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class RefresherContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     }
     componentWillLoad() {
-        const theme = getIonTheme(this);
         if (this.pullingIcon === undefined) {
             /**
              * The native iOS refresher uses a spinner instead of
@@ -27,11 +21,13 @@ export class RefresherContent {
              * the native iOS refresher.
              */
             const hasRubberBandScrolling = supportsRubberBandScrolling();
+            const mode = getIonMode(this);
             const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', theme === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
-            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
+            const mode = getIonMode(this);
+            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'circular'));
         }
     }
     renderPullingText() {
@@ -51,27 +47,10 @@ export class RefresherContent {
     render() {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
-        const theme = getIonTheme(this);
-        const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
-        return (h(Host, { key: '3d2d138e485b3b2beae47b9ea4e140f0b9647434', class: {
-                [theme]: true,
-            } }, h("div", { key: 'd0c950b65a37a75b795503574a980cdb61f674e1', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '8c6e27b2fb134c21fb7e8864433802a95ba0f328', class: "refresher-pulling-icon" }, h("div", { key: '0a947b7779502780f2c835f8686f3a06e21a9194', class: "spinner-arrow-container" }, h("ion-spinner", { key: '59c129077809add46b7fe6dcf5fc0edbb1cc94d5', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'a28750ed07d9337febbceb5550683eb1c302858c', class: "arrow-container" }, h("ion-icon", { key: 'e14e3b9f9ad51ce3a138a191a848078bd423fa9b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '22c4c80ef1e340a8ec9ca718849b412a09507967', class: "refresher-pulling-icon" }, h("ion-icon", { key: '6506d0dd30bf639a23cda57c6d1c2a9c29e42ed6', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'a54967c5f539ed182106b1c5fa7b499de84c049a', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '2e425f66d780e90474b8ebf7473b9f7c98f30c81', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '286b9b9cce1cb4450ffa5577f0b76044877722ce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const mode = getIonMode(this);
+        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 originalStyleUrls() {
-        return {
-            "ios": ["refresher-content.scss"],
-            "md": ["refresher-content.scss"],
-            "ionic": ["refresher-content.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "ios": ["refresher-content.css"],
-            "md": ["refresher-content.css"],
-            "ionic": ["refresher-content.css"]
-        };
-    }
     static get properties() {
         return {
             "pullingIcon": {

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

@@ -16,12 +16,6 @@
   font-size: dynamic-font(16px);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,15 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
@@ -22,45 +17,23 @@ export class Reorder {
             ev.stopImmediatePropagation();
         }
     }
-    /**
-     * Get the icon to use for the handle icon.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get reorderHandleIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: reorderThreeOutline,
-            ionic: listRegular,
-            md: reorderTwoSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured reorder handle icon or the default icon
-        return config.get('reorderHandleIcon', defaultIcon);
-    }
     render() {
-        const { reorderHandleIcon } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'bc0b4cd34db6dfe794ab66a785d406bfc02236c5', class: {
-                [theme]: true,
-            } }, h("slot", { key: '28672768be8598b7cb47b7b2837b77afbc2c2e14' }, h("ion-icon", { key: '03b6620768da18a6f8cb0c55e94b85a53cbab66a', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const mode = getIonMode(this);
+        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+        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"; }
     static get originalStyleUrls() {
         return {
             "ios": ["reorder.ios.scss"],
-            "md": ["reorder.md.scss"],
-            "ionic": ["reorder.md.scss"]
+            "md": ["reorder.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["reorder.ios.css"],
-            "md": ["reorder.md.css"],
-            "ionic": ["reorder.md.css"]
+            "md": ["reorder.md.css"]
         };
     }
     static get elementRef() { return "el"; }

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

@@ -16,12 +16,6 @@
   font-size: dynamic-font(16px);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -5,11 +5,7 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, getScrollElement } from "../../utils/content/index";
 import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class ReorderGroup {
     constructor() {
         this.lastToIndex = -1;
@@ -256,9 +252,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'c095e5428be9f446f245d37a12653978bb2bc2b6', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        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.common.css → ripple-effect.css}

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -60,8 +54,8 @@
  * }
  */
 :host {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;

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

@@ -2,11 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class RippleEffect {
     constructor() {
         /**
@@ -71,9 +67,9 @@ export class RippleEffect {
         return this.type === 'unbounded';
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '51fe7517d41c643bd4e746f366f513c42dac17dc', role: "presentation", class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '5e88b5225414e29883256c86f111ded5bdf2ef91', role: "presentation", class: {
+                [mode]: true,
                 unbounded: this.unbounded,
             } }));
     }
@@ -81,16 +77,12 @@ export class RippleEffect {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["ripple-effect.common.scss"],
-            "md": ["ripple-effect.common.scss"],
-            "ionic": ["ripple-effect.ionic.scss"]
+            "$": ["ripple-effect.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["ripple-effect.common.css"],
-            "md": ["ripple-effect.common.css"],
-            "ionic": ["ripple-effect.ionic.css"]
+            "$": ["ripple-effect.css"]
         };
     }
     static get properties() {

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

@@ -1,8 +1,4 @@
 // TODO(FW-2832): types
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Route {
     constructor() {
         /**
@@ -71,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

@@ -6,10 +6,6 @@ import { readNavState, scrollToFragment, waitUntilNavNode, writeNavState } from
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./utils/matching";
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Router {
     constructor() {
         this.previousPath = null;

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.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -75,16 +69,16 @@
 }
 
 a {
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
 }

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

@@ -3,11 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, openURL } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class RouterLink {
     constructor() {
         /**
@@ -20,16 +16,16 @@ export class RouterLink {
         };
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '84efbafddc586ee3f616d4e1a13118c04d9b2753', onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'e8c7cda4c00ec45548ea52b632bc4adb07f9460c' }, attrs), h("slot", { key: '133bf1203a3e218e3868b4cfda00bb753ecea946' }))));
+            }) }, h("a", Object.assign({ key: '85796b7b48581fe9830ba1102dad7d1069de4e17' }, attrs), h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -60,8 +54,8 @@
  * }
  */
 :host {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;

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

@@ -10,15 +10,12 @@ import { printIonError } from "../../utils/logging/index";
 import { transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class RouterOutlet {
     constructor() {
         this.lockController = createLockController();
         this.gestureOrAnimationInProgress = false;
         /**
-         * The mode determines the platform behaviors of the component.
+         * The mode determines which platform styles to use.
          */
         this.mode = getIonMode(this);
         /**
@@ -26,10 +23,11 @@ export class RouterOutlet {
          */
         this.animated = true;
     }
+    swipeGestureChanged() {
+        this.updateGestureEnabled();
+    }
     swipeHandlerChanged() {
-        if (this.gesture) {
-            this.gesture.enable(this.swipeHandler !== undefined);
-        }
+        this.updateGestureEnabled();
     }
     async connectedCallback() {
         const onStart = () => {
@@ -69,11 +67,21 @@ export class RouterOutlet {
                 this.gestureOrAnimationInProgress = false;
             }
         });
-        this.swipeHandlerChanged();
+        if (this.swipeGesture === undefined) {
+            this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
+        }
+        else {
+            this.updateGestureEnabled();
+        }
     }
     componentWillLoad() {
         this.ionNavWillLoad.emit();
     }
+    updateGestureEnabled() {
+        if (this.gesture) {
+            this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
+        }
+    }
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -184,7 +192,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
+        return h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -217,7 +225,7 @@ export class RouterOutlet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The mode determines the platform behaviors of the component."
+                    "text": "The mode determines which platform styles to use."
                 },
                 "getter": false,
                 "setter": false,
@@ -296,6 +304,25 @@ export class RouterOutlet {
                 "getter": false,
                 "setter": false
             },
+            "swipeGesture": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture.\nDefaults to `true` for `\"ios\"` mode and `false` for `\"md\"` mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe-gesture"
+            },
             "swipeHandler": {
                 "type": "unknown",
                 "mutable": false,
@@ -517,6 +544,9 @@ export class RouterOutlet {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "swipeGesture",
+                "methodName": "swipeGestureChanged"
+            }, {
                 "propName": "swipeHandler",
                 "methodName": "swipeHandlerChanged"
             }];