@ionic/core 8.2.2-nightly.20240612 → 8.2.3-dev.11718879673.1a3f486b

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
@@ -92,18 +98,18 @@
 input {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
-  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
+  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -306,6 +312,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
@@ -361,6 +373,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: '7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return (h(Host, { key: 'a66c74e56338ae9d6ec9f9e5a9f1f3d1540efc9e', 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: '7ad5ca892fd46c64ce5583e91e6812410a869921', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '9a0c5461753d9097041fd66cbc5389a7dc6874a6', 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: 'eb8d46a9572341b4cc3c91d8a5de0667bd166ca4', class: "range-wrapper", id: "range-label" }, h("div", { key: '21acd6ff6eba17bf6923bf723fea055b95fd29ca', class: {
+            }) }, h("label", { key: '22f37fcaa262137482b5a737ec64bb97cd511d51', class: "range-wrapper", id: "range-label" }, h("div", { key: 'd3dd2c69806b58ae24ed7b720bd5cf52be714126', 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: '7644c86a6ad3edf2c27f02dd2a14795b3720ea0d', class: "native-wrapper" }, h("slot", { key: '1bbeccee57addc126b36de395e28ba655248695b', name: "start" }), this.renderRangeSlider(), h("slot", { key: '2963dd84e4116fc3956c304eb53deefd0d1291df', name: "end" })))));
+            }, 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" })))));
     }
     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
@@ -143,10 +149,17 @@ ion-refresher-content .arrow-container {
   transform: scale(0);
 }
 
-.refresher-native .refresher-pulling-text, .refresher-native .refresher-refreshing-text {
+.refresher-native .refresher-pulling-text,
+.refresher-native .refresher-refreshing-text {
   display: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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() {
@@ -19,6 +20,7 @@ export class Refresher {
         this.pointerDown = false;
         this.needsCompletion = false;
         this.didRefresh = false;
+        this.contentFullscreen = false;
         this.lastVelocityY = 0;
         this.animations = [];
         this.nativeRefresher = false;
@@ -313,6 +315,12 @@ export class Refresher {
              * Query the background content element from the host ion-content element directly.
              */
             this.backgroundContentEl = await contentEl.getBackgroundElement();
+            /**
+             * Check if the content element is fullscreen to apply the correct styles
+             * when the refresher is refreshing. Otherwise, the refresher will be
+             * hidden because it is positioned behind the background content element.
+             */
+            this.contentFullscreen = contentEl.fullscreen;
             if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
                 this.setupNativeRefresher(contentEl);
             }
@@ -406,6 +414,14 @@ export class Refresher {
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
         this.memoizeOverflowStyle();
+        /**
+         * If the content is fullscreen, then we need to
+         * set the offset-top style on the background content
+         * element to ensure that the refresher is shown.
+         */
+        if (this.contentFullscreen && this.backgroundContentEl) {
+            this.backgroundContentEl.style.setProperty('--offset-top', '0px');
+        }
     }
     onMove(detail) {
         if (!this.scrollEl) {
@@ -533,6 +549,7 @@ export class Refresher {
     close(state, delay) {
         // create fallback timer incase something goes wrong with transitionEnd event
         setTimeout(() => {
+            var _a;
             this.state = 1 /* RefresherState.Inactive */;
             this.progress = 0;
             this.didStart = false;
@@ -541,6 +558,17 @@ export class Refresher {
              * user can scroll again.
              */
             this.setCss(0, '0ms', false, '', true);
+            /**
+             * Reset the offset-top style on the background content
+             * when the refresher is no longer refreshing and the
+             * content is fullscreen.
+             *
+             * This ensures that the behavior of background content
+             * does not change when refreshing is complete.
+             */
+            if (this.contentFullscreen && this.backgroundContentEl) {
+                (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
+            }
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -593,11 +621,11 @@ export class Refresher {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'ecc8cddc285a230e4a95fae1e275a1f8c350e104', 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 +639,15 @@ export class Refresher {
     static get originalStyleUrls() {
         return {
             "ios": ["refresher.ios.scss"],
-            "md": ["refresher.md.scss"]
+            "md": ["refresher.md.scss"],
+            "ionic": ["refresher.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["refresher.ios.css"],
-            "md": ["refresher.md.css"]
+            "md": ["refresher.md.css"],
+            "ionic": ["refresher.md.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -143,10 +149,17 @@ ion-refresher-content .arrow-container {
   transform: scale(0);
 }
 
-.refresher-native .refresher-pulling-text, .refresher-native .refresher-refreshing-text {
+.refresher-native .refresher-pulling-text,
+.refresher-native .refresher-refreshing-text {
   display: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -255,8 +268,8 @@ ion-refresher.refresher-native .arrow-container ion-icon {
   margin-inline-end: auto;
   margin-top: 0;
   margin-bottom: 0;
-  left: 0;
   right: 0;
+  left: 0;
   bottom: -4px;
   position: absolute;
   color: var(--ion-color-primary, #0054e9);

package/dist/collection/components/refresher/test/fullscreen/refresher.e2e.js

@@ -0,0 +1,77 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+import { pullToRefresh } from "../test.utils";
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+    test.describe(title('refresher: fullscreen content'), () => {
+        test.beforeEach(async ({ page }) => {
+            /**
+             * Do not call `complete()` from `ion-refresher` in this test.
+             * This will allow the refresher to "pause" while refreshing.
+             * By pausing, the test can verify that the refresher is
+             * completely visible when the content is fullscreen.
+             */
+            await page.setContent(`
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Pull To Refresh</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content fullscreen>
+            <ion-refresher id="refresher" slot="fixed">
+              <ion-refresher-content
+                pulling-icon="arrow-down-outline"
+                pulling-text="Pull to refresh..."
+                refreshing-text="Refreshing..."
+                refreshing-spinner="circles"
+              >
+              </ion-refresher-content>
+            </ion-refresher>
+
+            <p>Pull this content down to trigger the refresh.</p>
+          </ion-content>
+
+          <script>
+            const refresher = document.getElementById('refresher');
+
+            refresher.addEventListener('ionRefresh', () => {
+              setTimeout(() => {
+                // Custom event consumed by e2e tests
+                window.dispatchEvent(new CustomEvent('ionRefreshComplete'));
+              }, 500);
+            });
+          </script>
+        `, config);
+        });
+        // Bug only occurs with the legacy refresher.
+        test.describe('legacy refresher', () => {
+            test('should display when content is fullscreen', async ({ page, browserName }) => {
+                test.info().annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/18714',
+                });
+                const refresher = page.locator('ion-refresher');
+                await pullToRefresh(page);
+                if (browserName === 'firefox') {
+                    /**
+                     * The drag is highlighting the text in Firefox for
+                     * some reason.
+                     *
+                     * Clicking the mouse will remove the highlight and
+                     * be more consistent with other browsers. This
+                     * does not happen in Firefox, just when running
+                     * in Playwright.
+                     */
+                    await page.mouse.click(0, 0);
+                }
+                await expect(refresher).toHaveScreenshot(screenshot('refresher-legacy-content-fullscreen'));
+            });
+        });
+    });
+});

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: '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())));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3ca3fccc7a8cb29a6dfc570f9052ceca61799c93', class: {
+                [theme]: true,
+            } }, h("div", { key: 'ce5c20051eff59e5c4f8b6578d953c2d7d3b7f87', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'c6422439ce4acc179e05e905ce5efe5a1a1d80b7', class: "refresher-pulling-icon" }, h("div", { key: '5bac7c5b4a16f88719f459616a57b2c64ddd0a29', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'f832e4b8e19c8b8af79f6ecf8cce7bd5c6e41b6f', name: this.pullingIcon, paused: true }), theme === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'c447410bd305bab0e4e323017f5763db35d58491', class: "arrow-container" }, h("ion-icon", { key: '648979a648454e3f73e975fd23b375eff4f4ca67', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'a498c2cca227fe4f11db66ac8ce1ebf8f9155069', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'abae52dc96698599668b5382b311339a861c7752', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'eb9451dc3f0fef6396698fc21014f33428781ce0', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '0d00725aa7dd4ce077c7ca47fe6af098d7acfeb2', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '23eb6075336fb7831fca53eecdabc8f08ff3138c', 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,12 @@
  */
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonTheme } from "../../global/ionic-global";
 /**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
@@ -17,23 +21,39 @@ 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.
+     *
+     * @returns {string} The icon to use for the handle icon.
+     */
+    get reorderHandleIcon() {
+        const theme = getIonTheme(this);
+        const reorderIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+        return config.get('reorderHandleIcon', reorderIcon);
+    }
     render() {
-        const mode = getIonMode(this);
-        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, h("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, h("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const { reorderHandleIcon } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3b284ecb6b8d3de7fb16fcf1052d1303c690d1c5', class: {
+                [theme]: true,
+            } }, h("slot", { key: '5e00a258cc8170fdaeb8f8587a06b9c93a1128e2' }, h("ion-icon", { key: '3e4f399d3913ac8b7b61385f668c3f321544433f', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["reorder.ios.scss"],
-            "md": ["reorder.md.scss"]
+            "md": ["reorder.md.scss"],
+            "ionic": ["reorder.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["reorder.ios.css"],
-            "md": ["reorder.md.css"]
+            "md": ["reorder.md.css"],
+            "ionic": ["reorder.md.css"]
         };
     }
     static get elementRef() { return "el"; }

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

@@ -16,6 +16,12 @@
   font-size: dynamic-font(16px);
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/reorder-group/reorder-group.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/reorder-group/reorder-group.js

@@ -5,7 +5,11 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, getScrollElement } from "../../utils/content/index";
 import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class ReorderGroup {
     constructor() {
         this.lastToIndex = -1;
@@ -237,9 +241,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '757f3947c85e794a8a8829fec7a2f4edcd1610cf', 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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;