@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790116791.11c9cd1e

package/dist/collection/components/select-modal/select-modal.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { config } from "../../global/config";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
 import { safeCall } from "../../utils/overlays";
@@ -65,14 +65,16 @@ export class SelectModal {
             option.checked = ev.detail.checked;
         }
     }
-    get cancelButtonIcon() {
+    /**
+     * Get the icon to use for the cancel icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get selectModalCancelIcon() {
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const icons = {
-            ios: closeOutline,
-            md: closeSharp,
-            ionic: xRegular,
-        };
-        return icons[theme];
+        const defaultIcon = theme === 'ios' ? closeOutline : closeSharp;
+        return config.get('selectModalCancelIcon', defaultIcon);
     }
     getModalContextClasses() {
         const el = this.el;
@@ -166,10 +168,10 @@ export class SelectModal {
         });
     }
     render() {
-        return (h(Host, { key: '42d29e9c9a0b34243014e2d573349720ef42d0f4', class: {
+        return (h(Host, { key: '4f80b69495a5fdcc4d99f72aa035264e1d283012', class: {
                 [getIonMode(this)]: true,
                 ...this.getModalContextClasses(),
-            } }, h("ion-header", { key: '7fdccbdbb2df084cc6f46e0bc670420994876c23' }, h("ion-toolbar", { key: '43aec16af281bd7b8da6472793fd66f4d7e2c062' }, this.header !== undefined && h("ion-title", { key: '7abe8c10fe6bfd8ead09dfc12e1317055096e010' }, this.header), h("ion-buttons", { key: '3d5e1847487bdbf78165b97df063258ef96c93bd', slot: "end" }, h("ion-button", { key: '004fff6115dbeabcc6090fe35b5d4006fb96ec34', "aria-label": this.cancelIcon ? this.cancelText : undefined, "data-focus-order": "2", onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), h("ion-content", { key: 'dede04ba473ff70e60320d1ed0313c15f7707e4f' }, h("ion-list", { key: '2064751ebacd1599ec097e43cd8b982ac8ce3b54' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+            } }, h("ion-header", { key: '59fd93f200eeed35e411bc12d1355747d6d3b003' }, h("ion-toolbar", { key: 'd443f633558101e8623c3d7aeab62b5a8dbaaea5' }, this.header !== undefined && h("ion-title", { key: '5038f4d67ec9ce335c9a543e209dc1e5e669f802' }, this.header), h("ion-buttons", { key: '047fd2497d20324433ca175441d60cf17095dadb', slot: "end" }, h("ion-button", { key: '0058eee326e1540c969decd9b8a9baa5b307dfde', "aria-label": this.cancelIcon ? this.cancelText : undefined, "data-focus-order": "2", onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.selectModalCancelIcon })) : (this.cancelText))))), h("ion-content", { key: '1cde46ff794118bf086735289b83d6354ee4bc99' }, h("ion-list", { key: '19e238faabd981565590723323fa8442a77eb8b4' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-popover/select-popover.ionic.css

@@ -74,19 +74,18 @@
 }
 
 .select-option-description {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
   -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
   padding-top: var(--token-space-0, var(--token-scale-0, 0px));
   padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
   font-size: var(--token-font-size-350, 0.875rem);
 }
 
@@ -214,15 +213,15 @@ ion-item {
   --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
   --background-focused: transparent;
   --background-focused-opacity: 1;
-  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-hover-opacity: 1;
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-activated-opacity: 1;
 }
 
 ion-item.ion-focused.item-checkbox-checked,
 ion-item.ion-focused.item-radio-checked {
-  --background-focused: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  --background-focused: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));
   --background-focused-opacity: 1;
 }
 
@@ -241,15 +240,14 @@ ion-list ion-radio::part(label) {
 
 ion-list ion-radio::part(label),
 ion-list ion-checkbox::part(label) {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 .item-radio-checked,
 .item-checkbox-checked {
-  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));
 }

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

@@ -250,13 +250,13 @@ svg {
   }
 }
 :host {
-  --color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--token-primitives-neutral-800, #6c727a);
   width: var(--token-scale-700, 28px);
   height: var(--token-scale-700, 28px);
 }
 
 :host(.ion-color-medium) {
-  color: var(--ion-color-medium-subtle-contrast, var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262)));
+  color: var(--ion-color-medium-subtle-contrast, var(--token-primitives-neutral-900, #575c63));
 }
 
 :host(.spinner-lines) line,

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

@@ -129,11 +129,11 @@
 }
 :host {
   --background: var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));
-  --background-activated: var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));
+  --background-activated: var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))));
   --background-focused: var(--ion-tab-bar-background-focused, transparent);
-  --border: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
-  --color: var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --border: var(--token-border-size-0, var(--token-scale-0, 0px)) solid var(--ion-tab-bar-border-color, transparent);
+  --color: var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #6c727a));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
   /*
    * In case there's scrolling, justify the content to the start.
    */
@@ -154,7 +154,7 @@
    */
   min-height: calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);
   gap: var(--token-space-300, var(--token-scale-300, 12px));
-  box-shadow: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
+  box-shadow: var(--token-elevation-2, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-8, 8px) var(--token-shadow-blur-25, 25px) var(--token-shadow-spread-0, 0px) var(--token-shadow-4, rgba(0, 0, 0, 0.0784313725)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-1, 1px) var(--token-shadow-blur-5, 5px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.0509803922)));
   /*
    * In case there are more tab buttons than can fit in the tab bar, enable
    * horizontal scrolling.
@@ -210,7 +210,7 @@
 
 :host(.tab-bar-compact.tab-bar-scroll-hidden) {
   transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0) + var(--token-space-1000, var(--token-scale-1000, 40px)))) translateX(-50%);
-  transition: transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
+  transition: transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
 }
 
 :host([slot=top].tab-bar-compact.tab-bar-scroll-hidden) {

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

@@ -194,14 +194,13 @@ ion-ripple-effect {
 }
 
 :host {
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --focus-ring-width: var(--token-border-radius-025, var(--token-scale-050, 2px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-1, 1%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   position: relative;
   align-content: center;
   min-width: var(--token-scale-1200, 48px);

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

@@ -453,10 +453,6 @@
   overflow: hidden;
 }
 
-.textarea-outline {
-  box-sizing: border-box;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -559,33 +555,7 @@
 
 :host(.textarea-fill-outline) {
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
-}
-
-:host(.textarea-fill-outline) .textarea-wrapper {
-  background: initial;
-}
-
-:host(.textarea-fill-outline) .textarea-wrapper-inner {
-  /**
-   * The border should be relative to the inner wrapper
-   * so that it does not include the label.
-   */
-  position: relative;
-}
-
-:host(.textarea-fill-outline) .textarea-outline {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: var(--border-radius);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--border-width) var(--border-style) var(--border-color);
-  background: var(--background);
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 /**
@@ -602,26 +572,14 @@
 }
 
 :host(.textarea-fill-outline.textarea-readonly) {
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
 }
 
 :host(.textarea-fill-solid) {
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
-}
-
-:host(.textarea-fill-solid) .textarea-wrapper {
-  border-bottom: none;
-  background: none;
-}
-
-:host(.textarea-fill-solid) .textarea-wrapper-inner {
-  border-radius: var(--border-radius);
-  position: relative;
-  border: var(--border-width) var(--border-style) var(--border-color);
-  background: var(--background);
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.textarea-fill-solid) .textarea-bottom {
@@ -629,7 +587,7 @@
 }
 
 :host(.textarea-fill-solid.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
 }
 
 :host(.textarea-fill-solid.has-focus.ion-valid),
@@ -639,56 +597,65 @@
 }
 
 :host(.textarea-fill-solid.textarea-readonly) {
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.textarea-fill-solid.textarea-readonly.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.textarea-fill-solid.textarea-disabled) {
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host {
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));
-  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #037046)));
+  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b));
   --highlight-color-focused: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
-  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
   --placeholder-opacity: 1;
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
 }
 
-:host(.textarea-size-small) .textarea-wrapper-inner {
+/**
+ * The size padding is scoped to the field cells rather than to the wrapper, so
+ * the label, which sits outside the field box, does not inherit it.
+ */
+:host(.textarea-size-small) .textarea-start,
+:host(.textarea-size-small) .native-wrapper,
+:host(.textarea-size-small) .textarea-end {
   --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
 }
 
-:host(.textarea-size-medium) .textarea-wrapper-inner {
+:host(.textarea-size-medium) .textarea-start,
+:host(.textarea-size-medium) .native-wrapper,
+:host(.textarea-size-medium) .textarea-end {
   --padding-top: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
-:host(.textarea-size-large) .textarea-wrapper-inner {
+:host(.textarea-size-large) .textarea-start,
+:host(.textarea-size-large) .native-wrapper,
+:host(.textarea-size-large) .textarea-end {
   --padding-top: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
   --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
@@ -703,19 +670,15 @@
 }
 
 :host(.textarea-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-xl, 12px);
 }
 
 :host(.textarea-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--token-shape-round-xl, 16px);
 }
 
 :host(.textarea-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
-}
-
-:host([auto-grow]) .textarea-wrapper-inner {
-  height: auto;
+  --border-radius: var(--token-shape-rectangular-xl, 0px);
 }
 
 :host([auto-grow]) .native-wrapper {
@@ -723,54 +686,153 @@
   max-height: inherit;
 }
 
+/**
+ * The label is nested in the control so that every theme renders the same
+ * tree. Laying the wrapper out as a grid and flattening the control lets the
+ * label sit outside the field box, which is drawn by `::before` over the cells
+ * the label does not occupy.
+ */
 .textarea-wrapper {
-  gap: var(--token-space-100, var(--token-scale-100, 4px));
+  display: grid;
+  /**
+   * Auto rows stretch to fill any extra height by default, which would pad the
+   * label row and pull the field box away from it.
+   */
+  align-content: start;
+  /**
+   * The wrapper spans the label too, so the background belongs on the field
+   * box rather than here.
+   */
+  background: transparent;
 }
 
-:host(.textarea-label-placement-start) .textarea-wrapper {
-  flex-direction: row;
+.textarea-control {
+  display: contents;
+}
+
+.textarea-wrapper::before {
+  border-radius: var(--border-radius, 0);
+  align-self: stretch;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+  /**
+   * The wrapper takes its min-height from the host and the pseudo-element
+   * inherits it, so a min-height on the host still reaches the box.
+   */
+  min-height: inherit;
+  border: var(--border-width) var(--border-style) var(--border-color);
+  background: var(--background);
+}
+
+:host(.textarea-label-placement-start) .textarea-wrapper,
+:host(.textarea-label-placement-fixed) .textarea-wrapper {
+  grid-template-columns: [label] auto [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];
+  grid-template-rows: [label field] auto;
+}
+
+:host(.textarea-label-placement-start) .label-text-wrapper,
+:host(.textarea-label-placement-fixed) .label-text-wrapper {
+  -webkit-margin-end: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
+  grid-column: label;
 }
 
 :host(.textarea-label-placement-end) .textarea-wrapper {
-  flex-direction: row-reverse;
+  grid-template-columns: [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end label] auto;
+  grid-template-rows: [label field] auto;
+}
+
+:host(.textarea-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
+  grid-column: label;
 }
 
 :host(.textarea-label-placement-stacked) .textarea-wrapper,
 :host(.textarea-label-placement-floating) .textarea-wrapper {
-  flex-direction: column;
-  align-items: start;
+  grid-template-columns: [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];
+  grid-template-rows: [label] auto [field] auto;
+}
+
+:host(.textarea-label-placement-stacked) .label-text-wrapper,
+:host(.textarea-label-placement-floating) .label-text-wrapper {
+  margin-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  grid-column: field-start/field-end;
+}
+
+/**
+ * The templates above all name the same lines, so every placement shares these.
+ * A label with its own row lands on the label row. Otherwise that name resolves
+ * to the only row there is.
+ */
+.label-text-wrapper {
+  grid-row: label;
+}
+
+.textarea-start {
+  grid-row: field;
+  grid-column: slot-start;
 }
 
-.textarea-wrapper-inner {
+.native-wrapper {
+  grid-row: field;
+  grid-column: native;
+}
+
+.textarea-end {
+  grid-row: field;
+  grid-column: slot-end;
+}
+
+.textarea-wrapper::before {
+  grid-row: field;
+  grid-column: field-start/field-end;
+}
+
+/**
+ * The padding sits on the cells that the field box covers, so the label is not
+ * indented by it.
+ */
+.textarea-start {
   -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);
-  display: flex;
-  width: 100%;
-  min-height: inherit;
-  box-sizing: border-box;
 }
 
-:host([rows]:not([auto-grow])) .textarea-wrapper-inner {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
+/**
+ * The native wrapper's own content sizes the field row, and it stretches to
+ * fill it. The shared stylesheet sets `height: 100%`, which would resolve
+ * against the row this element is itself sizing, so reset it here.
+ */
+.native-wrapper {
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  align-self: stretch;
+  height: auto;
+}
+
+.textarea-end {
   -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])) .native-wrapper {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 /**
- * 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 
+ * 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.
  */
-:host([rows]:not([auto-grow])) .textarea-wrapper-inner .native-textarea {
+:host([rows]:not([auto-grow])) .native-wrapper .native-textarea {
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
 }
@@ -799,21 +861,20 @@
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   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;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
 }
 
 .textarea-bottom .error-text {
-  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
+  color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
 }
 
 .textarea-bottom .helper-text,
 .textarea-bottom .counter {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -821,19 +882,18 @@
 }
 
 .label-text-wrapper {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   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;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   padding-left: 0;
   padding-right: 0;
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
   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));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -881,23 +941,8 @@ ion-icon {
   margin-top: var(--token-space-050, var(--token-scale-050, 2px));
 }
 
-:host([rows]:not([auto-grow])) .textarea-start,
-:host([rows]:not([auto-grow])) .textarea-end {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-}
-
-.textarea-control {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
@@ -907,28 +952,28 @@ ion-icon {
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+    --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   }
 }
 :host(.textarea-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
+  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
 :host(.textarea-disabled) .textarea-bottom .counter,
 :host(.textarea-disabled) .label-text-wrapper {
-  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.textarea-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
+  --border-color: rgba(var(--token-semantics-success-base-rgb, 74, 174, 131), 0.6);
 }
 
 :host(.textarea-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.textarea-disabled.ion-color) {
@@ -941,5 +986,5 @@ ion-icon {
 }
 
 :host(.textarea-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
+  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f6f7fa));
 }