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

package/dist/collection/components/split-pane/split-pane.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
@@ -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
@@ -151,6 +163,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

package/dist/collection/components/split-pane/split-pane.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
@@ -14,6 +14,10 @@ const QUERY = {
     xl: '(min-width: 1200px)',
     never: '',
 };
+/**
+ * @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 SplitPane {
     constructor() {
         this.visible = false;
@@ -117,26 +121,28 @@ export class SplitPane {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'a8dd60d8f80847cd406bf1776c89209192a424b9', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'b5ad2b32f12e0efc1c579238458f81404348172e', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`split-pane-${mode}`]: true,
+                [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '85c037c53bf8447724aac28260a0d8dab3102525' })));
+            } }, h("slot", { key: '688b702424b64ccc01dd7edbee37c220d277c2b4' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["split-pane.ios.scss"],
-            "md": ["split-pane.md.scss"]
+            "md": ["split-pane.md.scss"],
+            "ionic": ["split-pane.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["split-pane.ios.css"],
-            "md": ["split-pane.md.css"]
+            "md": ["split-pane.md.css"],
+            "ionic": ["split-pane.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/split-pane/split-pane.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
@@ -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
@@ -151,6 +163,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

package/dist/collection/components/tab/tab.js

@@ -3,6 +3,10 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
+/**
+ * @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 Tab {
     constructor() {
         this.loaded = false;
@@ -48,10 +52,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '1a58c58f3d721e840fc2bb09a4f93c47ff0ce1dc', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '25152d0c5cb67053bc529ddd7a8f87344a23adaa', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '0189bc368d456b93c376c363216d6535f45a8822' })));
+            } }, h("slot", { key: '786d2a026df2f1c0c6643a602b36b2d2b70b59a0' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.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
@@ -119,6 +125,12 @@
   display: none !important;
 }
 
+/**
+ * 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 +186,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/tab-bar/tab-bar.js

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
 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.
  */
 export class TabBar {
     constructor() {
@@ -49,26 +50,28 @@ export class TabBar {
     }
     render() {
         const { color, translucent, keyboardVisible } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '1a8f53e428102e3433006244351fd45616d469f3', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '472b19ffa681b062a4e6a3a5dbb484ce27e53976', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'f7b344751801feeada1e1fbd3e35442b9cce578e' })));
+            }) }, h("slot", { key: '8b5b9b1ac56918e47c4474a2c235d969d1854c36' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["tab-bar.ios.scss"],
-            "md": ["tab-bar.md.scss"]
+            "md": ["tab-bar.md.scss"],
+            "ionic": ["tab-bar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["tab-bar.ios.css"],
-            "md": ["tab-bar.md.css"]
+            "md": ["tab-bar.md.css"],
+            "ionic": ["tab-bar.md.css"]
         };
     }
     static get properties() {
@@ -125,7 +128,7 @@ export class TabBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the tab bar 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)."
+                    "text": "If `true`, the tab bar 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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/tab-bar/tab-bar.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
@@ -119,6 +125,12 @@
   display: none !important;
 }
 
+/**
+ * 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 +186,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/tab-button/tab-button.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
@@ -225,6 +231,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/tab-button/tab-button.js

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { config } from "../../global/config";
-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.
  *
  * @part native - The native HTML anchor element that wraps all child elements.
  */
@@ -63,15 +64,15 @@ export class TabButton {
     }
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = {
             download: this.download,
             href,
             rel,
             target,
         };
-        return (h(Host, { key: '2311364c7e028b9e6658f78405983e895c5f30ed', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
-                [mode]: true,
+        return (h(Host, { key: 'f916e959d54e3a2880badb4366773743780fcd4c', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+                [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
                 'tab-has-label': hasLabel,
@@ -82,20 +83,22 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'a5835459b16a4c2db298de8cb75c78a88b349dcc' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'e19e23bbb63f8ceb9e047fc4e3b518f824645398', class: "button-inner" }, h("slot", { key: 'f6cbfa231dde5f46147bccd99c40ab974be549b2' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '6ae661f6e91e2916111aa556735e066001720d76' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '6fab328b467b7fbe1e7c27134df10b8868b05c80', class: "button-inner" }, h("slot", { key: '0f38f4765c907a1d74f57eaa0a325f67ea4da0e2' })), theme === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["tab-button.ios.scss"],
-            "md": ["tab-button.md.scss"]
+            "md": ["tab-button.md.scss"],
+            "ionic": ["tab-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["tab-button.ios.css"],
-            "md": ["tab-button.md.css"]
+            "md": ["tab-button.md.css"],
+            "ionic": ["tab-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/tab-button/tab-button.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
@@ -225,6 +231,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/tabs/tabs.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/tabs/tabs.js

@@ -3,6 +3,9 @@
  */
 import { Host, h } from "@stencil/core";
 /**
+ * @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 top - Content is placed at the top of the screen.
  * @slot bottom - Content is placed at the bottom of the screen.
@@ -135,7 +138,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '05f1607d092d5bef9f1f42dd46d4bec6caa58f15', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '8e175dbf3afeb76c0b3a794b3064a2191b1b5fbc', name: "top" }), h("div", { key: 'd7120d2f0dc58cca23c0854e042a4d4b8fde4db6', class: "tabs-inner" }, h("slot", { key: 'a3651076ad9ab1c6cf56a7b82172ff59930d1963' })), h("slot", { key: 'a719a23f813740dc2c03d21af0c2fe28f1b4f8bb', name: "bottom" })));
+        return (h(Host, { key: '91050ed237918190ac694e057344ff29e0e6d5b5', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'a46e5ec1df57e850f6c18a7c386c9e16c8cbe09d', name: "top" }), h("div", { key: 'ece935d56f859d95a0abde26cf1bc22fff6d4d16', class: "tabs-inner" }, h("slot", { key: '9c756c699d90a0f85fa589eab3fc7a0f8c7b8d1c' })), h("slot", { key: 'adc6a0f4afede64f0226e9fb0169e0759955862e', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.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/text/text.js

@@ -3,19 +3,20 @@
  */
 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.
  */
 export class Text {
     constructor() {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '7481d3ae97e8623e9cdbf7702b16465f9aaa13bf', class: createColorClasses(this.color, {
-                [mode]: true,
-            }) }, h("slot", { key: 'ae2ed8d29d2e52914f0d38b804e1cdc8941c9c64' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '9b8da45b71b833b0f6d48775b785fcbf86b109dc', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: '10d1a6ab506cfae2858bec6c9451f3d7f16cd55f' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.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
@@ -680,6 +686,12 @@
   margin-inline-end: 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
@@ -735,6 +747,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
@@ -790,6 +808,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/textarea/textarea.js

@@ -6,10 +6,11 @@ import { createNotchController } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getCounterText } from "../input/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 textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
@@ -277,8 +278,8 @@ export class Textarea {
      * Renders the border container 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
@@ -335,10 +336,10 @@ export class Textarea {
     }
     render() {
         const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = 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 shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -359,8 +360,8 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'bb02bfa6a2f0f80d98df5a556941dfe4e6167f1a', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'd1b73299b7e55d87bdca6a026409801b8e4c793c', class: createColorClasses(this.color, {
+                [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
                 'label-floating': labelShouldFloat,
@@ -368,20 +369,22 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '1b94ad5bc71dd4441fe6d35690ba2d8e19e4f59c', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'cd3143f63bf715782f849a4d29549473d5ee9a80', class: "textarea-wrapper-inner" }, h("div", { key: 'bebcda4eed228f9742fb3446e5b5d27daf2d2dd4', class: "start-slot-wrapper" }, h("slot", { key: '4cc32fbeae35ae04914183abc4e300aa21863ec6', name: "start" })), h("div", { key: '6f43f54dd8e0a548bc8b376025fb8f914d705130', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '11b30015d9b5daf6781651a1d0111d2be893f4c6', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '7dc55f082b3268b78b1f8230ce81c9b870d945a8', class: "end-slot-wrapper" }, h("slot", { key: '054c0a7e052a301c00f8fe3cb975e61e7a7b4d3c', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '56a14c9be398e0f4dbf1f9a71999dc0aecaa732e', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '0c2ead1040301502244e7afc38f14051b40e4711', class: "textarea-wrapper-inner" }, h("div", { key: '3a2f6d8db60c807e7ff11342f45082197fba5abe', class: "start-slot-wrapper" }, h("slot", { key: '3a8238e824f737c0c99081bac7c02dc1b519a3aa', name: "start" })), h("div", { key: '7704ec78ff12ea56f6a8193dd78b4333750051dc', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '434da6f41cde5833cfe9cefd469ea54e8204e6a6', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'ea8d0e2fc46aa2565c9ca075bd5813b79b090942', class: "end-slot-wrapper" }, h("slot", { key: '5b0924fcf975858005da294df8cabc46d5d0c751', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["textarea.ios.scss"],
-            "md": ["textarea.md.scss"]
+            "md": ["textarea.md.scss"],
+            "ionic": ["textarea.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["textarea.ios.css"],
-            "md": ["textarea.md.css"]
+            "md": ["textarea.md.css"],
+            "ionic": ["textarea.md.css"]
         };
     }
     static get properties() {
@@ -510,7 +513,7 @@ export class Textarea {
                 "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