@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

package/dist/components/calcite-text-area/customElement.d.ts

@@ -1,170 +1,185 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FormComponent, MutableValidityState } from '../../utils/form';
-import { LabelableComponent } from '../../utils/label';
-import { NumberingSystem } from '../../utils/locale';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Status } from '../interfaces';
-import { TextualInputComponent } from '../calcite-input/common/input';
-import { IconName } from '../calcite-icon/interfaces';
-import { Label } from '../calcite-label/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { MutableValidityState } from "../../utils/form.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { Status } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-text-area-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-text-area-border-color] - Specifies the component's text area border color.
+ * @cssproperty [--calcite-text-area-character-limit-text-color] - Specifies the color of the character limit text displayed in the footer of the component.
+ * @cssproperty [--calcite-text-area-divider-color] - Specifies the color of the divider between the text area and footer.
+ * @cssproperty [--calcite-text-area-font-size] - Specifies the font size of the text area and footer.
+ * @cssproperty [--calcite-text-area-max-height] - Specifies the component's text area maximum height.
+ * @cssproperty [--calcite-text-area-min-height] - Specifies the component's text area minimum height.
+ * @cssproperty [--calcite-text-area-max-width] - Specifies the component's text area maximum width.
+ * @cssproperty [--calcite-text-area-min-width] - Specifies the component's text area minimum width.
+ * @cssproperty [--calcite-text-area-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-text-area-footer-border-color] - Specifies the footer's border color.
+ * @cssproperty [--calcite-text-area-corner-radius] - Specifies component's corner radius.
+ * @cssproperty [--calcite-text-area-shadow] - Specifies the component's shadow.
+ * @cssproperty [--calcite-text-area-footer-background-color] - Specifies the footer's background color.
  * @slot  - A slot for adding text.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  * @slot [footer-start] - A slot for adding content to the start of the component's footer.
  * @slot [footer-end] - A slot for adding content to the end of the component's footer.
  */
-export declare class TextArea extends LitElement {
-    /**
-     * Specifies the component's number of columns.
-     *
-     * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)
-     */
-    columns: number;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     *
-     * @default false
-     */
-    groupSeparator: boolean;
-    /** Accessible name for the component. */
-    label: string;
-    /** When provided, displays label text on the component. */
-    labelText: string;
-    /**
-     * When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.
-     *
-     * @default false
-     */
-    limitText: boolean;
-    /**
-     * When the component resides in a form,
-     * specifies the maximum number of characters allowed.
-     *
-     * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
-     */
-    maxLength: number;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When the component resides in a form,
-     * specifies the minimum number of characters allowed.
-     *
-     * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
-     */
-    minLength: number;
-    /**
-     * Specifies the name of the component.
-     *
-     * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
-     */
-    name: string;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /**
-     * Specifies the placeholder text for the component.
-     *
-     * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)
-     */
-    placeholder: string;
-    /**
-     * When `true`, the component's `value` can be read, but cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     * @default false
-     */
-    readOnly: boolean;
-    /**
-     * When `true` and the component resides in a form,
-     * the component must have a value in order for the form to submit.
-     *
-     * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
-     * @default false
-     */
-    required: boolean;
-    /**
-     * Specifies if the component is resizable.
-     *
-     * @default "both"
-     */
-    resize: "both" | "horizontal" | "vertical" | "none";
-    /**
-     * Specifies the component's number of rows.
-     *
-     * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)
-     */
-    rows: number;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: "l" | "m" | "s";
-    /**
-     * Specifies the status of the input field, which determines message and icons.
-     *
-     * @default "idle"
-     */
-    status: Status;
-    /** Specifies the validation icon to display under the component. */
-    validationIcon: IconName | boolean;
-    /** Specifies the validation message to display under the component. */
-    validationMessage: string;
-    /**
-     * The current validation state of the component.
-     *
-     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
-     */
-    readonly validity: MutableValidityState;
-    /**
-     * The component's value.
-     *
-     * @default ""
-     */
-    value: string;
-    /**
-     * Specifies the wrapping mechanism for the text.
-     *
-     * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)
-     * @default "soft"
-     */
-    wrap: "soft" | "hard";
-    /** Selects the text of the component's `value`. */
-    selectText(): Promise<void>;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires each time a new `value` is typed and committed. */
-    readonly calciteTextAreaChange: TargetedEvent<this, void>;
-    /** Fires each time a new `value` is typed. */
-    readonly calciteTextAreaInput: TargetedEvent<this, void>;
-    private messages: {
-        invalid: string;
-        required: string;
-        tooLong: string;
-        tooShort: string;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        invalid: string;
-        required: string;
-        tooLong: string;
-        tooShort: string;
-    }>;
-}
+export abstract class TextArea extends LitElement {
+  /**
+   * Specifies the component's number of columns.
+   *
+   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)
+   */
+  accessor columns: number;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the `id` of the component's associated form.
+   *
+   * When not set, the component is associated with its ancestor form element, if one exists.
+   */
+  accessor form: string;
+  /**
+   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
+   *
+   * @default false
+   */
+  accessor groupSeparator: boolean;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Specifies the component's label text. */
+  accessor labelText: string;
+  /**
+   * When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.
+   *
+   * @default false
+   */
+  accessor limitText: boolean;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * When the component resides in a form,
+   * specifies the maximum number of characters allowed.
+   *
+   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
+   */
+  accessor maxLength: number;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      invalid?: string;
+      loading?: string;
+      required?: string;
+      tooLong?: string;
+      tooShort?: string;
+  };
+  /**
+   * When the component resides in a form,
+   * specifies the minimum number of characters allowed.
+   *
+   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
+   */
+  accessor minLength: number;
+  /**
+   * Specifies the name of the component. Required to pass the component's value on form submission.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
+   */
+  accessor name: string;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * Specifies the placeholder text for the component.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)
+   */
+  accessor placeholder: string;
+  /**
+   * When `true`, the component's `value` can be read, but cannot be modified.
+   *
+   * @default false
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  accessor readOnly: boolean;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+   */
+  accessor required: boolean;
+  /**
+   * Specifies if the component is resizable.
+   *
+   * @default "both"
+   */
+  accessor resize: "both" | "horizontal" | "vertical" | "none";
+  /**
+   * Specifies the component's number of rows.
+   *
+   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)
+   */
+  accessor rows: number;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: "l" | "m" | "s";
+  /**
+   * Specifies the status of the input field, which determines message and icons.
+   *
+   * @default "idle"
+   */
+  accessor status: Status;
+  /** Specifies the validation icon to display under the component. */
+  accessor validationIcon: IconName | boolean;
+  /** Specifies the validation message to display under the component. */
+  accessor validationMessage: string;
+  /**
+   * The component's current validation state.
+   *
+   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): MutableValidityState;
+  /**
+   * The component's value.
+   *
+   * @default ""
+   */
+  accessor value: string;
+  /**
+   * Specifies the wrapping mechanism for the text.
+   *
+   * @default "soft"
+   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)
+   */
+  accessor wrap: "soft" | "hard";
+  /** Selects the text of the component's `value`. */
+  selectText(): Promise<void>;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires each time a new `value` is typed and committed. */
+  readonly calciteTextAreaChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires each time a new `value` is typed. */
+  readonly calciteTextAreaInput: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTextAreaChange: TextArea["calciteTextAreaChange"]["detail"];
+    calciteTextAreaInput: TextArea["calciteTextAreaInput"]["detail"];
+  };
+}

package/dist/components/calcite-text-area/customElement.js

@@ -1,16 +1,18 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
-import { live } from "lit/directives/live.js";
 import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
 import { throttle } from "es-toolkit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { g as guid } from "../../chunks/guid.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
@@ -18,6 +20,7 @@ import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   assistiveText: "assistive-text",
   characterLimit: "character-limit",
@@ -32,7 +35,9 @@ const CSS = {
   footerEndSlotOnly: "footer--end-only",
   textArea: "text-area",
   textAreaOnly: "text-area--only",
-  wrapper: "wrapper"
+  wrapper: "wrapper",
+  loaderContainer: "loader-container",
+  loader: "loader"
 };
 const IDS = {
   validationMessage: "textAreaValidationMessage"
@@ -43,7 +48,7 @@ const SLOTS = {
 };
 const RESIZE_TIMEOUT = 100;
 const NO_DIMENSIONS = Object.freeze({ height: 0, width: 0 });
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:inline-block;block-size:100%;inline-size:100%;--calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-border-input));--calcite-internal-text-area-footer-border-color: var( --calcite-text-area-footer-border-color, var(--calcite-internal-text-area-border-color) );--calcite-internal-text-area-corner-radius: var( --calcite-text-area-corner-radius, var(--calcite-corner-radius-default) );--calcite-internal-text-area-shadow: var(--calcite-text-area-shadow, var(--calcite-shadow-none));--calcite-internal-text-area-footer-background-color: var( --calcite-text-area-footer-background-color, var(--calcite-text-area-background-color, var(--calcite-color-foreground-1)) );min-block-size:var(--calcite-text-area-min-height, calc(2 * var(--calcite-internal-text-area-padding-block) + 2 * var(--calcite-border-width-sm)));min-inline-size:var(--calcite-text-area-min-width, 12rem)}.wrapper{box-sizing:border-box;block-size:100%;inline-size:100%;box-shadow:var(--calcite-internal-text-area-shadow);border-radius:var(--calcite-internal-text-area-corner-radius)}.text-area,.footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));padding-block:var(--calcite-internal-text-area-padding-block);padding-inline:var(--calcite-internal-text-area-padding-inline)}.footer{background-color:var(--calcite-internal-text-area-footer-background-color);border-radius:0 0 var(--calcite-internal-text-area-corner-radius) var(--calcite-internal-text-area-corner-radius)}.text-area{position:relative;margin:0;box-sizing:border-box;display:block;inline-size:100%;--calcite-internal-text-area-border-block-end-color: var(--calcite-internal-text-area-border-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-border-color);border-block-end-color:var(--calcite-internal-text-area-border-block-end-color);color:var(--calcite-text-area-text-color, var(--calcite-color-text-1));font-family:inherit;max-block-size:var(--calcite-text-area-max-height);min-block-size:calc(var(--calcite-text-area-min-height, 0px) - var(--calcite-internal-text-area-footer-min-height, 0px));max-inline-size:var(--calcite-text-area-max-width);min-inline-size:var(--calcite-text-area-min-width, 12rem);background-color:var(--calcite-text-area-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-internal-text-area-corner-radius) var(--calcite-internal-text-area-corner-radius) 0 0}.text-area::placeholder{font-weight:var(--calcite-font-weight-normal)}@media screen and (max-width:480px){.text-area{resize:none}}.text-area:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.text-area--invalid{--calcite-internal-text-area-border-color: var(--calcite-color-status-danger)}.text-area.text-area--invalid:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.footer--slotted{min-inline-size:18rem}.text-area.text-area--only{border-radius:var(--calcite-internal-text-area-corner-radius)}.text-area:not(.text-area--only,.text-area--invalid){--calcite-internal-text-area-border-block-end-color: var( --calcite-text-area-divider-color, var(--calcite-color-border-3) )}.footer{box-sizing:border-box;display:flex;align-items:center;border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-footer-border-color);border-block-start:var(--calcite-border-width-none);min-block-size:var(--calcite-internal-text-area-footer-min-height)}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));font-weight:var(--calcite-font-weight-regular);color:var(--calcite-text-area-character-limit-text-color, var(--calcite-color-text-2));padding-inline-start:var(--calcite-spacing-md)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-status-danger)}.readonly{background-color:var(--calcite-text-area-background-color, var(--calcite-color-background));font-weight:var(--calcite-font-weight-medium)}.footer.readonly{background-color:var(--calcite-internal-text-area-footer-background-color, var(--calcite-color-background))}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-area.text-area--only{block-size:100%;min-block-size:var(--calcite-text-area-min-height, 0)}:host([resize=none]) .text-area{resize:none}:host([resize=horizontal]) .text-area{resize:horizontal}:host([resize=vertical]) .text-area{resize:vertical}:host([scale=s]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-xxs);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-sm);--calcite-internal-text-area-footer-min-height: 1.75rem}:host([scale=s]) .text-area,:host([scale=s]) .footer,:host([scale=s]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--2))}:host([scale=s]) .character-limit{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-sm);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-md);--calcite-internal-text-area-footer-min-height: 2.25rem}:host([scale=l]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-md);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-lg);--calcite-internal-text-area-footer-min-height: 2.75rem}:host([scale=l]) .text-area,:host([scale=l]) .footer,:host([scale=l]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size-0))}:host([scale=l]) .character-limit{padding-inline-start:var(--calcite-spacing-lg)}:host([status=invalid]){--calcite-internal-text-area-border-color: var(--calcite-color-status-danger)}:host([status=invalid]) .text-area:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .text-area,:host([disabled]) .footer{opacity:var(--calcite-opacity-half)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:inline-block;block-size:100%;inline-size:100%;--calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-border-input));--calcite-internal-text-area-footer-border-color: var( --calcite-text-area-footer-border-color, var(--calcite-internal-text-area-border-color) );--calcite-internal-text-area-corner-radius: var( --calcite-text-area-corner-radius, var(--calcite-corner-radius-default) );--calcite-internal-text-area-shadow: var(--calcite-text-area-shadow, var(--calcite-shadow-none));--calcite-internal-text-area-footer-background-color: var( --calcite-text-area-footer-background-color, var(--calcite-text-area-background-color, var(--calcite-color-foreground-1)) );min-block-size:var(--calcite-text-area-min-height, calc(2 * var(--calcite-internal-text-area-padding-block) + 2 * var(--calcite-border-width-sm)));min-inline-size:var(--calcite-text-area-min-width, 12rem)}.wrapper{box-sizing:border-box;block-size:100%;inline-size:100%;box-shadow:var(--calcite-internal-text-area-shadow);border-radius:var(--calcite-internal-text-area-corner-radius)}.text-area,.footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));padding-block:var(--calcite-internal-text-area-padding-block);padding-inline:var(--calcite-internal-text-area-padding-inline)}.footer{background-color:var(--calcite-internal-text-area-footer-background-color);border-radius:0 0 var(--calcite-internal-text-area-corner-radius) var(--calcite-internal-text-area-corner-radius)}.text-area{position:relative;margin:0;box-sizing:border-box;display:block;inline-size:100%;--calcite-internal-text-area-border-block-end-color: var(--calcite-internal-text-area-border-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-border-color);border-block-end-color:var(--calcite-internal-text-area-border-block-end-color);color:var(--calcite-text-area-text-color, var(--calcite-color-text-1));font-family:inherit;max-block-size:var(--calcite-text-area-max-height);min-block-size:calc(var(--calcite-text-area-min-height, 0px) - var(--calcite-internal-text-area-footer-min-height, 0px));max-inline-size:var(--calcite-text-area-max-width);min-inline-size:var(--calcite-text-area-min-width, 12rem);background-color:var(--calcite-text-area-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-internal-text-area-corner-radius) var(--calcite-internal-text-area-corner-radius) 0 0}.text-area::placeholder{font-weight:var(--calcite-font-weight-normal)}@media screen and (max-width:480px){.text-area{resize:none}}.text-area:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.text-area--invalid{--calcite-internal-text-area-border-color: var(--calcite-color-status-danger)}.text-area.text-area--invalid:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.footer--slotted{min-inline-size:18rem}.text-area.text-area--only{border-radius:var(--calcite-internal-text-area-corner-radius)}.text-area:not(.text-area--only,.text-area--invalid){--calcite-internal-text-area-border-block-end-color: var( --calcite-text-area-divider-color, var(--calcite-color-border-3) )}.loader-container{position:relative;block-size:inherit}.loader{position:absolute;inset-block-start:0;inset-block-start:var(--calcite-spacing-px);inset-inline:var(--calcite-spacing-px)}.footer{box-sizing:border-box;display:flex;align-items:center;border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-footer-border-color);border-block-start:var(--calcite-border-width-none);min-block-size:var(--calcite-internal-text-area-footer-min-height)}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));font-weight:var(--calcite-font-weight-regular);color:var(--calcite-text-area-character-limit-text-color, var(--calcite-color-text-2));padding-inline-start:var(--calcite-spacing-md)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-status-danger)}.readonly{background-color:var(--calcite-text-area-background-color, var(--calcite-color-background));font-weight:var(--calcite-font-weight-medium)}.footer.readonly{background-color:var(--calcite-internal-text-area-footer-background-color, var(--calcite-color-background))}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-area.text-area--only{block-size:100%;min-block-size:var(--calcite-text-area-min-height, 0)}:host([resize=none]) .text-area{resize:none}:host([resize=horizontal]) .text-area{resize:horizontal}:host([resize=vertical]) .text-area{resize:vertical}:host([scale=s]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-xxs);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-sm);--calcite-internal-text-area-footer-min-height: 1.75rem}:host([scale=s]) .text-area,:host([scale=s]) .footer,:host([scale=s]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--2))}:host([scale=s]) .character-limit{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-sm);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-md);--calcite-internal-text-area-footer-min-height: 2.25rem}:host([scale=l]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-md);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-lg);--calcite-internal-text-area-footer-min-height: 2.75rem}:host([scale=l]) .text-area,:host([scale=l]) .footer,:host([scale=l]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size-0))}:host([scale=l]) .character-limit{padding-inline-start:var(--calcite-spacing-lg)}:host([status=invalid]){--calcite-internal-text-area-border-color: var(--calcite-color-status-danger)}:host([status=invalid]) .text-area:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .text-area,:host([disabled]) .footer{opacity:var(--calcite-opacity-half)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
 class TextArea extends LitElement {
   constructor() {
     super(...arguments);
@@ -73,9 +78,11 @@ class TextArea extends LitElement {
     }, RESIZE_TIMEOUT, { edges: ["trailing"] });
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.groupSeparator = false;
     this.limitText = false;
+    this.loading = false;
     this.readOnly = false;
     this.required = false;
     this.resize = "both";
@@ -100,7 +107,7 @@ class TextArea extends LitElement {
     this.calciteTextAreaInput = createEvent();
   }
   static {
-    this.properties = { endSlotHasElements: [16, {}, { state: true }], startSlotHasElements: [16, {}, { state: true }], columns: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, limitText: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], numberingSystem: 1, placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], resize: [3, {}, { reflect: true }], rows: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, wrap: [3, {}, { reflect: true }] };
+    this.properties = { endSlotHasElements: [16, {}, { state: true }], startSlotHasElements: [16, {}, { state: true }], columns: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, limitText: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], numberingSystem: 1, placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], resize: [3, {}, { reflect: true }], rows: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, wrap: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -119,7 +126,6 @@ class TextArea extends LitElement {
     this.cancelable.add(this.updateSizeToAuto);
   }
   updated() {
-    updateHostInteraction(this);
     this.setTextAreaHeight();
   }
   disconnectedCallback() {
@@ -214,7 +220,8 @@ class TextArea extends LitElement {
   }
   render() {
     const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)}>${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<textarea aria-describedby=${this.guid ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid" || this.isCharacterLimitExceeded()} .ariaLabel=${getLabelText(this)} .autofocus=${this.el.autofocus} class=${safeClassMap({
+    const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)}>${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.loaderContainer)}>${this.loading ? loader : null}<textarea aria-describedby=${this.guid ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid" || this.isCharacterLimitExceeded()} .ariaLabel=${getLabelText(this)} .autofocus=${this.el.autofocus} class=${safeClassMap({
       [CSS.textArea]: true,
       [CSS.readOnly]: this.readOnly,
       [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
@@ -227,7 +234,7 @@ class TextArea extends LitElement {
     })} ${ref(this.footerRef)}><div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements
-    })}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${HiddenFormInputSlot({ component: this })}${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, ref: this.setValidationRef, scale: this.scale, status: this.status }) : null}</div>` });
+    })}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${HiddenFormInputSlot({ component: this })}${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, ref: this.setValidationRef, scale: this.scale, status: this.status }) : null}</div>` });
   }
   renderCharacterLimit() {
     if (this.maxLength) {

package/dist/components/calcite-text-area/index.d.ts

@@ -1,2 +1 @@
-import "../calcite-input-message/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-text-area/index.js

@@ -1,2 +1,3 @@
 import "../calcite-input-message/index.js";
+import "../calcite-progress/index.js";
 export * from "./customElement.js";