@ionic/core 8.0.0-dev.11711035263.183d2423 → 8.0.0-dev.11711476529.17eae6ec

package/dist/collection/components/item/item.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
@@ -406,6 +412,12 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
+/**
+ * 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/item/item.js

@@ -5,9 +5,10 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
@@ -138,7 +139,7 @@ export class Item {
     render() {
         const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
         const childStyles = {};
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const clickable = this.isClickable();
         const canActivate = this.canActivate();
         const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
@@ -191,7 +192,7 @@ export class Item {
                 },
             };
         }
-        const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
+        const showDetail = detail !== undefined ? detail : theme === 'ios' && clickable;
         this.itemStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
@@ -202,9 +203,9 @@ export class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '6fe6bae954259703482f175312a051ff1b315a95', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '9380a2f815681dfdca31ffbcbb00005bbb58cee0', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
-                [mode]: true,
+                [theme]: true,
                 'item-lines-default': lines === undefined,
                 [`item-lines-${lines}`]: lines !== undefined,
                 'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
@@ -214,20 +215,22 @@ export class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'fcfcffacb7d4e52f9458724332efa93d140cf637' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '2c1be89990d1b4264f056f3afca2657dc25e868f', name: "start" }), h("div", { key: 'a12010f2f251c29870806050357e247f297f752d', class: "item-inner" }, h("div", { key: 'd0dc5901d634d3b7d8c9b4339ed02585b5b88828', class: "input-wrapper" }, h("slot", { key: '5589d491f6058858310c72971de50ddf441379b1' })), h("slot", { key: '7b2d2182336abef508d00882759df1a99a1cf93e', name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", null))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'f6a695ec9c1f039cf5ee49df73bd1c764e50f828' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'c5a5736e50de6a0145b2332f9fc493d525c01d51', name: "start" }), h("div", { key: '6ef56e51d931461ad4dd7fa34e601cf784468921', class: "item-inner" }, h("div", { key: '27e38090e0ea63149907619e04612a75c423bffa', class: "input-wrapper" }, h("slot", { key: '41291fa8f7e40b9d5b02a67abf605834ab1c8222' })), h("slot", { key: '4178d395f8caf6b2d7af5fc9c6cba3870fa48321', name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && theme === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["item.ios.scss"],
-            "md": ["item.md.scss"]
+            "md": ["item.md.scss"],
+            "ionic": ["item.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item.ios.css"],
-            "md": ["item.md.css"]
+            "md": ["item.md.css"],
+            "ionic": ["item.md.css"]
         };
     }
     static get properties() {
@@ -285,7 +288,7 @@ export class Item {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present."
+                    "text": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `theme`\nis `\"ios\"` and an `href` or `button` property is present."
                 },
                 "attribute": "detail",
                 "reflect": false

package/dist/collection/components/item/item.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
@@ -406,6 +412,12 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
+/**
+ * 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
@@ -461,6 +473,12 @@ ion-ripple-effect {
  *   }
  * }
  */
+/**
+ * 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
@@ -516,6 +534,12 @@ ion-ripple-effect {
  *   }
  * }
  */
+/**
+ * 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/item-divider/item-divider.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
@@ -169,6 +175,12 @@
   overflow: hidden;
 }
 
+/**
+ * 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
@@ -224,6 +236,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/item-divider/item-divider.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
@@ -17,25 +18,27 @@ export class ItemDivider {
         this.sticky = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '18d1b78568247bfbf0b0274971b752ace7531f58', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'ee17a51b7daefd6be5d42e5b64685c4979d29ec0', class: createColorClasses(this.color, {
+                [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: 'cbf5fe1a9f4233a303d2366d1fc032d7c445f5c7', name: "start" }), h("div", { key: 'ca2608689325a350b23eb026053dd588ea3004e9', class: "item-divider-inner" }, h("div", { key: '00af1d58d5fc7995754a5266534cdf989a3294eb', class: "item-divider-wrapper" }, h("slot", { key: 'bfa2547fe8de49dcfbfccaeb46736182e514ffbc' })), h("slot", { key: '650dd1153d211eb992e69ff7e98c381cf0555e25', name: "end" }))));
+            }) }, h("slot", { key: '8366956b2cf3ca557a599a15b18bccd7261f3a64', name: "start" }), h("div", { key: 'a8707b99037252713ea68655b700c30b1d2071ad', class: "item-divider-inner" }, h("div", { key: '76cd58e8499fe69ccce6c31ab1aee10bc1c1c2f0', class: "item-divider-wrapper" }, h("slot", { key: 'f9e9c165c96d4ca7c6c887bccb236ed9979d414b' })), h("slot", { key: 'ce91f23f478fdb8c2fc963ebdf64ba3f939082f9', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["item-divider.ios.scss"],
-            "md": ["item-divider.md.scss"]
+            "md": ["item-divider.md.scss"],
+            "ionic": ["item-divider.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-divider.ios.css"],
-            "md": ["item-divider.md.css"]
+            "md": ["item-divider.md.css"],
+            "ionic": ["item-divider.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/item-divider/item-divider.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
@@ -169,6 +175,12 @@
   overflow: hidden;
 }
 
+/**
+ * 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
@@ -224,6 +236,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/item-group/item-group.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
@@ -57,6 +63,12 @@ ion-item-group {
   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/item-group/item-group.js

@@ -2,14 +2,18 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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 ItemGroup {
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '2443d9e64c1867a9582a2965ed9ac78263965d70', role: "group", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3acd6096c99f8a9ea7def2514288fe6452fec52d', role: "group", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`item-group-${mode}`]: true,
+                [`item-group-${theme}`]: true,
                 item: true,
             } }));
     }
@@ -17,13 +21,15 @@ export class ItemGroup {
     static get originalStyleUrls() {
         return {
             "ios": ["item-group.ios.scss"],
-            "md": ["item-group.md.scss"]
+            "md": ["item-group.md.scss"],
+            "ionic": ["item-group.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-group.ios.css"],
-            "md": ["item-group.md.css"]
+            "md": ["item-group.md.css"],
+            "ionic": ["item-group.md.css"]
         };
     }
 }

package/dist/collection/components/item-group/item-group.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
@@ -57,6 +63,12 @@ ion-item-group {
   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/item-option/item-option.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
@@ -174,6 +180,12 @@
   pointer-events: 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/item-option/item-option.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the option text in LTR, and to the right in RTL.
@@ -36,7 +37,7 @@ export class ItemOption {
     render() {
         const { disabled, expandable, href } = this;
         const TagType = href === undefined ? 'button' : 'a';
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = TagType === 'button'
             ? { type: this.type }
             : {
@@ -44,25 +45,27 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '85fe8f529ab0673f1ddba299473690590a1bca88', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '2d96ef8cd2bff003c50a7a9bc87b4866d8a21ea3', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'cde9bca980cb5589204017d80483baab0996586e' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'e2b7886b53b0b85d81fbfd9209c2989673cdb863', class: "button-inner" }, h("slot", { key: 'eaf089857ff0a22d3a9c12574596002e32a28c75', name: "top" }), h("div", { key: '12f5d46fe5b8b5d2a5d2bd9e4782376c5af86f1c', class: "horizontal-wrapper" }, h("slot", { key: 'ba6d89b7c7f9470f73e17808f90d578fbcceba48', name: "start" }), h("slot", { key: '22ad963dd37ae40c03a5723c3e3b05970f40d871', name: "icon-only" }), h("slot", { key: 'a1596a1961b5757828fafaa9edf9da3381482ff3' }), h("slot", { key: 'ad0d2b50de279a712e18985ce9aceda7b5d45712', name: "end" })), h("slot", { key: '2940933c947f7e2d9875f0fb980aff392d5ea7fa', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: '329da03db6798aa9be407722154231f186dea0e4' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '02229dd15f8253a1118590d10d75d0667d1ee9b6', class: "button-inner" }, h("slot", { key: 'c2b4373dd16325895d096331ea0887f519988adb', name: "top" }), h("div", { key: 'a4f88e355df992ada63924cb080fe35aa89c10b2', class: "horizontal-wrapper" }, h("slot", { key: 'f51b05ff3812744fbc752cda10e86dd6dec9cd9c', name: "start" }), h("slot", { key: '7ee88f23e86e0fb8733786ffbeb182d7726c12f6', name: "icon-only" }), h("slot", { key: '7ae991f6f53df99dc3e5ee737ce33c0d170c9eb4' }), h("slot", { key: '488eb7b54775a367b0118d1bbef4e07ec4dc485f', name: "end" })), h("slot", { key: 'ff970c5877d79e6997b25de38d5ebd8afbe0aec6', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", null))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["item-option.ios.scss"],
-            "md": ["item-option.md.scss"]
+            "md": ["item-option.md.scss"],
+            "ionic": ["item-option.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-option.ios.css"],
-            "md": ["item-option.md.css"]
+            "md": ["item-option.md.css"],
+            "ionic": ["item-option.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/item-option/item-option.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
@@ -174,6 +180,12 @@
   pointer-events: 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/item-options/item-options.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
@@ -158,6 +164,12 @@ ion-item-options {
   visibility: visible;
 }
 
+/**
+ * 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
@@ -213,6 +225,12 @@ ion-item-options {
  *   }
  * }
  */
+/**
+ * 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/item-options/item-options.js

@@ -3,7 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { isEndSide } 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 ItemOptions {
     constructor() {
         this.side = 'end';
@@ -15,12 +19,12 @@ export class ItemOptions {
         });
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'ac0cec6a2ea83c9633c10bce379ffdcc99221b52', class: {
-                [mode]: true,
+        return (h(Host, { key: 'a11edf1792a9e12c7f15c214a8969e741387d677', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`item-options-${mode}`]: true,
+                [`item-options-${theme}`]: true,
                 /**
                  * Note: The "start" and "end" terms refer to the
                  * direction ion-item-option instances within ion-item-options flow.
@@ -37,13 +41,15 @@ export class ItemOptions {
     static get originalStyleUrls() {
         return {
             "ios": ["item-options.ios.scss"],
-            "md": ["item-options.md.scss"]
+            "md": ["item-options.md.scss"],
+            "ionic": ["item-options.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-options.ios.css"],
-            "md": ["item-options.md.css"]
+            "md": ["item-options.md.css"],
+            "ionic": ["item-options.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/item-options/item-options.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
@@ -158,6 +164,12 @@ ion-item-options {
   visibility: visible;
 }
 
+/**
+ * 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
@@ -213,6 +225,12 @@ ion-item-options {
  *   }
  * }
  */
+/**
+ * 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/item-sliding/item-sliding.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/item-sliding/item-sliding.js

@@ -5,10 +5,14 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
 import { isEndSide } from "../../utils/helpers";
 import { watchForOptions } from "../../utils/watch-options";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
+/**
+ * @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 ItemSliding {
     constructor() {
         this.item = null;
@@ -385,9 +389,9 @@ export class ItemSliding {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'ae9da267d130e2875b2d854952b70daa739effd8', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd905e622610fe786f381bcc7dfbfbd33d45b4c07', class: {
+                [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
                 'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,

package/dist/collection/components/label/label.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
@@ -123,6 +129,12 @@
   overflow: inherit;
 }
 
+/**
+ * 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
@@ -178,6 +190,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use