@ionic/core 8.0.0-dev.11712850753.10c4a960 → 8.0.0-dev.11712932867.11504809

package/dist/collection/components/popover/popover.js

@@ -7,11 +7,11 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
+import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,12 +19,13 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from "./utils";
 // 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 - Content is placed inside of the `.popover-content` element.
  *
  * @part backdrop - The `ion-backdrop` element.
- * @part arrow - The arrow that points to the reference element. Only applies on `ios` mode.
+ * @part arrow - The arrow that points to the reference element. Only applies on `"ios"` theme.
  * @part content - The wrapper element for the default slot.
  */
 export class Popover {
@@ -107,7 +108,6 @@ export class Popover {
         this.arrow = true;
         this.isOpen = false;
         this.keyboardEvents = false;
-        this.focusTrap = true;
         this.keepContentsMounted = false;
     }
     onTriggerChange() {
@@ -137,7 +137,7 @@ export class Popover {
         const popoverId = setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
-            this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+            this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -333,26 +333,28 @@ export class Popover {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const mode = getIonMode(this);
-        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
+        const theme = getIonTheme(this);
+        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '4c8d34559a6e383cb778566f2c6e88690def0ba0', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4a666a310a920fa5c4c5d7ff3c310f8701140657', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '710e22246d151441d80f2bbd618145d7dc651f09', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: 'aefcaa864ba3b941597bae15dedc51c33e1b7bb9', class: "popover-content", part: "content" }, h("slot", { key: 'b2384f79e042a5946b65511bd339bd0cf7772d18' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '9a23205e9044b2c67847553eff6e051f8a86104f', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '6c530a3ed01a281691912deb50b53088d28812cc', class: "popover-content", part: "content" }, h("slot", { key: '54c80a33cd409811ca6e557117319439eac487b8' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["popover.ios.scss"],
-            "md": ["popover.md.scss"]
+            "md": ["popover.md.scss"],
+            "ionic": ["popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["popover.ios.css"],
-            "md": ["popover.md.css"]
+            "md": ["popover.md.css"],
+            "ionic": ["popover.md.css"]
         };
     }
     static get properties() {
@@ -611,7 +613,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the popover will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,
@@ -799,7 +801,7 @@ export class Popover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode."
+                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `\"ios\"` theme, and `\"start\"` for `\"md\"` theme."
                 },
                 "attribute": "alignment",
                 "reflect": false
@@ -816,7 +818,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode."
+                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` on `\"ios\"` theme."
                 },
                 "attribute": "arrow",
                 "reflect": false,
@@ -861,24 +863,6 @@ export class Popover {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "focusTrap": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, focus will not be allowed to move outside of this overlay.\nIf 'false', focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
-                },
-                "attribute": "focus-trap",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "keepContentsMounted": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/popover/popover.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
@@ -177,6 +183,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/popover/test/basic/popover.spec.js

@@ -4,7 +4,6 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Popover } from "../../popover";
-import { FOCUS_TRAP_DISABLE_CLASS } from "../../../../utils/overlays";
 describe('popover: htmlAttributes inheritance', () => {
     it('should correctly inherit attributes on host', async () => {
         const page = await newSpecPage({
@@ -15,21 +14,3 @@ describe('popover: htmlAttributes inheritance', () => {
         await expect(popover.getAttribute('data-testid')).toBe('basic-popover');
     });
 });
-describe('popover: focus trap', () => {
-    it('should set the focus trap class when disabled', async () => {
-        const page = await newSpecPage({
-            components: [Popover],
-            template: () => h("ion-popover", { focusTrap: false, overlayIndex: 1 }),
-        });
-        const popover = page.body.querySelector('ion-popover');
-        expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
-    });
-    it('should not set the focus trap class by default', async () => {
-        const page = await newSpecPage({
-            components: [Popover],
-            template: () => h("ion-popover", { overlayIndex: 1 }),
-        });
-        const popover = page.body.querySelector('ion-popover');
-        expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(false);
-    });
-});

package/dist/collection/components/progress-bar/progress-bar.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

package/dist/collection/components/progress-bar/progress-bar.js

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @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.
  *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
@@ -25,11 +26,11 @@ export class ProgressBar {
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '529ac45563dcdd96559235171f5c9f3fef7ffb3b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+                [theme]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
@@ -41,13 +42,15 @@ export class ProgressBar {
     static get originalStyleUrls() {
         return {
             "ios": ["progress-bar.ios.scss"],
-            "md": ["progress-bar.md.scss"]
+            "md": ["progress-bar.md.scss"],
+            "ionic": ["progress-bar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["progress-bar.ios.css"],
-            "md": ["progress-bar.md.css"]
+            "md": ["progress-bar.md.css"],
+            "ionic": ["progress-bar.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/progress-bar/progress-bar.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

package/dist/collection/components/radio/radio.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
@@ -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/radio.js

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { isOptionSelected } from "../../utils/forms/index";
 import { addEventListener, removeEventListener } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @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 - The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.
  *
@@ -105,10 +106,10 @@ export class Radio {
     }
     render() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'bc70e174a1ca756f073ca0a95d6a12597a6eb896', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '6ef7b0ec90814c02828ffa5c5de0a2fda71443fc', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
                 'radio-disabled': disabled,
@@ -118,23 +119,25 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '04cab7d54338c7bf9b8986e0a7bc402d5c1713af', class: "radio-wrapper" }, h("div", { key: '9cd2e6ff53313c175a4a9804739f3e468d123c0b', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1072d3d73ea3dbe6abb6c218c1d8ec6272e5408d', class: "radio-wrapper" }, h("div", { key: '215dbe1b57c9557c339552b333e6e132bed96f77', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'f1c3120b4df240e690bf9b0a7d9e893c4a546476' })), h("div", { key: 'ab89f05be8b93adb22851856d3e570065d594dae', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: 'e643d0d5184ed178e1bff761bcda16aef8d7d06c' })), h("div", { key: '0297a100b8ee684eef1ca9b60dd1438c2ead86a3', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["radio.ios.scss"],
-            "md": ["radio.md.scss"]
+            "md": ["radio.md.scss"],
+            "ionic": ["radio.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio.ios.css"],
-            "md": ["radio.md.css"]
+            "md": ["radio.md.css"],
+            "ionic": ["radio.md.css"]
         };
     }
     static get properties() {

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