@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/components/textarea.js

@@ -1,317 +1,34 @@
-import { n as r, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as f } from "../chunks/component.styles.DMSLciL5.js";
-import { f as m } from "../chunks/form-control.styles.CUGhvlfT.js";
-import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as v } from "../chunks/default-value.COZopaet.js";
-import { F as g } from "../chunks/form.DgwYWi0O.js";
-import { H as y } from "../chunks/slot.j5oheLJC.js";
-import { w as u } from "../chunks/watch.q1sEjPWL.js";
-import { i as _, x as p } from "../chunks/lit-element.jLBm65_O.js";
-import { r as z } from "../chunks/state.CSDxrqLd.js";
-import { e as C } from "../chunks/query.BBf1UFkC.js";
-import { e as d } from "../chunks/class-map.BiVq-cVR.js";
+import { n as a, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as b } from "../chunks/component.styles.CRO4Odto.js";
+import { f as g } from "../chunks/form-control.styles.CaGWmeAS.js";
+import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as y } from "../chunks/default-value.COZopaet.js";
+import { F as _ } from "../chunks/form.CFc09rKh.js";
+import { H as z } from "../chunks/slot.j5oheLJC.js";
+import { w as d } from "../chunks/watch.BCJD77bD.js";
+import { i as C, x as p } from "../chunks/lit-element.jLBm65_O.js";
+import { r as w } from "../chunks/state.CSDxrqLd.js";
+import { e as f } from "../chunks/query.BBf1UFkC.js";
+import { e as x } from "../chunks/class-map.BiVq-cVR.js";
 import { o as n } from "../chunks/if-defined.BRoBj_Rp.js";
-import { l as w } from "../chunks/live.SCz6M8Gs.js";
-import { n as k } from "../chunks/when.Dr1es41R.js";
-const $ = _`
-  :host {
-    display: block;
-  }
-
-  :host([data-user-invalid])::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-  }
-
-  :host([data-user-invalid]:focus-within)::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-    box-shadow: var(--cx-input-invalid-shadow);
-  }
-
-  .textarea {
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    font-family: var(--cx-input-font-family);
-    font-weight: var(--cx-input-font-weight);
-    line-height: var(--cx-line-height-large);
-    letter-spacing: var(--cx-input-letter-spacing);
-    vertical-align: middle;
-    transition:
-      var(--cx-transition-fast) color,
-      var(--cx-transition-fast) border,
-      var(--cx-transition-fast) box-shadow,
-      var(--cx-transition-fast) background-color;
-    cursor: text;
-  }
-
-  /* Standard textareas */
-  .textarea--standard {
-    background-color: var(--cx-input-background-color);
-    border: solid var(--cx-input-border-width) var(--cx-input-border-color);
-  }
-
-  .textarea--standard:hover:not(.textarea--disabled) {
-    background-color: var(--cx-input-background-color-hover);
-    border-color: var(--cx-input-border-color-hover);
-  }
-  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
-    color: var(--cx-input-color-hover);
-  }
-
-  .textarea--standard.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--cx-input-background-color-focus);
-    border-color: var(--cx-input-border-color-focus);
-    color: var(--cx-input-color-focus);
-  }
-
-  .textarea--standard.textarea--focused:not(.textarea--disabled)
-    .textarea__control {
-    color: var(--cx-input-color-focus);
-  }
-
-  .textarea--standard.textarea--disabled {
-    background-color: var(--cx-input-background-color-disabled);
-    border-color: var(--cx-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--cx-input-color-disabled);
-  }
-
-  .textarea--standard.textarea--disabled .textarea__control::placeholder {
-    color: var(--cx-input-placeholder-color-disabled);
-  }
-
-  /* Filled textareas */
-  .textarea--filled {
-    border: none;
-    background-color: var(--cx-input-filled-background-color);
-    color: var(--cx-input-color);
-  }
-
-  .textarea--filled:hover:not(.textarea--disabled) {
-    background-color: var(--cx-input-filled-background-color-hover);
-  }
-
-  .textarea--filled.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--cx-input-filled-background-color-focus);
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .textarea--filled.textarea--disabled {
-    background-color: var(--cx-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .textarea__control {
-    flex: 1 1 auto;
-    font: inherit;
-    line-height: 1.4;
-    color: var(--cx-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
-    line-height: var(--cx-line-height-medium);
-    padding-top: var(--cx-spacing-x-small);
-    padding-bottom: var(--cx-spacing-x-small);
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .textarea__control::-webkit-search-decoration,
-  .textarea__control::-webkit-search-cancel-button,
-  .textarea__control::-webkit-search-results-button,
-  .textarea__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .textarea__control::placeholder {
-    color: var(--cx-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .textarea__control:focus {
-    outline: none;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .textarea--small {
-    border-radius: var(--cx-input-border-radius-small);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .textarea--small .textarea-container {
-    padding-left: var(--cx-input-spacing-small);
-    padding-right: var(--cx-input-spacing-small);
-  }
-
-  .textarea--medium {
-    border-radius: var(--cx-input-border-radius-medium);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .textarea--medium .textarea-container {
-    padding-left: var(--cx-input-spacing-medium);
-    padding-right: var(--cx-input-spacing-medium);
-  }
-
-  .textarea--large {
-    border-radius: var(--cx-input-border-radius-large);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .textarea--large .textarea-container {
-    padding-left: var(--cx-input-spacing-large);
-    padding-right: var(--cx-input-spacing-large);
-  }
-
-  /*
-   * Resize types
-   */
-
-  .textarea--resize-none .textarea__control {
-    resize: none;
-  }
-
-  .textarea--resize-vertical .textarea__control {
-    resize: vertical;
-  }
-
-  .textarea--resize-auto .textarea__control {
-    height: auto;
-    resize: none;
-    overflow-y: hidden;
-  }
-
-  /*
-   * Adapt label to be inside textarea
-   */
-
-  .textarea-container {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* set label's position to absolute */
-  .form-control__label {
-    position: relative;
-    -webkit-transition: transform 0.2s ease-in-out;
-    -moz-transition: transform 0.2s ease-in-out;
-    transition: transform 0.2s ease-in-out;
-    pointer-events: none;
-    width: fit-content;
-    line-height: 1; /* use line-height: 1 for easier transform calculation */
-  }
-
-  .form-control--has-label .textarea--small .form-control__label {
-    font-size: var(--cx-input-label-font-size-small);
-    margin: 0;
-  }
-
-  .form-control--has-label .textarea--medium .form-control__label {
-    font-size: var(--cx-input-label-font-size-medium);
-    margin: 0;
-  }
-
-  .form-control--has-label .textarea--large .form-control__label {
-    font-size: var(--cx-input-label-font-size-large);
-    margin: 0;
-  }
-
-  .textarea__character-count {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: var(--cx-input-suffix-color, var(--cx-input-color));
-    font-size: var(--cx-input-font-size);
-    font-weight: var(--cx-input-font-weight);
-    letter-spacing: var(--cx-input-letter-spacing);
-    line-height: var(--cx-input-line-height);
-    padding-inline-end: var(--cx-spacing-x-small);
-    padding-top: var(--cx-spacing-2x-small);
-    white-space: nowrap;
-  }
-
-  /* when empty with no placeholder (initial state), transform label to vertical center
-    = (input height - label height) / 2
-  */
-  .textarea--small .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-small) +
-              1.25rem - var(--cx-input-label-font-size-small)
-          ) /
-          2
-      )
-    );
-  }
-
-  .textarea--medium .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-medium) +
-              1rem - var(--cx-input-label-font-size-medium)
-          ) /
-          2
-      )
-    );
-  }
-
-  .textarea--large .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-large) +
-              1rem - var(--cx-input-label-font-size-large)
-          ) /
-          2
-      )
-    );
-  }
-
-  /* When focused or not empty, transform label to top
-    Instead of 0, use var(--cx-spacing-2x-small) to have a distance from top
-  */
-  .form-control--has-label .textarea--focused .form-control__label,
-  .form-control--has-label .textarea--placeholder-visible .form-control__label,
-  .form-control--has-label
-    .textarea:not(.textarea--empty)
-    .form-control__label {
-    transform: translateY(
-      calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small))
-    ); /* distance from top */
-  }
-`;
-var F = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (a, i, l, s) => {
-  for (var o = s > 1 ? void 0 : s ? T(i, l) : i, c = a.length - 1, h; c >= 0; c--)
-    (h = a[c]) && (o = (s ? h(i, l, o) : h(o)) || o);
-  return s && o && F(i, l, o), o;
+import { l as k } from "../chunks/live.SCz6M8Gs.js";
+import { n as $ } from "../chunks/when.Dr1es41R.js";
+var c = /* @__PURE__ */ ((t) => (t.Max = "max", t))(c || {});
+const H = C`:host{display:block}:host([data-user-invalid])::part(base){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(base){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.textarea{--textarea-background-color:var(--cx-input-background-color);width:100%;font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);line-height:var(--cx-line-height-large);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;cursor:text;align-items:center;display:flex;position:relative}.textarea--standard{background-color:var(--textarea-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){--textarea-background-color:var(--cx-input-background-color-hover);border-color:var(--cx-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--cx-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){--textarea-background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus);color:var(--cx-input-color-focus)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--cx-input-color-focus)}.textarea--standard.textarea--disabled{--textarea-background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);opacity:.5;cursor:default}.textarea--standard.textarea--disabled .textarea__control{color:var(--cx-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--cx-input-placeholder-color-disabled)}.textarea--filled{--textarea-background-color:var(--cx-input-filled-background-color);background-color:var(--textarea-background-color);color:var(--cx-input-color);border:none}.textarea--filled:hover:not(.textarea--disabled){--textarea-background-color:var(--cx-input-filled-background-color-hover)}.textarea--filled.textarea--focused:not(.textarea--disabled){--textarea-background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.textarea--filled.textarea--disabled{--textarea-background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.textarea__control{font:inherit;color:var(--cx-input-color);box-shadow:none;cursor:inherit;-webkit-appearance:none;line-height:1.4;line-height:var(--cx-line-height-medium);padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-x-small);background:0 0;border:none;flex:auto;padding-left:0;padding-right:0}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--cx-input-placeholder-color);-webkit-user-select:none;user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small)}.textarea--small .textarea-container{padding-left:var(--cx-input-spacing-small);padding-right:var(--cx-input-spacing-small)}.textarea--medium{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small)}.textarea--medium .textarea-container{padding-left:var(--cx-input-spacing-medium);padding-right:var(--cx-input-spacing-medium)}.textarea--large{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small)}.textarea--large .textarea-container{padding-left:var(--cx-input-spacing-large);padding-right:var(--cx-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{resize:none;height:auto;overflow-y:hidden}.textarea-container{flex-direction:column;width:100%;height:100%;display:inline-flex;position:relative}.form-control__label{pointer-events:none;background-color:var(--textarea-background-color);width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.form-control--has-label .textarea--small .form-control__label{font-size:var(--cx-input-label-font-size-small);margin:0}.form-control--has-label .textarea--medium .form-control__label{font-size:var(--cx-input-label-font-size-medium);margin:0}.form-control--has-label .textarea--large .form-control__label{font-size:var(--cx-input-label-font-size-large);margin:0}.textarea__character-count{color:var(--cx-input-suffix-color,var(--cx-input-color));font-size:var(--cx-input-font-size);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);line-height:var(--cx-input-line-height);padding-inline-end:var(--cx-spacing-x-small);padding-top:var(--cx-spacing-2x-small);white-space:nowrap;justify-content:flex-end;align-items:center;display:flex}.textarea--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-label-font-size-small) ) / 2))}.textarea--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) + 1rem - var(--cx-input-label-font-size-medium) ) / 2))}.textarea--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-label-font-size-large) ) / 2))}.form-control--has-label .textarea--focused .form-control__label,.form-control--has-label .textarea--placeholder-visible .form-control__label,.form-control--has-label .textarea:not(.textarea--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}`;
+var F = Object.defineProperty, T = Object.getOwnPropertyDescriptor, r = (t, o, i, l) => {
+  for (var s = l > 1 ? void 0 : l ? T(o, i) : o, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (s = (l ? u(o, i, s) : u(s)) || s);
+  return l && s && F(o, i, s), s;
 };
-let t = class extends x {
+let e = class extends m {
   constructor() {
-    super(...arguments), this.formControlController = new g(this, {
+    super(...arguments), this.formControlController = new _(this, {
       assumeInteractionOn: ["cx-input"]
-    }), this.hasSlotController = new y(
+    }), this.hasSlotController = new z(
       this,
       "help-text",
       "label"
-    ), this.hasFocus = !1, this.title = "", this.name = "", this.value = "", this.size = "medium", this.filled = !1, this.label = "", this.helpText = "", this.placeholder = "", this.rows = 4, this.resize = "vertical", this.disabled = !1, this.readonly = !1, this.form = void 0, this.required = !1, this.showLength = !1, this.autoFocus = !1, this.spellCheck = !0, this.defaultValue = "";
+    ), this.hasFocus = !1, this.title = "", this.name = "", this.value = "", this.size = "medium", this.filled = !1, this.label = "", this.helpText = "", this.placeholder = "", this.rows = 4, this.resize = "vertical", this.disabled = !1, this.readonly = !1, this.form = void 0, this.required = !1, this.showLength = !1, this.autoFocus = !1, this.spellCheck = !0, this.defaultValue = "", this._fillHeightPx = null;
   }
   /** Gets the validity state object */
   get validity() {
@@ -321,18 +38,19 @@ let t = class extends x {
   get validationMessage() {
     return this.input.validationMessage;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
+  connectedUpdatedCallback() {
+    this.resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => this.setTextareaHeight());
-    }), this.updateComplete.then(() => {
-      this.setTextareaHeight(), this.resizeObserver.observe(this.input);
-    });
+    }), this.setTextareaHeight(), this.updateResizeObserver();
   }
   runFirstUpdated() {
     this.formControlController.updateValidity();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.input && this.resizeObserver?.unobserve(this.input);
+    super.disconnectedCallback(), this.resizeObserver?.disconnect();
+  }
+  updateResizeObserver() {
+    this.resizeObserver.disconnect(), this.rows === c.Max ? (this.resizeObserver.observe(this), this.resizeObserver.observe(this.formControlRoot)) : this.resizeObserver.observe(this.input);
   }
   handleBlur() {
     this.hasFocus = !1, this.emit("cx-blur");
@@ -346,24 +64,34 @@ let t = class extends x {
   handleInput() {
     this.value = this.input.value, this.emit("cx-input");
   }
-  handleInvalid(a) {
-    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(a);
+  handleInvalid(t) {
+    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
   }
   setTextareaHeight() {
-    this.resize === "auto" ? (this.input.style.height = "auto", this.input.style.height = `${this.input.scrollHeight}px`) : this.input.style.height = void 0;
+    if (this.rows === c.Max) {
+      const t = this.clientHeight;
+      if (t === 0)
+        return;
+      const o = Number.parseFloat(this.input.style.height);
+      if (this._fillHeightPx !== null && o !== this._fillHeightPx)
+        return;
+      this.input.style.height = "0px";
+      const i = this.formControlRoot?.offsetHeight ?? 0, l = Math.max(t - i, 0);
+      this.input.style.height = `${l}px`, this._fillHeightPx = l;
+    } else this.resize === "auto" ? (this.input.style.height = "auto", this.input.style.height = `${this.input.scrollHeight}px`) : this.input.style.height = void 0;
   }
   handleDisabledChange() {
     this.formControlController.setValidity(this.disabled);
   }
   handleRowsChange() {
-    this.setTextareaHeight();
+    this.input.style.height = "", this._fillHeightPx = null, this.setTextareaHeight(), this.updateResizeObserver();
   }
   async handleValueChange() {
     await this.updateComplete, this.formControlController.updateValidity(), this.setTextareaHeight();
   }
   /** Sets focus on the textarea. */
-  focus(a) {
-    this.input.focus(a);
+  focus(t) {
+    this.input.focus(t);
   }
   /** Removes focus from the textarea. */
   blur() {
@@ -374,9 +102,9 @@ let t = class extends x {
     this.input.select();
   }
   /** Gets or sets the textarea's scroll position. */
-  scrollPosition(a) {
-    if (a) {
-      typeof a.top == "number" && (this.input.scrollTop = a.top), typeof a.left == "number" && (this.input.scrollLeft = a.left);
+  scrollPosition(t) {
+    if (t) {
+      typeof t.top == "number" && (this.input.scrollTop = t.top), typeof t.left == "number" && (this.input.scrollLeft = t.left);
       return;
     }
     return {
@@ -385,21 +113,21 @@ let t = class extends x {
     };
   }
   /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(a, i, l = "none") {
+  setSelectionRange(t, o, i = "none") {
     this.input.setSelectionRange(
-      a,
-      i,
-      l
+      t,
+      o,
+      i
     );
   }
   /** Replaces a range of text with a new string. */
-  setRangeText(a, i, l, s = "preserve") {
-    const o = i ?? this.input.selectionStart, c = l ?? this.input.selectionEnd;
+  setRangeText(t, o, i, l = "preserve") {
+    const s = o ?? this.input.selectionStart, h = i ?? this.input.selectionEnd;
     this.input.setRangeText(
-      a,
-      o,
-      c,
-      s
+      t,
+      s,
+      h,
+      l
     ), this.value !== this.input.value && (this.value = this.input.value, this.setTextareaHeight());
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
@@ -415,27 +143,19 @@ let t = class extends x {
     return this.input.reportValidity();
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(a) {
-    this.input.setCustomValidity(a), this.formControlController.updateValidity();
+  setCustomValidity(t) {
+    this.input.setCustomValidity(t), this.formControlController.updateValidity();
   }
   render() {
-    const a = this.hasSlotController.test("label"), i = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!a, s = this.helpText ? !0 : !!i, o = this.placeholder && this.value.length === 0;
-    return p`
-      <div
-        part="form-control"
-        class=${d({
+    const t = this.hasSlotController.test("label"), o = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, l = this.helpText ? !0 : !!o, s = this.placeholder && this.value.length === 0;
+    return p`<div part="form-control" class=${x({
       "form-control": !0,
-      "form-control--has-help-text": s,
-      "form-control--has-label": l,
+      "form-control--has-help-text": l,
+      "form-control--has-label": i,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
-    })}
-      >
-        <div part="form-control-input" class="form-control-input">
-          <div
-            part="base"
-            class=${d({
+    })}><div part="form-control-input" class="form-control-input"><div part="base" class=${x({
       textarea: !0,
       "textarea--disabled": this.disabled,
       "textarea--empty": !this.value,
@@ -443,178 +163,137 @@ let t = class extends x {
       "textarea--focused": this.hasFocus,
       "textarea--large": this.size === "large",
       "textarea--medium": this.size === "medium",
-      "textarea--placeholder-visible": o,
-      "textarea--resize-auto": this.resize === "auto",
+      "textarea--placeholder-visible": s,
+      "textarea--resize-auto": this.resize === "auto" && this.rows !== c.Max,
       "textarea--resize-none": this.resize === "none",
       "textarea--resize-vertical": this.resize === "vertical",
       "textarea--small": this.size === "small",
       "textarea--standard": !this.filled
-    })}
-          >
-            <span class="textarea-container">
-              <label
-                part="form-control-label"
-                class="form-control__label"
-                for="input"
-                aria-hidden=${l ? "false" : "true"}
-              >
-                <slot name="label">${this.label}</slot>
-              </label>
-              <textarea
-                part="textarea"
-                id="input"
-                class="textarea__control"
-                title=${this.title}
-                name=${n(this.name)}
-                .value=${w(this.value)}
-                ?disabled=${this.disabled}
-                ?readonly=${this.readonly}
-                ?required=${this.required}
-                placeholder=${n(this.placeholder)}
-                rows=${n(this.rows)}
-                minlength=${n(this.minlength)}
-                maxlength=${n(this.maxlength)}
-                autocapitalize=${n(this.autoCapitalize)}
-                autocorrect=${n(this.autoCorrect)}
-                ?autofocus=${this.autoFocus}
-                spellcheck=${n(this.spellCheck)}
-                enterkeyhint=${n(this.enterKeyHint)}
-                inputmode=${n(this.inputMode)}
-                aria-describedby="help-text"
-                @change=${this.handleChange}
-                @input=${this.handleInput}
-                @invalid=${this.handleInvalid}
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-              ></textarea>
-            </span>
-          </div>
-          ${k(this.showLength, () => p`
-              <div part="character-count" class="textarea__character-count">
-                ${[
+    })}><span class="textarea-container"><label part="form-control-label" class="form-control__label" for="input" aria-hidden=${i ? "false" : "true"}><slot name="label">${this.label}</slot></label><textarea part="textarea" id="input" class="textarea__control" title=${this.title} name=${n(this.name)} .value=${k(this.value)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} placeholder=${n(this.placeholder)} rows=${n(this.rows === c.Max ? void 0 : this.rows)} minlength=${n(this.minlength)} maxlength=${n(this.maxlength)} autocapitalize=${n(this.autoCapitalize)} autocorrect=${n(this.autoCorrect)} ?autofocus=${this.autoFocus} spellcheck=${n(this.spellCheck)} enterkeyhint=${n(this.enterKeyHint)} inputmode=${n(this.inputMode)} aria-describedby="help-text" @change=${this.handleChange} @input=${this.handleInput} @invalid=${this.handleInvalid} @focus=${this.handleFocus} @blur=${this.handleBlur}></textarea></span></div>${$(this.showLength, () => p`<div part="character-count" class="textarea__character-count">${[
       this.minlength && `${this.minlength} /`,
       this.value.length,
       this.maxlength && `/ ${this.maxlength}`
-    ].filter(Boolean).join(" ")}
-              </div>
-            `)}
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${s ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
+    ].filter(Boolean).join(" ")}</div>`)}</div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${l ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
   }
 };
-t.styles = [f, m, $];
-e([
-  C(".textarea__control")
-], t.prototype, "input", 2);
-e([
-  z()
-], t.prototype, "hasFocus", 2);
-e([
-  r()
-], t.prototype, "title", 2);
-e([
-  r()
-], t.prototype, "name", 2);
-e([
-  r()
-], t.prototype, "value", 2);
-e([
-  r({ reflect: !0 })
-], t.prototype, "size", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "filled", 2);
-e([
-  r()
-], t.prototype, "label", 2);
-e([
-  r({ attribute: "help-text" })
-], t.prototype, "helpText", 2);
-e([
-  r()
-], t.prototype, "placeholder", 2);
-e([
-  r({ type: Number })
-], t.prototype, "rows", 2);
-e([
-  r()
-], t.prototype, "resize", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "disabled", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "readonly", 2);
-e([
-  r({ reflect: !1 })
-], t.prototype, "form", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "required", 2);
-e([
-  r({ type: Number })
-], t.prototype, "minlength", 2);
-e([
-  r({ type: Number })
-], t.prototype, "maxlength", 2);
-e([
-  r({ attribute: "show-length", type: Boolean })
-], t.prototype, "showLength", 2);
-e([
-  r({ attribute: "autocapitalize", reflect: !0, type: String })
-], t.prototype, "autoCapitalize", 2);
-e([
-  r({ attribute: "autocorrect", reflect: !0, type: Boolean })
-], t.prototype, "autoCorrect", 2);
-e([
-  r()
-], t.prototype, "autocomplete", 2);
-e([
-  r({ attribute: "autofocus", reflect: !0, type: Boolean })
-], t.prototype, "autoFocus", 2);
-e([
-  r({ attribute: "enterkeyhint", reflect: !0, type: String })
-], t.prototype, "enterKeyHint", 2);
-e([
-  r({
+e.styles = [b, g, H];
+r([
+  f(".textarea__control")
+], e.prototype, "input", 2);
+r([
+  f(".form-control")
+], e.prototype, "formControlRoot", 2);
+r([
+  w()
+], e.prototype, "hasFocus", 2);
+r([
+  a()
+], e.prototype, "title", 2);
+r([
+  a()
+], e.prototype, "name", 2);
+r([
+  a()
+], e.prototype, "value", 2);
+r([
+  a({ reflect: !0 })
+], e.prototype, "size", 2);
+r([
+  a({ reflect: !0, type: Boolean })
+], e.prototype, "filled", 2);
+r([
+  a()
+], e.prototype, "label", 2);
+r([
+  a({ attribute: "help-text" })
+], e.prototype, "helpText", 2);
+r([
+  a()
+], e.prototype, "placeholder", 2);
+r([
+  a({
+    converter: {
+      fromAttribute: (t) => {
+        if (t == null || t.trim() === "")
+          return 4;
+        if (t === c.Max)
+          return c.Max;
+        const o = Number(t);
+        return Number.isFinite(o) && o > 0 ? o : 4;
+      },
+      toAttribute: String
+    }
+  })
+], e.prototype, "rows", 2);
+r([
+  a()
+], e.prototype, "resize", 2);
+r([
+  a({ reflect: !0, type: Boolean })
+], e.prototype, "disabled", 2);
+r([
+  a({ reflect: !0, type: Boolean })
+], e.prototype, "readonly", 2);
+r([
+  a({ reflect: !1 })
+], e.prototype, "form", 2);
+r([
+  a({ reflect: !0, type: Boolean })
+], e.prototype, "required", 2);
+r([
+  a({ type: Number })
+], e.prototype, "minlength", 2);
+r([
+  a({ type: Number })
+], e.prototype, "maxlength", 2);
+r([
+  a({ attribute: "show-length", type: Boolean })
+], e.prototype, "showLength", 2);
+r([
+  a({ attribute: "autocapitalize", reflect: !0, type: String })
+], e.prototype, "autoCapitalize", 2);
+r([
+  a({ attribute: "autocorrect", reflect: !0, type: Boolean })
+], e.prototype, "autoCorrect", 2);
+r([
+  a()
+], e.prototype, "autocomplete", 2);
+r([
+  a({ attribute: "autofocus", reflect: !0, type: Boolean })
+], e.prototype, "autoFocus", 2);
+r([
+  a({ attribute: "enterkeyhint", reflect: !0, type: String })
+], e.prototype, "enterKeyHint", 2);
+r([
+  a({
     attribute: "spellcheck",
     converter: {
       // Allow "true|false" attribute values but keep the property boolean
-      fromAttribute: (a) => !(!a || a === "false"),
-      toAttribute: (a) => a ? "true" : "false"
+      fromAttribute: (t) => !(!t || t === "false"),
+      toAttribute: (t) => t ? "true" : "false"
     },
     reflect: !0,
     type: Boolean
   })
-], t.prototype, "spellCheck", 2);
-e([
-  r({ attribute: "inputmode", reflect: !0, type: String })
-], t.prototype, "inputMode", 2);
-e([
-  v()
-], t.prototype, "defaultValue", 2);
-e([
-  u("disabled", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleDisabledChange", 1);
-e([
-  u("rows", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleRowsChange", 1);
-e([
-  u("value", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleValueChange", 1);
-t = e([
-  b("cx-textarea")
-], t);
+], e.prototype, "spellCheck", 2);
+r([
+  a({ attribute: "inputmode", reflect: !0, type: String })
+], e.prototype, "inputMode", 2);
+r([
+  y()
+], e.prototype, "defaultValue", 2);
+r([
+  d("disabled", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleDisabledChange", 1);
+r([
+  d("rows", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleRowsChange", 1);
+r([
+  d("value", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleValueChange", 1);
+e = r([
+  v("cx-textarea")
+], e);
 export {
-  t as default
+  e as default
 };