@ionic/core 8.0.0-dev.11713893672.15a2b23e → 8.0.0-dev.11713988726.1e82b9a0

package/dist/collection/components/tab-button/tab-button.ionic.css

@@ -0,0 +1,258 @@
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --background: Background of the tab button
+   * @prop --background-focused: Background of the tab button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the tab button background when focused with the tab key
+   *
+   * @prop --color: Color of the tab button
+   * @prop --color-focused: Color of the tab button when focused with the tab key
+   * @prop --color-selected: Color of the selected tab button
+   *
+   * @prop --padding-top: Top padding of the tab button
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
+   * @prop --padding-bottom: Bottom padding of the tab button
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
+   *
+   * @prop --ripple-color: Color of the button ripple effect
+   */
+  --ripple-color: var(--color-selected);
+  --background-focused-opacity: 1;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  outline: none;
+  background: var(--background);
+  color: var(--color);
+}
+
+.button-native {
+  border-radius: inherit;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  white-space: inherit;
+  display: flex;
+  position: relative;
+  flex-direction: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  box-sizing: border-box;
+  -webkit-user-drag: none;
+}
+
+.button-native::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+  flex-flow: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+}
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+  opacity: var(--background-focused-opacity);
+}
+
+@media (any-hover: hover) {
+  a:hover {
+    color: var(--color-selected);
+  }
+}
+:host(.tab-selected) {
+  color: var(--color-selected);
+}
+
+:host(.tab-hidden) {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+:host(.tab-disabled) {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+::slotted(ion-label),
+::slotted(ion-icon) {
+  display: block;
+  align-self: center;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+::slotted(ion-label) {
+  order: 0;
+}
+
+::slotted(ion-icon) {
+  order: -1;
+  height: 1em;
+}
+
+:host(.tab-has-label-only) ::slotted(ion-label) {
+  white-space: normal;
+}
+
+::slotted(ion-badge) {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+}
+
+:host(.tab-layout-icon-start) {
+  flex-direction: row;
+}
+
+:host(.tab-layout-icon-end) {
+  flex-direction: row-reverse;
+}
+
+:host(.tab-layout-icon-bottom) {
+  flex-direction: column-reverse;
+}
+
+:host(.tab-layout-icon-hide) ::slotted(ion-icon) {
+  display: none;
+}
+
+:host(.tab-layout-label-hide) ::slotted(ion-label) {
+  display: none;
+}
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+
+:host {
+  --focus-ring-color: #9ec4fd;
+  --focus-ring-width: 2px;
+  border-radius: var(--ionic-border-radius-rounded-medium, 8px);
+}
+
+.button-native {
+  overflow: visible;
+}
+.button-native::after {
+  border-radius: inherit;
+}
+
+:host(.ion-focused) .button-native::after {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+}
+
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+  opacity: var(--background-activated-opacity);
+}

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
@@ -94,18 +100,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   display: flex;
   position: relative;
   flex-direction: inherit;
@@ -124,8 +130,8 @@
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -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: 'b03507709e9505c59afa97ba404dcb36ccb66306', 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: '84987d87bbf74d7507fea64aa3cb603a88e3c766' }, 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: '84cb38c25a6c5fc5e58b029a42c9ae4cb48e00a2', class: "button-inner" }, h("slot", { key: 'ca6ad61608d3b1d4dcd4da322bfe56739426ea45' })), 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.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["tab-button.ios.css"],
-            "md": ["tab-button.md.css"]
+            "md": ["tab-button.md.css"],
+            "ionic": ["tab-button.ionic.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
@@ -94,18 +100,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   display: flex;
   position: relative;
   flex-direction: inherit;
@@ -124,8 +130,8 @@
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;

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: 'b57f4a5ca7d8bfc424799d17f26d9568d17c4836', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '8e3580d3be76c2a249292febbb286e45e37f8672', name: "top" }), h("div", { key: '4639da5bb1480040387735d92e56f1a11116178c', class: "tabs-inner" }, h("slot", { key: '1db93d17e11a02fc102dc6e2ac850a9a8d41eba5' })), h("slot", { key: '7a4aa6e26e319c6ada2b50564281fc96fc8a156f', 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: '9d2e120b241c2273334919216fe84271bad22732', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: '133824fda87336643264030c74ffdaac4e24d32b' })));
     }
     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
@@ -655,7 +661,8 @@
   max-width: calc(100% / 0.75);
 }
 
-.start-slot-wrapper, .end-slot-wrapper {
+.start-slot-wrapper,
+.end-slot-wrapper {
   padding-left: 0;
   padding-right: 0;
   padding-top: var(--padding-top);
@@ -680,6 +687,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 +748,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 +809,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: '2311c464331aae0393c44c7d16864362730a1c83', 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: '618cfbc3a1ba86b99acf4c3441989076bbd7d214', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '5a85853e71b6d3acc946bbc6b1b4fbf813e03358', class: "textarea-wrapper-inner" }, h("div", { key: '9fee6f42941fbb4b408e8e3e6aa50cf55f56a149', class: "start-slot-wrapper" }, h("slot", { key: '25903dd94c5f91ed17af87ed3544baaf342666d4', name: "start" })), h("div", { key: 'f41bd8e85b0ae894feba6f9f66896a8a1f54b27b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '432319b259e1f0e337d418e47d3b6885a89b0b1f', 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: '80d39e27e41f50ebb7ec5c3a045185646db2777b', class: "end-slot-wrapper" }, h("slot", { key: '74e35bdc37b0a6c9a873ee2c61f7b1736c4ff662', 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