@ionic/core 8.4.2-dev.11736265112.120bf7af → 8.4.2-dev.11736507189.18234064

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

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -67,14 +34,11 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
-  --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;
   position: relative;
   flex: 3;
   align-items: center;
-  font-family: var(--ion-font-family, inherit);
   user-select: none;
-  z-index: 2;
 }
 
 :host(.range-disabled) {
@@ -85,10 +49,6 @@
   flex: initial;
 }
 
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
 .range-slider {
   position: relative;
   flex: 1;
@@ -105,8 +65,8 @@
 
 .range-pin {
   position: absolute;
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+  background: current-color(base);
+  color: current-color(contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -255,7 +215,6 @@
    * only the label would show and users
    * would not be able to see the range.
    */
-  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -284,6 +243,121 @@
   flex-direction: row;
 }
 
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  --knob-handle-size: calc(var(--knob-size) * 2);
+  font-family: var(--ion-font-family, inherit);
+  z-index: 2;
+}
+
+::slotted(ion-icon[slot]) {
+  font-size: 24px;
+}
+
+::slotted([slot=label]) {
+  max-width: 200px;
+}
+
 :host(.range-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -298,20 +372,12 @@
   margin-bottom: 0;
 }
 
-/**
- * Label is on the right of the range in LTR and
- * on the left in RTL.
- */
-:host(.range-label-placement-end) .range-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * The margin between the label and
- * the range should be on the start
- * when the label sits at the end.
- */
 :host(.range-label-placement-end) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the start
+   * when the label sits at the end.
+   */
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 0;
@@ -334,27 +400,7 @@
   margin-bottom: 0;
 }
 
-/**
- * Label is on the left of the range in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.range-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the range.
- */
-:host(.range-label-placement-stacked) .range-wrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
 :host(.range-label-placement-stacked) .label-text-wrapper {
-  transform-origin: left top;
   transform: scale(0.75);
   /**
   * The margin between the label and
@@ -370,15 +416,6 @@
    */
   max-width: calc(100% / 0.75);
 }
-:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
   margin-top: 10px;
@@ -389,6 +426,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() {
@@ -620,11 +621,11 @@ export class Refresher {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '9d4ac22988aec2c6af0b0c90934c52f62f0e4ce3', slot: "fixed", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7700538cb53bb38d58c1516dfab8859394bd3f99', 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 */,
@@ -638,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() {
@@ -663,8 +666,6 @@ export class Refresher {
                     "tags": [],
                     "text": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "pull-min",
                 "reflect": false,
                 "defaultValue": "60"
@@ -683,8 +684,6 @@ export class Refresher {
                     "tags": [],
                     "text": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "pull-max",
                 "reflect": false,
                 "defaultValue": "this.pullMin + 60"
@@ -703,8 +702,6 @@ export class Refresher {
                     "tags": [],
                     "text": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "close-duration",
                 "reflect": false,
                 "defaultValue": "'280ms'"
@@ -723,8 +720,6 @@ export class Refresher {
                     "tags": [],
                     "text": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "snapback-duration",
                 "reflect": false,
                 "defaultValue": "'280ms'"
@@ -743,8 +738,6 @@ export class Refresher {
                     "tags": [],
                     "text": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "pull-factor",
                 "reflect": false,
                 "defaultValue": "1"
@@ -763,8 +756,6 @@ export class Refresher {
                     "tags": [],
                     "text": "If `true`, the refresher will be hidden."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"

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-content/refresher-content.js

@@ -1,14 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import caretLeftFill from "@phosphor-icons/core/assets/fill/caret-left-fill.svg";
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { 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 +23,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 +31,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,10 +55,27 @@ export class RefresherContent {
     render() {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, h("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, h("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, h("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const theme = getIonTheme(this);
+        const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
+        return (h(Host, { key: 'fcba01cd2dfdfe27d38eb0be6d191d84ca6eb432', class: {
+                [theme]: true,
+            } }, h("div", { key: '2c1516367211724a3fa064972dfc924b22abadce', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'b3f649bed22f72942373ff5273794884d1d8b3a3', class: "refresher-pulling-icon" }, h("div", { key: 'e8f9d3001889f0503e2c40ed537c0b17d4e8693c', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'e3c55d5778c6fb443872a4a6fb9b60f1979c508f', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: '9d8c48425b7f6162aa0fddb42802a3cd4c620629', class: "arrow-container" }, h("ion-icon", { key: '85c9cffe16ebeff9200ac46d93aead84642b58d7', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '70bbcfae3c0f323823583f9dfc3a93d5468d0945', class: "refresher-pulling-icon" }, h("ion-icon", { key: '310ad9d945fb45f9c9110b51989386a673be54d5', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'bf4ea1d4cc0cb28a01229ccf88596f6010192c7a', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '851ae5766b4fae0a651033431b8be2e1952a13a8', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '92c47f442363e7068d68730a2b6ff0c30107fb21', 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": {
@@ -77,8 +98,6 @@ export class RefresherContent {
                     "tags": [],
                     "text": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "pulling-icon",
                 "reflect": false
             },
@@ -102,8 +121,6 @@ export class RefresherContent {
                     "tags": [],
                     "text": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "pulling-text",
                 "reflect": false
             },
@@ -127,8 +144,6 @@ export class RefresherContent {
                     "tags": [],
                     "text": "An animated SVG spinner that shows when refreshing begins"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "refreshing-spinner",
                 "reflect": false
             },
@@ -152,8 +167,6 @@ export class RefresherContent {
                     "tags": [],
                     "text": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "refreshing-text",
                 "reflect": false
             }

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

@@ -1,10 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-import { 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 +22,45 @@ export class Reorder {
             ev.stopImmediatePropagation();
         }
     }
+    /**
+     * Get the icon to use for the handle icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get reorderHandleIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: reorderThreeOutline,
+            ionic: listRegular,
+            md: reorderTwoSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured reorder handle icon or the default icon
+        return config.get('reorderHandleIcon', defaultIcon);
+    }
     render() {
-        const mode = getIonMode(this);
-        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, h("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, h("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const { reorderHandleIcon } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '646df8963d90acf283b649a67bbb12c9724c7a55', class: {
+                [theme]: true,
+            } }, h("slot", { key: 'ca0f794339f36dc54450db445cc26d166c881a2a' }, h("ion-icon", { key: '9c9180e9a3542e4d7546594ec8d84b07cf690f6e', 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