@ionic/core 8.7.16-dev.11770836513.1c72c75c → 8.7.16-dev.11771578921.1a6016f8

package/dist/collection/components/textarea/textarea.ionic.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -550,18 +549,6 @@
   opacity: 1;
 }
 
-/**
- * When the rows attribute is set, the textarea should not force a min-height,
- * but rather respect the natural height of the textarea, especially when
- * rows is set to 1.
- */
-:host(.textarea-fill-solid[rows]),
-:host(.textarea-fill-outline[rows]),
-:host(.textarea-label-placement-stacked[rows]),
-:host(.textarea-label-placement-floating[rows]) {
-  min-height: auto;
-}
-
 .start-slot-wrapper,
 .end-slot-wrapper {
   display: flex;
@@ -686,10 +673,6 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
-.textarea-wrapper-inner {
-  height: 0;
-}
-
 :host(.textarea-size-small) .textarea-wrapper-inner {
   --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
@@ -711,24 +694,11 @@
   --padding-start: var(--token-space-500, var(--token-scale-500, 20px));
 }
 
-:host([rows]) .textarea-wrapper-inner {
-  /**
-   * Clamp the minimum value to 1 to prevent 0 or negative heights.
-   * Add 0.5 to show a half-line peek at the next row.
-   */
-  --number-rows: calc(max(var(--host-rows, 1), 1) + 0.5);
-  /**
-   * Calculate the minimum height for the textarea container based on the number of rows.
-   * - $textarea-row-line-height: Approximate height of a single line based on
-   *   the browser's default line-height: normal (~1.2 × font-size).
-   * - (var(--number-rows) + 0.5): Show the requested rows plus a half-line peek
-   *   at the next row, hinting that the textarea is scrollable.
-   * - var(--padding-top), var(--border-width): Account for
-   *   box-sizing: border-box, which includes padding and border in min-height.
-   */
-  min-height: calc(
-    var(--number-rows) * 1.2em + var(--padding-top, 0px) + var(--border-width, 0px)
-  );
+:host .native-wrapper::after {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 :host(.textarea-shape-soft) {
@@ -743,11 +713,29 @@
   --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
 }
 
+:host([auto-grow]) .textarea-wrapper-inner {
+  height: auto;
+}
+
+:host([auto-grow]) .native-wrapper {
+  min-height: inherit;
+  max-height: inherit;
+}
+
 .textarea-wrapper {
   gap: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 .textarea-wrapper-inner {
+  -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);
+}
+
+:host([rows]:not([auto-grow])) .textarea-wrapper-inner {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
@@ -757,50 +745,33 @@
 }
 
 /**
- * Top and bottom padding are on the textarea so that when scrolling,
- * text can scroll behind the outline borders. When at rest at top or bottom,
- * the text is not glued to the outline lines.
+ * Top and bottom padding are applied to ensure that text remains visible 
+ * as it scrolls past the container boundaries. This provides a "sneak peek" 
+ * of the content transitioning off-screen, mirroring native textarea behavior 
+ * where text isn't immediately clipped or "glued" to the border at the 
+ * scroll limits.
  */
-.textarea-wrapper-inner .native-textarea {
+:host([rows]:not([auto-grow])) .textarea-wrapper-inner .native-textarea {
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
 }
 
-:host(:not([rows])) .textarea-wrapper-inner,
-:host([auto-grow]) .textarea-wrapper-inner {
-  height: auto;
-}
-
-:host(:not([rows])) .native-wrapper,
-:host([auto-grow]) .native-wrapper {
-  min-height: inherit;
-  max-height: inherit;
-}
-
-.label-text-wrapper {
-  font-size: var(--token-font-size-300, 12px);
-  font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
-  max-width: var(--token-scale-5000, 200px);
-  transition: color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
-}
-
-:host(.label-floating) .label-text-wrapper {
-  transform: none;
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
 }
 
-ion-icon {
-  --color: globals.$ion-icon-subtlest;
-  font-size: var(--token-scale-400, 16px);
+.textarea-highlight {
+  bottom: -1px;
+  position: absolute;
+  width: 100%;
+  height: var(--token-border-size-050, var(--token-scale-050, 2px));
+  transform: scale(0);
+  transition: transform var(--token-transition-time-200, 200ms);
+  background: var(--border-color);
 }
-
-.start-slot-wrapper,
-.end-slot-wrapper {
-  margin-top: var(--token-space-050, var(--token-scale-050, 2px));
+.textarea-highlight {
+  inset-inline-start: 0;
 }
 
 .textarea-bottom {
@@ -830,22 +801,69 @@ ion-icon {
   color: var(--highlight-color-valid);
 }
 
-:host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
-  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+.label-text-wrapper {
+  font-size: var(--token-font-size-300, 12px);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
+  max-width: var(--token-scale-5000, 200px);
+  transition: color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
 }
 
-.textarea-highlight {
-  bottom: -1px;
-  position: absolute;
-  width: 100%;
-  height: var(--token-border-size-050, var(--token-scale-050, 2px));
-  transform: scale(0);
-  transition: transform var(--token-transition-time-200, 200ms);
-  background: var(--border-color);
+:host(.label-floating) .label-text-wrapper {
+  transform: none;
 }
-.textarea-highlight {
-  inset-inline-start: 0;
+
+/**
+ * This makes the label sit above the textarea.
+ */
+:host(.label-floating) .label-text-wrapper {
+  /**
+   * Label text should not extend
+   * beyond the bounds of the textarea.
+   */
+  max-width: calc(100% / 0.75);
+}
+
+.textarea-wrapper textarea {
+  /**
+   * When the floating label appears on top of the
+   * textarea, we need to fade the textarea out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+/**
+ * Label is on the left of the textarea in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.textarea-label-placement-fixed) .label-text {
+  flex: 0 0 calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
+  width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
+  min-width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
+  max-width: var(--token-scale-5000, 200px);
+}
+
+ion-icon {
+  --color: globals.$ion-icon-subtlest;
+  font-size: var(--token-scale-400, 16px);
+}
+
+.start-slot-wrapper,
+.end-slot-wrapper {
+  margin-top: var(--token-space-050, var(--token-scale-050, 2px));
+}
+
+:host([rows]:not([auto-grow])) .start-slot-wrapper,
+:host([rows]:not([auto-grow])) .end-slot-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
 }
 
 :host(.has-focus) {
@@ -894,44 +912,4 @@ ion-icon {
 
 :host(.textarea-readonly) {
   --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
-}
-
-/**
- * This makes the label sit above the textarea.
- */
-:host(.label-floating) .label-text-wrapper {
-  /**
-   * Label text should not extend
-   * beyond the bounds of the textarea.
-   */
-  max-width: calc(100% / 0.75);
-}
-
-.textarea-wrapper textarea {
-  /**
-   * When the floating label appears on top of the
-   * textarea, we need to fade the textarea out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-}
-
-/**
- * Label is on the left of the textarea in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.textarea-label-placement-fixed) .label-text {
-  flex: 0 0 calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
-  width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
-  min-width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
-  max-width: var(--token-scale-5000, 200px);
-}
-
-/*
- * As the ionic theme introduces padding in the textarea,
- * there is no need to add margin-top to the textarea.
- */
-:host(.textarea-label-placement-stacked) textarea,
-:host(.textarea-label-placement-floating) textarea {
-  margin-top: 0;
 }

package/dist/collection/components/textarea/textarea.ios.css

@@ -552,18 +552,6 @@
   opacity: 1;
 }
 
-/**
- * When the rows attribute is set, the textarea should not force a min-height,
- * but rather respect the natural height of the textarea, especially when
- * rows is set to 1.
- */
-:host(.textarea-fill-solid[rows]),
-:host(.textarea-fill-outline[rows]),
-:host(.textarea-label-placement-stacked[rows]),
-:host(.textarea-label-placement-floating[rows]) {
-  min-height: auto;
-}
-
 .start-slot-wrapper,
 .end-slot-wrapper {
   display: flex;

package/dist/collection/components/textarea/textarea.js

@@ -565,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '506864d0d97d69d6ad75f556091c073aa3c6a01a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5be3ab7c5adf5ef61d70aff916d233239cc3034e', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -577,9 +577,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }),
-            // For ionic theme, we need to define this css variable
-            style: theme === 'ionic' ? { '--host-rows': this.rows !== undefined ? this.rows.toString() : undefined } : undefined }, h("label", { key: '332962e7d9a0348f27c69bffd5176f6f5f89b4dc', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '64e47a172c111455d4c85df000ac3b1680bf84f1', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: '7eb9826e9618606e1de74cb842c9236a2b5d0cb4', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '5f0362d9f1f07f73b3d7d89d55fcb463ad0bc1da', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -589,7 +587,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '82564ff1212406db7fecf9b68bd08070006a7487', class: "textarea-outline" }), h("div", { key: '754a952b9bfff7b1a63e937c6b99194dbb637709', class: "start-slot-wrapper" }, h("slot", { key: 'd17afe055f0f62aea633b5adc7a201df32fe1ef7', name: "start" })), h("div", { key: '80bb821d2eff53c8d4a8ad9bf74325e1c8439045', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'ecba663b514471e9506a07b6debdbf862a88e0c5', class: "native-textarea", part: "native", 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '616bce72f7e3815de55a2fd213f30a239a6ef94c', class: "end-slot-wrapper" }, h("slot", { key: '73509b20f270c08c8ef4dc07353d48d11d21b4c5', name: "end" }))), shouldRenderHighlight && h("div", { key: '21182bd527467316bc3a74de9786e38484af6fac', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'c8f68629935444bedaf41c8958e13fd1916a0871', class: "textarea-outline" }), h("div", { key: '56349914a8348214f9a663c768a3915fc70e21cd', class: "start-slot-wrapper" }, h("slot", { key: '8b399fd0f049f579f7af1183052614f459d52169', name: "start" })), h("div", { key: '5edec308a1ade5d4634ee5bae413e27a9f17e3cb', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'ac792e9d46e30bb0fe72b6e8f57880ff5114dff6', class: "native-textarea", part: "native", 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '02e2a10f1f8fd6e05f457320cb90fade56cf06a9', class: "end-slot-wrapper" }, h("slot", { key: '4314c344b0054cafcb65358451afa2dbef5bd8ef', name: "end" }))), shouldRenderHighlight && h("div", { key: '94e8b3639665cf9c068abfd681e7fa4c515307f4', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.md.css

@@ -552,18 +552,6 @@
   opacity: 1;
 }
 
-/**
- * When the rows attribute is set, the textarea should not force a min-height,
- * but rather respect the natural height of the textarea, especially when
- * rows is set to 1.
- */
-:host(.textarea-fill-solid[rows]),
-:host(.textarea-fill-outline[rows]),
-:host(.textarea-label-placement-stacked[rows]),
-:host(.textarea-label-placement-floating[rows]) {
-  min-height: auto;
-}
-
 .start-slot-wrapper,
 .end-slot-wrapper {
   display: flex;

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-11T19:04:22",
+  "timestamp": "2026-02-20T09:17:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",