@ionic/core 9.0.10 → 9.0.11-dev.11793666452.109ac2a5

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

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

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -143,10 +149,17 @@ 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
@@ -255,8 +268,8 @@ ion-refresher.refresher-native .arrow-container ion-icon {
   margin-inline-end: auto;
   margin-top: 0;
   margin-bottom: 0;
-  left: 0;
   right: 0;
+  left: 0;
   bottom: -4px;
   position: absolute;
   color: var(--ion-color-primary, #0054e9);

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

@@ -6,14 +6,19 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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
@@ -21,15 +26,21 @@ export class RefresherContent {
              * the native iOS refresher.
              */
             const hasRubberBandScrolling = supportsRubberBandScrolling();
-            const mode = getIonMode(this);
             const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
+            this.pullingIcon = config.get('refreshingIcon', theme === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
-            const mode = getIonMode(this);
-            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'circular'));
+            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
         }
     }
+    /**
+     * Get the icon to use for the arrow icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get refresherArrowIcon() {
+        return config.get('refresherArrowIcon', caretBackSharp);
+    }
     renderPullingText() {
         const { customHTMLEnabled, pullingText } = this;
         if (customHTMLEnabled) {
@@ -47,10 +58,26 @@ export class RefresherContent {
     render() {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'a1546008813bbcfa70f97e9b9025846ee0aed722', class: mode }, h("div", { key: '5422771d67fe201e22d4f9d7db6b685f3db5d99d', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '5c2b6dfc3f01b42586ea83380548d454b220a7ca', class: "refresher-pulling-icon" }, h("div", { key: '2c3799ca3f66960d7081c63c5a0840951f694baf', class: "spinner-arrow-container" }, h("ion-spinner", { key: '03f766a9b9354dcb8f6975757a9b882c2eb5cf4a', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'e5f4ba7c6a70adb71f8985af0e23aca07d7b005a', class: "arrow-container" }, h("ion-icon", { key: 'ddccbd9164ae8daa97178fc53b52f74f1fd298ef', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '6fb742f47f9149fa6dc3daefe5aaa77f925da4bd', class: "refresher-pulling-icon" }, h("ion-icon", { key: '907657135eeac4c394be1eae4a659664a7bfacb0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'fb3094b3ed7e100ab9641c3221770889088e27f3', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'bc8078f94e7cea3cb6f03a09e98540f0e0b38721', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8f39524f073aa828e941bcdd4d48e4d5dfc759c6', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '0c2d1e37ac80b22b649da4915baf238dbdc56235', class: {
+                [theme]: true,
+            } }, h("div", { key: '9f753c836a1eb975e471c6cdfce67c751bf5598c', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'a43b42c39faef8de65ac68a1383a9da3ab59c638', class: "refresher-pulling-icon" }, h("div", { key: '8ad21fd54acc06f2189645e75be01b19e59bff04', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'b8502f03992b9f1f7edfaa3ff9a6a7dbc5f40b0e', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'd99f97773b5895a26efc751d51ca8fb32240efcb', class: "arrow-container" }, h("ion-icon", { key: '9ef6e55f2ab620ec5519413fbf736651ea4e0429', icon: this.refresherArrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '594bcba33f7bb839d9e373afd71efcee1c56d28b', class: "refresher-pulling-icon" }, h("ion-icon", { key: '0f4bde8e77bfa1d5f48750537e45f909dc1f3e3b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'd95f08a0b8d880372453b8feeba6c4c4f08b3882', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'ab6277323dc182b97f996fb5472394ca693b168b', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'f2b5afe59588a4f520cd525b4b41cdfa1e1a9c90', 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,6 +16,12 @@
   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

@@ -3,8 +3,12 @@
  */
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonTheme } from "../../global/ionic-global";
 /**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
@@ -17,23 +21,38 @@ export class Reorder {
             ev.stopImmediatePropagation();
         }
     }
+    /**
+     * Get the icon to use for the handle icon.
+     * 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 the default icon
+        const theme = getIonTheme(this);
+        const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+        return config.get('reorderHandleIcon', defaultIcon);
+    }
     render() {
-        const mode = getIonMode(this);
-        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'f278c473b4695a6a93565100e4fcaa7f9e3e9ff5', class: mode }, h("slot", { key: 'cc26b5ed297f68a0bea82e27e34a7fe945186f4e' }, h("ion-icon", { key: '696f5e4c2b09e64bd08abf0d0818b1554cd29737', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const { reorderHandleIcon } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '9c892988fa07bbcf5f097f929f566644091bffff', class: {
+                [theme]: true,
+            } }, h("slot", { key: '09e4add17fb13a688d738f4cac9643eacc529a31' }, h("ion-icon", { key: '70d4bcc36210d43cd7e0acd1a18d4bcd530d1815', icon: reorderHandleIcon, 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"]
+            "md": ["reorder.md.scss"],
+            "ionic": ["reorder.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["reorder.ios.css"],
-            "md": ["reorder.md.css"]
+            "md": ["reorder.md.css"],
+            "ionic": ["reorder.md.css"]
         };
     }
     static get elementRef() { return "el"; }

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

@@ -16,6 +16,12 @@
   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,3 +1,9 @@
+/**
+ * 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,7 +5,11 @@ 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 { getIonMode } from "../../global/ionic-global";
+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.
+ */
 export class ReorderGroup {
     constructor() {
         this.lastToIndex = -1;
@@ -252,9 +256,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '779332508f44409696b6bab80eda72f9b1d7869d', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '2bfe133bc136ca22cf8a8d876e84a45d1a673a9c', class: {
+                [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));

package/dist/collection/components/ripple-effect/{ripple-effect.css → ripple-effect.common.css}

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/ripple-effect/ripple-effect.ionic.css

@@ -0,0 +1,215 @@
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  contain: strict;
+  pointer-events: none;
+}
+
+:host(.unbounded) {
+  contain: layout size style;
+}
+
+.ripple-effect {
+  border-radius: 50%;
+  position: absolute;
+  background-color: currentColor;
+  color: inherit;
+  contain: strict;
+  opacity: 0;
+  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.fade-out {
+  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  animation: 150ms fadeOutAnimation forwards;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: 0.16;
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0.16;
+  }
+  to {
+    opacity: 0;
+  }
+}
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+.ripple-effect {
+  animation-name: rippleAnimation, fadeInAnimation;
+}
+
+.fade-out {
+  animation-name: fadeOutAnimation;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: var(--ripple-opacity, 0.16);
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: var(--ripple-opacity, 0.16);
+  }
+  to {
+    opacity: 0;
+  }
+}

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

@@ -2,7 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+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.
+ */
 export class RippleEffect {
     constructor() {
         /**
@@ -67,9 +71,9 @@ export class RippleEffect {
         return this.type === 'unbounded';
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '371350cb76e98338ef7467191aaaf817b1298b3f', role: "presentation", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3247c71e55919c1d84abd099dbfae9afd2626cb2', role: "presentation", class: {
+                [theme]: true,
                 unbounded: this.unbounded,
             } }));
     }
@@ -77,12 +81,16 @@ export class RippleEffect {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ripple-effect.scss"]
+            "ios": ["ripple-effect.common.scss"],
+            "md": ["ripple-effect.common.scss"],
+            "ionic": ["ripple-effect.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["ripple-effect.css"]
+            "ios": ["ripple-effect.common.css"],
+            "md": ["ripple-effect.common.css"],
+            "ionic": ["ripple-effect.ionic.css"]
         };
     }
     static get properties() {

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

@@ -1,4 +1,8 @@
 // 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() {
         /**

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

@@ -6,6 +6,10 @@ 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-link/router-link.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -69,16 +75,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,7 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, openURL } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+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.
+ */
 export class RouterLink {
     constructor() {
         /**
@@ -16,16 +20,16 @@ export class RouterLink {
         };
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '8aaf732d8f5cc4ced351e2b3164605c10bd90cad', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '0fde5901c0926db89fa26ed4f381eb1d08e66abe', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", { key: '8f291ffbbce5b08dd10720d855eb020880bf1be1', ...attrs }, h("slot", { key: '24dc388a49204011e1c1f0a1131c9a1b0a4ae4da' }))));
+            }) }, h("a", { key: 'd22a6b6d76a2260bcaa98b6d8baf4ba28bb3a5ef', ...attrs }, h("slot", { key: '4bc67249a8b9eaf224a6725ff0af4101a1c1560c' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }