@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

package/dist/esm/ion-textarea.entry.js

@@ -1,19 +1,21 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, i as forceUpdate, w as writeTask, h, d as Host } from './index-ChhhtsGZ.js';
-import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-DiE_C9un.js';
-import { c as checkInvalidState } from './validity-DJztqcrH.js';
-import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-CAGf8Wgp.js';
-import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
-import { g as getCounterText } from './input.utils-B1ValN_N.js';
-import './index-ZjP4CjeZ.js';
-import './dir-Dojwmvde.js';
+import { r as registerInstance, c as createEvent, i as forceUpdate, w as writeTask, h, d as Host, g as getElement } from './index-C0EQceqV.js';
+import { c as createNotchController } from './notch-controller-BYB7mUMg.js';
+import { c as checkInvalidState, r as reportValidityToElementInternals } from './validity-BjW8SOqw.js';
+import { d as debounceEvent, i as inheritAriaAttributes, b as inheritAttributes, c as componentOnReady } from './helpers-ChPZH7zh.js';
+import { c as createSlotMutationController, g as getCounterText } from './input.utils-DhJNJPiU.js';
+import { h as hostContext, c as createColorClasses } from './theme-DaJxRxSQ.js';
+import { c as getIonTheme } from './ionic-global-BJDU78B6.js';
+import './focus-visible-vXpMhGrs.js';
+import './dir-o8OKV5aD.js';
 
-const textareaIosCss = () => `.sc-ion-textarea-ios-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}[cols].sc-ion-textarea-ios-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-ios-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-ios-h,ion-item .sc-ion-textarea-ios-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-ios-h,ion-item [slot=start].sc-ion-textarea-ios-h,ion-item[slot=end].sc-ion-textarea-ios-h,ion-item [slot=end].sc-ion-textarea-ios-h{width:auto}.native-textarea.sc-ion-textarea-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-ios::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-ios{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-textarea-ios:disabled{opacity:1}[auto-grow].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{height:100%}[auto-grow].sc-ion-textarea-ios-h .native-textarea.sc-ion-textarea-ios{overflow:hidden}.textarea-wrapper.sc-ion-textarea-ios{-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:0;padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.textarea-control.sc-ion-textarea-ios{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:start;-ms-flex-item-align:stretch;align-self:stretch;width:100%;min-width:0}.native-wrapper.sc-ion-textarea-ios{position:relative;width:100%;height:100%}.textarea-label-placement-start.sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios,.textarea-label-placement-end.sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios,.textarea-label-placement-fixed.sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios{-ms-flex:1 1 0px;flex:1 1 0}.has-focus.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-ios{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-ios::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper.sc-ion-textarea-ios::after{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.ion-touched.ion-invalid.sc-ion-textarea-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-ios-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-ios{-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:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-textarea-ios-h,.ion-touched.ion-invalid.sc-ion-textarea-ios-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-ios .error-text.sc-ion-textarea-ios{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-ios .helper-text.sc-ion-textarea-ios{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-textarea-ios-h .textarea-bottom.sc-ion-textarea-ios .error-text.sc-ion-textarea-ios{display:block}.ion-touched.ion-invalid.sc-ion-textarea-ios-h .textarea-bottom.sc-ion-textarea-ios .helper-text.sc-ion-textarea-ios{display:none}.textarea-bottom.sc-ion-textarea-ios .counter.sc-ion-textarea-ios{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.label-text-wrapper.sc-ion-textarea-ios{min-width:0;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transition:none;transition:none}.label-text.sc-ion-textarea-ios,.sc-ion-textarea-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-ios,.textarea-outline-notch-hidden.sc-ion-textarea-ios{display:none}.textarea-wrapper.sc-ion-textarea-ios textarea.sc-ion-textarea-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-ios-h .textarea-control.sc-ion-textarea-ios{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-start.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-end.sc-ion-textarea-ios-h .textarea-control.sc-ion-textarea-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-end.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-ios-h .label-text.sc-ion-textarea-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-ios-h,.textarea-label-placement-floating.sc-ion-textarea-ios-h{--padding-top:20px;--padding-bottom:6px}.textarea-label-placement-stacked.sc-ion-textarea-ios-h .textarea-control.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h .textarea-control.sc-ion-textarea-ios{padding-top:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:left top;transform-origin:left top;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-ios-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.has-value.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{opacity:1}.label-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.textarea-start.sc-ion-textarea-ios,.textarea-end.sc-ion-textarea-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-s>[slot=end]{margin-top:var(--padding-top)}.sc-ion-textarea-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-textarea-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-textarea-ios-h{--border-width:0.55px;--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;--padding-start:0px;--highlight-height:0px;font-size:inherit}.textarea-label-placement-floating.sc-ion-textarea-ios-h,.textarea-label-placement-stacked.sc-ion-textarea-ios-h{min-height:56px}.textarea-disabled.sc-ion-textarea-ios-h{opacity:0.3}.sc-ion-textarea-ios-s>ion-button[slot=start],.sc-ion-textarea-ios-s>ion-button[slot=end]{margin-top:2px}.sc-ion-textarea-ios-h.textarea-label-placement-floating.sc-ion-textarea-ios-s>ion-button[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-floating .sc-ion-textarea-ios-s>ion-button[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-floating.sc-ion-textarea-ios-s>ion-button[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-floating .sc-ion-textarea-ios-s>ion-button[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-stacked.sc-ion-textarea-ios-s>ion-button[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-stacked .sc-ion-textarea-ios-s>ion-button[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-stacked.sc-ion-textarea-ios-s>ion-button[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-stacked .sc-ion-textarea-ios-s>ion-button[slot=end]{margin-top:10px}.sc-ion-textarea-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-textarea-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
+const textareaIonicCss = () => `:host{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0;--padding-end:0;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}:host([cols]:not([auto-grow])){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host(.ion-color){background:initial}:host(.in-item){-ms-flex-item-align:baseline;align-self:baseline}:host(.in-item[slot=start]),:host(.in-item[slot=end]){width:auto}.native-textarea{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input:disabled{opacity:1}:host([auto-grow]) .cloned-input{height:100%}:host([auto-grow]) .native-textarea{overflow:hidden}.textarea-wrapper{-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:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper{position:relative;width:100%;height:100%}:host(.has-focus) textarea{caret-color:var(--highlight-color)}.native-wrapper{display:grid;min-width:inherit;max-width:inherit;grid-auto-rows:100%}.native-wrapper::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner{display:-ms-flexbox;display:flex;width:100%;min-height:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.textarea-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.textarea-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.textarea-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .textarea-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .textarea-bottom .helper-text{display:none}.textarea-bottom .counter{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.label-text-wrapper{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.textarea-outline{-webkit-box-sizing:border-box;box-sizing:border-box}.label-text-wrapper-hidden,.textarea-outline-notch-hidden{display:none}:host(.textarea-label-placement-start) .textarea-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.textarea-label-placement-end) .textarea-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.textarea-label-placement-stacked) .textarea-wrapper,:host(.textarea-label-placement-floating) .textarea-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.textarea-label-placement-stacked) .label-text-wrapper,:host(.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}:host-context([dir=rtl]):host(.textarea-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).textarea-label-placement-stacked .label-text-wrapper,:host-context([dir=rtl]):host(.textarea-label-placement-floating) .label-text-wrapper,:host-context([dir=rtl]).textarea-label-placement-floating .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper,:host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.textarea-label-placement-floating) textarea{opacity:0}:host(.has-focus.textarea-label-placement-floating) textarea,:host(.has-value.textarea-label-placement-floating) textarea{opacity:1}.start-slot-wrapper,.end-slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}: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{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)}:host(.textarea-fill-outline) .textarea-bottom{border-top:none}:host(.textarea-fill-outline.has-focus.ion-valid),:host(.textarea-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.textarea-fill-outline.textarea-readonly){--border-color:var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));--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-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)}:host(.textarea-fill-solid) .textarea-bottom{--border-width:var(--token-scale-0, 0px)}:host(.textarea-fill-solid.has-focus){--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}:host(.textarea-fill-solid.has-focus.ion-valid),:host(.textarea-fill-solid.ion-touched.ion-invalid){--border-width:var(--token-border-size-050, var(--token-scale-050, 2px));--border-color:var(--highlight-color)}: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))}:host(.textarea-fill-solid.textarea-readonly.ion-invalid){--border-color:rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 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))}: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));--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-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-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}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}: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));--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{--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{--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));--padding-start:var(--token-space-500, var(--token-scale-500, 20px))}:host .native-wrapper::after{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.textarea-shape-soft){--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.textarea-shape-round){--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 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}: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);padding-inline-end:var(--padding-end);padding-top:0;padding-bottom:0}:host([rows]:not([auto-grow])) .textarea-wrapper-inner .native-textarea{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-width:var(--token-border-size-025, var(--token-scale-025, 1px))}.textarea-highlight{bottom:-1px;position:absolute;width:100%;height:var(--token-border-size-050, var(--token-scale-050, 2px));-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform var(--token-transition-time-200, 200ms);transition:-webkit-transform var(--token-transition-time-200, 200ms);transition:transform var(--token-transition-time-200, 200ms);transition:transform var(--token-transition-time-200, 200ms), -webkit-transform var(--token-transition-time-200, 200ms);background:var(--border-color)}.textarea-highlight{inset-inline-start:0}.textarea-bottom{-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(--token-space-100, var(--token-scale-100, 4px));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}.textarea-bottom .error-text{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.textarea-bottom .helper-text,.textarea-bottom .counter{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}:host(.has-focus.ion-valid) .helper-text{color:var(--highlight-color-valid)}.label-text-wrapper{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;max-width:var(--token-scale-5000, 200px);-webkit-transition:color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), -webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));transition:color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), -webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));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));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)), -webkit-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{-webkit-transform:none;transform:none}:host(.label-floating) .label-text-wrapper{max-width:calc(100% / 0.75)}.textarea-wrapper textarea{-webkit-transition:opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));transition:opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1))}:host(.textarea-label-placement-fixed) .label-text{-ms-flex:0 0 calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));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){--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--border-width:var(--token-border-size-050, var(--token-scale-050, 2px))}:host(.has-focus) .textarea-highlight{-webkit-transform:scale(1);transform:scale(1)}@media (any-hover: hover){:host(:hover){--border-color:var(--token-border-focus-default, 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))}: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))}:host(.textarea-disabled.has-focus.ion-valid){--border-color:rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6)}:host(.textarea-disabled.ion-touched.ion-invalid){--border-color:rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6)}:host(.textarea-disabled.ion-color){--border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.textarea-disabled.has-focus.ion-valid) .textarea-bottom .helper-text,:host(.textarea-disabled.ion-touched.ion-invalid) .error-text{opacity:0.6}:host(.textarea-readonly){--background:var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3))}`;
 
-const textareaMdCss = () => `.sc-ion-textarea-md-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}[cols].sc-ion-textarea-md-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-md-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-md-h,ion-item .sc-ion-textarea-md-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-md-h,ion-item [slot=start].sc-ion-textarea-md-h,ion-item[slot=end].sc-ion-textarea-md-h,ion-item [slot=end].sc-ion-textarea-md-h{width:auto}.native-textarea.sc-ion-textarea-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-md::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-md{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-md{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-textarea-md:disabled{opacity:1}[auto-grow].sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md{height:100%}[auto-grow].sc-ion-textarea-md-h .native-textarea.sc-ion-textarea-md{overflow:hidden}.textarea-wrapper.sc-ion-textarea-md{-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:0;padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.textarea-control.sc-ion-textarea-md{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:start;-ms-flex-item-align:stretch;align-self:stretch;width:100%;min-width:0}.native-wrapper.sc-ion-textarea-md{position:relative;width:100%;height:100%}.textarea-label-placement-start.sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md,.textarea-label-placement-end.sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md,.textarea-label-placement-fixed.sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md{-ms-flex:1 1 0px;flex:1 1 0}.has-focus.sc-ion-textarea-md-h textarea.sc-ion-textarea-md{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-md{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-md::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper.sc-ion-textarea-md::after{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.ion-touched.ion-invalid.sc-ion-textarea-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-md-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-md{-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:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-textarea-md-h,.ion-touched.ion-invalid.sc-ion-textarea-md-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-md .error-text.sc-ion-textarea-md{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-md .helper-text.sc-ion-textarea-md{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md .error-text.sc-ion-textarea-md{display:block}.ion-touched.ion-invalid.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md .helper-text.sc-ion-textarea-md{display:none}.textarea-bottom.sc-ion-textarea-md .counter.sc-ion-textarea-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.label-text-wrapper.sc-ion-textarea-md{min-width:0;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transition:none;transition:none}.label-text.sc-ion-textarea-md,.sc-ion-textarea-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-md,.textarea-outline-notch-hidden.sc-ion-textarea-md{display:none}.textarea-wrapper.sc-ion-textarea-md textarea.sc-ion-textarea-md{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-md-h .textarea-control.sc-ion-textarea-md{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-start.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-end.sc-ion-textarea-md-h .textarea-control.sc-ion-textarea-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-end.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-md-h .label-text.sc-ion-textarea-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-md-h,.textarea-label-placement-floating.sc-ion-textarea-md-h{--padding-top:20px;--padding-bottom:6px}.textarea-label-placement-stacked.sc-ion-textarea-md-h .textarea-control.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h .textarea-control.sc-ion-textarea-md{padding-top:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:left top;transform-origin:left top;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.has-value.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md{opacity:1}.label-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.textarea-start.sc-ion-textarea-md,.textarea-end.sc-ion-textarea-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.sc-ion-textarea-md-s>[slot=start],.sc-ion-textarea-md-s>[slot=end]{margin-top:var(--padding-top)}.sc-ion-textarea-md-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-textarea-md-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.textarea-fill-solid.sc-ion-textarea-md-h{--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}.textarea-fill-solid.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.textarea-fill-solid.ion-valid.sc-ion-textarea-md-h,.textarea-fill-solid.ion-touched.ion-invalid.sc-ion-textarea-md-h{--border-color:var(--highlight-color)}.textarea-fill-solid.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md{border-top:none}@media (any-hover: hover){.textarea-fill-solid.sc-ion-textarea-md-h:hover{--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))}}.textarea-fill-solid.has-focus.sc-ion-textarea-md-h{--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))}.textarea-fill-solid.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.textarea-fill-solid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{max-width:calc(100% / 0.75)}.textarea-fill-outline.sc-ion-textarea-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;--internal-start-container-adjustment:0px}.textarea-fill-outline.textarea-shape-round.sc-ion-textarea-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.textarea-fill-outline.ion-valid.sc-ion-textarea-md-h,.textarea-fill-outline.ion-touched.ion-invalid.sc-ion-textarea-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.textarea-fill-outline.sc-ion-textarea-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.textarea-fill-outline.has-focus.sc-ion-textarea-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-bottom.sc-ion-textarea-md{border-top:none}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-wrapper.sc-ion-textarea-md{border-bottom:none}.textarea-fill-outline.sc-ion-textarea-md-h:not(.label-floating) .textarea-control.sc-ion-textarea-md{position:relative}.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:100%}[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h -no-combinator.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl].textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,[dir=rtl] .textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-md{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-fill-outline.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{position:relative}.label-floating.textarea-fill-outline.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{-webkit-transform:translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);transform:translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc(     (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75   )}.textarea-fill-outline.textarea-label-placement-stacked.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-floating.sc-ion-textarea-md-h textarea.sc-ion-textarea-md,.textarea-fill-outline.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after,.textarea-fill-outline.textarea-label-placement-floating[auto-grow].sc-ion-textarea-md-h .native-wrapper.sc-ion-textarea-md::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:19px;margin-bottom:0px}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-container.sc-ion-textarea-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-start.sc-ion-textarea-md,.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-end.sc-ion-textarea-md{pointer-events:none}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-start.sc-ion-textarea-md,.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-notch.sc-ion-textarea-md,.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-end.sc-ion-textarea-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-notch.sc-ion-textarea-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.textarea-fill-outline.sc-ion-textarea-md-h .notch-spacer.sc-ion-textarea-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-start.sc-ion-textarea-md{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);width:calc(var(--padding-start) - 4px)}.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-end.sc-ion-textarea-md{-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-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.textarea-fill-outline.sc-ion-textarea-md-h .textarea-outline-notch.sc-ion-textarea-md{border-top:none}.sc-ion-textarea-md-h{--border-width:1px;--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;min-height:72px;font-size:inherit}.textarea-bottom.sc-ion-textarea-md .counter.sc-ion-textarea-md{letter-spacing:0.0333333333em}.textarea-label-placement-floating.has-focus.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-stacked.has-focus.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{color:var(--highlight-color)}.has-focus.textarea-label-placement-floating.ion-valid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-floating.ion-touched.ion-invalid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.has-focus.textarea-label-placement-stacked.ion-valid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md,.textarea-label-placement-stacked.ion-touched.ion-invalid.sc-ion-textarea-md-h .label-text-wrapper.sc-ion-textarea-md{color:var(--highlight-color)}.textarea-disabled.sc-ion-textarea-md-h{opacity:0.38}.textarea-highlight.sc-ion-textarea-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.textarea-highlight.sc-ion-textarea-md{inset-inline-start:0}.has-focus.sc-ion-textarea-md-h .textarea-highlight.sc-ion-textarea-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-textarea-md-h .textarea-highlight.sc-ion-textarea-md{bottom:0}.in-item.sc-ion-textarea-md-h .textarea-highlight.sc-ion-textarea-md{inset-inline-start:0}.textarea-shape-round.sc-ion-textarea-md-h{--border-radius:16px}.sc-ion-textarea-md-s>ion-button[slot=start],.sc-ion-textarea-md-s>ion-button[slot=end]{margin-top:7px}.sc-ion-textarea-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-textarea-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}`;
+const textareaIosCss = () => `:host{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0;--padding-end:0;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}:host([cols]:not([auto-grow])){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host(.ion-color){background:initial}:host(.in-item){-ms-flex-item-align:baseline;align-self:baseline}:host(.in-item[slot=start]),:host(.in-item[slot=end]){width:auto}.native-textarea{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input:disabled{opacity:1}:host([auto-grow]) .cloned-input{height:100%}:host([auto-grow]) .native-textarea{overflow:hidden}.textarea-wrapper{-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:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper{position:relative;width:100%;height:100%}:host(.has-focus) textarea{caret-color:var(--highlight-color)}.native-wrapper{display:grid;min-width:inherit;max-width:inherit;grid-auto-rows:100%}.native-wrapper::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner{display:-ms-flexbox;display:flex;width:100%;min-height:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.textarea-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.textarea-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.textarea-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .textarea-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .textarea-bottom .helper-text{display:none}.textarea-bottom .counter{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.label-text-wrapper{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.textarea-outline{-webkit-box-sizing:border-box;box-sizing:border-box}.label-text-wrapper-hidden,.textarea-outline-notch-hidden{display:none}:host(.textarea-label-placement-start) .textarea-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.textarea-label-placement-end) .textarea-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.textarea-label-placement-stacked) .textarea-wrapper,:host(.textarea-label-placement-floating) .textarea-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.textarea-label-placement-stacked) .label-text-wrapper,:host(.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}:host-context([dir=rtl]):host(.textarea-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).textarea-label-placement-stacked .label-text-wrapper,:host-context([dir=rtl]):host(.textarea-label-placement-floating) .label-text-wrapper,:host-context([dir=rtl]).textarea-label-placement-floating .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper,:host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.textarea-label-placement-floating) textarea{opacity:0}:host(.has-focus.textarea-label-placement-floating) textarea,:host(.has-value.textarea-label-placement-floating) textarea{opacity:1}.start-slot-wrapper,.end-slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}:host{--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-bottom:8px;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);min-height:44px;font-family:var(--ion-font-family, inherit);z-index:2}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.textarea-label-placement-floating),:host(.textarea-label-placement-stacked){--padding-top:0px;min-height:56px}.native-wrapper{min-height:inherit;max-height:inherit}.native-wrapper textarea{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.textarea-bottom{-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:5px;padding-bottom:0;font-size:0.75rem}.textarea-bottom .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.textarea-bottom .counter{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));-webkit-padding-start:16px;padding-inline-start:16px}:host(.textarea-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.textarea-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.textarea-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.textarea-label-placement-stacked) textarea,:host(.textarea-label-placement-floating) textarea,:host(.textarea-label-placement-stacked[auto-grow]) .native-wrapper::after,:host(.textarea-label-placement-floating[auto-grow]) .native-wrapper::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.start-slot-wrapper,.end-slot-wrapper{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}:host(.textarea-label-placement-stacked) ::slotted([slot=start]),:host(.textarea-label-placement-stacked) ::slotted([slot=end]),:host(.textarea-label-placement-floating) ::slotted([slot=start]),:host(.textarea-label-placement-floating) ::slotted([slot=end]){margin-top:8px}::slotted([slot=start]),::slotted([slot=end]){margin-top:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.label-text-wrapper{max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-wrapper textarea{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.textarea-label-placement-fixed) .label-text{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host{--border-width:0.55px;--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;--padding-start:0px;--highlight-height:0px;font-size:inherit}:host(.textarea-disabled){opacity:0.3}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
+
+const textareaMdCss = () => `:host{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0;--padding-end:0;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}:host([cols]:not([auto-grow])){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host(.ion-color){background:initial}:host(.in-item){-ms-flex-item-align:baseline;align-self:baseline}:host(.in-item[slot=start]),:host(.in-item[slot=end]){width:auto}.native-textarea{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input:disabled{opacity:1}:host([auto-grow]) .cloned-input{height:100%}:host([auto-grow]) .native-textarea{overflow:hidden}.textarea-wrapper{-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:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper{position:relative;width:100%;height:100%}:host(.has-focus) textarea{caret-color:var(--highlight-color)}.native-wrapper{display:grid;min-width:inherit;max-width:inherit;grid-auto-rows:100%}.native-wrapper::after{white-space:pre-wrap;content:attr(data-replicated-value) " ";visibility:hidden}.native-wrapper::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner{display:-ms-flexbox;display:flex;width:100%;min-height:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.textarea-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.textarea-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.textarea-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .textarea-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .textarea-bottom .helper-text{display:none}.textarea-bottom .counter{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.label-text-wrapper{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.textarea-outline{-webkit-box-sizing:border-box;box-sizing:border-box}.label-text-wrapper-hidden,.textarea-outline-notch-hidden{display:none}:host(.textarea-label-placement-start) .textarea-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.textarea-label-placement-end) .textarea-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.textarea-label-placement-stacked) .textarea-wrapper,:host(.textarea-label-placement-floating) .textarea-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.textarea-label-placement-stacked) .label-text-wrapper,:host(.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}:host-context([dir=rtl]):host(.textarea-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).textarea-label-placement-stacked .label-text-wrapper,:host-context([dir=rtl]):host(.textarea-label-placement-floating) .label-text-wrapper,:host-context([dir=rtl]).textarea-label-placement-floating .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper,:host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.textarea-label-placement-floating) textarea{opacity:0}:host(.has-focus.textarea-label-placement-floating) textarea,:host(.has-value.textarea-label-placement-floating) textarea{opacity:1}.start-slot-wrapper,.end-slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}:host{--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-bottom:8px;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);min-height:44px;font-family:var(--ion-font-family, inherit);z-index:2}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.textarea-label-placement-floating),:host(.textarea-label-placement-stacked){--padding-top:0px;min-height:56px}.native-wrapper{min-height:inherit;max-height:inherit}.native-wrapper textarea{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.textarea-bottom{-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:5px;padding-bottom:0;font-size:0.75rem}.textarea-bottom .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.textarea-bottom .counter{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));-webkit-padding-start:16px;padding-inline-start:16px}:host(.textarea-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.textarea-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.textarea-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.textarea-label-placement-stacked) textarea,:host(.textarea-label-placement-floating) textarea,:host(.textarea-label-placement-stacked[auto-grow]) .native-wrapper::after,:host(.textarea-label-placement-floating[auto-grow]) .native-wrapper::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.start-slot-wrapper,.end-slot-wrapper{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}:host(.textarea-label-placement-stacked) ::slotted([slot=start]),:host(.textarea-label-placement-stacked) ::slotted([slot=end]),:host(.textarea-label-placement-floating) ::slotted([slot=start]),:host(.textarea-label-placement-floating) ::slotted([slot=end]){margin-top:8px}::slotted([slot=start]),::slotted([slot=end]){margin-top:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.label-text-wrapper{max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-wrapper textarea{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.textarea-label-placement-fixed) .label-text{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.textarea-fill-solid){--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;min-height:56px}:host(.textarea-fill-solid) .textarea-wrapper{border-bottom:var(--border-width) var(--border-style) var(--border-color)}:host(.has-focus.textarea-fill-solid.ion-valid),:host(.textarea-fill-solid.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.textarea-fill-solid) .textarea-bottom{border-top:none}@media (any-hover: hover){:host(.textarea-fill-solid:hover){--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))}}:host(.textarea-fill-solid.has-focus){--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{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{max-width:calc(100% / 0.75)}:host(.textarea-fill-outline){--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.textarea-fill-outline.textarea-shape-round){--border-radius:28px;--padding-start:32px;--padding-end:32px}:host(.has-focus.textarea-fill-outline.ion-valid),:host(.textarea-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}@media (any-hover: hover){:host(.textarea-fill-outline:hover){--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.textarea-fill-outline.has-focus){--border-width:var(--highlight-height);--border-color:var(--highlight-color)}:host(.textarea-fill-outline) .textarea-bottom{border-top:none}:host(.textarea-fill-outline) .textarea-wrapper{border-bottom:none}:host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper,:host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-stacked .label-text-wrapper,:host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,:host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-floating .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.textarea-fill-outline.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper,:host(.textarea-fill-outline.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.textarea-fill-outline) .label-text-wrapper{position:relative}:host(.label-floating.textarea-fill-outline) .label-text-wrapper{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc(     (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75   )}:host(.textarea-fill-outline.textarea-label-placement-stacked) textarea,:host(.textarea-fill-outline.textarea-label-placement-floating) textarea,:host(.textarea-fill-outline.textarea-label-placement-stacked[auto-grow]) .native-wrapper::after,:host(.textarea-fill-outline.textarea-label-placement-floating[auto-grow]) .native-wrapper::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:12px;margin-bottom:0px}:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]){margin-top:12px}:host(.textarea-fill-outline) .textarea-outline-container{right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}:host(.textarea-fill-outline) .textarea-outline-start,:host(.textarea-fill-outline) .textarea-outline-end{pointer-events:none}:host(.textarea-fill-outline) .textarea-outline-start,:host(.textarea-fill-outline) .textarea-outline-notch,:host(.textarea-fill-outline) .textarea-outline-end{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.textarea-fill-outline) .textarea-outline-notch{max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.textarea-fill-outline) .notch-spacer{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}:host(.textarea-fill-outline) .textarea-outline-start{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);width:calc(var(--padding-start) - 4px)}: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-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}:host(.label-floating.textarea-fill-outline) .textarea-outline-notch{border-top:none}:host{--border-width:1px;--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}.textarea-bottom .counter{letter-spacing:0.0333333333em}:host(.textarea-label-placement-floating.has-focus) .label-text-wrapper,:host(.textarea-label-placement-stacked.has-focus) .label-text-wrapper{color:var(--highlight-color)}:host(.has-focus.textarea-label-placement-floating.ion-valid) .label-text-wrapper,:host(.textarea-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,:host(.has-focus.textarea-label-placement-stacked.ion-valid) .label-text-wrapper,:host(.textarea-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper{color:var(--highlight-color)}:host(.textarea-disabled){opacity:0.38}.textarea-highlight{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.textarea-highlight{inset-inline-start:0}:host(.has-focus) .textarea-highlight{-webkit-transform:scale(1);transform:scale(1)}:host(.in-item) .textarea-highlight{bottom:0}:host(.in-item) .textarea-highlight{inset-inline-start:0}:host(.textarea-shape-round){--border-radius:16px}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}`;
 
 const Textarea = class {
     constructor(hostRef) {
@@ -22,190 +24,162 @@ const Textarea = class {
         this.ionInput = createEvent(this, "ionInput", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.inputId = `ion-textarea-${textareaIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        /**
+         * `true` if the textarea was cleared as a result of the user typing
+         * with `clearOnEdit` enabled.
+         *
+         * Resets when the textarea loses focus.
+         */
+        this.didTextareaClearOnEdit = false;
+        this.inheritedAttributes = {};
+        /**
+         * The `hasFocus` state ensures the focus class is
+         * added regardless of how the element is focused.
+         * The `ion-focused` class only applies when focused
+         * via tabbing, not by clicking.
+         * The `has-focus` logic was added to ensure the class
+         * is applied in both cases.
+         */
+        this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements
+         */
+        this.isInvalid = false;
+        /**
+         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        this.autocapitalize = 'none';
+        /**
+         * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+         *
+         * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+         */
+        this.autofocus = false;
+        /**
+         * If `true`, the value will be cleared after focus upon edit.
+         */
+        this.clearOnEdit = false;
+        /**
+         * If `true`, the user cannot interact with the textarea.
+         */
+        this.disabled = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot modify the value.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, the element will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * If `true`, the textarea container will grow and shrink based
+         * on the contents of the textarea.
+         */
+        this.autoGrow = false;
+        /**
+         * The value of the textarea.
+         */
+        this.value = '';
+        /**
+         * If `true`, a character counter will display the ratio of characters used and the total character limit.
+         * Developers must also set the `maxlength` property for the counter to be calculated correctly.
+         */
+        this.counter = false;
+        /**
+         * Where to place the label relative to the textarea.
+         * `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL.
+         * `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.
+         * `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        this.labelPlacement = 'start';
+        /**
+         * The size of the textarea. If "large" it will increase the height of the textarea, while
+         * "small" and "medium" provide progressively smaller heights. The default size is "medium".
+         * This property only applies to the `"ionic"` theme.
+         */
+        this.size = 'medium';
+        // `Event` type is used instead of `InputEvent`
+        // since the types from Stencil are not derived
+        // from the element (e.g. textarea and input
+        // should be InputEvent, but all other elements
+        // should be Event).
+        this.onInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                this.value = input.value || '';
+            }
+            this.emitInputChange(ev);
+        };
+        this.onChange = (ev) => {
+            this.emitValueChange(ev);
+        };
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.focusedValue = this.value;
+            this.ionFocus.emit(ev);
+        };
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            if (this.focusedValue !== this.value) {
+                /**
+                 * Emits the `ionChange` event when the textarea value
+                 * is different than the value when the textarea was focused.
+                 */
+                this.emitValueChange(ev);
+            }
+            this.didTextareaClearOnEdit = false;
+            this.ionBlur.emit(ev);
+        };
+        this.onKeyDown = (ev) => {
+            this.checkClearOnEdit(ev);
+        };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onLabelClick = (ev) => {
+            // Only stop propagation if the click was directly on the label
+            // and not on the input or other child elements
+            if (ev.target === ev.currentTarget) {
+                ev.stopPropagation();
+            }
+        };
     }
-    nativeInput;
-    inputId = `ion-textarea-${textareaIds++}`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    /**
-     * `true` if the textarea was cleared as a result of the user typing
-     * with `clearOnEdit` enabled.
-     *
-     * Resets when the textarea loses focus.
-     */
-    didTextareaClearOnEdit = false;
-    textareaWrapper;
-    inheritedAttributes = {};
-    originalIonInput;
-    slotMutationController;
-    notchController;
-    notchSpacerEl;
-    startContainerController;
-    startContainerEl;
-    /**
-     * The value of the textarea when the textarea is focused.
-     */
-    focusedValue;
-    get el() { return getElement(this); }
-    /**
-     * The `hasFocus` state ensures the focus class is
-     * added regardless of how the element is focused.
-     * The `ion-focused` class only applies when focused
-     * via tabbing, not by clicking.
-     * The `has-focus` logic was added to ensure the class
-     * is applied in both cases.
-     */
-    hasFocus = false;
-    /**
-     * Track validation state for proper aria-live announcements
-     */
-    isInvalid = false;
-    validationObserver;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
-     * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
-     */
-    autocapitalize = 'none';
-    /**
-     * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-     *
-     * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
-     */
-    autofocus = false;
-    /**
-     * If `true`, the value will be cleared after focus upon edit.
-     */
-    clearOnEdit = false;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
-     */
-    debounce;
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
+        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
     /**
-     * If `true`, the user cannot interact with the textarea.
-     */
-    disabled = false;
-    /**
-     * The fill for the item. If `"solid"` the item will have a background. If
-     * `"outline"` the item will be transparent with a border. Only available in `md` mode.
-     */
-    fill;
-    /**
-     * A hint to the browser for which keyboard to display.
-     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
-     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
-     */
-    inputmode;
-    /**
-     * A hint to the browser for which enter key to display.
-     * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
-     * `"previous"`, `"search"`, and `"send"`.
-     */
-    enterkeyhint;
-    /**
-     * This attribute specifies the maximum number of characters that the user can enter.
-     */
-    maxlength;
-    /**
-     * This attribute specifies the minimum number of characters that the user can enter.
-     */
-    minlength;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * Instructional text that shows before the input has a value.
-     */
-    placeholder;
-    /**
-     * If `true`, the user cannot modify the value.
-     */
-    readonly = false;
-    /**
-     * If `true`, the user must fill in a value before submitting a form.
-     */
-    required = false;
-    /**
-     * If `true`, the element will have its spelling and grammar checked.
-     */
-    spellcheck = false;
-    /**
-     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
-     */
-    cols;
-    /**
-     * The number of visible text lines for the control.
-     */
-    rows;
-    /**
-     * Indicates how the control wraps text.
-     */
-    wrap;
-    /**
-     * If `true`, the textarea container will grow and shrink based
-     * on the contents of the textarea.
-     */
-    autoGrow = false;
-    /**
-     * The value of the textarea.
-     */
-    value = '';
-    /**
-     * If `true`, a character counter will display the ratio of characters used and the total character limit.
-     * Developers must also set the `maxlength` property for the counter to be calculated correctly.
-     */
-    counter = false;
-    /**
-     * A callback used to format the counter text.
-     * By default the counter text is set to "itemLength / maxLength".
-     *
-     * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
-     * if you need to access `this` from within the callback.
-     */
-    counterFormatter;
-    /**
-     * Text that is placed under the textarea and displayed when an error is detected.
+     * Update element internals when disabled prop changes
      */
-    errorText;
-    /**
-     * Text that is placed under the textarea and displayed when no error is detected.
-     */
-    helperText;
-    /**
-     * The visible label associated with the textarea.
-     *
-     * Use this if you need to render a plaintext label.
-     *
-     * The `label` property will take priority over the `label` slot if both are used.
-     */
-    label;
-    /**
-     * Where to place the label relative to the textarea.
-     * `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL.
-     * `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.
-     * `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.
-     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-     */
-    labelPlacement = 'start';
-    /**
-     * The shape of the textarea. If "round" it will have an increased border radius.
-     */
-    shape;
+    disabledChanged() {
+        this.updateElementInternals();
+    }
     /**
      * Update the native input element when the value changes
      */
@@ -215,8 +189,22 @@ const Textarea = class {
         if (nativeInput && nativeInput.value !== value) {
             nativeInput.value = value;
         }
+        this.updateElementInternals();
         this.runAutoGrow();
     }
+    /**
+     * Update native input and element internals when required prop changes
+     */
+    requiredChanged() {
+        // Explicitly update the native element's required attribute to ensure
+        // browser validation works correctly when required changes dynamically.
+        // While the template binding should handle this, we need to update it
+        // synchronously for the browser's validation to recognize the change.
+        if (this.nativeInput) {
+            this.nativeInput.required = this.required;
+        }
+        this.updateElementInternals();
+    }
     /**
      * dir is a globally enumerated attribute.
      * As a result, creating these as properties
@@ -225,37 +213,9 @@ const Textarea = class {
      * to the inner `<textarea>` element.
      */
     onDirChanged(newValue) {
-        this.inheritedAttributes = {
-            ...this.inheritedAttributes,
-            dir: newValue,
-        };
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
         forceUpdate(this);
     }
-    /**
-     * The `ionChange` event is fired when the user modifies the textarea's value.
-     * Unlike the `ionInput` event, the `ionChange` event is fired when
-     * the element loses focus after its value has been modified.
-     *
-     * This event will not emit when programmatically setting the `value` property.
-     */
-    ionChange;
-    /**
-     * The `ionInput` event is fired each time the user modifies the textarea's value.
-     * Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
-     * to the textarea's value. This typically happens for each keystroke as the user types.
-     *
-     * When `clearOnEdit` is enabled, the `ionInput` event will be fired when
-     * the user clears the textarea by performing a keydown event.
-     */
-    ionInput;
-    /**
-     * Emitted when the input loses focus.
-     */
-    ionBlur;
-    /**
-     * Emitted when the input has focus.
-     */
-    ionFocus;
     /**
      * This prevents the native input from emitting the click event.
      * Instead, the click event from the ion-textarea is emitted.
@@ -269,15 +229,8 @@ const Textarea = class {
     }
     connectedCallback() {
         const { el } = this;
-        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
-            this.startContainerController?.calculateStartContainerWidth();
-            forceUpdate(this);
-        });
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
-            return getIonMode(this) === 'md' && this.fill === 'outline';
-        });
-        this.startContainerController.calculateStartContainerWidth();
         // Watch for class changes to update validation state
         if (typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -316,10 +269,6 @@ const Textarea = class {
             this.notchController.destroy();
             this.notchController = undefined;
         }
-        if (this.startContainerController) {
-            this.startContainerController.destroy();
-            this.startContainerController = undefined;
-        }
         // Clean up validation observer to prevent memory leaks
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -327,18 +276,22 @@ const Textarea = class {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAriaAttributes(this.el),
-            ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']),
-        };
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
+        this.updateElementInternals();
         this.runAutoGrow();
+        // Override focus() to delegate to the native textarea.
+        // This is needed for Safari and Firefox which don't properly
+        // delegate focus when calling focus() directly on the host.
+        this.el.focus = () => {
+            this.setFocus();
+        };
     }
     componentDidRender() {
-        this.notchController?.calculateNotchWidth();
-        this.startContainerController?.calculateStartContainerWidth();
+        var _a;
+        (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
     }
     /**
      * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
@@ -388,10 +341,11 @@ const Textarea = class {
     runAutoGrow() {
         if (this.nativeInput && this.autoGrow) {
             writeTask(() => {
+                var _a;
                 if (this.textareaWrapper) {
                     // Replicated value is an attribute to be used in the stylesheet
                     // to set the inner contents of a pseudo element.
-                    this.textareaWrapper.dataset.replicatedValue = this.value ?? '';
+                    this.textareaWrapper.dataset.replicatedValue = (_a = this.value) !== null && _a !== void 0 ? _a : '';
                 }
             });
         }
@@ -442,47 +396,43 @@ const Textarea = class {
     getValue() {
         return this.value || '';
     }
-    // `Event` type is used instead of `InputEvent`
-    // since the types from Stencil are not derived
-    // from the element (e.g. textarea and input
-    // should be InputEvent, but all other elements
-    // should be Event).
-    onInput = (ev) => {
-        const input = ev.target;
-        if (input) {
-            this.value = input.value || '';
-        }
-        this.emitInputChange(ev);
-    };
-    onChange = (ev) => {
-        this.emitValueChange(ev);
-    };
-    onFocus = (ev) => {
-        this.hasFocus = true;
-        this.focusedValue = this.value;
-        this.ionFocus.emit(ev);
-    };
-    onBlur = (ev) => {
-        this.hasFocus = false;
-        if (this.focusedValue !== this.value) {
-            /**
-             * Emits the `ionChange` event when the textarea value
-             * is different than the value when the textarea was focused.
-             */
-            this.emitValueChange(ev);
+    /**
+     * Called when the form state is restored.
+     * Restores the component's value.
+     */
+    formStateRestoreCallback(value) {
+        this.value = value;
+    }
+    /**
+     * Called when the form is reset.
+     * Resets the component's value.
+     */
+    formResetCallback() {
+        this.value = '';
+    }
+    /**
+     * Updates the form value and reports validity state to the browser via
+     * ElementInternals. This should be called when the component loads, when
+     * the required prop changes, when the disabled prop changes, and when the value
+     * changes to ensure the form value stays in sync and validation state is updated.
+     */
+    updateElementInternals() {
+        // Disabled form controls should not be included in form data
+        // Pass null to setFormValue when disabled to exclude it from form submission
+        const value = this.disabled ? null : this.getValue();
+        // ElementInternals may not be fully available in test environments
+        // so we need to check if the method exists before calling it
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(value);
         }
-        this.didTextareaClearOnEdit = false;
-        this.ionBlur.emit(ev);
-    };
-    onKeyDown = (ev) => {
-        this.checkClearOnEdit(ev);
-    };
+        reportValidityToElementInternals(this.nativeInput, this.internals);
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            } }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
+            }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -500,30 +450,50 @@ const Textarea = class {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
-    /**
-     * Stops propagation for clicks on the textarea's own content (label text,
-     * textarea field) to prevent double-click events. Allows clicks on slotted
-     * content to propagate so event delegation works for parent handlers.
-     *
-     * Only slots belonging directly to this textarea should be considered.
-     * The textarea itself may have a slot attribute when placed in an item
-     * or toolbar, which does not make its content slotted content.
-     */
-    onLabelClick = (ev) => {
-        const target = ev.target;
-        const slotted = target.closest('[slot="start"], [slot="end"]');
-        if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
-            ev.stopPropagation();
+    getFill() {
+        const theme = getIonTheme(this);
+        const { fill } = this;
+        if (theme === 'ionic' && fill === undefined) {
+            return 'outline';
         }
-    };
+        return fill;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11050): Update theme check when shapes are defined for all themes.
+        if (theme === 'ionic' && shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     /**
-     * Renders the outline border with a notch for the label.
+     * Renders the border container when fill="outline".
      */
-    renderOutlineContainer() {
-        return (h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
-                'textarea-outline-notch': true,
-                'textarea-outline-notch-hidden': !this.hasLabel,
-            } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })));
+    renderLabelContainer() {
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
+        if (hasOutlineFill) {
+            /**
+             * The outline fill has a special outline
+             * that appears around the textarea and the label.
+             * Certain stacked and floating label placements cause the
+             * label to translate up and create a "cut out"
+             * inside of that border by using the notch-spacer element.
+             */
+            return [
+                h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
+                        'textarea-outline-notch': true,
+                        'textarea-outline-notch-hidden': !this.hasLabel,
+                    } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })),
+                this.renderLabel(),
+            ];
+        }
+        /**
+         * If not using the outline style,
+         * we can render just the label.
+         */
+        return this.renderLabel();
     }
     /**
      * Renders the helper text or error text values
@@ -531,8 +501,8 @@ const Textarea = class {
     renderHintText() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
-            h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
+            h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     getHintTextID() {
@@ -550,7 +520,7 @@ const Textarea = class {
         if (counter !== true || maxlength === undefined) {
             return;
         }
-        return h("div", { class: "counter" }, getCounterText(value, maxlength, counterFormatter));
+        return (h("div", { class: "counter", part: "counter" }, getCounterText(value, maxlength, counterFormatter)));
     }
     /**
      * Responsible for rendering helper text,
@@ -568,40 +538,76 @@ const Textarea = class {
         if (!hasHintText && !hasCounter) {
             return;
         }
-        return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
+        return (h("div", { class: "textarea-bottom", part: "bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, labelPlacement, hasFocus } = this;
-        const mode = getIonMode(this);
+        const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
+        const fill = this.getFill();
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
-        const hasOutlineFill = mode === 'md' && fill === 'outline';
+        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
          * If the label is stacked, it should always sit above the textarea.
          * For floating labels, the label should move above the textarea if
-         * the textarea has a value or is focused.
+         * the textarea has a value, is focused, or has anything in either
+         * the start or end slot.
+         *
+         * If there is content in the start slot, the label would overlap
+         * it if not forced to float. This is also applied to the end slot
+         * because with the default or solid fills, the textarea is not
+         * vertically centered in the container, but the label is. This
+         * causes the slots and label to appear vertically offset from each
+         * other when the label isn't floating above the input. This doesn't
+         * apply to the outline fill, but this was not accounted for to keep
+         * things consistent.
+         *
+         * TODO(FW-5592): Remove hasStartEndSlots condition
          */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '78da9c96e6a29f19b237f268dd8bfd044afe27b6', class: createColorClasses(this.color, {
-                [mode]: true,
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
+        return (h(Host, { key: 'b613bb449100c5d7a982ffb0a39ea6324e8eb6ea', class: createColorClasses(this.color, {
+                [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
                 'label-floating': labelShouldFloat,
                 [`textarea-fill-${fill}`]: fill !== undefined,
                 [`textarea-shape-${shape}`]: shape !== undefined,
+                [`textarea-size-${size}`]: true,
                 [`textarea-label-placement-${labelPlacement}`]: true,
+                'in-item': inItem,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'c5ea3f26e01e66b857d3a1c88dbafbf2dbb81fdb', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '5a9d0efc8c13d9bd4ec4ceadf1bdb84205c47b3d', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'da08262e33f3a5b454847297338a74f07c5b60c9', name: "start" })), h("div", { key: '6461dc7381929eb83679ec07563b7bdf8bfc3f9f', class: "textarea-control" }, this.renderLabel(), h("div", { key: '8f7902a9e6040384d25d0e2061c04f6b49acf187', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '2149d8b2c23a164c536327c98d7a632e1e85428a', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '84f5f42add89875c3f0cce734b512a9e7be81e03', class: "textarea-end" }, h("slot", { key: 'ea654d78013a00b8af33deb89d42c2b7f6c9cb99', name: "end" })), shouldRenderHighlight && h("div", { key: 'b72195d2606816b3b71e65214d78cef1740f4804', class: "textarea-highlight" })), this.renderBottomContent()));
+                'textarea-readonly': readonly,
+            }) }, h("label", { key: '08a603a3fa102701d756d36d4d5d2d5e01f2895f', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '076362fb04fa45e89c2ecb46b51937ab80026e34', 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
+         * the native wrapper instead of the <label> element or the
+         * entire component. This allows the label text to be positioned
+         * above the outline, while staying within the bounds of the
+         * <label> element, ensuring that clicking the label text
+         * focuses the textarea.
+         */
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '2baacd12528f1da1e8442cf73367e985831d30fa', class: "textarea-outline" }), h("div", { key: '2cbb11940c93eefa3c8aee37a4abec1287600cdc', class: "start-slot-wrapper" }, h("slot", { key: 'a5036f96342252e34440e1c69147179f433b65cf', name: "start" })), h("div", { key: '7fe6ef38994528bda8f60ef05ce63172220a19f3', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: '3b34140264bda8dea770c26b6918c837028e249f', 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: 'fdc551f7e180ca3b8a147453710a330cd28ca60f', class: "end-slot-wrapper" }, h("slot", { key: '135cef89f5341fd1cbbe5e54540cc29308338335', name: "end" }))), shouldRenderHighlight && h("div", { key: '8ffde39c6795139dd50100e09acdccd993a85ed8', class: "textarea-highlight" })), this.renderBottomContent()));
     }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "debounce": [{
                 "debounceChanged": 0
             }],
+        "disabled": [{
+                "disabledChanged": 0
+            }],
         "value": [{
                 "valueChanged": 0
             }],
+        "required": [{
+                "requiredChanged": 0
+            }],
         "dir": [{
                 "onDirChanged": 0
             }]
@@ -609,6 +615,7 @@ const Textarea = class {
 };
 let textareaIds = 0;
 Textarea.style = {
+    ionic: textareaIonicCss(),
     ios: textareaIosCss(),
     md: textareaMdCss()
 };