@pine-ds/core 3.4.0 → 3.4.2

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

@@ -9,6 +9,7 @@ export default {
     debounce: null,
     disabled: false,
     errorMessage: null,
+    fullWidth: false,
     helperMessage: null,
     invalid: false,
     max: null,
@@ -43,6 +44,7 @@ const BaseTemplate = (args) => html`<pds-input
   debounce="${args.debounce}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
+  full-width="${args.fullWidth}"
   helper-message="${args.helperMessage}"
   invalid="${args.invalid}"
   label="${args.label}"
@@ -136,6 +138,15 @@ Autocomplete.args = {
   autocomplete: 'given-name',
 };
 
+export const FullWidth = BaseTemplate.bind({});
+FullWidth.args = {
+  componentId: 'pds-input-full-width-example',
+  label: 'Full Width Input',
+  type: 'text',
+  fullWidth: true,
+  placeholder: 'This input takes full width of its container',
+};
+
 export const withPrefixIcon = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-prefix-icon"

package/dist/collection/components/pds-modal/pds-modal.css

@@ -40,7 +40,7 @@ pds-modal .pds-modal__backdrop {
   display: flex;
   flex-direction: column;
   margin: var(--pine-dimension-md);
-  max-height: calc(100vh - (6vh + 96px));
+  max-height: calc(100vh - (5vh + 96px));
   width: 100%;
 }
 @media (min-width: 992px) {

package/dist/collection/components/pds-radio/pds-radio.css

@@ -103,6 +103,7 @@ label {
 
 .pds-radio__message {
   color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
   margin-block-start: var(--sizing-margin-block-start);
   margin-inline-start: var(--pine-dimension-md);
   width: 100%;

package/dist/collection/components/pds-select/pds-select.css

@@ -61,7 +61,7 @@ select {
   grid-area: field;
   letter-spacing: var(--pine-letter-spacing);
   min-height: var(--pds-select-min-height);
-  padding: var(--pine-dimension-xs) var(--pine-dimension-150);
+  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);
   padding-inline-end: var(--pine-dimension-450);
   position: relative;
 }
@@ -98,6 +98,7 @@ select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
 
 .pds-select__error-message,
 .pds-select__helper-message {
+  color: var(--pine-color-text-message);
   font: var(--pine-typography-body-sm-medium);
   margin-block-end: 0;
   margin-block-start: var(--pine-dimension-2xs);

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

@@ -66,10 +66,21 @@ export class PdsSelect {
      */
     valueChanged() {
         this.updateSelectedOption();
+        this.updateFormValue();
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
     }
     componentWillLoad() {
         this.updateSelectedOption();
     }
+    componentDidLoad() {
+        // Set initial form value
+        this.updateFormValue();
+    }
     /**
      * Updates the selected option in the select element based on the current value.
      *
@@ -123,12 +134,75 @@ export class PdsSelect {
         }
         return null;
     }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        if (this.internals && this.internals.setFormValue) {
+            const value = this.value;
+            // Handle multi-select arrays by converting to FormData or comma-separated string
+            if (Array.isArray(value)) {
+                if (value.length > 1) {
+                    // For multiple values, create FormData with multiple entries
+                    const formData = new FormData();
+                    value.forEach(val => formData.append(this.name || '', val));
+                    this.internals.setFormValue(formData);
+                }
+                else {
+                    // Single value in array, use the string value
+                    this.internals.setFormValue(value[0] || null);
+                }
+            }
+            else {
+                // Single string value
+                this.internals.setFormValue(value || null);
+            }
+            // Set validity based on native select validation
+            if (this.selectEl && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.selectEl.validity, this.selectEl.validationMessage, this.selectEl);
+            }
+        }
+    }
+    /**
+     * 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(s) from FormData using the select's name
+            const values = state.getAll(this.name);
+            if (values.length > 1) {
+                // Multi-select: convert to string array
+                this.value = values.filter(v => typeof v === 'string');
+            }
+            else if (values.length === 1 && typeof values[0] === 'string') {
+                // Single select: use string value
+                this.value = values[0];
+            }
+        }
+    }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '7bbdad147f68a6b000d738c991c4f77e7ba6d934', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'd8b3ba6fcaa63435c919083760573d4a94394f56', class: "pds-select" }, !this.hideLabel && (h("div", { key: '01edc2b7f833d71da9c440ee9e35327210b233d1', class: "pds-select__label-wrapper" }, h("label", { key: '5a7743e84be49edf04deed503a27929d15fa8515', htmlFor: this.componentId }, h("span", { key: 'df5e57ac95def4069ff07f081226d70ca5a15cc8', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '3e9faea02fe9449fdda224bf4f3ee157217640ff', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '1a75cbfdca145e1d303c8c07de9cb8df5afa267e', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '2656e9edc098798b4a118c2a8b8a0f6283fc6f9a', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'ca5831acc4a4f72221a2d26be14e076daabd35b1', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'fea78ba16795a1eae88028f4ff13caeab17ad74f', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '532a1537af1cdc9928cdb42f33530d8141941f56', class: "pds-select" }, !this.hideLabel && (h("div", { key: '6284c433266ba8991a7d32e16927147287fcf009', class: "pds-select__label-wrapper" }, h("label", { key: '66979f8fc19801a7a8494dd254e32bca72a23e17', htmlFor: this.componentId }, h("span", { key: '8aa8805e24b9fb085377510513f68a308e2bc78b', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'c007dc0a49f1607745664a0527a67ad4721316c5', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'a96e7e5ef5ef4a20654956d27c4e58eb0aaad1ea', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1910bf5bfdea7356f435e74dfe2427669b64d3d8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'e9fa98965996e1a873360fa999149d5e0ab821ee', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["pds-select.tokens.scss", "../../global/styles/utils/label.scss", "pds-select.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } 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-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n\n  @Element() el: HTMLPdsSelectElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-select__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  render() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <div class=\"pds-select__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {hasAction && this.renderAction()}\n            </div>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } 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-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsSelectElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n    this.updateFormValue();\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  componentDidLoad() {\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-select__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.value;\n\n      // Handle multi-select arrays by converting to FormData or comma-separated string\n      if (Array.isArray(value)) {\n        if (value.length > 1) {\n          // For multiple values, create FormData with multiple entries\n          const formData = new FormData();\n          value.forEach(val => formData.append(this.name || '', val));\n          this.internals.setFormValue(formData);\n        } else {\n          // Single value in array, use the string value\n          this.internals.setFormValue(value[0] || null);\n        }\n      } else {\n        // Single string value\n        this.internals.setFormValue(value || null);\n      }\n\n      // Set validity based on native select validation\n      if (this.selectEl && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.selectEl.validity,\n          this.selectEl.validationMessage,\n          this.selectEl\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(s) from FormData using the select's name\n      const values = state.getAll(this.name);\n      if (values.length > 1) {\n        // Multi-select: convert to string array\n        this.value = values.filter(v => typeof v === 'string') as string[];\n      } else if (values.length === 1 && typeof values[0] === 'string') {\n        // Single select: use string value\n        this.value = values[0];\n      }\n    }\n  }\n\n  render() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <div class=\"pds-select__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {hasAction && this.renderAction()}\n            </div>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -26,6 +26,7 @@ export class PdsSwitch {
                 return;
             const input = e.target;
             this.checked = input.checked;
+            this.updateFormValue();
             this.pdsSwitchChange.emit(e);
         };
         this.switchClassNames = () => {
@@ -39,16 +40,53 @@ export class PdsSwitch {
             return switchClasses;
         };
     }
+    connectedCallback() {
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    checkedChanged() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        var _a;
+        if (typeof jest !== 'undefined' || typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test') {
+            return;
+        }
+        if (this.internals && this.internals.setFormValue) {
+            // For switches, only send the value when checked, otherwise send null
+            const formValue = this.checked ? (this.value || 'on') : null;
+            this.internals.setFormValue(formValue);
+        }
+        if (this.internals && this.internals.setValidity) {
+            this.internals.setValidity({});
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (state instanceof FormData) {
+            // For switches, restore if the value exists in FormData
+            const value = this.value || 'on';
+            this.checked = state.get(this.name || this.componentId) === value;
+        }
+        else if (typeof state === 'string') {
+            // Restore from string state
+            this.checked = state === (this.value || 'on');
+        }
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '128ed012fe386dea88e6da282084589b22453588', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '3407eeffca9a0f0c047e5d7c761526b488aafb62', htmlFor: this.componentId }, h("input", Object.assign({ key: '3f16f928b2b96aa212923ba09ee80a3559b8103c', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '09c43ffbabce6a2fe133875ca15e0910d34064fa', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '90c9df8b2efef83cf238d540076bad04bf9aa2eb', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'e812446a907dc0ad822b0c5974fca5913117f051', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e1c93c8ac145e54a205f8bfecf465ba8e484313b', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'bd2a7a9740c0d466fbedff0e06e532ab8deb567d', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '0fb2cfa31a424bce3aa7f8310718f004a034fdae', htmlFor: this.componentId }, h("input", Object.assign({ key: '85b836e04db6648dd8981b51cdbd9ee90bfcea6a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '29674a12e61459a11aa8a791eeb46c829c468317', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '135a4bec88f9fe938737b61f361bb76908c39bc7', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '18cc1bd12df56b0621820cc0e96a150463373ce2', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '455fd05665e9bbd8d5a9096544116bb646e4c66a', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["../../global/styles/utils/label.scss", "pds-switch.scss"]
@@ -300,5 +338,11 @@ export class PdsSwitch {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
 }
 //# sourceMappingURL=pds-switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,MAAM,OAAO,SAAS;IALtB;QAMU,wBAAmB,GAAe,EAAE,CAAC;QAS7C;;WAEG;QACsB,YAAO,GAAG,KAAK,CAAC;QAEzC;;WAEG;QACK,aAAQ,GAAI,KAAK,CAAC;QAiB1B;;WAEG;QACK,YAAO,GAAI,KAAK,CAAC;QAYzB;;WAEG;QACK,aAAQ,GAAI,KAAK,CAAC;QAYlB,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,aAAa,GAAG,YAAY,CAAC;YAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC1B,aAAa,IAAI,oBAAoB,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;gBACrC,aAAa,IAAI,sBAAsB,CAAC;YAC1C,CAAC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;KAmDH;IAjDC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAClC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAChF,8DAAO,OAAO,EAAE,IAAI,CAAC,WAAW;gBAC9B,gGACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC,kBAC9F,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAC9C,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,IAAI,CAAC,mBAAmB,EAC5B;gBACF,6DAAM,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IACjD,IAAI,CAAC,KAAK,CACN,CACD;YACP,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,qBAAqB,EAC5B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,gDAAgD,EACvD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;oBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;oBACtC,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n  shadow: true,\n})\nexport class PdsSwitch {\n  private inheritedAttributes: Attributes = {};\n\n  @Element() el: HTMLPdsSwitchElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <label htmlFor={this.componentId}>\n          <input\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            checked={this.checked}\n            class=\"pds-switch__input\"\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name ? this.name : this.componentId}\n            onChange={this.onSwitchUpdate}\n            required={this.required}\n            type=\"checkbox\"\n            value={this.value}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSwitch {\n  private inheritedAttributes: Attributes = {};\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsSwitchElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n\n    this.updateFormValue();\n\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  connectedCallback() {\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentDidLoad() {\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged() {\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n      return;\n    }\n\n    if (this.internals && this.internals.setFormValue) {\n      // For switches, only send the value when checked, otherwise send null\n      const formValue = this.checked ? (this.value || 'on') : null;\n      this.internals.setFormValue(formValue);\n    }\n\n    if (this.internals && this.internals.setValidity) {\n      this.internals.setValidity({});\n    }\n  }\n\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (state instanceof FormData) {\n      // For switches, restore if the value exists in FormData\n      const value = this.value || 'on';\n      this.checked = state.get(this.name || this.componentId) === value;\n    } else if (typeof state === 'string') {\n      // Restore from string state\n      this.checked = state === (this.value || 'on');\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <label htmlFor={this.componentId}>\n          <input\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            checked={this.checked}\n            class=\"pds-switch__input\"\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name ? this.name : this.componentId}\n            onChange={this.onSwitchUpdate}\n            required={this.required}\n            type=\"checkbox\"\n            value={this.value}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -16,7 +16,6 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-block-end: var(--pine-dimension-xs);
 }
 
 .pds-textarea__action {
@@ -68,6 +67,7 @@ label {
 
 .pds-textarea__error-message,
 .pds-textarea__helper-message {
+  color: var(--pine-color-text-message);
   font: var(--pine-typography-body-sm-medium);
   margin-block-start: var(--pine-dimension-xs);
 }

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

@@ -87,6 +87,8 @@ export class PdsTextarea {
         if (nativeTextarea && nativeTextarea.value !== value) {
             nativeTextarea.value = value;
         }
+        // Update form value for Form Associated Custom Elements API
+        this.updateFormValue();
     }
     /**
      * Emits an `pdsInput` event.
@@ -119,6 +121,10 @@ export class PdsTextarea {
     }
     connectedCallback() {
         this.debounceChanged();
+        // Initialize ElementInternals for form association
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el));
@@ -126,6 +132,8 @@ export class PdsTextarea {
     }
     componentDidLoad() {
         this.originalPdsInput = this.pdsInput;
+        // Set initial form value
+        this.updateFormValue();
     }
     renderAction() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
@@ -134,15 +142,57 @@ export class PdsTextarea {
         }
         return null;
     }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        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() {
         const value = this.getValue();
-        return (h(Host, { key: 'fa16663adc15f59b07b1d9b6f0ce4ae7d4664967', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction ? 'true' : null }, h("div", { key: '5f3406c079111f605a38da627db564ab8f1d2dbb', class: "pds-textarea" }, this.label &&
-            h("div", { key: '00cea607a59cdf31adb21c3b7d92b8dc21560fe8', class: "pds-textarea__label-wrapper" }, h("label", { key: 'e94c947240141495b83329ae9bbc38aefe77cee1', htmlFor: this.componentId }, this.label), this.renderAction()), h("textarea", Object.assign({ key: 'd29a1cc338533a20808060f37af1f784f4556a02', 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: 'be35def46c67b7b333be13e0d0ccbf47b4db3e15', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'e4636cb54fea2071896a03e17c965039f58ec790', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'dec05eb0d1b7713c96148725a9278f0f62361ba5', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'c16e4a612ae46f9ab893294f513e1564e941ddec', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction ? 'true' : null }, h("div", { key: 'd5acca80be2960ac20a3602c3e887e8d714062d7', class: "pds-textarea" }, this.label &&
+            h("div", { key: '49f3c081172f3d81f38e7ad49e4461b9d31772e7', class: "pds-textarea__label-wrapper" }, h("label", { key: '105f191fb2db52c63d165fbda0e78e507f327c49', htmlFor: this.componentId }, this.label), this.renderAction()), h("textarea", Object.assign({ key: '5cbfbee17d058767f6d9d530dbee936ee8638f99', 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: '0cef5379519c3a1d26a86bb2142a58583d5619ad', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '30a5fc1c6469dfa755db9a9bbb7b858b082700ac', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '51a725db0e4e522a584b673df174c7c97c8fe8e3', 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 {
             "$": ["../../global/styles/utils/label.scss", "../pds-input/pds-input.tokens.scss", "pds-textarea.scss"]

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})\nexport class PdsTextarea {\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\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-texarea`. 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   * 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\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  }\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  }\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  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 ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>{this.label}</label>\n              {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\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-texarea`. 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   * 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 ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>{this.label}</label>\n              {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"]}

package/dist/collection/utils/utils.js

@@ -15,10 +15,37 @@ export const debounce = (func, wait = 0) => {
         timer = setTimeout(func, wait, ...args);
     };
 };
+// Add shared color normalization utility to unify token handling across components
+/**
+ * Normalizes color values to ensure consistent CSS variable usage
+ * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
+ * @param options.semanticMap - Optional mapping of semantic names to CSS variables
+ * @returns Normalized color value or undefined for invalid inputs
+ */
+export const normalizeColorValue = (value, options) => {
+    if (!value)
+        return undefined;
+    const trimmed = value.trim();
+    // Treat whitespace-only as undefined to avoid invalid CSS values
+    if (trimmed === '')
+        return undefined;
+    // If a semantic map is provided and the value matches a key, return mapped CSS var
+    if ((options === null || options === void 0 ? void 0 : options.semanticMap) && options.semanticMap[trimmed]) {
+        return options.semanticMap[trimmed];
+    }
+    // If already a CSS var, pass through
+    if (trimmed.startsWith('var('))
+        return trimmed;
+    // If raw token is provided (e.g., --pine-color-foo), wrap in var(...)
+    if (trimmed.startsWith('--'))
+        return `var(${trimmed})`;
+    // Otherwise treat as literal CSS color value
+    return trimmed;
+};
 export const setColor = (color, customColors) => {
-    var _a;
+    // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
     if (!color)
-        return;
+        return {};
     const defaultColors = {
         primary: 'var(--pine-color-text-primary)',
         secondary: 'var(--pine-color-text-secondary)',
@@ -29,9 +56,15 @@ export const setColor = (color, customColors) => {
         success: 'var(--pine-color-text-success)',
         warning: 'var(--pine-color-text-warning)',
     };
-    const colors = customColors || defaultColors;
+    // Merge defaults with any custom overrides so defaults are preserved
+    const semanticMap = Object.assign(Object.assign({}, defaultColors), (customColors || {}));
+    // Use the shared normalizer so components accept semantic names, raw tokens, var(...), or literals
+    const resolved = normalizeColorValue(color, { semanticMap });
+    // Ensure we never return an undefined style value; if unresolved, omit the property
+    if (!resolved)
+        return {};
     return {
-        '--color': (_a = colors[color]) !== null && _a !== void 0 ? _a : (color.startsWith('--') ? `var(${color})` : color)
+        '--color': resolved
     };
 };
 //# sourceMappingURL=utils.js.map