@pine-ds/core 3.5.2 → 3.6.0

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

@@ -57,9 +57,21 @@ export class PdsTextarea {
         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);
@@ -89,6 +101,24 @@ export class PdsTextarea {
         }
         // 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 (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.
@@ -126,6 +156,12 @@ export class PdsTextarea {
             this.internals = this.el.attachInternals();
         }
     }
+    disconnectedCallback() {
+        // 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;
@@ -134,6 +170,71 @@ export class PdsTextarea {
         this.originalPdsInput = this.pdsInput;
         // Set initial form value
         this.updateFormValue();
+        // Setup ResizeObserver for character counter positioning
+        this.setupResizeObserver();
+    }
+    /**
+     * 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": `${currentLength} of ${this.maxLength} characters` }, currentLength, " / ", this.maxLength));
     }
     renderAction() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
@@ -185,10 +286,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'a1a70451b8987a1d152c5e440a672267b3ee325e', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'c28061e7848a58995c0883a99af04170bbdd2ba0', class: "pds-textarea" }, this.label &&
-            h("div", { key: '53bf7022550e51bc63decb0595c2e01c0bf7051c', class: "pds-textarea__label-wrapper" }, h("label", { key: 'ac1152cfb3f096a7861c6db9779f4bde3d117522', htmlFor: this.componentId }, h("span", { key: '0d664943f7fd9490879d0a8349743d535103608c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("textarea", Object.assign({ key: 'a7374006831ab8f0cda0a9b3bf999abc7485a16d', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, 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 }, this.inheritedAttributes), value), this.helperMessage &&
-            h("p", { key: '4ca62e53a085acde9b8550c123ea1ee5a8723581', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'f70e70f4588d0d9f1e7cc570bc5db1b6f6f27f0b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '7a91bdea1bd0ac2a477b41d6eec3dc6369119ab0', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'e1e17543442fcd240498b7f56ddb86e35ac1d770', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '5a69f6b67dcba5107aa9150fc87543e7638933bb', class: "pds-textarea" }, this.label &&
+            h("div", { key: '027592bca1595a85cdf24e8ab4201e6483fee80c', class: "pds-textarea__label-wrapper" }, h("label", { key: '815f18177b34893b9e76d8c0db7baa6b0f3400c5', htmlFor: this.componentId }, h("span", { key: '5fe5e5f984558c409d3a1c3e9fdb966038fcd4c4', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'd1d95ef8becd9648c8becc2fe6797432ed53ca81', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'd307adc2e75a381aae4dda4ad207bf3a670b7678', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "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 }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: 'c7b68b10f0362025d90a902cbc6d2d741e579935', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '8fd179c3c8cf9c9d5ee7252d30357072a2f55090', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '3e3de603c035ae3d71be28132d55992eadda9a54', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -488,6 +589,25 @@ export class PdsTextarea {
                 "attribute": "rows",
                 "reflect": false
             },
+            "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,
+                "attribute": "max-length",
+                "reflect": true
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -630,6 +750,9 @@ export class PdsTextarea {
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "maxLength",
+                "methodName": "maxLengthChanged"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\n      }\n    }\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the textarea's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <textarea\n            ref={(el) => this.nativeTextarea = el }\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onBlur={this.onBlur}\n            onChange={this.onTextareaChange}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            {...this.inheritedAttributes}\n          >\n            {value}\n          </textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n  private resizeObserver?: ResizeObserver;\n  private characterCounter?: HTMLElement;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n   */\n  @Prop({ reflect: true }) maxLength?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n\n    // Update character counter position in case content changes affect sizing\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      this.updateCharacterCounterPosition();\n    }\n  }\n\n  @Watch('maxLength')\n  protected maxLengthChanged() {\n    // Setup or teardown ResizeObserver based on maxLength\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.maxLength && this.nativeTextarea) {\n      this.setupResizeObserver();\n    }\n\n    // Update ElementInternals validity when maxLength changes\n    if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n      const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n      this.internals.setValidity(\n        { tooLong: isTooLong },\n        isTooLong ? 'Value exceeds maxLength' : '',\n        this.nativeTextarea\n      );\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      // Handle maxLength validation\n      if (this.maxLength && input.value.length > this.maxLength) {\n        // Prevent input beyond maxLength\n        input.value = input.value.substring(0, this.maxLength);\n      }\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n\n    // Update counter position when content changes\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      // Use requestAnimationFrame to ensure DOM is updated\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n\n    // Setup ResizeObserver for character counter positioning\n    this.setupResizeObserver();\n  }\n\n  /**\n   * Sets up ResizeObserver to track textarea resize for character counter positioning\n   */\n  private setupResizeObserver() {\n    if (!this.maxLength || !this.nativeTextarea) return;\n\n    // ResizeObserver may not be available in test environments\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        // Use requestAnimationFrame to ensure DOM updates are complete\n        requestAnimationFrame(() => {\n          this.updateCharacterCounterPosition();\n        });\n      });\n\n      this.resizeObserver.observe(this.nativeTextarea);\n\n      // Initial positioning with a small delay to ensure counter is rendered\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  }\n\n  /**\n   * Updates character counter position to stay within textarea boundaries during resize\n   */\n  private updateCharacterCounterPosition() {\n    if (!this.characterCounter || !this.nativeTextarea) return;\n\n    // Skip positioning in test environments where ResizeObserver isn't available\n    if (typeof ResizeObserver === 'undefined') return;\n\n    // Ensure the character counter has been rendered and has dimensions\n    if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n      // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n      return;\n    }\n\n    // Position based on textarea's actual dimensions (which change during manual resize)\n    const textareaWidth = this.nativeTextarea.offsetWidth;\n    const textareaHeight = this.nativeTextarea.offsetHeight;\n    const counterWidth = this.characterCounter.offsetWidth;\n    const counterHeight = this.characterCounter.offsetHeight;\n\n    // Calculate position within textarea boundaries with padding from edges\n    const rightPosition = textareaWidth - counterWidth - 8;\n    const bottomPosition = textareaHeight - counterHeight - 8;\n\n    // Ensure counter stays within textarea boundaries even when resized very small\n    const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n    const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n    // Apply absolute positioning within the field wrapper\n    this.characterCounter.style.position = 'absolute';\n    this.characterCounter.style.left = `${finalLeft}px`;\n    this.characterCounter.style.top = `${finalTop}px`;\n    this.characterCounter.style.right = 'auto';\n    this.characterCounter.style.bottom = 'auto';\n  }\n\n  /**\n   * Renders the character counter when maxLength is set\n   */\n  private renderCharacterCounter() {\n    if (!this.maxLength) {\n      return null;\n    }\n\n    const currentLength = this.getValue().length;\n    return (\n      <div\n        class=\"pds-textarea__character-counter\"\n        ref={(el) => this.characterCounter = el}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={`${currentLength} of ${this.maxLength} characters`}\n      >\n        {currentLength} / {this.maxLength}\n      </div>\n    );\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\n      }\n    }\n  }\n\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the textarea's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <div class=\"pds-textarea__field-wrapper\">\n            <textarea\n              ref={(el) => this.nativeTextarea = el }\n              aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n              aria-invalid={this.invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              class={this.textareaClassNames()}\n              disabled={this.disabled}\n              id={this.componentId}\n              maxlength={this.maxLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              rows={this.rows}\n              onBlur={this.onBlur}\n              onChange={this.onTextareaChange}\n              onFocus={this.onFocus}\n              onInput={this.onInput}\n              {...this.inheritedAttributes}\n            >\n              {value}\n            </textarea>\n            {this.renderCharacterCounter()}\n          </div>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -14,6 +14,7 @@ export default {
     hideLabel: false,
     invalid: false,
     label: null,
+    maxLength: null,
     name: null,
     placeholder: null,
     readonly: false,
@@ -46,6 +47,7 @@ const BaseTemplate = (args) => html`<pds-textarea
   ?hide-label=${args.hideLabel}
   ?invalid=${args.invalid}
   label="${args.label}"
+  max-length="${args.maxLength}"
   name="${args.name}"
   onChange="${args.onChange}"
   placeholder="${args.placeholder}"
@@ -181,3 +183,14 @@ export const withActionButton = (args) => html`<pds-textarea
     <pds-icon name="question-circle"></pds-icon>
   </pds-button>
 </pds-textarea>`;
+
+export const MaxLength = BaseTemplate.bind({});
+MaxLength.args = {
+  componentId: 'pds-textarea-maxlength-example',
+  label: 'Bio',
+  name: 'MaxLength',
+  maxLength: 120,
+  placeholder: 'Tell us about yourself...',
+  rows: 4,
+  value: 'Value',
+};

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

@@ -77,13 +77,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: '3fb4b7b3600555959e9ed09f9dfd3a725d4a2de7', hidden: !this.isVisible }, h("div", { key: '4f8d554fc30a5e4fb3c498b8fa5a2972a60eb0ab', class: {
+        return (h(Host, { key: 'cf3944ff76627caaa30bc38fdfa44357488a6194', hidden: !this.isVisible }, h("div", { key: '39ce25ec4ffcaf23f565ece7e54fd4ef8a08abb5', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'a70883e76524ce76e562f48d62df1a42fb65659c', class: "pds-toast__message" }, h("slot", { key: '3e2fd182b97d1cd89c59ca109404d77e9f834806' })), this.dismissible && (h("button", { key: '945b766572831b259f2ff36fdf628b254189d334', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'cc637017d922c88a2f025e01a55294c7abbbd0da', class: "pds-toast__message" }, h("slot", { key: 'e0dbea12cefc01a377fc4f9f8ec6898d2f10ea99' })), this.dismissible && (h("button", { key: 'e3293bd0d9678052320f0261ed95084400789804', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '9492720d544270179ae43bd3d1ecb4b1f6c0882b', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '8a41d2c7fc123d5cd854212fca42eae344834d92', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -312,9 +312,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '71fb8114cbf8db309eba0c19c0d9bd491d250157', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '9df511e60bc96c462a80f6bf6431f695e2effa3c', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '6741acebcb973fd24d59a95d75aefd51fe653426', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f1a51aa6a9333e899d4eb8168b9ff171a463651f', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'eae36227df5fd93edf1af61e58b6369c0162944f' })), h("div", { key: '4c3a3f86d7e24aeff9299a9ef19396e078421467', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'babfdd5793e8007015dab364985c1451d976383f', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'e48e5fb75d6156d13e3872b8ee12699139cef576' })), h("div", { key: 'ed38389bf634be3014b26c9381a389482cee2f80', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '2e3d2a800aba9959c5b7fc3ed4397f7789b6f383', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {