@ionic/core 8.8.6-dev.11777569278.1613db2e → 8.8.6-dev.11777572994.1147595d

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

@@ -1,3 +1,36 @@
+/**
+ * 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.
@@ -34,11 +67,14 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
+  --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;
   position: relative;
   flex: 3;
   align-items: center;
+  font-family: var(--ion-font-family, inherit);
   user-select: none;
+  z-index: 2;
 }
 
 :host(.range-disabled) {
@@ -49,6 +85,10 @@
   flex: initial;
 }
 
+::slotted(ion-icon[slot]) {
+  font-size: 24px;
+}
+
 .range-slider {
   position: relative;
   flex: 1;
@@ -65,8 +105,8 @@
 
 .range-pin {
   position: absolute;
-  background: current-color(base);
-  color: current-color(contrast);
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -215,6 +255,7 @@
    * only the label would show and users
    * would not be able to see the range.
    */
+  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -243,121 +284,6 @@
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the range in LTR and
- * on the left in RTL.
- */
-:host(.range-label-placement-end) .range-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the range in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.range-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the range.
- */
-:host(.range-label-placement-stacked) .range-wrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-:host(.range-label-placement-stacked) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-/**
- * 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 {
-  --knob-handle-size: calc(var(--knob-size) * 2);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
-::slotted([slot=label]) {
-  max-width: 200px;
-}
-
 :host(.range-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -372,12 +298,20 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the range should be on the start
+ * when the label sits at the end.
+ */
 :host(.range-label-placement-end) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the range should be on the start
-   * when the label sits at the end.
-   */
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 0;
@@ -400,7 +334,27 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 :host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
   transform: scale(0.75);
   /**
   * The margin between the label and
@@ -416,6 +370,15 @@
    */
   max-width: calc(100% / 0.75);
 }
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
   margin-top: 10px;
@@ -426,12 +389,6 @@
   margin-bottom: 0px;
 }
 
-/**
- * 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/refresher/refresher.ios.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

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: 'd2671f7850b565e7a6fc5b3ff15b2410bcf7cb32', 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: '684bf1189acba94c502e2bb421f0b65313c3e9f9', class: {
-                [theme]: true,
-            } }, h("div", { key: '29bfcc52d581913654f7639b0f669d149bf91026', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'c5ddc5a3c22ec365906e8716cdbdb8cf793bb978', class: "refresher-pulling-icon" }, h("div", { key: '4314fff1f89758c81de7d908be2eaae81e8d9fb8', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'cea2bc74fd42c35ec6d6349f033830e745c9e99b', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'bfd43614c33fa6e83f67ac95022db5343af160d6', class: "arrow-container" }, h("ion-icon", { key: '64f48d15dc2c17cbeb177f28272477ee8535136b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '6f540e79e981a923050f57167aff8da92bfe8990', class: "refresher-pulling-icon" }, h("ion-icon", { key: '97b0755e0f240ec199b408a9cfef9fc48b481a68', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '1cd2a284b786fa94272f88659942ff15a7344f66', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '722aea4deaef0b014f49ce61a4a81ef219d0b101', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8152f4fe27037c4f34918e515ac460c1f03240d5', 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: '2a30643d0c5dbebab97a7aca68c165ee79ceed33', class: {
-                [theme]: true,
-            } }, h("slot", { key: '9ac45a0cc21aea6ed0ec03aa12334886219b1051' }, h("ion-icon", { key: '6d6789a718db4f252c6b3b4484148be2a65c80b8', 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: 'f618089290a47bae34bcaaed968c3f8f4daa827f', 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: 'f4db39623cfd1bdc773e222b2dd9ed52a26cc685', 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() {