voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -2,9 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
+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";
@@ -27,8 +26,6 @@ export class Textarea {
          */
         this.didTextareaClearOnEdit = false;
         this.inheritedAttributes = {};
-        // This flag ensures we log the deprecation warning at most once.
-        this.hasLoggedDeprecationWarning = false;
         // `Event` type is used instead of `InputEvent`
         // since the types from Stencil are not derived
         // from the element (e.g. textarea and input
@@ -47,12 +44,10 @@ export class Textarea {
         this.onFocus = (ev) => {
             this.hasFocus = true;
             this.focusedValue = this.value;
-            this.focusChange();
             this.ionFocus.emit(ev);
         };
         this.onBlur = (ev) => {
             this.hasFocus = false;
-            this.focusChange();
             if (this.focusedValue !== this.value) {
                 /**
                  * Emits the `ionChange` event when the textarea value
@@ -94,7 +89,6 @@ export class Textarea {
         this.helperText = undefined;
         this.label = undefined;
         this.labelPlacement = 'start';
-        this.legacy = undefined;
         this.shape = undefined;
     }
     debounceChanged() {
@@ -105,9 +99,6 @@ export class Textarea {
          */
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
-    disabledChanged() {
-        this.emitStyle();
-    }
     /**
      * Update the native input element when the value changes
      */
@@ -118,14 +109,11 @@ export class Textarea {
             nativeInput.value = value;
         }
         this.runAutoGrow();
-        this.emitStyle();
     }
     connectedCallback() {
         const { el } = this;
-        this.legacyFormController = createLegacyFormController(el);
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        this.emitStyle();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -183,21 +171,6 @@ export class Textarea {
         }
         return Promise.resolve(this.nativeInput);
     }
-    emitStyle() {
-        if (this.legacyFormController.hasLegacyControl()) {
-            this.ionStyle.emit({
-                interactive: true,
-                textarea: true,
-                input: true,
-                'interactive-disabled': this.disabled,
-                'has-placeholder': this.placeholder !== undefined,
-                'has-value': this.hasValue(),
-                'has-focus': this.hasFocus,
-                // TODO(FW-2876): remove this
-                legacy: !!this.legacy,
-            });
-        }
-    }
     /**
      * Emits an `ionChange` event.
      *
@@ -271,40 +244,12 @@ export class Textarea {
             this.didTextareaClearOnEdit = true;
         }
     }
-    focusChange() {
-        this.emitStyle();
-    }
     hasValue() {
         return this.getValue() !== '';
     }
     getValue() {
         return this.value || '';
     }
-    // TODO: FW-2876 - Remove this render function
-    renderLegacyTextarea() {
-        if (!this.hasLoggedDeprecationWarning) {
-            printIonWarning(`ion-textarea now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.
-
-Example: <ion-textarea label="Comments"></ion-textarea>
-Example with aria-label: <ion-textarea aria-label="Comments"></ion-textarea>
-
-For textareas that do not render the label immediately next to the input, developers may continue to use "ion-label" but must manually associate the label with the textarea by using "aria-labelledby".
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
-            this.hasLoggedDeprecationWarning = true;
-        }
-        const mode = getIonMode(this);
-        const value = this.getValue();
-        const labelId = this.inputId + '-lbl';
-        const label = findItemLabel(this.el);
-        if (label) {
-            label.id = labelId;
-        }
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
-                'legacy-textarea': true,
-            }) }, h("div", { class: "textarea-legacy-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? label.id : null, ref: (el) => (this.nativeInput = el), autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, 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))));
-    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -388,7 +333,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
         }
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
-    renderTextarea() {
+    render() {
         const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
@@ -414,7 +359,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e2ac4428f0e3268ac0507b331b0badd8dbfa5010', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -423,11 +368,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "textarea-wrapper-inner" }, h("div", { class: "start-slot-wrapper" }, h("slot", { name: "start" })), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ 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", { class: "end-slot-wrapper" }, h("slot", { name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
-    }
-    render() {
-        const { legacyFormController } = this;
-        return legacyFormController.hasLegacyControl() ? this.renderLegacyTextarea() : this.renderTextarea();
+            }) }, h("label", { key: 'a5a566c5d91e8d74449f172fb64093777e1bf9c3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'fc2bbf87535d133f52e27be986e5fcfac987f986', class: "textarea-wrapper-inner" }, h("div", { key: '8834f1e7bf4853087a8e7fd0dfe23106cdba5ef3', class: "start-slot-wrapper" }, h("slot", { key: 'd4014b4b58f3c1ee1bc25ff712a45d4720b38c4d', name: "start" })), h("div", { key: 'f9f34505f0e2dfb647ae1b727e406b522d0891a2', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '4bcb6eb6becdc47ce2056162cb8bb0d727879260', 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: '0605291843bd7c4cf59b44a970cb43830e825362', class: "end-slot-wrapper" }, h("slot", { key: '61a90e1625860e662e4526d4b88653edb6ecb5b4', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -920,23 +861,6 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "reflect": false,
                 "defaultValue": "'start'"
             },
-            "legacy": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
-                },
-                "attribute": "legacy",
-                "reflect": false
-            },
             "shape": {
                 "type": "string",
                 "mutable": false,
@@ -1117,9 +1041,6 @@ Developers can use the "legacy" property to continue using the legacy form marku
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "disabledChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"

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

@@ -70,6 +70,7 @@
    * @prop --placeholder-font-weight: Weight of the placeholder text
    * @prop --placeholder-opacity: Opacity of the placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the textarea. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the textarea when focused
    * @prop --highlight-color-valid: The color of the highlight on the textarea when valid
    * @prop --highlight-color-invalid: The color of the highlight on the textarea when invalid
@@ -84,16 +85,16 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: 0;
+  --padding-bottom: 8px;
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -104,16 +105,13 @@
   display: block;
   position: relative;
   width: 100%;
+  min-height: 44px;
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
   box-sizing: border-box;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -144,20 +142,6 @@
   width: fit-content;
 }
 
-:host(.legacy-textarea) {
-  flex: 1;
-  background: var(--background);
-  white-space: pre-wrap;
-}
-
-:host(.legacy-textarea.ion-color) {
-  color: var(--ion-color-base);
-}
-
-:host(:not(.legacy-textarea)) {
-  --padding-bottom: 8px;
-}
-
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
   background: initial;
@@ -167,10 +151,6 @@
   align-self: baseline;
 }
 
-:host-context(ion-item:not(.item-label)) {
-  --padding-start: 0;
-}
-
 :host-context(ion-item)[slot=start],
 :host-context(ion-item)[slot=end] {
   width: auto;
@@ -221,21 +201,6 @@
   opacity: var(--placeholder-opacity);
 }
 
-:host(.legacy-textarea) .native-textarea {
-  white-space: inherit;
-}
-
-:host(.legacy-textarea) .native-textarea,
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  -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);
-  border-radius: var(--border-radius);
-}
-
 .native-textarea {
   color: inherit;
   font-family: inherit;
@@ -252,55 +217,14 @@
   word-break: break-word;
 }
 
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  grid-area: 1/1/2/2;
-  word-break: break-word;
-}
-
 .cloned-input {
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  .cloned-input {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .cloned-input {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .cloned-input {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .cloned-input {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .cloned-input:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.cloned-input {
+  inset-inline-start: 0;
 }
 
 /**
@@ -312,13 +236,6 @@
   opacity: 1;
 }
 
-:host(.legacy-textarea[auto-grow]) .cloned-input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 :host([auto-grow]) .cloned-input {
   height: 100%;
 }
@@ -327,15 +244,6 @@
   overflow: hidden;
 }
 
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
-  opacity: 0;
-}
-
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
-  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 1;
-}
-
 .textarea-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -374,8 +282,7 @@
   padding-bottom: var(--padding-bottom);
 }
 
-.native-wrapper,
-.textarea-legacy-wrapper {
+.native-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
@@ -390,8 +297,7 @@
    */
   grid-auto-rows: 100%;
 }
-.native-wrapper::after,
-.textarea-legacy-wrapper::after {
+.native-wrapper::after {
   white-space: pre-wrap;
   content: attr(data-replicated-value) " ";
   visibility: hidden;
@@ -490,7 +396,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -509,7 +415,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -995,8 +901,8 @@
  * }
  */
 :host(.textarea-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --border-color: var(--ion-color-step-500, gray);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1032,8 +938,8 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-solid:hover) {
-    --background: var(--ion-color-step-100, #e6e6e6);
-    --border-color: var(--ion-color-step-750, #404040);
+    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1041,8 +947,8 @@
  * much darker on focus.
  */
 :host(.textarea-fill-solid.has-focus) {
-  --background: var(--ion-color-step-150, #d9d9d9);
-  --border-color: var(--ion-color-step-750, #404040);
+  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
 }
 
 :host(.textarea-fill-solid) .textarea-wrapper {
@@ -1050,25 +956,10 @@
    * Only the top left and top right borders should.
    * have a radius when using a solid fill.
    */
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-:host-context([dir=rtl]):host(.textarea-fill-solid) .textarea-wrapper, :host-context([dir=rtl]).textarea-fill-solid .textarea-wrapper {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.textarea-fill-solid:dir(rtl)) .textarea-wrapper {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 
 :host(.label-floating.textarea-fill-solid) .label-text-wrapper {
@@ -1135,7 +1026,7 @@
  * }
  */
 :host(.textarea-fill-outline) {
-  --border-color: var(--ion-color-step-300, #b3b3b3);
+  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1163,7 +1054,7 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1172,7 +1063,7 @@
  * the textarea is focused.
  */
 :host(.textarea-fill-outline.has-focus) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
@@ -1332,10 +1223,10 @@
 }
 
 :host(.textarea-fill-outline) .textarea-outline-start {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: var(--border-radius);
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: var(--border-radius);
   -webkit-border-start: var(--border-width) var(--border-style) var(--border-color);
   border-inline-start: var(--border-width) var(--border-style) var(--border-color);
   /**
@@ -1348,50 +1239,20 @@
    */
   width: calc(var(--padding-start) - 4px);
 }
-:host-context([dir=rtl]):host(.textarea-fill-outline) .textarea-outline-start, :host-context([dir=rtl]).textarea-fill-outline .textarea-outline-start {
-  border-top-left-radius: 0px;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-start {
-    border-top-left-radius: 0px;
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
-    border-bottom-left-radius: 0px;
-  }
-}
 
 :host(.textarea-fill-outline) .textarea-outline-end {
   -webkit-border-end: var(--border-width) var(--border-style) var(--border-color);
   border-inline-end: var(--border-width) var(--border-style) var(--border-color);
-  border-top-left-radius: 0px;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: 0px;
+  border-start-start-radius: 0px;
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: var(--border-radius);
+  border-end-start-radius: 0px;
   /**
    * The ending outline fragment
    * should take up the remaining free space.
    */
   flex-grow: 1;
 }
-:host-context([dir=rtl]):host(.textarea-fill-outline) .textarea-outline-end, :host-context([dir=rtl]).textarea-fill-outline .textarea-outline-end {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: var(--border-radius);
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-end {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: var(--border-radius);
-  }
-}
 
 /**
  * When the textarea either has focus or a value,
@@ -1405,32 +1266,15 @@
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --padding-top: 18px;
   --padding-end: 0px;
   --padding-bottom: 8px;
   --padding-start: 0px;
+  --highlight-height: 2px;
   font-size: inherit;
 }
 
-:host(.legacy-textarea) {
-  --padding-top: 10px;
-  --padding-end: 0;
-  --padding-bottom: 11px;
-  --padding-start: 8px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 8px;
-  margin-bottom: 0;
-}
-
-:host-context(.item-label-stacked),
-:host-context(.item-label-floating) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-}
-
 .textarea-bottom .counter {
   letter-spacing: 0.0333333333em;
 }
@@ -1452,7 +1296,6 @@
   color: var(--highlight-color);
 }
 
-:host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.38;
 }
@@ -1461,37 +1304,13 @@
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
   transform: scale(0);
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-@supports (inset-inline-start: 0) {
-  .textarea-highlight {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .textarea-highlight {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .textarea-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .textarea-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .textarea-highlight:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.textarea-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.has-focus) .textarea-highlight {
@@ -1506,27 +1325,8 @@
 :host(.in-item) .textarea-highlight {
   bottom: 0;
 }
-@supports (inset-inline-start: 0) {
-  :host(.in-item) .textarea-highlight {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.in-item) .textarea-highlight {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.in-item) .textarea-highlight, :host-context([dir=rtl]).in-item .textarea-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.in-item:dir(rtl)) .textarea-highlight {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host(.in-item) .textarea-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.textarea-shape-round) {

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode(this) }, h("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
+        return (h(Host, { key: '85a0eb73f012ab18ad8b03e63aca9488dd11a4d7', class: getIonMode(this) }, h("slot", { key: 'a335c711d1987615cfcc953958edc0d63fbccca2' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }