@ionic/core 8.0.0-dev.11712850753.10c4a960 → 8.0.0-dev.11712932867.11504809

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

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

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.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
@@ -84,6 +90,12 @@ 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,7 +5,11 @@ 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 { 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 InfiniteScrollContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
@@ -14,8 +18,8 @@ export class InfiniteScrollContent {
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const mode = getIonMode(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+            const theme = getIonTheme(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -26,24 +30,26 @@ export class InfiniteScrollContent {
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '7c32cbd526ef8a151df1c870bd3a4f0c9d764154', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '1134ca388f5108ebe2bba007ae4700013935db3c', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: '6bd67f2c9f3f23edc2f81b6de16134b853bea716', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${theme}`]: true,
+            } }, h("div", { key: '2fc34c4ea05fbfb2fefbbccdb257434b9b07c889', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { 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"]
+            "md": ["infinite-scroll-content.md.scss"],
+            "ionic": ["infinite-scroll-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.css"],
-            "md": ["infinite-scroll-content.md.css"]
+            "md": ["infinite-scroll-content.md.css"],
+            "ionic": ["infinite-scroll-content.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.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
@@ -84,6 +90,12 @@ 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/input/input.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
@@ -606,6 +612,12 @@
   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
@@ -661,6 +673,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/input/input.js

@@ -7,10 +7,11 @@ import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnRea
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { closeCircle, closeSharp } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getCounterText } from "./input.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.
  *
  * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the input. (EXPERIMENTAL)
@@ -104,7 +105,7 @@ export class Input {
         this.placeholder = undefined;
         this.readonly = false;
         this.required = false;
-        this.shape = undefined;
+        this.shape = 'soft';
         this.spellcheck = false;
         this.step = undefined;
         this.type = 'text';
@@ -346,8 +347,8 @@ export class Input {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -372,11 +373,11 @@ export class Input {
     }
     render() {
         const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
-        const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+        const defaultClearIcon = theme === 'ios' ? closeCircle : closeSharp;
         const clearIconData = clearInputIcon !== null && clearInputIcon !== void 0 ? clearInputIcon : defaultClearIcon;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
@@ -398,8 +399,8 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '12e9da8ff2d6ecce8e3ce1880ea46e71260c81fc', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '682c57fbf98a55e28119065a53160e1d441fa0c9', class: createColorClasses(this.color, {
+                [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
                 'label-floating': labelShouldFloat,
@@ -409,27 +410,29 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'c241838173e639eebad7d8067063999fc609320b', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'c392fcd8367aa3a05fac3a5774dad0525670d4d0', class: "native-wrapper" }, h("slot", { key: '3f6bb21aab004dfc7957ca42d18acac73c240a0e', name: "start" }), h("input", Object.assign({ key: '86720e7d2b4e2f5cfe7dfee4c9947f0998279e17', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: 'bc0eef26d738b13c0f016a329c5ca2afd1d9c64d', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '743ed0a79a37ca67f9305ee567d7a04243260047', class: "native-wrapper" }, h("slot", { key: '0c9d6d14543c769c03d3f0c77ebeddac889baba4', name: "start" }), h("input", Object.assign({ key: '281da51dba68d62d0db27dcc6a8d8bb0a9c58c96', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '55cf54320c1555fd3501374d2c2b4e9c1dce046f', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'b099197a99822b7f22baf4273effa478c35c7ade', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["input.ios.scss"],
-            "md": ["input.md.scss"]
+            "md": ["input.md.scss"],
+            "ionic": ["input.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["input.ios.css"],
-            "md": ["input.md.css"]
+            "md": ["input.md.css"],
+            "ionic": ["input.md.css"]
         };
     }
     static get properties() {
@@ -701,7 +704,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available when the theme is `\"md\"`."
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -952,18 +955,19 @@ export class Input {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round'",
+                    "resolved": "\"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the input. If \"round\" it will have an increased border radius."
+                    "text": "Set to `\"soft\"` for an input with soft rounded corners, `\"round\"` for an input\nwith fully rounded corners, or `\"rectangular\" for an input without rounded corners.\nDefaults to `\"soft\"`."
                 },
                 "attribute": "shape",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'soft'"
             },
             "spellcheck": {
                 "type": "boolean",

package/dist/collection/components/input/input.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
@@ -606,6 +612,12 @@
   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
@@ -661,6 +673,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
@@ -716,6 +734,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
@@ -774,12 +798,15 @@
 :host(.input-fill-solid) {
   --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
   --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
-  --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
   min-height: 56px;
 }
 
+:host(.input-fill-solid.input-shape-soft) {
+  --border-radius: 4px;
+}
+
 /**
  * The solid fill style has a border
  * at the bottom of the input wrapper.
@@ -841,6 +868,12 @@
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -898,12 +931,15 @@
  */
 :host(.input-fill-outline) {
   --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
-  --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
   min-height: 56px;
 }
 
+:host(.input-fill-outline.input-shape-soft) {
+  --border-radius: 4px;
+}
+
 :host(.input-fill-outline.input-shape-round) {
   --border-radius: 28px;
   --padding-start: 32px;
@@ -1122,6 +1158,12 @@
   border-top: 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/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: '41b2a690aefd50a634401a985600b6eff9a68d2e', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd592aa335ed9209e9bbfef7560b358ec2d8180b5', class: createColorClasses(this.color, {
+                [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: 'b112bb29c21cfee950b6e5efb0dbb0abf0960546', name: "start" }), h("div", { key: '4aa596db07830cd597e08d927a02a033b1d3cc63', class: "item-divider-inner" }, h("div", { key: '23f288847d93c1ef4ad2e619f0eb88440240e9ea', class: "item-divider-wrapper" }, h("slot", { key: '9e9b2cc3baa537e64ff45b373322a46fb3658878' })), h("slot", { key: 'c7269f28307f00fccc47e1efb58984430ae13a5d', name: "end" }))));
+            }) }, h("slot", { key: '9d76b7072f2a3fb191d8cedca584b3d1d18f2717', name: "start" }), h("div", { key: '5c32662eaa21864d9bf46bfe610bf0e536e62bdc', class: "item-divider-inner" }, h("div", { key: '4f08638da782265d36bc6926fbbe4d96996c36a4', class: "item-divider-wrapper" }, h("slot", { key: 'd12bc9390e044ec1139d83368b3c3ee4d8f43fee' })), h("slot", { key: 'd5cef7f3511c5c47fe399633bd9935e6358cf593', 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() {