@esri/calcite-components 3.2.0-next.8 → 3.2.0

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit";
@@ -15,8 +15,6 @@ const SLOTS = {
 };
 const styles = css`:host{display:flex;flex-direction:column}: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}`;
 class Tabs extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.tabs = [];
@@ -28,7 +26,7 @@ class Tabs extends LitElement {
     this.listen("calciteInternalTabNavSlotChange", this.calciteInternalTabNavSlotChangeHandler);
   }
   static {
-    this.properties = { tabs: [16, { state: true }], titles: [16, { state: true }], bordered: [5, { type: Boolean }], layout: [3, { reflect: true }], position: [3, { reflect: true }], scale: [3, { reflect: true }] };
+    this.properties = { tabs: [16, {}, { state: true }], titles: [16, {}, { state: true }], bordered: [5, {}, { type: Boolean }], layout: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -49,8 +47,6 @@ class Tabs extends LitElement {
       this.updateItems();
     }
   }
-  // #endregion
-  // #region Private Methods
   calciteInternalTabNavSlotChangeHandler(event) {
     event.stopPropagation();
     if (event.detail.length !== this.titles.length) {
@@ -60,11 +56,6 @@ class Tabs extends LitElement {
   defaultSlotChangeHandler(event) {
     this.tabs = slotChangeGetAssignedElements(event, "calcite-tab");
   }
-  /**
-   * Matches up elements from the internal `tabs` and `titles` to automatically
-   * update the ARIA attributes and link `<calcite-tab>` and
-   * `<calcite-tab-title>` components.
-   */
   async updateAriaSettings() {
     await this.componentOnReady();
     let tabIds;
@@ -108,8 +99,6 @@ class Tabs extends LitElement {
   setDefaultSlotRef(el) {
     this.slotEl = el;
   }
-  // #endregion
-  // #region Rendering
   render() {
     return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.setDefaultSlotRef)}></slot></section>`;
   }

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

@@ -10,9 +10,9 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
 import { Label } from '../calcite-label/customElement.js';
 
 /**
- * @slot - A slot for adding text.
- * @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.
+ * @slot  - A slot for adding text.
+ * @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 {
     /**
@@ -25,6 +25,7 @@ export declare class TextArea extends LitElement {
      * 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;
     /**
@@ -33,12 +34,18 @@ export declare class TextArea extends LitElement {
      * 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. */
+    /**
+     * 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 `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.
+     *
+     * @default false
      */
     limitText: boolean;
     /**
@@ -50,20 +57,6 @@ export declare class TextArea extends LitElement {
     maxLength: number;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: {
-        invalid: string;
-        tooLong: string;
-        tooShort: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
-        invalid: string;
-        tooLong: string;
-        tooShort: string;
-    }>;
     /**
      * When the component resides in a form,
      * specifies the minimum number of characters allowed.
@@ -89,6 +82,7 @@ export declare class TextArea extends LitElement {
      * 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;
     /**
@@ -96,9 +90,14 @@ export declare class TextArea extends LitElement {
      * 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. */
+    /**
+     * Specifies if the component is resizable.
+     *
+     * @default "both"
+     */
     resize: "both" | "horizontal" | "vertical" | "none";
     /**
      * Specifies the component's number of rows.
@@ -106,9 +105,17 @@ export declare class TextArea extends LitElement {
      * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)
      */
     rows: number;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: "l" | "m" | "s";
-    /** Specifies the status of the input field, which determines message and icons. */
+    /**
+     * 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: IconNameOrString | boolean;
@@ -117,16 +124,20 @@ export declare class TextArea extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
-    /** The component's value. */
+    /**
+     * 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`. */
@@ -134,7 +145,16 @@ export declare class TextArea extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires each time a new `value` is typed and committed. */
-    readonly calciteTextAreaChange: TargetedEvent<this, undefined>;
+    readonly calciteTextAreaChange: TargetedEvent<this, void>;
     /** Fires each time a new `value` is typed. */
-    readonly calciteTextAreaInput: TargetedEvent<this, undefined>;
+    readonly calciteTextAreaInput: TargetedEvent<this, void>;
+    private messages: {
+        invalid: string;
+        tooLong: string;
+        tooShort: string;
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        invalid: string;
+        tooLong: string;
+        tooShort: string;
+    }>;
 }

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

@@ -1,13 +1,13 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit-html/directives/live.js";
 import { html } from "lit-html";
 import { throttle } from "lodash-es";
 import { createRef, ref } from "lit-html/directives/ref.js";
-import { LitElement, createEvent, stringOrBoolean, nothing, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/components-controllers";
+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";
@@ -33,7 +33,8 @@ const CSS = {
   hide: "hide",
   footerEndSlotOnly: "footer--end-only",
   textArea: "text-area",
-  textAreaOnly: "text-area--only"
+  textAreaOnly: "text-area--only",
+  wrapper: "wrapper"
 };
 const IDS = {
   validationMessage: "textAreaValidationMessage"
@@ -44,7 +45,7 @@ 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;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) )}.text-area,.footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));background-color:var(--calcite-text-area-background-color, var(--calcite-color-foreground-1));padding-block:var(--calcite-spacing-sm);padding-inline:var(--calcite-spacing-md)}.text-area{position:relative;margin:0;box-sizing:border-box;display:block;inline-size:100%;font-family:var(--calcite-font-family);--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:var(--calcite-sans-family);max-block-size:var(--calcite-text-area-max-height);min-block-size:var(--calcite-text-area-min-height);max-inline-size:var(--calcite-text-area-max-width);min-inline-size:var(--calcite-text-area-min-width, 12rem)}.text-area::placeholder{font-weight:var(--calcite-font-weight-normal)}@media screen and (max-width: 480px){.text-area{resize:none}}.text-area:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.footer--slotted{min-inline-size:18rem}.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:2.25rem}.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-color-background);font-weight:var(--calcite-font-weight-medium)}.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%}:host([resize=none]) .text-area{resize:none}:host([resize=horizontal]) .text-area{resize:horizontal}:host([resize=vertical]) .text-area{resize:vertical}:host([scale=s]) .text-area,:host([scale=s]) .footer,:host([scale=s]) .character-limit{padding-inline-start:.5rem;font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--2))}:host([scale=s]) .footer{min-block-size:1.75rem}:host([scale=s]) .text-area{padding-block:.25rem;padding-inline:.5rem}:host([scale=m]) .text-area{padding-block:.5rem;padding-inline:.75rem}:host([scale=m]) .footer{padding-block:.5rem;padding-inline:.75rem;min-block-size:2.25rem}:host([scale=l]) .text-area,:host([scale=l]) .footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size-0));padding-block:var(--calcite-spacing-md);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .footer{min-block-size: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));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:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .text-area,:host([disabled]) .footer{opacity:var(--calcite-opacity-half)}.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}`;
+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%;font-family:var(--calcite-font-family);--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:var(--calcite-sans-family);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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(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:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .text-area,:host([disabled]) .footer{opacity:var(--calcite-opacity-half)}.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);
@@ -53,26 +54,28 @@ class TextArea extends LitElement {
     this.guid = guid();
     this.resizeObserver = createObserver("resize", async () => {
       await this.componentOnReady();
-      const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } = this.getHeightAndWidthOfElements();
+      const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth, validationMessageHeight } = this.getHeightAndWidthOfElements();
       if (footerWidth > 0 && footerWidth !== textAreaWidth) {
         this.footerEl.value.style.width = `${textAreaWidth}px`;
       }
-      if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {
-        this.setHeightAndWidthToAuto();
+      if (this.resize === "none") {
+        return;
       }
-    });
-    this.setHeightAndWidthToAuto = throttle(() => {
-      if (this.resize === "vertical" || this.resize === "both") {
-        this.el.style.height = "auto";
+      const { width: elStyleWidth, height: elStyleHeight } = getComputedStyle(this.el);
+      if (elWidth !== textAreaWidth && elStyleWidth !== "auto") {
+        this.updateSizeToAuto("width");
       }
-      if (this.resize === "horizontal" || this.resize === "both") {
-        this.el.style.width = "auto";
+      if (elHeight !== textAreaHeight + footerHeight + validationMessageHeight && elStyleHeight !== "auto") {
+        this.updateSizeToAuto("height");
       }
+    });
+    this.updateSizeToAuto = throttle((dimension) => {
+      this.el.style[dimension] = "auto";
     }, RESIZE_TIMEOUT, { leading: false });
+    this.messages = useT9n({ blocking: true });
     this.disabled = false;
     this.groupSeparator = false;
     this.limitText = false;
-    this.messages = useT9n({ blocking: true });
     this.readOnly = false;
     this.required = false;
     this.resize = "both";
@@ -97,25 +100,19 @@ 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, 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, { reflect: true, converter: stringOrBoolean }], 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, 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 }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, wrap: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Selects the text of the component's `value`. */
   async selectText() {
     await this.componentOnReady();
     this.textAreaEl.select();
   }
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.textAreaEl.focus();
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
@@ -130,9 +127,8 @@ class TextArea extends LitElement {
     disconnectLabel(this);
     disconnectForm(this);
     this.resizeObserver?.disconnect();
+    this.updateSizeToAuto?.cancel();
   }
-  // #endregion
-  // #region Private Methods
   handleGlobalAttributesChanged() {
     this.requestUpdate();
   }
@@ -188,8 +184,8 @@ class TextArea extends LitElement {
     this.resizeObserver?.observe(el);
   }
   setTextAreaHeight() {
-    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();
-    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {
+    const { textAreaHeight, elHeight, footerHeight, validationMessageHeight } = this.getHeightAndWidthOfElements();
+    if (footerHeight > 0 && textAreaHeight + footerHeight + validationMessageHeight != elHeight) {
       this.textAreaEl.style.height = `${elHeight - footerHeight}px`;
     }
   }
@@ -197,13 +193,15 @@ class TextArea extends LitElement {
     const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl ? this.textAreaEl.getBoundingClientRect() : NO_DIMENSIONS;
     const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
     const { height: footerHeight, width: footerWidth } = this.footerEl.value ? this.footerEl.value.getBoundingClientRect() : NO_DIMENSIONS;
+    const { height: validationMessageHeight } = this.validationMessageEl ? this.validationMessageEl.getBoundingClientRect() : NO_DIMENSIONS;
     return {
       textAreaHeight,
       textAreaWidth,
       elHeight,
       elWidth,
       footerHeight,
-      footerWidth
+      footerWidth,
+      validationMessageHeight
     };
   }
   replacePlaceholdersInMessages() {
@@ -212,11 +210,15 @@ class TextArea extends LitElement {
   isCharacterLimitExceeded() {
     return this.value?.length > this.maxLength;
   }
-  // #endregion
-  // #region Rendering
+  setValidationRef(el) {
+    if (!el) {
+      return;
+    }
+    this.validationMessageEl = el;
+  }
   render() {
     const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
-    return InteractiveContainer({ disabled: this.disabled, children: html`<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 InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)}><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(),
@@ -229,7 +231,7 @@ class TextArea extends LitElement {
     })} ${ref(this.footerEl)}><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, scale: this.scale, status: this.status }) : null}` });
+    })}><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>` });
   }
   renderCharacterLimit() {
     if (this.maxLength) {

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

@@ -15,6 +15,7 @@ export declare const CSS: {
     footerEndSlotOnly: string;
     textArea: string;
     textAreaOnly: string;
+    wrapper: string;
 };
 export declare const IDS: {
     validationMessage: string;

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

@@ -6,23 +6,32 @@ import { SelectableComponent } from '../../utils/selectableComponent';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 
 /**
- * @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-bottom - A slot for adding non-actionable elements below the component's content.
- * @slot content-start - [Deprecated] use `content-top` slot instead.  A slot for adding non-actionable elements before the component's content.
- * @slot content-end - [Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content.
+ * @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-bottom] - A slot for adding non-actionable elements below the component's content.
+ * @slot [content-start] - [Deprecated] use `content-top` slot instead.  A slot for adding non-actionable elements before the component's content.
+ * @slot [content-end] - [Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content.
  */
 export declare class Tile extends LitElement {
     /**
      * When `true`, the component is active.
      *
      * @deprecated
+     * @default false
      */
     active: boolean;
-    /** Specifies the alignment of the Tile's content. */
+    /**
+     * Specifies the alignment of the Tile's content.
+     *
+     * @default "start"
+     */
     alignment: Exclude<Alignment, "end">;
     /** A description for the component, which displays below the heading. */
     description: string;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /**
      * The component's embed mode.
@@ -30,6 +39,7 @@ export declare class Tile extends LitElement {
      * When `true`, renders without a border and padding for use by other components.
      *
      * @deprecated No longer necessary.
+     * @default false
      */
     embed: boolean;
     /** The component header text, which displays between the icon and description. */
@@ -38,16 +48,28 @@ export declare class Tile extends LitElement {
     href: string;
     /** Specifies an icon to display. */
     icon: IconNameOrString;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
     iconFlipRtl: boolean;
     /** Accessible name for the component. */
     label: string;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. */
+    /**
+     * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
+     *
+     * @default false
+     */
     selected: boolean;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the selected state of the component changes. */
-    readonly calciteTileSelect: TargetedEvent<this, undefined>;
+    readonly calciteTileSelect: TargetedEvent<this, void>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
@@ -39,8 +39,6 @@ const SLOTS = {
 };
 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{box-shadow:var(--calcite-tile-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:inline-block}calcite-link{--calcite-link-text-color: var(--calcite-tile-link-text-color)}.container{background-color:var(--calcite-tile-background-color, var(--calcite-color-foreground-1));block-size:var(--calcite-container-size-content-fluid);border-radius:var(--calcite-tile-corner-radius, var(--calcite-corner-radius));box-sizing:border-box;color:var(--calcite-tile-text-color, var(--calcite-color-text-3));inline-size:var(--calcite-container-size-content-fluid);outline:var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));padding:var(--calcite-internal-tile-spacing);position:relative;-webkit-user-select:none;user-select:none}.container .selection-icon{color:var(--calcite-tile-text-color, var(--calcite-color-text-3))}.container.interactive{cursor:pointer}.container.interactive:hover,.container.interactive:focus,.container.interactive.selected{outline-color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index)}.container.interactive:hover .selection-icon,.container.interactive:focus .selection-icon,.container.interactive.selected .selection-icon{color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}.container.interactive:focus{box-shadow:inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));z-index:calc(var(--calcite-z-index) + 1)}.content-container,.row{align-items:flex-start;display:flex}.content-container{flex-direction:column;word-wrap:break-word;word-break:break-word;inline-size:var(--calcite-container-size-content-fluid)}.text-content-container{inline-size:100%;outline-color:transparent;padding:0}.text-content{display:flex;flex-direction:column}.heading{color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));font-weight:var(--calcite-font-weight-medium);line-height:1.20313rem;overflow-wrap:break-word}.description{font-weight:var(--calcite-font-weight-regular);overflow-wrap:break-word}.large-visual-deprecated{align-items:center;justify-content:center;min-block-size:12rem;text-align:center}.large-visual-deprecated .icon{align-self:center;block-size:64px;inline-size:64px}.large-visual-deprecated .selection-icon{position:absolute;inset-inline-start:var(--calcite-internal-tile-spacing);inset-block-start:var(--calcite-internal-tile-spacing);z-index:var(--calcite-z-index)}.large-visual-deprecated .text-content-container{justify-content:center}:host([alignment=center]) .icon{align-self:center}:host([alignment=center]) .text-content{text-align:center}:host([alignment=center]) slot[name=content-start]::slotted(*),:host([alignment=center]) slot[name=content-end]::slotted(*){align-self:center}:host([scale=s]){--calcite-internal-tile-spacing: var(--calcite-spacing-sm);max-inline-size:400px;min-inline-size:100px}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=s]) .description{font-size:var(--calcite-font-size--3);line-height:.85938rem}:host([scale=m]){--calcite-internal-tile-spacing: var(--calcite-spacing-md);max-inline-size:460px;min-inline-size:140px}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1);line-height:1.20313rem}:host([scale=m]) .description{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=l]){--calcite-internal-tile-spacing: var(--calcite-spacing-lg);max-inline-size:520px;min-inline-size:160px}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0);line-height:1.375rem}:host([scale=l]) .description{font-size:var(--calcite-font-size--1);line-height:1.20313rem}.content-container--has-content,.row{gap:var(--calcite-internal-tile-spacing)}.content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*){margin-block-end:var(--calcite-internal-tile-spacing)}:host([selection-appearance=border][layout=horizontal]) .container.selected:focus:before,:host([selection-appearance=border][layout=vertical]) .container.selected:focus:before{block-size:100%;box-shadow:inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));content:"";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}:host([selection-appearance=border][layout=horizontal]) .container.selected{box-shadow:inset 0 -4px 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host([selection-appearance=border][layout=vertical]) .container.selected{box-shadow:inset 4px 0 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .heading,:host([active]:not([disabled])) .heading{color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .description,:host([active]:not([disabled])) .description{color:var(--calcite-tile-text-color, var(--calcite-color-text-2))}:host([href]:focus:not([disabled])) .container,:host([href]:hover:not([disabled])) .container{outline-color:var(--calcite-tile-link-color, var(--calcite-color-text-link));z-index:var(--calcite-z-index)}:host([href]:focus:not([disabled])) .icon,:host([href]:hover:not([disabled])) .icon{color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([href]:focus:not([disabled])) .heading,:host([href]:hover:not([disabled])) .heading{color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([href]:active:not([disabled])) .container{box-shadow:inset 0 0 0 1px var(--calcite-tile-link-color, var(--calcite-color-text-link));outline-color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([embed]) .container{padding:0}:host([selection-mode=none]) .container:hover,:host([selection-mode=none]) .container.selected{outline-color:var(--calcite-tile-border-color, var(--calcite-color-border-2))}:host([selection-mode=none]) .container:focus{outline-color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}::slotted(*){max-inline-size:100%}`;
 class Tile extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.hasContentBottom = false;
@@ -63,14 +61,11 @@ class Tile extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { hasContentBottom: [16, { state: true }], hasContentEnd: [16, { state: true }], hasContentStart: [16, { state: true }], hasContentTop: [16, { state: true }], active: [7, { reflect: true, type: Boolean }], alignment: [3, { reflect: true }], description: [3, { reflect: true }], disabled: [7, { reflect: true, type: Boolean }], embed: [7, { reflect: true, type: Boolean }], heading: [3, { reflect: true }], href: [3, { reflect: true }], icon: [3, { reflect: true }], iconFlipRtl: [7, { reflect: true, type: Boolean }], interactive: [5, { type: Boolean }], label: 1, layout: [3, { reflect: true }], scale: [3, { reflect: true }], selected: [7, { reflect: true, type: Boolean }], selectionAppearance: [3, { reflect: true }], selectionMode: [3, { reflect: true }] };
+    this.properties = { hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], description: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], embed: [7, {}, { reflect: true, type: Boolean }], heading: [3, {}, { reflect: true }], href: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     if (!this.disabled && this.interactive) {
@@ -80,8 +75,6 @@ class Tile extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   clickHandler() {
     if (this.interactive) {
       this.setFocus();
@@ -121,8 +114,6 @@ class Tile extends LitElement {
       }
     }
   }
-  // #endregion
-  // #region Rendering
   renderSelectionIcon() {
     const { selected, selectionAppearance, selectionMode } = this;
     if (selectionAppearance === "icon" && selectionMode !== "none") {

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

@@ -6,11 +6,19 @@ import { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from '..
 import { SelectableGroupComponent } from '../../utils/selectableComponent';
 import { Tile } from '../calcite-tile/customElement.js';
 
-/** @slot - A slot for adding `calcite-tile` elements. */
+/** @slot  - A slot for adding `calcite-tile` elements. */
 export declare class TileGroup extends LitElement {
-    /** Specifies the alignment of each `calcite-tile`'s content. */
+    /**
+     * Specifies the alignment of each `calcite-tile`'s content.
+     *
+     * @default "start"
+     */
     alignment: Exclude<Alignment, "end">;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /**
      * Accessible name for the component.
@@ -22,21 +30,25 @@ export declare class TileGroup extends LitElement {
      * Defines the layout of the component.
      *
      * Use `"horizontal"` for rows, and `"vertical"` for a single column.
+     *
+     * @default "horizontal"
      */
     layout: Extract<Layout, "horizontal" | "vertical">;
-    /** Specifies the size of the component. */
-    scale: Scale;
     /**
-     * Specifies the component's selected items.
+     * Specifies the size of the component.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** Specifies the component's selected items. */
     readonly selectedItems: HTMLCalciteTileElement[];
     /**
      * Specifies the selection appearance, where:
      *
      * - `"icon"` (displays a checkmark or dot), or
      * - `"border"` (displays a border).
+     *
+     * @default "icon"
      */
     selectionAppearance: SelectionAppearance;
     /**
@@ -46,8 +58,10 @@ export declare class TileGroup extends LitElement {
      * - `"single"` (allows only one selected item),
      * - `"single-persist"` (allows only one selected item and prevents de-selection),
      * - `"none"` (allows no selected items).
+     *
+     * @default "none"
      */
     selectionMode: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>;
     /** Fires when the component's selection changes. */
-    readonly calciteTileGroupSelect: TargetedEvent<this, undefined>;
+    readonly calciteTileGroupSelect: TargetedEvent<this, void>;
 }