@pine-ds/core 3.13.0 → 3.14.1

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

@@ -38,6 +38,15 @@ export class PdsSelect {
             }
             this.pdsSelectChange.emit(e);
         };
+        this.onBlur = (ev) => {
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocus = (ev) => {
+            this.pdsFocus.emit(ev);
+        };
+        this.onKeyDown = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
         /**
          * Handles the change event for the slot element.
          * This method is triggered when the slot content changes.
@@ -212,7 +221,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: 'a9139d93b3e1057646643bce5cef8f5bd072615d', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '14d7461f057934efdf78d9db06a0a56dd7f58564', class: "pds-select" }, !this.hideLabel && (h("div", { key: '5f4d16ba16d7a3eab2ab04cc1b62f0b221078d6b', class: "pds-select__label-wrapper" }, h("label", { key: 'df577d4a6d3ae08b9da868deb16962d43b1b1051', htmlFor: this.componentId }, h("span", { key: 'd79d03a5324354310518dbf05a57a1ffa5c16a1d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '930837a21d20551e3a4110f7329ea08b93dcdca8', "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: '1265a08cb7c8b953e136430ec444f9d3c72bb6e0', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'e1038e19520ac144b5f2416a1ea0e9c6d5be5d88', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'ecd39b109ec38d9e61c8c3d0281c01d8fc25da12', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'ce2ea014cb9651d4702eddc57a873684bd30aecb', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '960c12bb9cc16261ddd54f381dc633a72724847d', class: "pds-select" }, !this.hideLabel && (h("div", { key: '599ab73596c72413778aeb54148105d28556c7b6', class: "pds-select__label-wrapper" }, h("label", { key: '04a9c836822bc80013d022e5e91f025ac304c34b', htmlFor: this.componentId }, h("span", { key: '5b01e324cc15017672682af17126bcc5942b0d6a', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'f13a0bfa5b6e7b34e7edcf9b807e90bbdcc8da95', "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, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'cd01ea77340c9d1ffdf61494a64138c9361a93a1', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '34c97591724950d7e4a5dfcb35b1945f2d457dbb', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '7179c3c86292e79839fa245d7ed5b050295893cc', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }
@@ -499,7 +508,7 @@ export class PdsSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a keyboard input occurs."
+                    "text": "Emitted when the select value changes."
                 },
                 "complexType": {
                     "original": "InputEvent",
@@ -511,6 +520,66 @@ export class PdsSelect {
                         }
                     }
                 }
+            }, {
+                "method": "pdsBlur",
+                "name": "pdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsFocus",
+                "name": "pdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select gains focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsKeyDown",
+                "name": "pdsKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a key is pressed down in the select."
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }

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, exposeTypeProperty } 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  private _type: 'select-one' | 'select-multiple' = 'select-one';\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 select 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   * 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   * Applies highlight styling to the select field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\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  @Watch('multiple')\n  /**\n   * Updates the type property when multiple changes to match native select behavior.\n   */\n  multipleChanged() {\n    this.updateType();\n  }\n\n  private updateType() {\n    this._type = this.multiple ? 'select-multiple' : 'select-one';\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  componentWillLoad() {\n    // Set initial type based on multiple prop\n    this.updateType();\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"]}
+{"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, exposeTypeProperty } 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  private _type: 'select-one' | 'select-multiple' = 'select-one';\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 select 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   * 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   * Applies highlight styling to the select field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n\n  /**\n   * Emitted when the select value changes.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the select gains focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a key is pressed down in the select.\n   */\n  @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\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  @Watch('multiple')\n  /**\n   * Updates the type property when multiple changes to match native select behavior.\n   */\n  multipleChanged() {\n    this.updateType();\n  }\n\n  private updateType() {\n    this._type = this.multiple ? 'select-multiple' : 'select-one';\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  componentWillLoad() {\n    // Set initial type based on multiple prop\n    this.updateType();\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  private onBlur = (ev: FocusEvent) => {\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.pdsFocus.emit(ev);\n  };\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    this.pdsKeyDown.emit(ev);\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            onBlur={this.onBlur}\n            onChange={this.onSelectUpdate}\n            onFocus={this.onFocus}\n            onKeyDown={this.onKeyDown}\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-sortable/pds-sortable-item/pds-sortable-item.js

@@ -25,7 +25,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '3af6da44189e50cffdbcfa4c82a6dba1fe33ff0e', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '19925b01cabdcb7e9f06b3e3445b95cb171ee69e', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ac514e4506528afd794b1df3574091bc311b3469', icon: handleIcon }))), h("slot", { key: '37acfdce5241144a4e5c804f7fb407ad5f7bc7d1' }), this.enableActions && (h("div", { key: '64679ea0a82688c111efaec9a1370b1bd83480d3', class: "pds-sortable-item__actions" }, h("slot", { key: 'a2bb4a9bf2e4900f5f2c12b2d6e0bcc3a49a9042', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'c2b286104572c25626e9c1ae419c2526ac1eb9a1', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '29354af0cc9ca6623794e3abf7b9419edd0a8e8f', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '17a662d94426e292c3a25c4567f3714f207e2383', icon: handleIcon }))), h("slot", { key: 'a3cee3d4c8dbb213e7a1d9bbf6fdce59fa8b796d' }), this.enableActions && (h("div", { key: '8b314f938ed53ab6680b020bd38aa6dbee804aad', class: "pds-sortable-item__actions" }, h("slot", { key: '60fe3c241349d91d6325e67bf2a63fe1f7858fc8', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -44,7 +44,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '4f1335560e5082991c6f3dffcf30d83f89b2c20c', class: this.classNames(), id: this.componentId }, h("slot", { key: '848505cc4b31df36c57c2db8690d1ce93df17b92' })));
+        return (h(Host, { key: 'b01f12d7d2973ce2fa513a468be3634e38241171', class: this.classNames(), id: this.componentId }, h("slot", { key: '7d9dff192e9b6a01e71c41d9250c0245ca548658' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -83,9 +83,9 @@ export class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '15737c5ac3c492efc88e29f5e63496ed07ab5fe6', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '30278cef4ab6bdc51e65f20e19883c3354c9b23a', htmlFor: this.componentId }, h("input", Object.assign({ key: '598b641ab1a6c8dadad4df275513b1e910fd0167', "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: '4d8a1c874d6cfe8bfac9ccc06ca03a6c8c25864e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '8a1eee8b5afcac6bb9a3399424aaf6d3995050cf', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '1a6b5bbb1e90a745c928b297262dcf705d429a8e', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '055e7011ba1ec1379396baab41e10c03111567d3', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '9854669943e6649187ce91c8a129d2dd9f100e85', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '11d9a6deb7223a77981da4a7145059255e9a5629', htmlFor: this.componentId }, h("input", Object.assign({ key: '525888746cd4181d8216878352b0ddfe0a16a64d', "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: '11dbfd6f30488217164949130d5629aea305a65c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'c8cbe1e266de9a67772d37bf1c25439f36705c2b', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'f1155010ae7aca24a7e860d8b67897254e32db00', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '530e2a963f9051ee3d044dc9a82b673613a93f5c', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '299a00424cf34acb2d2cbddf2c51c853558f270d', role: "rowgroup", part: "body" }, h("slot", { key: '718b97595d037cf6c19e8bfb2a9702a2a3fc1058' })));
+        return (h(Host, { key: '1f6ce73abaf0ecb3f592f754bedef557c7ea197d', role: "rowgroup", part: "body" }, h("slot", { key: '4a9758bb6c17de60cb345216d9b3e7c58cd44499' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css

@@ -1,4 +1,5 @@
 :host {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
   --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);
   color: var(--pine-color-text);
   display: table-cell;

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js

@@ -94,11 +94,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '996bf5f70f450e57b0c44023ddf5f44f6af8e367', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: '102c412e68bd877ee88866d2c66838d62cb7cab2', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'f6e5fc35adeb18fa939534f3b409b282d121a797' })));
+                : {} }, h("slot", { key: 'fae2d378d6e1c5c3abb34cb4a75b74930d56965c' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: 'ebcbe90052f2f4b5aa6e3a09a7b23c46e5aba90f', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'cd43463e58db8244439d07b3826534a70028c1a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd6f4e05806a2c823188bc01fdc7a299aab9bf7d7', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), h("slot", { key: '8f86dd51b56f5c37cdcfbd3b2513b0e92c6e4c14' })));
+        return (h(Host, { key: 'b68c0d7259cfced019c138dc4504c142e7e12ff9', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '90c91ee525359986e7878e8ae647411bf9b4a637', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd79ebef09df3424ed36d8838ecdc5ca6a0029c8a', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), h("slot", { key: '17eca8a861fceb73b8d957ab0d5ba2cf7b256b55' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css

@@ -1,5 +1,6 @@
 :host {
   --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
   --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
   border-block-end: var(--border-head-cell-default);
   color: var(--pine-color-text);

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -28,6 +28,11 @@ export class PdsTableHeadCell {
          * @defaultValue false
          */
         this.hasHeadBackground = false;
+        /**
+         * Determines if this column is the currently active sorted column.
+         * @defaultValue false
+         */
+        this.isActive = false;
         /**
          * Handles scroll events to update fixed column shadow state.
          * Updates the tableScrolling state to control CSS classes for fixed column shadows.
@@ -46,16 +51,49 @@ export class PdsTableHeadCell {
         };
         this.toggleSort = () => {
             if (this.sortable) {
+                // Guard: return early if tableRef is not available
+                if (!this.tableRef) {
+                    return;
+                }
                 const column = this.hostElement.innerText.trim();
+                // Always toggle the direction (preserves original behavior)
                 this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
-                    headCell.classList.remove('is-active');
+                // Reset all OTHER head cells to inactive state (skip the current one)
+                this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {
+                    // Skip clearing the current cell
+                    if (headCell !== this.hostElement) {
+                        const headCellComponent = headCell;
+                        await headCellComponent.clearActiveSort();
+                    }
                 });
-                this.hostElement.classList.toggle('is-active');
+                // Mark this column as active
+                this.isActive = true;
+                this.hostElement.classList.add('is-active');
+                // Emit the sort event with the current direction
                 this.pdsTableSort.emit({ column, direction: this.sortingDirection });
             }
         };
     }
+    /**
+     * Programmatically sets this column as the active sort column with the specified direction.
+     * Used by pds-table to apply a default sort on initial load.
+     * @param direction - The sort direction to apply ('asc' or 'desc')
+     */
+    async setActiveSort(direction) {
+        if (!this.sortable)
+            return;
+        this.sortingDirection = direction;
+        this.isActive = true;
+        this.hostElement.classList.add('is-active');
+    }
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    async clearActiveSort() {
+        this.isActive = false;
+        this.hostElement.classList.remove('is-active');
+    }
     componentWillLoad() {
         // Set initial references and state before first render
         this.tableRef = this.hostElement.closest('pds-table');
@@ -160,11 +198,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '7e7976ee53daac21144a0a572e5ed7787bcc33b7', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: '7e85fb5e6b5fc1022034db9e4c94ca13dfc56257', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'e5ea1d7684f1ff15da069765dbc19a3167c6dd20' }), this.sortable && (h("pds-icon", { key: '3404301d664b6604a3d7f8b6ae4a460cf2c9deb3', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '97d2b9621f7d61ad42719a4cc9f640a1210d78dc' }), this.sortable && this.isActive && (h("pds-icon", { key: 'd80efe9b417ae34bf50f65b0e9cb15bcc9aabd40', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -226,7 +264,8 @@ export class PdsTableHeadCell {
             "tableScrolling": {},
             "isSelected": {},
             "hasHeadBorder": {},
-            "hasHeadBackground": {}
+            "hasHeadBackground": {},
+            "isActive": {}
         };
     }
     static get events() {
@@ -247,6 +286,51 @@ export class PdsTableHeadCell {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setActiveSort": {
+                "complexType": {
+                    "signature": "(direction: \"asc\" | \"desc\") => Promise<void>",
+                    "parameters": [{
+                            "name": "direction",
+                            "type": "\"desc\" | \"asc\"",
+                            "docs": "- The sort direction to apply ('asc' or 'desc')"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically sets this column as the active sort column with the specified direction.\nUsed by pds-table to apply a default sort on initial load.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "direction - The sort direction to apply ('asc' or 'desc')"
+                        }]
+                }
+            },
+            "clearActiveSort": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the active sort state from this column.\nUsed internally when another column becomes active.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=pds-table-head-cell.js.map

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-head-cell.js","sourceRoot":"","sources":["../../../../../src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrls: ['pds-table-head-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n  private headObserver?: MutationObserver;\n\n  /**\n   * Sets the text alignment within the head cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  /**\n   * The direction of sorting.\n   */\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n  @State() isSelected: boolean = false;\n\n  /**\n   * Determines if the parent table-head has the border attribute.\n   * @defaultValue false\n   */\n  @State() private hasHeadBorder: boolean = false;\n\n  /**\n   * Determines if the parent table-head has the background attribute.\n   * @defaultValue false\n   */\n  @State() private hasHeadBackground: boolean = false;\n\n  componentWillLoad() {\n    // Set initial references and state before first render\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n    if (tableHead) {\n      this.hasHeadBorder = tableHead.hasAttribute('border');\n      this.hasHeadBackground = tableHead.hasAttribute('background');\n    }\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column header to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n\n    // Watch for changes to the parent table-head's border and background attributes\n    const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n    if (tableHead && typeof MutationObserver !== 'undefined') {\n      // Defensive guard: disconnect existing observer before creating a new one\n      if (this.headObserver) {\n        this.headObserver.disconnect();\n      }\n\n      this.headObserver = new MutationObserver(() => {\n        // Update state when border or background attributes change\n        this.hasHeadBorder = tableHead.hasAttribute('border');\n        this.hasHeadBackground = tableHead.hasAttribute('background');\n      });\n\n      this.headObserver.observe(tableHead, {\n        attributes: true,\n        attributeFilter: ['border', 'background']\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n\n    if (this.headObserver) {\n      this.headObserver.disconnect();\n    }\n  }\n\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      const column = this.hostElement.innerText.trim();\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n        headCell.classList.remove('is-active');\n      });\n\n      this.hostElement.classList.toggle('is-active');\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    if (this.hasHeadBackground) {\n      classNames.push('has-head-background');\n    }\n\n    if (this.hasHeadBorder) {\n      classNames.push('has-head-border');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        part=\"head-cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-table-head-cell.js","sourceRoot":"","sources":["../../../../../src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Event, EventEmitter, State, Method } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-table-head-cell',\n  styleUrls: ['pds-table-head-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableHeadCell {\n  @Element() hostElement: HTMLPdsTableHeadCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n  private headObserver?: MutationObserver;\n\n  /**\n   * Sets the text alignment within the head cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Determines whether the table column is sortable when set to `true`.\n   */\n  @Prop() sortable: boolean;\n\n  /**\n   * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n   */\n  @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n  /**\n   * The direction of sorting.\n   */\n  @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n  @State() isSelected: boolean = false;\n\n  /**\n   * Determines if the parent table-head has the border attribute.\n   * @defaultValue false\n   */\n  @State() private hasHeadBorder: boolean = false;\n\n  /**\n   * Determines if the parent table-head has the background attribute.\n   * @defaultValue false\n   */\n  @State() private hasHeadBackground: boolean = false;\n\n  /**\n   * Determines if this column is the currently active sorted column.\n   * @defaultValue false\n   */\n  @State() private isActive: boolean = false;\n\n  /**\n   * Programmatically sets this column as the active sort column with the specified direction.\n   * Used by pds-table to apply a default sort on initial load.\n   * @param direction - The sort direction to apply ('asc' or 'desc')\n   */\n  @Method()\n  async setActiveSort(direction: 'asc' | 'desc') {\n    if (!this.sortable) return;\n\n    this.sortingDirection = direction;\n    this.isActive = true;\n    this.hostElement.classList.add('is-active');\n  }\n\n  /**\n   * Clears the active sort state from this column.\n   * Used internally when another column becomes active.\n   */\n  @Method()\n  async clearActiveSort() {\n    this.isActive = false;\n    this.hostElement.classList.remove('is-active');\n  }\n\n  componentWillLoad() {\n    // Set initial references and state before first render\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n    if (tableHead) {\n      this.hasHeadBorder = tableHead.hasAttribute('border');\n      this.hasHeadBackground = tableHead.hasAttribute('background');\n    }\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column header to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n\n    // Watch for changes to the parent table-head's border and background attributes\n    const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n    if (tableHead && typeof MutationObserver !== 'undefined') {\n      // Defensive guard: disconnect existing observer before creating a new one\n      if (this.headObserver) {\n        this.headObserver.disconnect();\n      }\n\n      this.headObserver = new MutationObserver(() => {\n        // Update state when border or background attributes change\n        this.hasHeadBorder = tableHead.hasAttribute('border');\n        this.hasHeadBackground = tableHead.hasAttribute('background');\n      });\n\n      this.headObserver.observe(tableHead, {\n        attributes: true,\n        attributeFilter: ['border', 'background']\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n\n    if (this.headObserver) {\n      this.headObserver.disconnect();\n    }\n  }\n\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  private toggleSort = () => {\n    if (this.sortable) {\n      // Guard: return early if tableRef is not available\n      if (!this.tableRef) {\n        return;\n      }\n\n      const column = this.hostElement.innerText.trim();\n      \n      // Always toggle the direction (preserves original behavior)\n      this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n      \n      // Reset all OTHER head cells to inactive state (skip the current one)\n      this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {\n        // Skip clearing the current cell\n        if (headCell !== this.hostElement) {\n          const headCellComponent = headCell as HTMLPdsTableHeadCellElement;\n          await headCellComponent.clearActiveSort();\n        }\n      });\n      \n      // Mark this column as active\n      this.isActive = true;\n      this.hostElement.classList.add('is-active');\n\n      // Emit the sort event with the current direction\n      this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.sortable) {\n      classNames.push('is-sortable');\n    }\n\n    if (this.sortable && this.sortingDirection !== null) {\n      classNames.push('sort-' + this.sortingDirection);\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    if (this.hasHeadBackground) {\n      classNames.push('has-head-background');\n    }\n\n    if (this.hasHeadBorder) {\n      classNames.push('has-head-border');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"columnheader\"\n        onClick={this.toggleSort}\n        part=\"head-cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n        }\n      >\n        <slot></slot>\n        {this.sortable && this.isActive && (\n          <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: 'dedf37f2841e51a325b6c414d3e7ec0072bdf78f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '3e9295398c8f48cb7aa78d10daf5201ae8f86e9f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'b786f181988110d3e3d47928da9290dfd79f5fbd', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'd37e3d44d34f81553060185d96fb44a55a40edc8' })));
+        return (h(Host, { key: '900905bc103a54d3f13b59a66cfd53178de0da49', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'f5a5a0426f15182e278b052090c71f45e8848347', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '1fd91b0d4bf412dc3a2705fcb5909e42a54bde56', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '17a60a0251a36613cc8631efe780020d4a5e1167' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,6 +80,7 @@
 }
 
 .scroll-shadow-left {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
   background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
   border-bottom-left-radius: inherit;
   border-top-left-radius: inherit;
@@ -87,6 +88,7 @@
 }
 
 .scroll-shadow-right {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
   background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
   border-bottom-right-radius: inherit;
   border-top-right-radius: inherit;