@ionic/core 8.2.2-dev.11717796763.1aa87d5c → 8.2.2-nightly.20240607

package/dist/collection/components/fab-button/fab-button.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
@@ -96,7 +90,7 @@
   --color-focused: var(--color);
   --color-hover: var(--color);
   --background-hover: var(--ion-color-primary-contrast, #fff);
-  --background-hover-opacity: 0.08;
+  --background-hover-opacity: .08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
   --border-radius: 50%;
@@ -130,18 +124,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   display: block;
   position: relative;
   width: 100%;
@@ -169,8 +163,8 @@
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -179,8 +173,8 @@
 }
 
 .button-inner {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   display: flex;
   position: absolute;
@@ -247,8 +241,8 @@
   margin-inline-end: auto;
   margin-top: 0;
   margin-bottom: 0;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   position: absolute;
   height: 100%;
@@ -284,12 +278,6 @@ ion-ripple-effect {
   color: var(--ion-color-contrast);
 }
 
-/**
- * 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
@@ -351,8 +339,8 @@ ion-ripple-effect {
   --background-focused: currentColor;
   --background-hover: currentColor;
   --background-activated-opacity: 0;
-  --background-focused-opacity: 0.24;
-  --background-hover-opacity: 0.08;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --color: var(--ion-color-primary-contrast, #fff);
   --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
   --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;

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

@@ -2,11 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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 FabList {
     constructor() {
         this.activated = false;
@@ -21,12 +17,12 @@ export class FabList {
         });
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'c098c21387fbe5ca7d551d5b280b2afdcc743563', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'fa1d195b9950654ba0e984bf61d981c977d05275', class: {
+                [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '3158fce29535f07663d2ad8973d09635d2ee5e18' })));
+            } }, h("slot", { key: '2ec738c66c05112e1e2521155d6adfc36d2fd1db' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.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
@@ -71,12 +65,6 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
-/**
- * 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
@@ -138,15 +126,15 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
 
 @supports (backdrop-filter: blur(0)) {
   .footer-background {
-    right: 0;
     left: 0;
+    right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .footer-translucent-ios ion-toolbar {
-    --opacity: 0.8;
+    --opacity: .8;
   }
 }
 .footer-ios.ion-no-border ion-toolbar:first-of-type {

package/dist/collection/components/footer/footer.js

@@ -4,18 +4,17 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.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 Footer {
     constructor() {
         this.keyboardCtrl = null;
         this.checkCollapsibleFooter = () => {
-            const theme = getIonTheme(this);
-            if (theme !== 'ios') {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
                 return;
             }
             const { collapse } = this;
@@ -78,32 +77,30 @@ export class Footer {
     }
     render() {
         const { translucent, collapse } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'd7358eba783967c0a5deaff543f9ea172baf7ec3', role: "contentinfo", class: {
-                [theme]: true,
+        return (h(Host, { key: '5da19dc38ba73e1ddfd1bef3ebd485105d77c751', role: "contentinfo", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`footer-${theme}`]: true,
+                [`footer-${mode}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${theme}`]: translucent,
+                [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: '1af37a980ee38cbe8b774af553caed43420ffe20', class: "footer-background" }), h("slot", { key: '2cd84214b1611b814b616eda67df8792f7b00447' })));
+            } }, mode === 'ios' && translucent && h("div", { key: 'fafad08090a33d8c4e8a5b63d61929dcb89aab47', class: "footer-background" }), h("slot", { key: 'e0a443d346afa55e4317c0bc1263fdbe3c619559' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
         return {
             "ios": ["footer.ios.scss"],
-            "md": ["footer.md.scss"],
-            "ionic": ["footer.md.scss"]
+            "md": ["footer.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["footer.ios.css"],
-            "md": ["footer.md.css"],
-            "ionic": ["footer.md.css"]
+            "md": ["footer.md.css"]
         };
     }
     static get properties() {
@@ -120,7 +117,7 @@ export class Footer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
+                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
                 },
                 "attribute": "collapse",
                 "reflect": false
@@ -137,7 +134,7 @@ export class Footer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the footer 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).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
+                    "text": "If `true`, the footer 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).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/footer/footer.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
@@ -71,12 +65,6 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
-/**
- * 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/grid/grid.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,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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/grid/grid.js

@@ -2,21 +2,17 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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 Grid {
     constructor() {
         this.fixed = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'af14461caa863f0731d25021ac70bb760536cb42', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '930ce78b02f8360fbca08a35d364d2c09128c6c8', class: {
+                [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '1abc7d0df9b7e0931c01d4ac35f9d256cf68dae4' })));
+            } }, h("slot", { key: 'c47bf7ef2197f5ebc42d3e2c55044276fb0db393' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.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
@@ -71,12 +65,6 @@ ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
-/**
- * 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
@@ -138,15 +126,15 @@ ion-header ion-toolbar:first-of-type {
 
 @supports (backdrop-filter: blur(0)) {
   .header-background {
-    right: 0;
     left: 0;
+    right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .header-translucent-ios ion-toolbar {
-    --opacity: 0.8;
+    --opacity: .8;
   }
   /**
    * Disable the saturation otherwise it distorts the content

package/dist/collection/components/header/header.js

@@ -5,11 +5,10 @@ import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.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 Header {
     constructor() {
@@ -41,8 +40,8 @@ export class Header {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const theme = getIonTheme(this);
-        if (theme !== 'ios') {
+        const mode = getIonMode(this);
+        if (mode !== 'ios') {
             return;
         }
         const { collapse } = this;
@@ -137,32 +136,30 @@ export class Header {
     }
     render() {
         const { translucent, inheritedAttributes } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: '892c1b08a59eee33391d7f7ee9bb2bd5427b0c76', role: roleType, class: {
-                [theme]: true,
+        return (h(Host, Object.assign({ key: 'c687314ef290793a9d633ad20cfc5eeb47621e31', role: roleType, class: {
+                [mode]: true,
                 // Used internally for styling
-                [`header-${theme}`]: true,
+                [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${theme}`]: this.translucent,
-            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: '0e9b8c7a9d9785d8a29fbd03b9c6c2e255b9689c', class: "header-background" }), h("slot", { key: 'c56a0cb261c7943dfc5502e60972382f5d811984' })));
+                [`header-translucent-${mode}`]: this.translucent,
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: 'b429996046082405a91e7c23f95516db0b736f12', class: "header-background" }), h("slot", { key: 'e17a8965f8d3a33c1bfcb056c153d8242e5229fa' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
         return {
             "ios": ["header.ios.scss"],
-            "md": ["header.md.scss"],
-            "ionic": ["header.md.scss"]
+            "md": ["header.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["header.ios.css"],
-            "md": ["header.md.css"],
-            "ionic": ["header.md.css"]
+            "md": ["header.md.css"]
         };
     }
     static get properties() {
@@ -179,7 +176,7 @@ export class Header {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies when the theme is `\"ios\"`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
+                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
                 "attribute": "collapse",
                 "reflect": false
@@ -196,7 +193,7 @@ export class Header {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the header 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).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
+                    "text": "If `true`, the header 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).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/header/header.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
@@ -71,12 +65,6 @@ ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
-/**
- * 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/img/img.js

@@ -3,11 +3,8 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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 image - The inner `img` element.
  */
 export class Img {
@@ -74,10 +71,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '50b0d4416440b0f33788b176392257d192a804dd', class: {
-                [theme]: true,
-            } }, h("img", { key: '5658e3d8b7333a49cd864ac69e6ae2b0036c134d', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '14d24d65ec8e5522192ca58035264971b1ab883b', class: getIonMode(this) }, h("img", { key: '345ba155a5fdce5e66c397a599b7333d37d9cb1d', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -3,11 +3,7 @@
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
-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 InfiniteScroll {
     constructor() {
         this.thrPx = 0;
@@ -169,10 +165,10 @@ export class InfiniteScroll {
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '510d34ac956ef88ebe5ec6ea658391f18ae77113', class: {
-                [theme]: true,
+        return (h(Host, { key: '1444429a86950c449953cbf578436cc8cabf40ec', class: {
+                [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.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
@@ -90,12 +84,6 @@ ion-infinite-scroll-content {
   display: block;
 }
 
-/**
- * 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/infinite-scroll-content/infinite-scroll-content.js

@@ -5,11 +5,7 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScrollContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
@@ -18,8 +14,8 @@ export class InfiniteScrollContent {
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const theme = getIonTheme(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
+            const mode = getIonMode(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -30,26 +26,24 @@ export class InfiniteScrollContent {
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '5e07828d6779d069bcb8ad2fb30abd794dda6382', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '060278bf9cb0321e182352f9613be4ebbb028259', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '3b4860d1c460b48df8c088b1d802470b1aece653', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '02cc45daab301bdec1fa8cadba665446b00efc65', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '6a057d0ec87957c72df7f4566b0b5ce8114cced3', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${mode}`]: true,
+            } }, h("div", { key: '07d3cada920145f979ad315bd187fb878e0c3da3', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '6254f175d7543d09f3dd47cd0589a2809182cd8c', class: "infinite-loading-spinner" }, h("ion-spinner", { key: 'a6a816d1c65b60b786333b209b63492aa716a283', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.scss"],
-            "md": ["infinite-scroll-content.md.scss"],
-            "ionic": ["infinite-scroll-content.md.scss"]
+            "md": ["infinite-scroll-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.css"],
-            "md": ["infinite-scroll-content.md.css"],
-            "ionic": ["infinite-scroll-content.md.css"]
+            "md": ["infinite-scroll-content.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.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
@@ -90,12 +84,6 @@ ion-infinite-scroll-content {
   display: block;
 }
 
-/**
- * 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