@ionic/core 8.0.0-dev.11712072527.1dd97c66 → 8.0.0-dev.11712932867.11504809

package/dist/collection/components/radio/radio.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
@@ -304,6 +310,12 @@ input {
   }
 }
 
+/**
+ * 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
@@ -359,6 +371,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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/radio-group/radio-group.js

@@ -3,7 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { renderHiddenInput } from "../../utils/helpers";
-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 RadioGroup {
     constructor() {
         this.inputId = `ion-rg-${radioGroupIds++}`;
@@ -151,9 +155,11 @@ export class RadioGroup {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: '1e33ffa21aa6589ecd2dcea2f98d5f766ec358fc', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return (h(Host, { key: '89d3c6ef8b57bcbff88ef1539cfc8c884003d86a', class: {
+                [theme]: true,
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick }));
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {

package/dist/collection/components/range/range.ios.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
@@ -389,6 +395,12 @@
   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/range/range.js

@@ -7,11 +7,12 @@ import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput } from "
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
 // TODO(FW-2832): types
 /**
- * @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.
  *
  * @slot label - The label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
@@ -559,10 +560,10 @@ export class Range {
          */
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '4dfc3e08ccd8f39b1de8a977171c196334840717', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '7c33f3e9b9dafbc9823f885e6a08652ec4baf6e1', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
@@ -570,23 +571,25 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '3d85cca6ea4add6e338a91c1736d493363c15dc9', class: "range-wrapper", id: "range-label" }, h("div", { key: '0bfabf13ea0b8c1ddd1ad3933f8ba3b60e0f14f9', class: {
+            }) }, h("label", { key: 'b8d53c016775e83157913e55866b611cb304ce43', class: "range-wrapper", id: "range-label" }, h("div", { key: 'c0c4ec2c3741cfdcb01787fa00a76fea74bb4608', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'e916e52fe78eed340ce9102de19e53069271bf8f', class: "native-wrapper" }, h("slot", { key: 'de52a20642a3df5e19a8888069a1460dbcf28e0c', name: "start" }), this.renderRangeSlider(), h("slot", { key: '2791d30423b44a6c65bd151559bcba5402ed3835', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'a6123134b490f08a1e4f952c3ab1cb4cdd0a3a64', class: "native-wrapper" }, h("slot", { key: 'f84e3dfe7c5c207cf521527704ff7ee9e468d400', name: "start" }), this.renderRangeSlider(), h("slot", { key: '9ffd9b007b462bb1cd71adb21d6e1100c20807ed', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["range.ios.scss"],
-            "md": ["range.md.scss"]
+            "md": ["range.md.scss"],
+            "ionic": ["range.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
-            "md": ["range.md.css"]
+            "md": ["range.md.css"],
+            "ionic": ["range.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/range/range.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
@@ -389,6 +395,12 @@
   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,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
@@ -147,6 +153,12 @@ ion-refresher-content .arrow-container {
   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

@@ -6,10 +6,11 @@ import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from "../../utils/helpers";
 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() {
@@ -593,11 +594,11 @@ export class Refresher {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '0504ac04ad9a8146919ad1a0e2f8ae65af835b19', 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 */,
@@ -611,13 +612,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
@@ -147,6 +153,12 @@ ion-refresher-content .arrow-container {
   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-content/refresher-content.js

@@ -6,9 +6,13 @@ 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);
@@ -18,6 +22,7 @@ export class RefresherContent {
         this.refreshingText = undefined;
     }
     componentWillLoad() {
+        const theme = getIonTheme(this);
         if (this.pullingIcon === undefined) {
             /**
              * The native iOS refresher uses a spinner instead of
@@ -25,13 +30,11 @@ 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'));
         }
     }
     renderPullingText() {
@@ -51,8 +54,10 @@ export class RefresherContent {
     render() {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'bd4122ec149c1ea6c43d5b6dfd7932569bfd8d7e', class: mode }, h("div", { key: '492113883e1ed465fd6b35a8e700b29a8bbb2baf', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '402b0e02cfee42358c4fd690b60c8eb39386569f', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c0e44aace51d0ae6ad87a52e4d798b9815b5a99d', class: {
+                [theme]: true,
+            } }, h("div", { key: 'f0ccac656e9beefb8916de733fee810596b4a290', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), theme === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '80c0f68f6bbcda64fb7349e6f3dd06517051ecd9', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

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,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-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.
+ *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
@@ -18,22 +21,26 @@ export class Reorder {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '268c3575bdc5ca591e11442a744119028f17ae85', class: mode }, h("slot", { key: '4767aef1d57921060541cd38b0a62ef2d8b3267b' }, h("ion-icon", { key: 'ad5f972dc2449cdd7aba92b06e7f0d2539e9a202', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const theme = getIonTheme(this);
+        const reorderIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+        return (h(Host, { key: 'da9f62d67b64548cc3a9c9d01d076ce88bb60aee', class: {
+                [theme]: true,
+            } }, h("slot", { key: 'd312b9a952f36acc14287b0d5f6f79bbb2d878aa' }, h("ion-icon", { key: 'a113e28edf0551b6b20bb60c5f91c15cbaacc608', 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"]
+            "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;
@@ -237,9 +241,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c5b7c0d39bae1f20619a5fe8235915309d429069', class: {
+                [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));

package/dist/collection/components/ripple-effect/ripple-effect.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/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() {
         this.type = 'bounded';
@@ -58,9 +62,9 @@ export class RippleEffect {
         return this.type === 'unbounded';
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '42d95cc2382286e3bc5d68603f8292eb57ba10f5', role: "presentation", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd395f078a1cde1ef1074911295e0244aeaae9e19', role: "presentation", class: {
+                [theme]: true,
                 unbounded: this.unbounded,
             } }));
     }

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() {
         this.url = '';

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

@@ -5,6 +5,10 @@ import { readNavState, waitUntilNavNode, writeNavState } from "./utils/dom";
 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

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() {
         this.onClick = (ev) => {
@@ -17,16 +21,16 @@ export class RouterLink {
         this.target = undefined;
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'eed1bce0cb34bd5bc238d8aa4707b4371c04e2c3', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), h("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
+            }) }, h("a", Object.assign({ key: '44d1848c6cc33ed264c18eac24752f08f9cea090' }, attrs), h("slot", { key: '724e6d059b9905599cdb350ac010b918e4699e39' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-outlet/router-outlet.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/router-outlet/router-outlet.js

@@ -9,6 +9,9 @@ import { createLockController } from "../../utils/lock-controller";
 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();
@@ -177,7 +180,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'b90c776f7924a88b1b36befe7e6f8943fc20dfe3' });
+        return h("slot", { key: 'ac08c13fb8432bb8b0694c6fbdd899bc958d75b4' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -210,7 +213,7 @@ export class RouterOutlet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The mode determines which platform styles to use."
+                    "text": "The mode determines the platform behaviors of the component."
                 },
                 "attribute": "mode",
                 "reflect": false,

package/dist/collection/components/row/row.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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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/row/row.js

@@ -2,10 +2,17 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } 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 Row {
     render() {
-        return (h(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode(this) }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c4de0aeb87e735a666ba6c0ae74a088a9ff15490', class: {
+                [theme]: true,
+            } }, h("slot", { key: '638950493658641031875f45c21ee0e66fe6fcb7' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.ios.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
@@ -203,6 +209,12 @@
   pointer-events: 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