@ionic/core 8.3.1-dev.11725636643.11841b59 → 8.3.1-dev.11726086040.1beb2c26

package/dist/collection/components/radio/radio.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
@@ -59,28 +53,6 @@
  *   }
  * }
  */
-/**
- * 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 {
   /**
    * @prop --color: Color of the radio
@@ -95,28 +67,10 @@
   min-height: inherit;
   cursor: pointer;
   user-select: none;
+  z-index: 2;
   box-sizing: border-box;
 }
 
-input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  opacity: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
 :host(.radio-disabled) {
   pointer-events: none;
 }
@@ -135,6 +89,25 @@ input {
   box-sizing: border-box;
 }
 
+input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  clip: rect(0 0 0 0);
+  opacity: 0;
+  overflow: hidden;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
 :host(:focus) {
   outline: none;
 }
@@ -168,6 +141,26 @@ input {
   cursor: inherit;
 }
 
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.in-item) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -218,81 +211,6 @@ input {
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the radio in LTR and
- * on the left in RTL.
- */
-:host(.radio-label-placement-end) .radio-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the radio in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.radio-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-}
-
-/**
- * Label is on top of the radio.
- */
-:host(.radio-label-placement-stacked) .radio-wrapper {
-  flex-direction: column;
-}
-
-:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
-  transform-origin: center top;
-}
-:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
-}
-
-:host {
-  z-index: 2;
-}
-
-.label-text-wrapper {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-:host(.in-item) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
-}
-
-:host(.in-item.radio-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
-}
-
 :host(.radio-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -305,6 +223,14 @@ input {
   margin-inline-end: 16px;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+:host(.radio-label-placement-end) .radio-wrapper {
+  flex-direction: row-reverse;
+}
+
 /**
  * The margin between the label and
  * the radio should be on the start
@@ -329,6 +255,23 @@ input {
   margin-inline-end: 16px;
 }
 
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.radio-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+}
+
+/**
+ * Label is on top of the radio.
+ */
+:host(.radio-label-placement-stacked) .radio-wrapper {
+  flex-direction: column;
+}
+
 :host(.radio-label-placement-stacked) .label-text-wrapper {
   transform: scale(0.75);
   /**
@@ -346,12 +289,32 @@ input {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
+  transform-origin: center top;
+}
+:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -407,12 +370,6 @@ 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,11 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { renderHiddenInput } from "../../utils/helpers";
-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 RadioGroup {
     constructor() {
         this.inputId = `ion-rg-${radioGroupIds++}`;
@@ -155,11 +151,9 @@ export class RadioGroup {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: 'a66c74e56338ae9d6ec9f9e5a9f1f3d1540efc9e', class: {
-                [theme]: true,
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick }));
+        return h(Host, { key: '7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {

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

@@ -7,12 +7,11 @@ 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 { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
 // 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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @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.
@@ -179,6 +178,7 @@ export class Range {
         this.didLoad = true;
     }
     connectedCallback() {
+        var _a;
         this.updateRatio();
         this.debounceChanged();
         this.disabledChanged();
@@ -192,7 +192,8 @@ export class Range {
         if (this.didLoad) {
             this.setupGesture();
         }
-        this.contentEl = findClosestIonContent(this.el);
+        const ionContent = findClosestIonContent(this.el);
+        this.contentEl = (_a = ionContent === null || ionContent === void 0 ? void 0 : ionContent.querySelector('.ion-content-scroll-host')) !== null && _a !== void 0 ? _a : ionContent;
     }
     disconnectedCallback() {
         if (this.gesture) {
@@ -261,7 +262,7 @@ export class Range {
          *
          * This only needs to be done once.
          */
-        if (contentEl && this.initialContentScrollY === undefined) {
+        if (contentEl && this.pressedKnob === undefined) {
             this.initialContentScrollY = disableContentScrollY(contentEl);
         }
         /**
@@ -308,7 +309,7 @@ export class Range {
          *
          * The user can now scroll on the view in the next gesture event.
          */
-        if (contentEl && initialContentScrollY !== undefined) {
+        if (contentEl && this.pressedKnob !== undefined) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
         // update the active knob's position
@@ -561,10 +562,10 @@ export class Range {
          */
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '9a0c5461753d9097041fd66cbc5389a7dc6874a6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '877c9f15e62fadb184f9da82dc19898227521e07', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
@@ -572,25 +573,23 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '22f37fcaa262137482b5a737ec64bb97cd511d51', class: "range-wrapper", id: "range-label" }, h("div", { key: 'd3dd2c69806b58ae24ed7b720bd5cf52be714126', class: {
+            }) }, h("label", { key: '2ae9088349a65e09b0e33c53442190ef563b2345', class: "range-wrapper", id: "range-label" }, h("div", { key: 'c3d0ca96ceb1e57fbd383e9c7e4da14d931771b8', 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: '4bc7b7d7518417ec9c4d10697d8683c8711a7198', class: "native-wrapper" }, h("slot", { key: '21df25969b38b8e7d7fd9b18ca0272e55fe452f8', name: "start" }), this.renderRangeSlider(), h("slot", { key: '8a7175cf0839e25bef65d990a12113fb0e4d2621', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '25d20fd5e015931f60a8ecc5374a1c84d167af9c', class: "native-wrapper" }, h("slot", { key: 'ae9f9fd92eed35b81ca97a81caa56332d8b6b2b2', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74b7dede566a959c9b05a6de68426c7e339d18c8', 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"],
-            "ionic": ["range.md.scss"]
+            "md": ["range.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
-            "md": ["range.md.css"],
-            "ionic": ["range.md.css"]
+            "md": ["range.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/range/range.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
@@ -395,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

@@ -6,11 +6,10 @@ 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, 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() {
@@ -621,11 +620,11 @@ export class Refresher {
         }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'ecc8cddc285a230e4a95fae1e275a1f8c350e104', slot: "fixed", class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '3270f181a5141e7d886ec554a3e892974446b90e', 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 */,
@@ -639,15 +638,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,19 +1,14 @@
 /*!
  * (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);
@@ -23,7 +18,6 @@ export class RefresherContent {
         this.refreshingText = undefined;
     }
     componentWillLoad() {
-        const theme = getIonTheme(this);
         if (this.pullingIcon === undefined) {
             /**
              * The native iOS refresher uses a spinner instead of
@@ -31,11 +25,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() {
@@ -55,27 +51,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: '8dcfdbc6969e4370e070e1f3c5fc1785c63f620b', class: {
-                [theme]: true,
-            } }, h("div", { key: '2322cc218e3b78c9b85a3d5596b2e67bf82a7de5', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '8cbb0dd8862e474b3d0255c1a727cc9a6ed437f2', class: "refresher-pulling-icon" }, h("div", { key: 'a510b37135e9ba3045d66e68b8b5f374034d48a4', class: "spinner-arrow-container" }, h("ion-spinner", { key: '58f33aaa8b659e0241db0ce464a7bcd180820e8e', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: '8e93bed47f0961b68cc5c3010508d7d70b6e81da', class: "arrow-container" }, h("ion-icon", { key: 'd8c0aea713104112de808b15b8a1d90805623a87', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'ebc1847517406c2f4b09d0793e45f786feb9b062', class: "refresher-pulling-icon" }, h("ion-icon", { key: '74f2778b23a53ceece7a77276aaa74c75a01a15f', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '722264dcb2ade5489ef1939024506fa16a8f7f6a', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '83f066cfb0586534ad43c2bba715624be131ba8f', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '0c8093761225dc4b1d99696c14f9f2a62ae987ad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const mode = getIonMode(this);
+        return (h(Host, { key: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, h("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, h("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, h("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', 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