@ionic/core 7.7.4 → 8.0.0-beta.1

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

@@ -301,38 +301,14 @@ ion-ripple-effect {
   font-size: 12px;
   line-height: 16px;
 }
-@supports (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 6px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    left: calc(50% + 6px);
-  }
-  :host-context([dir=rtl]) ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  [dir=rtl] ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  @supports selector(:dir(rtl)) {
-    ::slotted(ion-badge):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 6px);
-    }
-  }
+::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 6px);
 }
 
 ::slotted(ion-icon) {
   margin-top: 2px;
   margin-bottom: 2px;
-  font-size: 30px;
+  font-size: 24px;
 }
 
 ::slotted(ion-icon::before) {
@@ -374,27 +350,8 @@ ion-ripple-effect {
   font-size: 24px;
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 12px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    left: calc(50% + 12px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 12px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 12px);
-    }
-  }
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 12px);
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -410,58 +367,18 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 10px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 35px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    left: calc(50% + 35px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 35px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 35px);
-    }
-  }
+:host(.tab-layout-icon-start) ::slotted(ion-badge),
+:host(.tab-layout-icon-end) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 35px);
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-badge),
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 10px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 30px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    left: calc(50% + 30px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 30px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 30px);
-    }
-  }
+:host(.tab-layout-icon-hide) ::slotted(ion-badge),
+:host(.tab-has-label-only) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 30px);
 }
 
 :host(.tab-layout-label-hide) ::slotted(ion-badge),
@@ -474,4 +391,9 @@ ion-ripple-effect {
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+}
+
+:host(.tab-layout-label-hide) ::slotted(ion-icon),
+:host(.tab-has-icon-only) ::slotted(ion-icon) {
+  font-size: 30px;
 }

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

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'b37743b20b93c27ffb0094b35545292533f9d30f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '4b3ace749583a5502e94462f9a70c5158fe0194a' }, 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: 'a2a30c02fbd5052da12586a5ab00a45f3bf53b88', class: "button-inner" }, h("slot", { key: '3fb22ffbb09000d99537b531220c029330ae6940' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '7dd2b3aaa96f64a8b7411730ed8b201466a97162' }, 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: 'cb328541793b6aa469d5d3bff662d2efa56dc977', class: "button-inner" }, h("slot", { key: '904a1b063f481ac86d5bea967a375addc9c96471' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -334,32 +334,8 @@ ion-ripple-effect {
   font-size: 8px;
   font-weight: normal;
 }
-@supports (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 6px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    left: calc(50% + 6px);
-  }
-  :host-context([dir=rtl]) ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  [dir=rtl] ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  @supports selector(:dir(rtl)) {
-    ::slotted(ion-badge):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 6px);
-    }
-  }
+::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 6px);
 }
 
 ::slotted(ion-badge:empty) {
@@ -381,27 +357,8 @@ ion-ripple-effect {
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
   top: 8px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    inset-inline-start: 70%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    left: 70%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 70%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 70%;
-    }
-  }
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+  inset-inline-start: 70%;
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -418,29 +375,9 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 16px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    inset-inline-start: 80%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    left: 80%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 80%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 80%;
-    }
-  }
+:host(.tab-layout-icon-start) ::slotted(ion-badge),
+:host(.tab-layout-icon-end) ::slotted(ion-badge) {
+  inset-inline-start: 80%;
 }
 
 :host(.tab-layout-icon-start) ::slotted(ion-icon) {
@@ -457,29 +394,9 @@ ion-ripple-effect {
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 16px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    inset-inline-start: 70%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    left: 70%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 70%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 70%;
-    }
-  }
+:host(.tab-layout-icon-hide) ::slotted(ion-badge),
+:host(.tab-has-label-only) ::slotted(ion-badge) {
+  inset-inline-start: 70%;
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-label),

package/dist/collection/components/tabs/tabs.js

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '9044f05f4716fd9c158864175290dfb044e63539', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '178492f52f15a042e47531007a3564a935847818', name: "top" }), h("div", { key: 'b3affaaeb7752194acde36d9de74dbe2b3280cd1', class: "tabs-inner" }, h("slot", { key: '98f0f4e2903f1a6cec041e06b75073c57960a912' })), h("slot", { key: '0899482561bdaf35e97e5a40860c40978daca03a', name: "bottom" })));
+        return (h(Host, { key: 'e2cac6a2e54514f31cfe65692e34e88d530b204f', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '53bc64f37aebb9a68c6e2db2c89ec6d39cd64bbd', name: "top" }), h("div", { key: '72f4f0ae53518631d6c1b6276da3f63147c28cfc', class: "tabs-inner" }, h("slot", { key: '79f1eece652cf00a3dd8359b68e68059816ff704' })), h("slot", { key: '3fbaf52447720ee14c7db06f2bf71a92093847f4', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses(this.color, {
+        return (h(Host, { key: '9b5decc6dfca4fbaf0fe42696a9833ffee269a7d', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
+            }) }, h("slot", { key: '5b822dcc0f6255819cec7626d0c0f7f9873aaab9' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/test/a11y/textarea.e2e.js

@@ -4,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/textarea/test/a11y`, config);
+        test('default layout should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-textarea label="Label" placeholder="Placeholder"></ion-textarea>
+          <ion-textarea placeholder="Placeholder">
+            <div slot="label">Label"></div>
+          </ion-textarea>
+          <ion-textarea label="Label" value="My Text"></ion-textarea>
+          <ion-textarea aria-label="Label"></ion-textarea>
+          <ion-textarea label="Email" label-placement="floating" fill="solid" value="hi@ionic.io">
+            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+            <ion-button slot="end" aria-label="button">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
+          </ion-textarea>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('focused state should not have accessibility violations', async ({ page }) => {
+            /**
+             * The primary color against the focus background
+             * when using fill="solid" does not meet AA
+             * contrast guidelines so it excluded from the test.
+             * The contrast here is a significant improvement
+             * over what Ionic has had in the past, so the team
+             * has decided that this tradeoff is acceptable since
+             * the scope of the problem is limited to the focus
+             * state with the primary color when fill="solid".
+             */
+            await page.setContent(`
+        <main>
+          <ion-textarea class="has-focus" label="Label" value="My Text"></ion-textarea>
+          <ion-textarea class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-textarea>
+          <ion-textarea class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-textarea>
+        </main>
+      `, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('textarea: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/textarea/test/item/textarea.e2e.js

@@ -41,3 +41,24 @@ configs().forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('textarea: item functionality'), () => {
+        test('clicking padded space within item should focus the textarea', async ({ page }) => {
+            await page.setContent(`
+        <ion-item>
+          <ion-textarea label="Textarea"></ion-textarea>
+        </ion-item>
+      `, config);
+            const itemNative = page.locator('.item-native');
+            const textarea = page.locator('ion-textarea textarea');
+            // Clicks the padded space within the item
+            await itemNative.click({
+                position: {
+                    x: 5,
+                    y: 5,
+                },
+            });
+            await expect(textarea).toBeFocused();
+        });
+    });
+});

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

@@ -84,16 +84,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 +104,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 +141,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;
@@ -221,21 +204,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 +220,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 +239,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%;
 }
@@ -374,8 +294,7 @@
   padding-bottom: var(--padding-bottom);
 }
 
-.native-wrapper,
-.textarea-legacy-wrapper {
+.native-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
@@ -390,8 +309,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 +408,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 +427,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;
 }
@@ -941,7 +859,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --padding-top: 10px;
   --padding-end: 0px;
   --padding-bottom: 8px;
@@ -949,13 +867,6 @@
   font-size: inherit;
 }
 
-:host(.legacy-textarea) {
-  --padding-top: 10px;
-  --padding-end: 8px;
-  --padding-bottom: 10px;
-  --padding-start: 0;
-}
-
 :host-context(.item-label-stacked),
 :host-context(.item-label-floating) {
   --padding-top: 8px;
@@ -963,7 +874,6 @@
   --padding-start: 0px;
 }
 
-:host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
 }