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

package/dist/components/calcite-table-row/customElement.js

@@ -4,25 +4,23 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, render } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { f as focusElementInGroup } from "../../chunks/dom.js";
+import { e as focusElementInGroup, a as getSlotAssignedElements } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { i as isTableHeader } from "../../chunks/resources30.js";
+import { i as isTableCell } from "../../chunks/resources29.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  lastVisibleRow: "last-visible-row"
-};
-const ICONS = {
-  checkSquare: "check-square-f",
-  square: "square",
-  circleF: "circle-f",
-  circle: "circle"
-};
-const styles = css`@charset "UTF-8";: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{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{border-block-end:0}@-moz-document url-prefix(){tr{box-shadow:inset 0 -1px 0 0 var(--calcite-table-row-border-color)}tr.last-visible-row{box-shadow:inset 0 -1px 0 0 transparent}}:host([item-hidden]){display:none}`;
+import { I as ICONS, C as CSS } from "../../chunks/resources31.js";
+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{display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{opacity:var(--calcite-opacity-disabled);pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)) )}:host([slot=table-header]) tr{position:var(--calcite-internal-table-header-row-position);inset-block-start:var(--calcite-internal-table-header-offset, 0);z-index:var(--calcite-internal-table-header-z-index, calc(var(--calcite-z-index) + 1))}:host([selected]) calcite-table-cell{--calcite-internal-table-cell-background-color: var( --calcite-table-row-background-color-selected, var(--calcite-color-foreground-1) )}tr{--calcite-internal-table-row-border-block-end-width: var(--calcite-border-width-sm);--calcite-internal-table-row-border-block-end-color: var(--calcite-table-row-border-color, transparent);background-color:var(--calcite-table-row-background-color, var(--calcite-table-row-background, var(--calcite-color-foreground-1)))}tr.last-visible-row{--calcite-internal-table-row-border-block-end-width: 0;--calcite-internal-table-row-border-block-end-color: transparent}:host([item-hidden]){display:none}`;
 class TableRow extends LitElement {
   constructor() {
     super();
+    this.numberedCellRef = createRef();
+    this.numberedHeaderRef = createRef();
     this.rowCells = [];
-    this.tableRowSlotRef = createRef();
+    this.rowSlotRef = createRef();
+    this.selectionCellRef = createRef();
+    this.selectionHeaderRef = createRef();
     this.userTriggered = false;
     this._selected = false;
     this.clickHandler = () => {
@@ -42,14 +40,14 @@ class TableRow extends LitElement {
     this.interactionMode = "interactive";
     this.lastVisibleRow = false;
     this.numbered = false;
+    this.stickyHeaderEnabled = false;
     this.selectionMode = "none";
     this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
     this.calciteInternalTableRowSelect = createEvent({ cancelable: false });
     this.calciteTableRowSelect = createEvent({ cancelable: false });
-    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
   }
   static {
-    this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
+    this.properties = { alignment: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], bodyRowCount: [9, {}, { type: Number }], cellCount: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, lastVisibleRow: [5, {}, { type: Boolean }], numbered: [5, {}, { type: Boolean }], positionAll: [9, {}, { type: Number }], positionSection: [9, {}, { type: Number }], positionSectionLocalized: 1, readCellContentsToAT: [5, {}, { type: Boolean }], rowType: 1, scale: 1, stickyHeaderEnabled: [5, {}, { type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectedRowCount: [9, {}, { type: Number }], selectedRowCountLocalized: 1, selectionMode: 1 };
   }
   static {
     this.styles = styles;
@@ -65,6 +63,7 @@ class TableRow extends LitElement {
     }
   }
   load() {
+    this.listenOn(document, "calciteInternalTableRowFocusChange", this.calciteInternalTableRowFocusChangeHandler);
     this.listenOn(this.el.shadowRoot, "slotchange", this.handleSlotChange);
   }
   willUpdate(changes) {
@@ -79,7 +78,7 @@ class TableRow extends LitElement {
     }
   }
   loaded() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       this.updateCells();
     }
   }
@@ -87,12 +86,12 @@ class TableRow extends LitElement {
     this.updateCells();
   }
   handleCellChanges() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       this.updateCells();
     }
   }
   handleDelayedCellChanges() {
-    if (this.tableRowEl && this.rowCells.length > 0) {
+    if (this.rowCells.length > 0) {
       requestAnimationFrame(() => this.updateCells());
     }
   }
@@ -123,7 +122,7 @@ class TableRow extends LitElement {
     const key = event.key;
     const isControl = event.ctrlKey;
     const cells = this.rowCells;
-    if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) {
+    if (isTableCell(el) || isTableHeader(el)) {
       switch (key) {
         case "ArrowUp":
           this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous");
@@ -180,10 +179,14 @@ class TableRow extends LitElement {
   }
   updateCells() {
     const alignment = this.alignment ? this.alignment : this.rowType !== "head" ? "center" : "start";
-    const slottedCells = this.tableRowSlotRef.value?.assignedElements({ flatten: true })?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header")) ?? [];
-    const tableRowEls = this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell");
-    const renderedCells = tableRowEls ? Array.from(tableRowEls).filter((el) => el.numberCell || el.selectionCell) : void 0;
-    const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+    const slottedCells = this.rowSlotRef.value ? getSlotAssignedElements(this.rowSlotRef.value, "calcite-table-cell, calcite-table-header") : [];
+    const renderedCells = [
+      this.numberedCellRef.value,
+      this.numberedHeaderRef.value,
+      this.selectionCellRef.value,
+      this.selectionHeaderRef.value
+    ].filter((cell) => cell != null);
+    const cells = renderedCells.concat(slottedCells);
     if (cells.length > 0) {
       cells?.forEach((cell, index) => {
         cell.interactionMode = this.interactionMode;
@@ -194,8 +197,11 @@ class TableRow extends LitElement {
         cell.positionInRow = index + 1;
         cell.scale = this.scale;
         if (cell.nodeName === "CALCITE-TABLE-CELL") {
+          const rowSpan = cell.rowSpan || 1;
+          const reachesBodyEnd = this.rowType === "body" && rowSpan > 1 && this.positionSection + rowSpan >= this.bodyRowCount;
           cell.readCellContentsToAT = this.readCellContentsToAT;
           cell.disabled = this.disabled;
+          cell.reachesBodyEnd = reachesBodyEnd;
         }
       });
     }
@@ -215,18 +221,17 @@ class TableRow extends LitElement {
     return html`<calcite-icon .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
   }
   renderSelectableCell() {
-    return this.rowType === "head" ? keyed("selection-head", html`<calcite-table-header alignment=center .bodyRowCount=${this.bodyRowCount} @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .selectedRowCount=${this.selectedRowCount} .selectedRowCountLocalized=${this.selectedRowCountLocalized} .selectionCell=${true} .selectionMode=${this.selectionMode}></calcite-table-header>`) : this.rowType === "body" ? keyed("selection-body", html`<calcite-table-cell alignment=center @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .parentRowIsSelected=${this.selected} .parentRowPositionLocalized=${this.positionSectionLocalized} .selectionCell=${true}>${this.renderSelectionIcon()}</calcite-table-cell>`) : keyed("selection-foot", html`<calcite-table-cell alignment=center .parentRowAlignment=${this.alignment} .selectionCell=${true}></calcite-table-cell>`);
+    return this.rowType === "head" ? keyed("selection-head", html`<calcite-table-header alignment=center .bodyRowCount=${this.bodyRowCount} @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .selectedRowCount=${this.selectedRowCount} .selectedRowCountLocalized=${this.selectedRowCountLocalized} .selectionCell=${true} .selectionMode=${this.selectionMode} ${ref(this.selectionHeaderRef)}></calcite-table-header>`) : this.rowType === "body" ? keyed("selection-body", html`<calcite-table-cell alignment=center @click=${this.clickHandler} @keydown=${this.handleKeyboardSelection} .parentRowAlignment=${this.alignment} .parentRowIsSelected=${this.selected} .parentRowPositionLocalized=${this.positionSectionLocalized} .selectionCell=${true} ${ref(this.selectionCellRef)}>${this.renderSelectionIcon()}</calcite-table-cell>`) : keyed("selection-foot", html`<calcite-table-cell alignment=center .parentRowAlignment=${this.alignment} .selectionCell=${true} ${ref(this.selectionCellRef)}></calcite-table-cell>`);
   }
   renderNumberedCell() {
-    return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment}></calcite-table-cell>`);
+    return this.rowType === "head" ? keyed("numbered-head", html`<calcite-table-header alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedHeaderRef)}></calcite-table-header>`) : this.rowType === "body" ? keyed("numbered-body", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedCellRef)}>${this.positionSectionLocalized}</calcite-table-cell>`) : keyed("numbered-foot", html`<calcite-table-cell alignment=center .numberCell=${true} .parentRowAlignment=${this.alignment} ${ref(this.numberedCellRef)}></calcite-table-cell>`);
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<tr .ariaRowIndex=${this.positionAll + 1} .ariaSelected=${this.selected} class=${safeClassMap({ [CSS.lastVisibleRow]: this.lastVisibleRow })} @keydown=${this.keyDownHandler} ${ref((el) => {
       if (!el) {
         return;
       }
-      this.tableRowEl = el;
-      render(html`${this.numbered && this.renderNumberedCell() || ""}${this.selectionMode !== "none" && this.renderSelectableCell() || ""}<slot ${ref(this.tableRowSlotRef)}></slot>`, el);
+      render(html`${this.numbered && this.renderNumberedCell() || ""}${this.selectionMode !== "none" && this.renderSelectableCell() || ""}<slot ${ref(this.rowSlotRef)}></slot>`, el);
     })}></tr>` });
   }
 }

package/dist/components/calcite-tabs/customElement.d.ts

@@ -1,11 +1,18 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
-import type { TabLayout, TabPosition } from "./interfaces.js";
+import type { Scale } from "../types.js";
+import type { TabLayout, TabPosition } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-tab-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-tab-border-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
  * @slot  - A slot for adding `calcite-tab`s.
  * @slot [title-group] - A slot for adding a `calcite-tab-nav`.
  */

package/dist/components/calcite-tabs/customElement.js

@@ -3,14 +3,9 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { a as slotChangeGetAssignedElements, D as getSlotAssignedElements } from "../../chunks/dom.js";
-const CSS = {
-  section: "section"
-};
-const SLOTS = {
-  titleGroup: "title-group"
-};
-const styles = css`:host{display:flex;flex-direction:column;background-color:var(--calcite-tab-background-color, var(--calcite-color-transparent))}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{display:flex;flex-grow:1;overflow:hidden;border-width:1px;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px}:host([bordered][scale=s]) section{padding:.75rem}:host([bordered][scale=m]) section{padding:.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media(forced-colors:active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}`;
+import { b as slotChangeGetAssignedElements, a as getSlotAssignedElements } from "../../chunks/dom.js";
+import { S as SLOTS, C as CSS } from "../../chunks/resources28.js";
+const styles = css`:host{display:flex;flex-direction:column;background-color:var(--calcite-tab-background-color, var(--calcite-color-transparent))}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{border-width:var(--calcite-border-width-sm);display:flex;flex-grow:1;overflow:hidden;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:var(--calcite-border-width-none);border-block-end-width:var(--calcite-border-width-sm)}:host([bordered][scale=s]) section{padding:var(--calcite-space-md)}:host([bordered][scale=m]) section{padding:var(--calcite-space-sm)}:host([bordered][scale=l]) section{padding:var(--calcite-space-lg)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media(forced-colors:active){:host([bordered]) section{border-block-start-width:var(--calcite-border-width-none);border-block-end-width:var(--calcite-border-width-sm)}:host([position=bottom][bordered]) section{border-block-start-width:var(--calcite-border-width-sm);border-block-end-width:var(--calcite-border-width-none)}}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tabs extends LitElement {
   constructor() {
     super();
@@ -26,7 +21,7 @@ class Tabs extends LitElement {
     this.listen("calciteInternalTabNavSlotChange", this.calciteInternalTabNavSlotChangeHandler);
   }
   static {
-    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], hasVisibleTitles: [16, {}, { state: true }], bordered: [5, {}, { type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
+    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], hasVisibleTitles: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;

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

@@ -1,24 +1,43 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-text-area-background-color": "*";
+  /** Specifies the component's text area border color. */
+  "--calcite-text-area-border-color": "*";
+  /** Specifies the color of the character limit text displayed in the footer of the component. */
+  "--calcite-text-area-character-limit-text-color": "*";
+  /** Specifies the color of the divider between the text area and footer. */
+  "--calcite-text-area-divider-color": "*";
+  /** Specifies the font size of the text area and footer. */
+  "--calcite-text-area-font-size": "*";
+  /** Specifies the component's text area maximum height. */
+  "--calcite-text-area-max-height": "*";
+  /** Specifies the component's text area minimum height. */
+  "--calcite-text-area-min-height": "*";
+  /** Specifies the component's text area maximum width. */
+  "--calcite-text-area-max-width": "*";
+  /** Specifies the component's text area minimum width. */
+  "--calcite-text-area-min-width": "*";
+  /** Specifies the component's text color. */
+  "--calcite-text-area-text-color": "*";
+  /** Specifies the footer's border color. */
+  "--calcite-text-area-footer-border-color": "*";
+  /** Specifies component's corner radius. */
+  "--calcite-text-area-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-text-area-shadow": "*";
+  /** Specifies the footer's background color. */
+  "--calcite-text-area-footer-background-color": "*";
+}
+}
 
 /**
- * @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.
@@ -69,13 +88,17 @@ export abstract class TextArea extends LitElement {
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
    */
   accessor maxLength: number | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      invalid?: string;
-      loading?: string;
-      required?: string;
-      tooLong?: string;
-      tooShort?: string;
+      invalid?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
+      tooLong?: string | undefined;
+      tooShort?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -85,7 +108,9 @@ export abstract class TextArea extends LitElement {
    */
   accessor minLength: number | undefined;
   /**
-   * Specifies the name of the component. Required to pass the component's value on form submission.
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
    */

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

@@ -1,12 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { throttle } from "es-toolkit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { css, html } from "lit";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.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";
@@ -15,11 +16,11 @@ import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.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 useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
 const CSS = {
-  assistiveText: "assistive-text",
   characterLimit: "character-limit",
   content: "content",
   container: "container",
@@ -45,19 +46,20 @@ const SLOTS = {
 };
 const RESIZE_TIMEOUT = 100;
 const NO_DIMENSIONS = Object.freeze({ height: 0, width: 0 });
-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;line-height:var(--calcite-font-line-height-base);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;line-height:var(--calcite-font-line-height-base);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{display:inline-block;position:relative;inline-size:100%;block-size:100%;box-sizing:border-box;--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));--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{block-size:100%;inline-size:100%;box-sizing:border-box;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;display:block;box-sizing:border-box;inline-size:100%;margin:0;--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;line-height:var(--calcite-font-line-height-base);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(-1 * var(--calcite-space-base) * (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(-1 * var(--calcite-spacing-base) * (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{display:flex;box-sizing:border-box;align-items:center;line-height:var(--calcite-font-line-height-base);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;justify-content:flex-end;align-items:center;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;justify-content:space-between;inline-size:100%}.footer--end-only{justify-content:flex-end}.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(-1 * var(--calcite-spacing-base) * (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}: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-text-area-placeholder-text-color, var(--calcite-color-text-3))}`;
 class TextArea extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     this.attributeWatch = useWatchAttributes(["autofocus", "spellcheck"], this.handleGlobalAttributesChanged);
     this.footerRef = createRef();
+    this.loaderContainerRef = createRef();
     this.formSupport = useForm({
       inputType: "text"
     })(this);
     this.guid = guid();
     this.resizeObserver = createObserver("resize", async () => {
       await this.componentOnReady();
-      const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth, validationMessageHeight } = this.getHeightAndWidthOfElements();
+      const { textAreaHeight, textAreaWidth, loaderHeight, elWidth, footerHeight, footerWidth } = this.getHeightAndWidthOfElements();
       if (footerWidth > 0 && footerWidth !== textAreaWidth) {
         this.footerRef.value.style.width = `${textAreaWidth}px`;
       }
@@ -65,10 +67,10 @@ class TextArea extends LitElement {
         return;
       }
       const { width: elStyleWidth, height: elStyleHeight } = getComputedStyle(this.el);
-      if (elWidth !== textAreaWidth && elStyleWidth !== "auto") {
+      if (this.dimensionsDiffer(elWidth, textAreaWidth) && elStyleWidth !== "auto") {
         this.updateSizeToAuto("width");
       }
-      if (elHeight !== textAreaHeight + footerHeight + validationMessageHeight && elStyleHeight !== "auto") {
+      if (loaderHeight > 0 && textAreaHeight > 0 && footerHeight > 0 && this.dimensionsDiffer(loaderHeight, textAreaHeight + footerHeight) && elStyleHeight !== "auto") {
         this.updateSizeToAuto("height");
       }
     });
@@ -77,7 +79,7 @@ class TextArea extends LitElement {
       this.el.style[dimension] = "auto";
     }, RESIZE_TIMEOUT, { edges: ["trailing"] });
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.endSlotHasElements = false;
     this.startSlotHasElements = false;
@@ -94,15 +96,16 @@ class TextArea extends LitElement {
     this.wrap = "soft";
     this.calciteTextAreaChange = createEvent();
     this.calciteTextAreaInput = createEvent();
+    useLabel(this);
   }
   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 }], 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: [32, {}, { readOnly: true, 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 }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, wrap: [3, {}, { reflect: true }] };
   }
   static {
     this.formAssociated = true;
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   async selectText() {
     await this.componentOnReady();
@@ -113,7 +116,6 @@ class TextArea extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    connectLabel(this);
     this.cancelable.add(this.updateSizeToAuto);
   }
   willUpdate(changes) {
@@ -132,9 +134,12 @@ class TextArea extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.resizeObserver?.disconnect();
   }
+  dimensionsDiffer(dimensionA, dimensionB) {
+    const dimensionTolerance = 1;
+    return Math.abs(dimensionA - dimensionB) > dimensionTolerance;
+  }
   updateNumberFormatter() {
     numberStringFormatter.numberFormatOptions = {
       locale: this.messages._lang,
@@ -182,24 +187,26 @@ class TextArea extends LitElement {
     this.textAreaEl = el;
   }
   setTextAreaHeight() {
-    const { textAreaHeight, elHeight, footerHeight, validationMessageHeight } = this.getHeightAndWidthOfElements();
-    if (footerHeight > 0 && textAreaHeight + footerHeight + validationMessageHeight != elHeight) {
-      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;
+    const { textAreaHeight, loaderHeight, footerHeight } = this.getHeightAndWidthOfElements();
+    if (loaderHeight <= 0 || textAreaHeight <= 0 || footerHeight <= 0) {
+      return;
+    }
+    if (this.dimensionsDiffer(textAreaHeight + footerHeight, loaderHeight)) {
+      this.textAreaEl.style.height = `${loaderHeight - footerHeight}px`;
     }
   }
   getHeightAndWidthOfElements() {
     const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl ? this.textAreaEl.getBoundingClientRect() : NO_DIMENSIONS;
-    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
+    const { height: loaderHeight } = this.loaderContainerRef.value ? this.loaderContainerRef.value.getBoundingClientRect() : NO_DIMENSIONS;
+    const { width: elWidth } = this.el.getBoundingClientRect();
     const { height: footerHeight, width: footerWidth } = this.footerRef.value ? this.footerRef.value.getBoundingClientRect() : NO_DIMENSIONS;
-    const { height: validationMessageHeight } = this.validationMessageEl ? this.validationMessageEl.getBoundingClientRect() : NO_DIMENSIONS;
     return {
       textAreaHeight,
       textAreaWidth,
-      elHeight,
+      loaderHeight,
       elWidth,
       footerHeight,
-      footerWidth,
-      validationMessageHeight
+      footerWidth
     };
   }
   replacePlaceholdersInMessages() {
@@ -208,16 +215,10 @@ class TextArea extends LitElement {
   isCharacterLimitExceeded() {
     return this.maxLength !== void 0 && this.value?.length > this.maxLength || false;
   }
-  setValidationRef(el) {
-    if (!el) {
-      return;
-    }
-    this.validationMessageEl = el;
-  }
   render() {
     const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
     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({
+    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)} ${ref(this.loaderContainerRef)}>${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(),
@@ -230,7 +231,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>${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>` });
+    })}><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>${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS_UTILITY.screenReaderText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}</div>` });
   }
   renderCharacterLimit() {
     if (this.maxLength) {

package/dist/components/calcite-tile/customElement.d.ts

@@ -1,20 +1,34 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Alignment, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** When the parent `calcite-tile-group` has a `selectionMode` that is not `"none"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border. */
+  "--calcite-tile-accent-color-press": "*";
+  /** Specifies the component's background color. */
+  "--calcite-tile-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-tile-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-tile-corner-radius": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-tile-heading-text-color": "*";
+  /** When `href` is present, specifies the component's link color. */
+  "--calcite-tile-link-color": "*";
+  /** Specifies the shadow around the component. */
+  "--calcite-tile-shadow": "*";
+  /** Specifies the component's `description` and `icon` text color, but not the `heading` text color. */
+  "--calcite-tile-text-color": "*";
+  /** Specifies the component's link text color. */
+  "--calcite-tile-link-text-color": "*";
+}
+}
+
 /**
- * @cssproperty [--calcite-tile-accent-color-press] - When the parent `calcite-tile-group` has a `selectionMode` that is not `"none"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border.
- * @cssproperty [--calcite-tile-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-tile-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-tile-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-tile-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-tile-link-color] - When `href` is present, specifies the component's link color.
- * @cssproperty [--calcite-tile-shadow] - Specifies the shadow around the component.
- * @cssproperty [--calcite-tile-text-color] - Specifies the component's `description` and `icon` text color, but not the `heading` text color.
- * @cssproperty [--calcite-tile-link-text-color] - Specifies the component's link text color.
- * @slot [content-top] - A slot for adding non-actionable elements above the component's content.  Content slotted here will render in place of the `icon` property.
+ * @slot [content-top] - A slot for adding non-actionable elements above the component's content.
  * @slot [content-bottom] - A slot for adding non-actionable elements below the component's content.
  */
 export abstract class Tile extends LitElement {