@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-textarea/pds-textarea.js

@@ -1,28 +1,161 @@
 import { Host, h } from "@stencil/core";
-import { assignDescription, isRequired, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { assignDescription, isRequired, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
+import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../utils/utils";
+import { inheritAttributes, inheritAriaAttributes } from "../../utils/attributes";
+import { danger } from "@pine-ds/icons/icons";
+import { formatMessage } from "../../i18n";
+/**
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
+ */
 export class PdsTextarea {
     constructor() {
-        this.onTextareaChange = (ev) => {
-            const textarea = ev.target;
-            isRequired(textarea, this);
-            if (textarea) {
-                this.value = textarea.innerHTML;
-            }
-            this.pdsTextareaChange.emit({ value: this.value, event: ev });
-        };
-        this.componentId = undefined;
+        this.inheritedAttributes = {};
+        this._type = 'textarea';
+        /**
+         * Determines whether or not the textarea is disabled.
+         * @defaultValue false
+         */
         this.disabled = false;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = false;
-        this.label = undefined;
+        /**
+         * Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it
+         * itself each time `pdsTextareaChange` fires, replacing a value you set.
+         * @defaultValue false
+         */
+        this.invalid = false; // eslint-disable-line @stencil-community/strict-mutable
+        /**
+         * Specifies the name. Submitted with the form name/value pair.
+         */
         this.name = this.componentId;
-        this.placeholder = undefined;
+        /**
+         * Determines whether or not the textarea is readonly.
+         * @defaultValue false
+         */
         this.readonly = false;
+        /**
+         * Determines whether or not the textarea is required.
+         * @defaultValue false
+         */
         this.required = false;
-        this.rows = undefined;
-        this.value = undefined;
+        /**
+         * The value of the textarea.
+         */
+        this.value = '';
+        this.hasFocus = false;
+        /**
+         * If true, the textarea has action content in the label area
+         */
+        this.hasAction = false;
+        /**
+         * Template for the character-counter's accessible label. Pass a translated
+         * string to localize it; `{current}` and `{max}` are interpolated.
+         * @defaultValue '{current} of {max} characters'
+         */
+        this.characterCountLabel = '{current} of {max} characters';
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            if (this.focusedValue !== this.value) {
+                this.emitValueChange(ev);
+            }
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.focusedValue = this.value;
+            this.pdsFocus.emit(ev);
+        };
+        this.onInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                // Handle maxLength validation
+                if (this.maxLength && input.value.length > this.maxLength) {
+                    // Prevent input beyond maxLength
+                    input.value = input.value.substring(0, this.maxLength);
+                }
+                this.value = input.value || '';
+            }
+            this.emitInputChange(ev);
+            // Update counter position when content changes
+            if (this.maxLength && typeof ResizeObserver !== 'undefined') {
+                // Use requestAnimationFrame to ensure DOM is updated
+                requestAnimationFrame(() => {
+                    this.updateCharacterCounterPosition();
+                });
+            }
+        };
+        this.onTextareaChange = (ev) => {
+            this.emitValueChange(ev);
+        };
+        this.onKeyDown = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
+    }
+    /**
+     * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
+     * `textarea.focus()`.
+     */
+    async setFocus() {
+        if (this.nativeTextarea) {
+            this.nativeTextarea.focus();
+        }
+    }
+    debounceChanged() {
+        const { pdsInput, debounce, originalPdsInput } = this;
+        this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsInput);
+    }
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        const nativeTextarea = this.nativeTextarea;
+        const value = this.getValue();
+        if (nativeTextarea && nativeTextarea.value !== value) {
+            nativeTextarea.value = value;
+        }
+        // Update form value for Form Associated Custom Elements API
+        this.updateFormValue();
+        // Update character counter position in case content changes affect sizing
+        if (this.maxLength && typeof ResizeObserver !== 'undefined') {
+            this.updateCharacterCounterPosition();
+        }
+    }
+    maxLengthChanged() {
+        // Setup or teardown ResizeObserver based on maxLength
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.maxLength && this.nativeTextarea) {
+            this.setupResizeObserver();
+        }
+        // Update ElementInternals validity when maxLength changes
+        if (!isSpecTest() && this.internals && this.internals.setValidity && this.nativeTextarea) {
+            const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);
+            this.internals.setValidity({ tooLong: isTooLong }, isTooLong ? 'Value exceeds maxLength' : '', this.nativeTextarea);
+        }
+    }
+    /**
+     * Emits an `pdsInput` event.
+     */
+    emitInputChange(event) {
+        const { value } = this;
+        this.pdsInput.emit({ value, event });
+    }
+    /**
+     * Emits an `pdsTextareaChange` event.
+     */
+    emitValueChange(event) {
+        const textarea = event.target;
+        isRequired(textarea, this);
+        const { value } = textarea;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.focusedValue = newValue;
+        this.pdsTextareaChange.emit({ value: newValue, event });
+    }
+    getValue() {
+        return this.value || '';
     }
     textareaClassNames() {
         const classNames = ['pds-textarea__field'];
@@ -31,26 +164,189 @@ export class PdsTextarea {
         }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        var _a;
+        // Keep the raw emitter before the first wrap, so clearing debounce can restore it.
+        (_a = this.originalPdsInput) !== null && _a !== void 0 ? _a : (this.originalPdsInput = this.pdsInput);
+        this.debounceChanged();
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    disconnectedCallback() {
+        cancelDebouncedEvent(this.pdsInput);
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el));
+        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
+    }
+    componentDidLoad() {
+        // Set initial form value
+        this.updateFormValue();
+        // Setup ResizeObserver for character counter positioning
+        this.setupResizeObserver();
+        // Expose type property on the element instance to match native form element behavior
+        exposeTypeProperty(this.el, () => this._type);
+    }
+    /**
+     * Sets up ResizeObserver to track textarea resize for character counter positioning
+     */
+    setupResizeObserver() {
+        if (!this.maxLength || !this.nativeTextarea)
+            return;
+        // ResizeObserver may not be available in test environments
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                // Use requestAnimationFrame to ensure DOM updates are complete
+                requestAnimationFrame(() => {
+                    this.updateCharacterCounterPosition();
+                });
+            });
+            this.resizeObserver.observe(this.nativeTextarea);
+            // Initial positioning with a small delay to ensure counter is rendered
+            requestAnimationFrame(() => {
+                this.updateCharacterCounterPosition();
+            });
+        }
+    }
+    /**
+     * Updates character counter position to stay within textarea boundaries during resize
+     */
+    updateCharacterCounterPosition() {
+        if (!this.characterCounter || !this.nativeTextarea)
+            return;
+        // Skip positioning in test environments where ResizeObserver isn't available
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        // Ensure the character counter has been rendered and has dimensions
+        if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {
+            // Counter not ready or component hidden - return and let resize/input observers handle positioning later
+            return;
+        }
+        // Position based on textarea's actual dimensions (which change during manual resize)
+        const textareaWidth = this.nativeTextarea.offsetWidth;
+        const textareaHeight = this.nativeTextarea.offsetHeight;
+        const counterWidth = this.characterCounter.offsetWidth;
+        const counterHeight = this.characterCounter.offsetHeight;
+        // Calculate position within textarea boundaries with padding from edges
+        const rightPosition = textareaWidth - counterWidth - 8;
+        const bottomPosition = textareaHeight - counterHeight - 8;
+        // Ensure counter stays within textarea boundaries even when resized very small
+        const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));
+        const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));
+        // Apply absolute positioning within the field wrapper
+        this.characterCounter.style.position = 'absolute';
+        this.characterCounter.style.left = `${finalLeft}px`;
+        this.characterCounter.style.top = `${finalTop}px`;
+        this.characterCounter.style.right = 'auto';
+        this.characterCounter.style.bottom = 'auto';
+    }
+    /**
+     * Renders the character counter when maxLength is set
+     */
+    renderCharacterCounter() {
+        if (!this.maxLength) {
+            return null;
+        }
+        const currentLength = this.getValue().length;
+        return (h("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": formatMessage(this.characterCountLabel, { current: currentLength, max: this.maxLength }) }, currentLength, " / ", this.maxLength));
+    }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (h("div", { class: "pds-textarea__action", part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            const value = this.getValue();
+            this.internals.setFormValue(value || null);
+            // Set validity based on native textarea validation
+            if (this.nativeTextarea && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.nativeTextarea.validity, this.nativeTextarea.validationMessage, this.nativeTextarea);
+            }
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback() {
+        this.value = '';
+        this.updateFormValue();
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+        else if (state instanceof FormData && this.name) {
+            // Extract value from FormData using the textarea's name
+            const value = state.get(this.name);
+            if (typeof value === 'string') {
+                this.value = value;
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: 'f58ccd5b20fc30c6e6153e04e98b27fe265040af', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '480b51012d0f7a05d83fb8cb359d2bc3a4e82189', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { key: '0b34ee6ee8eec6891c00596f840d028ab6ac36bb', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '6f066ce38aaec3257bddd69715118aa5740723c1', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            h("p", { key: '91c66558978cdbb3191c0af31c34c2647749c01a', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'da8320d10ace733c7181ab3c6827da99d94d7ebd', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
+        const value = this.getValue();
+        return (h(Host, { key: '96f8863a39579b421057fa9b2857753785d4c585', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '89ae283a1674af03795c0443ee7fea2bac658c9e', class: "pds-textarea" }, this.label &&
+            h("div", { key: '7da482f50cfbf7361c457d79e9185bdf204d728d', class: "pds-textarea__label-wrapper" }, h("label", { key: '3c1a24beae7a190e11a686c4f15dbc175221db0b', htmlFor: this.componentId }, h("span", { key: '7d2f5618fe0893bca5926237adfc610adfaf7cc7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '371d16fe7e0446658316d4f2047776ef4429346c', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '6e433b544a20b82d16ce8522196c41ca8b22411f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '7b7117493340f25be2c4d18b48e00add775155d3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '79a604af17aa9a6735d44aa52a858881e053de43', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '765e5df4a34b583183f1ceeb92fb596067d4a212', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-textarea.scss"]
+            "$": ["../../global/styles/utils/label.scss", "../pds-input/pds-input.tokens.scss", "pds-textarea.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-textarea.css"]
+            "$": ["../../global/styles/utils/label.css", "../pds-input/pds-input.tokens.css", "pds-textarea.css"]
         };
     }
     static get properties() {
         return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,
@@ -65,8 +361,10 @@ export class PdsTextarea {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "disabled": {
                 "type": "boolean",
@@ -83,12 +381,33 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is disabled"
+                    "text": "Determines whether or not the textarea is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the number of milliseconds to wait after each input event before emitting `pdsInput`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -101,10 +420,12 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the error text and provides an error-themed treatment to the field"
+                    "text": "Displays an error message below the textarea while `invalid` is set."
                 },
-                "attribute": "error-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
             },
             "helperMessage": {
                 "type": "string",
@@ -118,10 +439,12 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays a hint or description of the textarea"
+                    "text": "Displays a message or hint below the textarea field."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
             },
             "invalid": {
                 "type": "boolean",
@@ -138,10 +461,12 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is invalid or throws an error"
+                    "text": "Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it\nitself each time `pdsTextareaChange` fires, replacing a value you set."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
             "label": {
@@ -156,10 +481,31 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Text to be displayed as the textarea label"
+                    "text": "Text to be displayed as the textarea label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\nNote: When true, the action slot is also hidden to maintain a minimal UI."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
             },
             "name": {
                 "type": "string",
@@ -173,10 +519,12 @@ export class PdsTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the name, submitted with the form name/value pair. This value will mirror the componentId"
+                    "text": "Specifies the name. Submitted with the form name/value pair."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.componentId"
             },
             "placeholder": {
@@ -191,10 +539,12 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies a short hint that describes the expected value of the textarea"
+                    "text": "Specifies a short hint that describes the expected value of the textarea."
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "readonly": {
                 "type": "boolean",
@@ -211,10 +561,12 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is readonly"
+                    "text": "Determines whether or not the textarea is readonly."
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "required": {
@@ -232,10 +584,12 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is required"
+                    "text": "Determines whether or not the textarea is required."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "rows": {
@@ -250,16 +604,56 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets number of rows of text visible without needing to scroll in the textarea"
+                    "text": "Sets number of rows of text visible without needing to scroll in the textarea."
                 },
-                "attribute": "rows",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-length"
+            },
+            "highlight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies highlight styling to the textarea field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "highlight"
             },
             "value": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | null",
                     "resolved": "string",
                     "references": {}
                 },
@@ -267,15 +661,109 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the textarea"
+                    "text": "The value of the textarea."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "value",
-                "reflect": false
+                "defaultValue": "''"
+            },
+            "characterCountLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{current} of {max} characters'"
+                        }],
+                    "text": "Template for the character-counter's accessible label. Pass a translated\nstring to localize it; `{current}` and `{max}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "character-count-label",
+                "defaultValue": "'{current} of {max} characters'"
             }
         };
     }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasAction": {}
+        };
+    }
     static get events() {
         return [{
+                "method": "pdsBlur",
+                "name": "pdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsFocus",
+                "name": "pdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea has focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsInput",
+                "name": "pdsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.\n`detail` has `value`, the current text, and `event`, the native `input` event.\n\nThis event will not emit when programmatically setting the `value` property."
+                },
+                "complexType": {
+                    "original": "TextareaInputEventDetail",
+                    "resolved": "TextareaInputEventDetail",
+                    "references": {
+                        "TextareaInputEventDetail": {
+                            "location": "import",
+                            "path": "./textarea-interface",
+                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaInputEventDetail",
+                            "referenceLocation": "TextareaInputEventDetail"
+                        }
+                    }
+                }
+            }, {
                 "method": "pdsTextareaChange",
                 "name": "pdsTextareaChange",
                 "bubbles": true,
@@ -283,7 +771,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted whenever the value of the textarea changes"
+                    "text": "Emitted when the user changes the value and then leaves the textarea. `Enter` adds a new line, so it doesn't emit this event.\n`detail` has `value`, the text, and `event`, the native event behind it, usually `change`.\n\nThis event will not emit when programmatically setting the `value` property, unless the field has focus at the time;\nthen it emits when the field loses focus."
                 },
                 "complexType": {
                     "original": "TextareaChangeEventDetail",
@@ -292,12 +780,65 @@ export class PdsTextarea {
                         "TextareaChangeEventDetail": {
                             "location": "import",
                             "path": "./textarea-interface",
-                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaChangeEventDetail"
+                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaChangeEventDetail",
+                            "referenceLocation": "TextareaChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsKeyDown",
+                "name": "pdsKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a key is pressed down in the textarea."
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
                         }
                     }
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n`textarea.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "maxLength",
+                "methodName": "maxLengthChanged"
+            }];
+    }
 }
-//# sourceMappingURL=pds-textarea.js.map