@ionic/core 8.0.0-dev.11712072527.1dd97c66 → 8.0.0-dev.11712932867.11504809

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

@@ -4,17 +4,18 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.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 Footer {
     constructor() {
         this.keyboardCtrl = null;
         this.checkCollapsibleFooter = () => {
-            const mode = getIonMode(this);
-            if (mode !== 'ios') {
+            const theme = getIonTheme(this);
+            if (theme !== 'ios') {
                 return;
             }
             const { collapse } = this;
@@ -77,30 +78,32 @@ export class Footer {
     }
     render() {
         const { translucent, collapse } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(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: 'b8b57c6d3ffcb100330c0f19f1f567db89569efd', role: "contentinfo", class: {
-                [mode]: true,
+        return (h(Host, { key: '8d86d2a7edeb1dca471169c8561037a5e25e27d6', role: "contentinfo", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`footer-${mode}`]: true,
+                [`footer-${theme}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${mode}`]: translucent,
+                [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: 'a9f465cbd6100ba16fd1e02e382997ac87303bb7' })));
+            } }, theme === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: 'c6f4f2e754185bfd4ccff10cecd8f60b0148ed64' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
         return {
             "ios": ["footer.ios.scss"],
-            "md": ["footer.md.scss"]
+            "md": ["footer.md.scss"],
+            "ionic": ["footer.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["footer.ios.css"],
-            "md": ["footer.md.css"]
+            "md": ["footer.md.css"],
+            "ionic": ["footer.md.css"]
         };
     }
     static get properties() {
@@ -117,7 +120,7 @@ export class Footer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
+                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
                 },
                 "attribute": "collapse",
                 "reflect": false
@@ -134,7 +137,7 @@ export class Footer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/footer/footer.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
@@ -65,6 +71,12 @@ 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,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
@@ -53,6 +59,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/grid/grid.js

@@ -2,17 +2,21 @@
  * (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 Grid {
     constructor() {
         this.fixed = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd240212314811650765ac22936da13b0a92680b8', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '51f60a0f44ddff2e0338b14e7959bd21037db493', class: {
+                [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'd0b55fd347db2b2f92805975c61da093c762c26d' })));
+            } }, h("slot", { key: '8ace683b1ca73f52bd1b9b3cd6f5a590cb2759fa' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.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
@@ -65,6 +71,12 @@ 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/header/header.js

@@ -5,10 +5,11 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.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 Header {
     constructor() {
@@ -40,8 +41,8 @@ export class Header {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
+        const theme = getIonTheme(this);
+        if (theme !== 'ios') {
             return;
         }
         const { collapse } = this;
@@ -136,30 +137,32 @@ export class Header {
     }
     render() {
         const { translucent, inheritedAttributes } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(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: '37ded46927283f6aa2c2b069510e37d427a908ad', role: roleType, class: {
-                [mode]: true,
+        return (h(Host, Object.assign({ key: 'f55c6d9a19ce323bf899e5b98535959a67f63762', role: roleType, class: {
+                [theme]: true,
                 // Used internally for styling
-                [`header-${mode}`]: true,
+                [`header-${theme}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '3d25f5606e297ba9e0fea3c2fe0d7da542089075' })));
+                [`header-translucent-${theme}`]: this.translucent,
+            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: 'd82a55280d1ec1731a16f300c8ff9dddf8062621' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
         return {
             "ios": ["header.ios.scss"],
-            "md": ["header.md.scss"]
+            "md": ["header.md.scss"],
+            "ionic": ["header.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["header.ios.css"],
-            "md": ["header.md.css"]
+            "md": ["header.md.css"],
+            "ionic": ["header.md.css"]
         };
     }
     static get properties() {
@@ -176,7 +179,7 @@ export class Header {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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)"
+                    "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)"
                 },
                 "attribute": "collapse",
                 "reflect": false
@@ -193,7 +196,7 @@ export class Header {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/header/header.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
@@ -65,6 +71,12 @@ 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,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } 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.
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
@@ -71,7 +74,10 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '167143c9e996a0b2f78841e6c427c57a322189d7', class: getIonMode(this) }, h("img", { key: 'e840d04e5d0a939cd4c2d19f915a3fee394419b5', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '346689178f7dba60c75df71503270416b1c50a66', class: {
+                [theme]: true,
+            } }, h("img", { key: '9d0445bda5f588d98d03975c5d388f6db60aeaf1', 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,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() {
@@ -480,7 +483,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+                    "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",
@@ -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",